地区组件完全重构兼容苹果版本

src/components/AiAreaPicker.vue

@@ -1,60 +1,26 @@
 <template>
   <section class="AiAreaPicker">
-    <ai-search-popup mode="bottom" ref="areaSelector" length="85%" :disabled="disabled">
-      <div slot="btn" @tap="handleInit">
-        <slot v-if="$slots.default"/>
-        <div v-else-if="isForm">
-          <ai-more v-model="areaName"/>
-        </div>
-        <div v-else class="areaSelector">
-          <image :src="locationIcon" class="location"/>
-          <div v-text="areaName"/>
-        </div>
+    <div @tap="handleJump">
+      <slot v-if="$slots.default"/>
+      <div v-else-if="isForm">
+        <ai-more v-model="areaName"/>
       </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.filter(e=>e.type<valueLevel)" :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 v-else class="areaBtn">
+        <image :src="locationIcon" class="location"/>
+        <div v-text="areaName"/>
       </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.stop="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.stop="closePopup">取消</div>
-        <div class="primary fill" @click.stop="handleSelect">确定</div>
-      </div>
-    </ai-search-popup>
+    </div>
   </section>
 </template>
 
 <script>
-import AiSearchPopup from './AiSearchPopup'
 import {mapState} from 'vuex'
 import AiMore from "./AiMore";
+import qs from "query-string"
 
 export default {
   name: 'AiAreaPicker',
-  components: {AiMore, AiSearchPopup},
+  components: {AiMore},
   model: {
     prop: "value",
     event: "select"
@@ -69,7 +35,7 @@ export default {
     valueLevel: {default: 5},
     fullName: {default: ''},
     disabled: Boolean,
-    selectRoot: Boolean
+    selectRoot: Boolean,
   },
   computed: {
     ...mapState(['user']),
@@ -91,21 +57,10 @@ export default {
     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',
       areaName: ""
     }
   },
@@ -116,36 +71,23 @@ export default {
     value(v) {
       v && !this.areaName && this.getAreaName(this.value)
     },
-    fullArea: {
-      handler(v) {
-        this.$nextTick(() => {
-          if (v) {
-            this.scrollHeight()
-          }
-        })
-      }
+    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: {
-    show() {
-      this.handleInit()
-      this.$refs.areaSelector.showPopup()
-    },
-    scrollHeight() {
-      this.height = document.querySelector('.areaSelector') && `calc(100% - ${document.querySelector('.areaSelector').offsetHeight}px)`
-    },
     getInfo(areaId) {
       return areaId && 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])
-          })
           return res.data.reverse()
         }
       })
@@ -160,237 +102,36 @@ export default {
         return this.fullArea
       })
     },
-    getChildAreas(id) {
-      id && this.$http.post('/admin/area/queryAreaByParentId', null, {
-        withoutToken: true,
-        params: {id},
-      }).then((res) => {
-        if (res?.data) {
-          this.list = res.data
-          if (this.selectRoot) {
-            let root = JSON.parse(JSON.stringify(this.fullArea?.[0]))
-            this.list.unshift(root)
-          }
-          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)
-      this.$emit('update:name', this.selected.name)
-      this.getAreaName(null, this.selected.name)
-      this.closePopup()
-    },
-    getChild(op) {
-      if (op.id != this.index) {
-        if (op.type < this.valueLevel && 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) {
-      let deleteCount = this.fullArea.length - i
-      if (deleteCount > 0) {
-        this.fullArea.splice(i + 1, deleteCount)
-      }
-      if (this.all && !area.id) {
-        this.index = ''
-        this.getProvinces()
-      } else {
-        this.index = area.id
-        this.getChildAreas(area.id)
-      }
-    },
-    handleInit() {
-      //初始化
-      this.index = this.value || this.root
+    handleJump() {
       if (!this.disabled) {
-        if (this.value) {
-          this.getFullArea(this.value).then(() => {
-            let area = this.fullArea.find(e => e.id == this.value) || {}
-            if (area.type == this.valueLevel) this.getChildAreas(area.parentId)
-            else this.getChildAreas(area.id)
-          })
-        } else if (this.all) {
-          this.getProvinces()
-        } else {
-          this.getFullArea(this.root).then(() => {
-            this.getChildAreas(this.root)
-          })
-        }
+        uni.$once('selectArea', data => {
+          this.$emit("select", data.id)
+          this.areaName = data.name
+          this.fullArea = data.fullArea
+        })
+        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))
-        console.log(arr)
         this.areaName = arr?.reverse()?.[0]?.name
       })
-      let fullName = this.fullArea.map(e => e.name).join("")
-      if (this.selected.type == 5) {
-        fullName = fullName + name
-      }
-      this.$emit('update:fullName', fullName)
     },
-    closePopup() {
-      this.$refs.areaSelector?.handleSelect()
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .AiAreaPicker {
-  ::v-deep .areaSelector {
+
+  .areaBtn {
     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 {