hptwxMiniProgram/components/ChecklistItem.vue

<template>
  <ul v-if="data">
    <li v-for="(item, itemIdx) in data" :key="item.itemCode">
      <checklist-item :data="item.children" @change="change" />
      <ul class="point-container">
        <li v-for="(point, pointIdx) in item.pointList" :key="point.pointCode" class="checklist-point">
          <uni-row>
            <uni-col :span="2">
              <text> {{ pointIdx + 1 }}</text>
            </uni-col>
            <uni-col :span="18">
              <text > {{ point.pointContent }} </text>
			  <view class="uni-rate-container">
				  <text>评价</text>
			  	<uni-rate v-model="point.score" @change="changePoint(point)" />
			  </view>
            </uni-col>
          </uni-row>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
import ChecklistItem from '@/components/ChecklistItem.vue'
export default {
  name: 'ChecklistItem',
  props: {
	value:{
		type:[String,Number]
	},	  
    data: {
      type: Array,
      default:()=>[]
    }
  },
  data(){
	  return{
		  items:[]
	  }
  },
  components:{
  	ChecklistItem
  },
  methods: {
	changePoint(item){
		var items=JSON.parse(JSON.stringify(this.items))
		var inItems=false;
		if(items.length>0){
			inItems=items.filter((_item)=>_item.pointId===item.pointId).length>0
		}	
		if(!inItems){
			items.push({
				...item
			})
		}else{	
			for(let i=0;i<items.length;i++){
				if(items[i].pointId===item.pointId){items[i].score=item.score}
			}
		}
		this.items=items
		this.$emit("change",items);		
	},
	change(items){
		this.$emit("change",items);	
	}
  }
}
</script>
<style lang="scss" scoped>
ul {
  list-style-type: none;
  .uni-col-3{
    min-height: 1px;
  }
}
 .checklist-item {
    color: #F7F7F7;
    padding: 20upx 0;
    line-height: 1;
 }

 .checklist-point {
   padding-top: 20upx;
   line-height: 1;
 }
.uni-rate-container{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-top: 16upx;
}
</style>