dvcp_v2_wxcp_app/src/components/AiAreaPicker.vue

<template>
  <section class="AiAreaPicker">
    <ai-search-popup mode="bottom" ref="areaSelector" length="85%">
      <div slot="btn" @tap="handleInit">
        <slot v-if="$slots.default"/>
        <div v-else class="areaSelector">
          <image :src="locationIcon" class="location"/>
          <div v-text="selected.name || currentArea.name"/>
        </div>
      </div>
      <div class="areaSelector">
        <div class="fixedTop">
          <b>选择地区</b>
          <em>选择区域</em>
          <div class="selectedArea" v-if="hasSelected">
            <p v-for="area in fullArea" :key="area.id" v-text="area.name"/>
            <p v-if="selected.type==5" v-text="selected.name"/>
          </div>
          <div/>
          <span v-if="all" v-text="`省`" @click="selectNode({}, -1)"/>
          <span v-for="(area,i) in fullArea" :key="area.id" v-text="area.levelLabel"
                @click="selectNode(area, i)"/>
        </div>
        <!--用来作为占位的-->
        <div class="fixedPlaceholder" style="line-height: 60px;" v-if="false">
          <b>选择地区</b>
          <em>选择区域</em>
          <div class="selectedArea" v-if="hasSelected"/>
          <span v-text="'行政区域'"/>
        </div>
        <!--end-->
      </div>
      <scroll-view class="fill pendingList" scroll-y :style="{height: height}">
        <div class="pendingItem flexRow" flex v-for="op in pending" :key="op.id" @tap="getChild(op)">
          <div class="fill" :class="{ self: index == op.id }" v-html="op.name"/>
          <u-icon v-if="index == op.id" name="checkbox-mark" color="#4181FF"/>
        </div>
      </scroll-view>
      <div class="bottomBtns">
        <div @click="closePopup">取消</div>
        <div class="primary fill" @click="handleSelect">确定</div>
      </div>
    </ai-search-popup>
  </section>
</template>

<script>
import AiSearchPopup from './AiSearchPopup'
import AiCell from './AiCell.vue'
import {mapState} from 'vuex'

export default {
  name: 'AiAreaPicker',
  components: {AiCell, AiSearchPopup},
  props: {
    areaId: {default: ''},
    name: {default: ''},
    value: String,
    all: Boolean,
    icon: {default: "location.svg"}
  },
  computed: {
    ...mapState(['user']),
    dataRange() {
      let rules = [10, 8, 6, 3, 0],
          level = 0
      if (this.all) return (level = 0)
      rules.some((e, i) => {
        let reg = new RegExp(`0{${e}}`, 'g')
        if (reg.test(this.areaId || this.user.areaId || this.$areaId)) {
          return (level = i)
        }
      })
      return level
    },
    currentArea() {
      return this.fullArea?.slice(-1)?.[0] || {}
    },
    locationIcon() {
      return this.$cdn + this.icon
    },
    pending() {
      return this.list.map(e => ({...e, levelLabel: this.levelLabels[e.type]}))
    },
    hasSelected() {
      return this.fullArea?.length > 0
    }
  },
  data() {
    return {
      fullArea: [],
      index: '',
      list: [],
      levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
      selected: {},
      height: '500px'
    }
  },
  watch: {
    areaId(v) {
      v && (this.getFullArea())
    }
  },
  mounted () {
    this.handleInit()
  },
  methods: {
    show() {
      this.handleInit()
      this.$refs.areaSelector.showPopup()
    },
    scrollHeight () {
      return this.height = `calc(100% - ${document.querySelector('.areaSelector').offsetHeight}px)`
    },
    getFullArea() {
      let areaId = this.areaId || (this.all ? '' : this.$areaId)
      return this.$http.post('/admin/area/getAllParentAreaId', null, {
        withoutToken: true,
        params: {areaId},
      }).then((res) => {
        if (res?.data) {
          res.data.forEach((e) => {
            e && (e.levelLabel = this.levelLabels[e.type])
          })
          if (res.data.length > 1) {
            this.fullArea = res.data.reverse().slice(this.dataRange)
          } else {
            this.fullArea = res.data
          }
          return this.fullArea
        }
      })
    },
    getChildAreas(id) {
      id && this.$http.post('/admin/area/queryAreaByParentId', null, {
        withoutToken: true,
        params: {id},
      }).then((res) => {
        if (res.data.length) {
          this.list = res.data
          let self = this.fullArea.find((e) => e.id ==  this.areaId)
          if (self.id) {
            this.list.unshift(self)
          }
        this.scrollHeight()
        }
      })
    },

    getProvinces() {
      this.$http.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
        if (res?.data) {
          this.list = res.data
        }
      })
    },
    handleSelect() {
      this.$emit('select', this.index)
      let fullName = ''
      this.fullArea.forEach(v => {
        fullName = fullName + v.name
      })

      if (this.selected.type == 5) {
        fullName = fullName + this.selected.name
      }
      this.$emit('update:fullName', fullName)
      this.$emit('update:name', this.selected.name)
      this.closePopup()
    },
    getChild(op) {
      if (op.id != this.index) {
        if (op.type < 5 && (/0{3}$/g.test(this.index) || !this.index)) {
          this.fullArea.push(op)
          this.getChildAreas(op.id)
        }
        this.selected = op
        this.index = op.id
      }

      this.$nextTick(() => {
        
        this.scrollHeight()
      })
    },
    selectNode(area, i) {
      this.fullArea.splice(i + 1, this.fullArea.length - i)
      if (this.all && !area.id) {
        this.index = ''
        this.getProvinces()
      } else {
        this.index = area.id
        this.getChildAreas(area.id)
      }
    },
    handleInit() {
      this.index = this.value || this.areaId

      if (this.all && !this.areaId && !this.currentArea.id) {
        this.getProvinces()

        return false
      }
      console.log(this.index)
      this.getFullArea().then(() => {
        this.getChildAreas(this.currentArea.id || this.areaId)
      })
    },
    closePopup() {
      this.$refs.areaSelector?.handleSelect()
    }
  }
}
</script>

<style lang="scss" scoped>
.AiAreaPicker {
  ::v-deep .areaSelector {
    display: flex;
    align-items: center;

    span {
      cursor: pointer;
      color: #333;
      font-weight: bold;
      line-height: 112px;
      margin-right: 72px;
      position: relative;

      &:last-of-type {
        margin-right: 0;

        &:after {
          content: " ";
          display: block;
          position: absolute;
          bottom: -26px;
          left: 50%;
          transform: translate(-50%, 100%);
          width: 40px;
          height: 8px;
          background: #4181FF;
          border-radius: 4px;
        }
      }
    }

    b {
      display: block;
      width: 100%;
      line-height: 96px;
      text-align: center;
    }

    em {
      font-style: normal;
      font-size: 24px;
      font-weight: 400;
      color: #999999;
      line-height: 34px;
    }

    .selectedArea {
      display: flex;
      align-items: center;
      width: fit-content;
      max-width: calc(100vw - 128px);
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 32px;
      height: 80px;
      background: #ECF2FF;
      border-radius: 40px;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4181FF !important;
      margin: 16px 0 32px;
      white-space: nowrap;
    }

    .fixedTop {
      // position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      background: #fff;
      border-bottom: 4px solid #f5f5f5;
      z-index: 1;
      text-align: start;
      padding: 0 32px;
      box-sizing: border-box;
    }
  }

  ::v-deep.u-drawer-content {

    .areaSelector {
      box-sizing: border-box;
      // border-bottom: 1px solid #f5f5f5;
    }
  }

  ::v-deep .pendingList {
    height: 500px;
    overflow-y: auto;
    padding: 0 32px 120px;
    box-sizing: border-box;

    .pendingItem {
      color: #333;
      height: 84px;
      text-align: start;

      .self {
        font-weight: bold;
      }
    }
  }

  ::v-deep.bottomBtns {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    text-align: center;
    height: 120px;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #3671EE;
    background: #fff;
    padding: 0 32px;
    box-sizing: border-box;

    & > div {
      padding: 0 92px;
      line-height: 88px;
      height: 88px;
      border: 1px solid #A0C0FF;
      border-radius: 16px;

      &.primary {
        color: #fff;
        background: #4181FF;
        border-color: #4181FF;
      }

      & + div {
        margin-left: 32px;
      }
    }
  }

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