crm-mobile/components/wk-form/wk-field-position.vue

<template>
  <view class="wk-field wk-field-position">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body" @click.stop="handleChoose">
      <view class="wk-field__body-core">
        {{ areaValueStr }}
      </view>
      <text class="wk wk-arrow-right icon-right" />
    </view>
		
    <view
      v-if="field.precisions === 1"
      class="wk-field__body detail-addr">
      <textarea
        ref="core"
        v-model="detailAddr"
        :maxlength="500"
        :disabled="field.disabled"
        type="text"
        placeholder="详细地址"
        placeholder-class="wk-placeholder placeholder"
        class="wk-field__body-core"
        @input="changeText" />
    </view>
		
    <uni-popup ref="popup" type="picker">
      <wk-area-picker
        v-model="areaValue"
        :precisions="areaPrecisions"
        @select="handleSelect" />
    </uni-popup>
  </view>
</template>

<script>
  import mixins from './mixins'
  export default {
    name: 'WkFieldPosition',
    mixins: [mixins],
    data() {
      return {
        areaValue: [],
        detailAddr: ''
      }
    },
    computed: {
      areaValueStr() {
        return this.areaValue.map(o => o.name).join('')
      },
      // 省市区精度
      areaPrecisions() {
        if (this.field.precisions === 3) return 2 // 省市
        if (this.field.precisions === 4) return 1 // 省
        return 3 // 省市区
      }
    },
    watch: {
      formValue: {
        handler() {
          // this.checkedStatus = Boolean(Number(this.formValue))
          if (this.$isEmpty(this.formValue)) {
            this.areaValue = []
            this.detailAddr = ''
            return
          }
          this.areaValue = this.formValue.filter(o => o.id !== 4)
          const findRes = this.formValue.find(o => o.id === 4)
          if (findRes) {
            this.detailAddr = findRes.name
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleChoose() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        this.$refs.popup.open()
      },

      handleSelect(data, next) {
        this.formValue = data
        this.emitValue()
        next()
      },
			
      changeText() {
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        let _str = this.detailAddr
        if (regStr.test(_str)) {
          _str = _str.replace(regStr, '');
        }
        this.$nextTick(() => {
          this.detailAddr = _str
          this.emitValue()
        })
      },
			
      emitValue() {
        if (this.field.precisions === 1) {
          const findRes = this.formValue.find(o => o.id === 4)
          if (findRes) {
            findRes.name = this.detailAddr
          } else {
            this.formValue.push({
              code: '',
              name: this.detailAddr,
              id: 4
            })
          }
        }
        this.$emit('input', this.formValue)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: this.formValue
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';
	
	.detail-addr {
		margin-top: 15rpx;
		.wk-field__body-core {
			height: 150rpx;
		}
	}
</style>