dvcp_v2_wxcp_app/src/components/AiAreaPicker.vue

<template>
  <section class="AiAreaPicker">
    <div @tap="handleJump">
      <slot v-if="$slots.default"/>
      <div v-else-if="isForm">
        <ai-more v-model="areaName"/>
      </div>
      <div v-else class="areaBtn">
        <image :src="locationIcon" class="location"/>
        <div v-text="areaName"/>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState} from 'vuex'
import AiMore from "./AiMore";
import qs from "query-string"

export default {
  name: 'AiAreaPicker',
  components: {AiMore},
  model: {
    prop: "value",
    event: "select"
  },
  props: {
    areaId: {default: ''},
    name: {default: ''},
    value: String,
    all: Boolean,
    icon: {default: "location.svg"},
    isForm: Boolean,
    valueLevel: {default: 5},
    fullName: {default: ''},
    disabled: Boolean,
    selectRoot: Boolean,
  },
  computed: {
    ...mapState(['user']),
    dataRange() {
      let rules = [10, 8, 6, 3, 0],
          level = 0
      if (this.all || this.disabled) return (level = 0)
      rules.some((e, i) => {
        let reg = new RegExp(`0{${e}}`, 'g')
        if (reg.test(this.root)) {
          return (level = i)
        }
      })
      return level
    },
    root() {
      return this.areaId || this.user.areaId || this.$areaId
    },
    locationIcon() {
      return this.$cdn + this.icon
    },
  },
  data() {
    return {
      fullArea: [],
      areaName: ""
    }
  },
  watch: {
    root(v) {
      v && (this.getFullArea(v))
    },
    value(v) {
      v && !this.areaName && this.getAreaName(this.value)
    },
    fullArea(v) {
      v && this.$emit('update:fullName', v?.map(e => e.name)?.join("") || "")
    },
    areaName(v) {
      v && this.$emit('update:name', v)
    }
  },
  created() {
    this.value && this.getAreaName(this.value)
  },
  methods: {
    getInfo(areaId) {
      return areaId && this.$http.post('/admin/area/getAllParentAreaId', null, {
        withoutToken: true,
        params: {areaId},
      }).then(res => {
        if (res?.data) {
          return res.data.reverse()
        }
      })
    },
    getFullArea(areaId) {
      return this.fullArea?.length > 0 ? Promise.resolve(this.fullArea) : this.getInfo(areaId).then(meta => {
        if (meta.length > 1) {
          this.fullArea = meta.slice(this.dataRange)
        } else {
          this.fullArea = meta
        }
        return this.fullArea
      })
    },
    handleJump() {
      if (!this.disabled) {
        uni.$once('selectArea', data => {
          if (data?.id) {
            this.$emit("select", data.id)
            this.areaName = data.name
            this.fullArea = data.fullArea
            this.$forceUpdate()
          }

        })
        let {value, all, valueLevel, selectRoot, areaId} = this.$props
        let url = qs.stringifyUrl({
          url: "/components/pages/selectArea", query: {...this.$attrs, value, all, valueLevel, selectRoot, areaId}
        })
        uni.navigateTo({url})
      }
    },
    getAreaName(area, name) {
      name ? this.areaName = name : this.getFullArea(area).then(list => {
        let arr = JSON.parse(JSON.stringify(list))
        this.areaName = arr?.reverse()?.[0]?.name
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.AiAreaPicker {

  .areaBtn {
    display: flex;
    align-items: center;
  }

  .location {
    width: 28px;
    height: 80px;
    margin-right: 12px;
  }
}
</style>