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

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

<script>
export default {
  name: 'zSelect',
  props: {
    radio: '',
    textc: '',
    zRadiocolumns: [],
    answerType: '',
    collectionType: '',
    childindex: '',
    childindex1: '',
    childindex2: '',
    childIndex4: '',
    childindex3: '',
    childindex5: '',
    childindex6: '',
    childindex7: '',
    childindex8: '',
    childindex9: '',
    relevancyItem: false, //当前单选框是否为禁用状态,特殊情况（扫描识别结果是否一致）根据扫描结果匹配选择项，禁止手动选择
  },
  data() {
    return {
      radioChange: false,
      zradioc: '',
    };
  },
  created() {
    this.zradioc = this.radio;
  },
  methods: {
    radiofn(value) {
      this.radioChange = true;
      var typeval = [];
      var index = -1;
      for (let k = 0; k < this.zRadiocolumns.length; k++) {
        if (this.zRadiocolumns[k].collectionOptionId == value) {
          typeval.push(this.zRadiocolumns[k]);
          index = k;
        }
      }
      let datalist = {
        type: this.textc,
        answerType: this.answerType,
        collectionType: this.collectionType,
        value: typeval,
        index: index,
        childindex: this.childindex,
        childindex1: this.childindex1,
        childindex2: this.childindex2,
        childIndex4: this.childIndex4,
        childindex3: this.childindex3,
        childindex5: this.childindex5,
        childindex6: this.childindex6,
        childindex7: this.childindex7,
        childindex8: this.childindex8,
        childindex9: this.childindex9,
      };
      this.$emit('input', value);
      this.$emit('zSelectVal', datalist);
    },
    radioclick(val) {
      if (this.relevancyItem) return;
      if (!val) {
        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>