crm-mobile/components/wk-form/wk-field-attention.vue

<template>
  <view class="wk-field wk-field-attention">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
		
    <view class="wk-field__body" @click.stop>
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="{active: item}"
        class="ft ft-focus-on star-icon"
        @click="handleToChoose(index)" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'
	
  export default {
    name: 'WkFieldAttention',
    mixins: [mixins],
    data() {
      return {
        list: []
      }
    },
    watch: {
      value: {
        handler() {
          // 主要是为了处理 v-for 循环数字报错问题
          this.list = Array(5).fill(false)
          const num = Number(this.value) || 0
          if (num > 0) {
            const checked = Array(num).fill(true)
            this.list.splice(0, num, ...checked)
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      handleToChoose(index) {
        this.emitChangeEvt(index + 1)
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
	
	.wk-field {
		.wk-field__body {
			min-height: unset;
			border: 0 none;
			padding: 0;
			
			.star-icon {
				font-size: 42rpx;
				color: #D9D9D9;
				margin: 0 10rpx;
				&.active {
					color: #FAC23D;
				}
			}
		}
	}
</style>