drawee.vue

<script setup>
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  props:{
    value:{
      type:Array,
      default: () => []
    },
    readonly:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      customDraweeList:[]
    }
  },
  onMounted() {
    console.log('drawee')
  },
  methods: {
    open(){
      this.$refs.popup.open()
      if(!this.customDraweeList.length){
        this.loadDictData()
      }
    },
    loadDictData() {
      this.$request.getConfig('custom_drawee').then(res => {
        if(res.code==0&&res.data&&res.data.list.length>0){
          res.data.list.forEach(item => {
            const old = this.value ? this.value.find(it => it.name == item.value) : null
            this.customDraweeList.push({
              name: item.value,
              label: item[this.$lang.label],
              value:  old ? old.value : 1
            })
          })
        }
      })
    },
    changeDrawee(field, e){
      const index = this.customDraweeList.findIndex(item => item.name == field)
      if(index < 0) return
      this.customDraweeList[index].value = e.detail.value
    },
    submit(){
      this.$refs.popup.close()
      this.$emit("confirm", this.customDraweeList)
    },
    close(){
      this.$refs.popup.close()
    },
  }
}
</script>

<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="content">
      <view v-for="item in customDraweeList" :key="item.id" class="flex item">
        <view class="name">{{item.label}}</view>
        <radio-group @change="changeDrawee(item.name, $event)" class="flex">
          <label class="flex">
            <view class="checkbox-item">
              <radio value="1" :checked="item.value == 1" :disabled="readonly" style="transform:scale(0.8)"/>
            </view>
            <view>{{$lang.lang.create.consignee}}</view>
          </label>
          <label class="flex">
            <view class="checkbox-item">
              <radio value="2" :checked="item.value == 2" :disabled="readonly" style="transform:scale(0.8)"/>
            </view>
            <view>{{$lang.lang.create.consignor}}</view>
          </label>
        </radio-group>
      </view>
      <view class="flex action">
        <button @click="close">{{readonly ? $lang.lang.order.confirm : $lang.lang.create.cancel}}</button>
        <button @click="submit" type="primary" v-if="!readonly">{{$lang.lang.create.submit}}</button>
      </view>
    </view>
  </uni-popup>
</template>
<style scoped lang="scss">
.content{
  width: 80vw;
  background-color: #fff;
  padding: 10px;
  .item{
    padding: 5px;
    &:nth-child(2n){
      background: #f8f8f8;
    }
    .name{
      width: 100px;
    }
  }
  .action{
    margin-top: 20px;
  }
}
</style>