hptwxMiniProgram/components/checkListItemTree.vue

<template>
  <ul v-if="data">
    <li v-for="(item, itemIdx) in data" :key="item.itemCode">
     <uni-row class="checklist-item">
        <uni-col :span="3">
          <template v-if="item.itemType === 1"></template>
          <text style="padding-left: 8px;" v-else />
        </uni-col>
        <uni-col :span="2">
          <text>{{ itemIdx + 1 }}</text>
        </uni-col>
        <uni-col :span="18">
          <text>{{ item.itemTitle }}</text>
        </uni-col>
      </uni-row>
      <checklist-item :data="item.children" @change="changePoint" />
      <ul class="point-container">
        <li v-for="(point, pointIdx) in item.pointList" :key="point.pointCode" class="checklist-point" @click="changePoint(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="formData.score" />
			  </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:()=>[]
    }
  },
  components:{
  	ChecklistItem
  },
  methods: {
	changePoint(item){
		this.$emit("input", item.pointId);
		this.$emit("change",item);
	}
  }
}
</script>
<style lang="scss" scoped>
ul {
  padding-left: 20upx!important;
  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>