storevisit-ui-mobile/src/components/componentZRadio.vue

<template>
  <div class="zSelect">
    <div class="checkbox">
      <van-radio-group v-model="zradioc" @change="radiofn" :disabled="disabled">
        <van-radio
          :name="item[id] + ''"
          @click="radioclick"
          v-for="(item, index) in zRadiocolumns"
          :key="index"
          >{{ item.customOption }}</van-radio
        >
      </van-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zSelect',
  props: {
    textc: '',
    zRadiocolumns: [],
    answerType: '',
    collectionType: '',
    disabled: false,
    id: '',
  },
  data() {
    return {
      radioChange: false,
      zradioc: '',
    };
  },
  watch: {
    zRadiocolumns: {
      // 返显
      handler(val) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].answerValue == 'Y') {
            this.zradioc = String(val[i][this.id]);
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    radiofn(value) {
      this.radioChange = true;
      var typeval = [...this.zRadiocolumns];
      for (var k = 0; k < this.zRadiocolumns.length; k++) {
        typeval[k].answerValue = 'N';
        if (this.zRadiocolumns[k][this.id] == value) {
          typeval[k].answerValue = 'Y';
        }
      }
      let datalist = {
        id: this.textc,
        answerValue: typeval,
      };
      this.$emit('zSelectVal', datalist);
    },
    radioclick() {
      if (this.disabled) return;
      if (!this.radioChange) {
        this.zradioc = '';
      }
      this.radioChange = false;
    },
  },
};
</script>

<style scoped>
.van-f-red {
  color: red;
  width: 4px;
  display: inline-block;
}

.zSelect .z-cell {
  padding: 10px 16px 0 16px;
  font-size: 16px;
}

.checkbox .van-radio {
  padding-bottom: 10px;
}
</style>
<style>
.checkbox .van-radio__icon {
  border: 1px solid #333;
  border-radius: 80px;
  width: 1em;
}

.checkbox .van-radio__icon .van-icon {
  border: 0 !important;
  height: 1em;
  width: 1em;
}

.checkbox .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: #fff;
  display: block;
  height: 14px;
  width: 14px;
  margin: 2px auto;
  background-color: #1989fa;
  color: transparent;
}

.checkbox .van-radio__icon--checked {
  border: 1px solid #1989fa;
}
</style>