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

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

<script>
export default {
  name: 'zSelect',
  props: {
    radio: '',
    textc: '',
    zRadiocolumns: [],
    answerType: '',
    collectionType: '',
    Tindex: 0,
  },
  data() {
    return {
      radioChange: false,
      zradioc: this.radio,
    };
  },
  methods: {
    radiofn(value) {
      this.radioChange = true;
      let customerClueOption = '';
      var typeval = [...this.zRadiocolumns];
      for (var k = 0; k < this.zRadiocolumns.length; k++) {
        typeval[k].value = 'N';
        if (this.zRadiocolumns[k].customerClueOptionId == value) {
          typeval[k].value = 'Y';
          customerClueOption = this.zRadiocolumns[k].customerClueOption;
        }
      }
      let datalist = {
        id: this.textc,
        Tindex: this.Tindex,
        value: typeval,
        customerClueOption,
      };
      this.$emit('zSelectVal', datalist);
    },
    radioclick() {
      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>