assess-app/components/en-from/en-city/en-city.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <view class="input-box-right" @click="showPickerObj">
        <text :class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
        <text class="iconfont">&#xe62b;</text>
      </view>
    </view>
    <uni-data-picker :popup-title="'选择'+label" :localdata="localData" ref="pickerObj" v-show="showPicker"
                     @change="pickerChange" :border="false" :clear-icon="false" @popupclosed="setPopupClosed">
    </uni-data-picker>
  </view>
</template>

<script>
import {getRegion} from "@/api/common";
import tools from "@/service/tools";

export default {
  name: 'en-city',
  props: {
    label: {
      type: String,
      default: '地址'
    },
    placeholder: {
      type: String,
      default: '请选择地址'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    valueType: {
      type: String,
      default: '1'
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      localData: [],
      inputValue: [],
      optionName: '',
      labelWidth: 0,
      showPicker: false
    }
  },
  components: {},
  mounted() {
    this.setValue()
    this.setLabelWidth()
    this.getRegion()
  },
  watch: {
    'value': function () {
      this.setValue()
    },
    'inputValue': function () {
      console.log(this.inputValue)
      if (this.valueType === '1') {
        this.$emit('input', this.optionName)
      } else {
        this.$emit('input', this.optionName)
      }
    }
  },
  methods: {
    getRegion() {
       let localData=uni.getStorageSync('sysCityData')
      if(!localData){
        getRegion({
          type: 1
        }).then((res) => {
          if (res.code === 1) {
            this.localData = res.data;
            uni.setStorageSync('sysCityData', JSON.stringify(this.localData))
          } else {
            tools.error(res.msg);
          }
        })
      }else {
        this.localData=JSON.parse(localData)
      }

    },
    setValue() {
      this.optionName=this.value
      // let value = this.value
      // if (!value) {
      //   value = []
      // } else if (typeof value === 'string') {
      //   value = value.split(',')
      // }
      // if (this.inputValue !== value) {
      //   this.inputValue = value
      //   this.optionName = "";
      //   this.localData.forEach((one) => {
      //     if (one.value + '' === this.inputValue[0] + '') {
      //       this.optionName += one.text + " ";
      //       if (one.children) {
      //         one.children.forEach((two) => {
      //           if (two.value + '' === this.inputValue[1] + '') {
      //             this.optionName += two.text + " ";
      //             if (two.children) {
      //               two.children.forEach((three) => {
      //                 if (three.value + '' === this.inputValue[2] + '') {
      //                   this.optionName += three.text + " ";
      //                 }
      //               })
      //             }
      //           }
      //         })
      //       }
      //     }
      //   })
      // }

    },
    setPopupClosed() {
      this.showPicker = false;
    },
    showPickerObj() {
      this.$refs.pickerObj.show();
      this.showPicker = true;
    },
    pickerChange(data) {
      this.optionName = "";
      this.inputValue = [];
      data.detail.value.forEach((item) => {
        this.optionName += item.text + " ";
        this.inputValue.push(item.value)
      });
      this.showPicker = false;
    },
    setLabelWidth() {
      let differenceNum = 4 - this.label.length;
      if (differenceNum === 2) {
        this.labelWidth = '2em'
      } else if (differenceNum === 1) {
        this.labelWidth = '0.5em'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import url("../../static/css/en-common.css");

::v-deep .selected-item-active {
  border-bottom: 2px solid #FF0000 !important;
}

.box {
  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .input-box-left {
      width: 210rpx;
      font-size: 30rpx;
      color: #333333;
    }

    .input-box-right {
      width: 100%;

      text {
        font-size: 28rpx;
        color: #333;
      }

      .iconfont {
        float: right;
      }

      .no-option {
        color: #999999;
      }

    }
  }
}

</style>