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

src/components/AiAreaPicker/AiAreaPicker.vue

@@ -1,52 +1,26 @@
 <template>
   <section class="AiAreaPicker">
-    <ai-search-popup mode="bottom" ref="areaSelector" length="85%" :disabled="disabled">
+    <div @tap="handleJump">
-      <div slot="btn" @tap="handleInit">
+      <slot v-if="$slots.default"/>
-        <slot v-if="$slots.default"/>
+      <div v-else-if="isForm">
-        <div v-else-if="isForm">
+        <ai-more v-model="areaName"/>
-          <ai-more v-model="areaName"/>
-        </div>
-        <div v-else class="areaSelector">
-          <image :src="locationIcon" class="location"/>
-          <div v-text="areaName"/>
-        </div>
       </div>
-      <div class="areaSelector">
+      <div v-else class="areaBtn">
-        <div class="fixedTop">
+        <image :src="locationIcon" class="location"/>
-          <b>选择地区</b>
+        <div v-text="areaName"/>
-          <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>
-      <scroll-view class="fill pendingList" :style="{height: height}" scroll-y>
+    </div>
-        <div class="pendingItem flex flexRow" 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>
   </section>
 </template>
 
 <script>
-import AiSearchPopup from './AiSearchPopup'
 import {mapState} from 'vuex'
 import AiMore from "../AiMore/AiMore";
+import qs from "query-string"
 
 export default {
   name: 'AiAreaPicker',
-  components: {AiMore, AiSearchPopup},
+  components: {AiMore},
   model: {
     prop: "value",
     event: "select"
@@ -83,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: ""
     }
   },
@@ -108,42 +71,23 @@ export default {
     value(v) {
       v && !this.areaName && this.getAreaName(this.value)
     },
-    fullArea: {
+    fullArea(v) {
-      handler(v) {
+      v && this.$emit('update:fullName', v?.map(e => e.name)?.join("") || "")
-        this.$nextTick(() => {
+    },
-          if (v) {
+    areaName(v) {
-            this.scrollHeight()
+      v && this.$emit('update:name', v)
-          }
-        })
-      }
     }
   },
   created() {
     this.value && this.getAreaName(this.value)
   },
   methods: {
-    show() {
-      this.handleInit()
-      this.$refs.areaSelector.showPopup()
-    },
-    scrollHeight() {
-      var obj = this.createSelectorQuery()
-      obj.select('#areaSelector').boundingClientRect()
-      obj.exec(rect => {
-        if (rect.length) {
-          this.height = `calc(100% - ${rect[0]?.height}px)`
-        }
-      })
-    },
     getInfo(areaId) {
       return areaId && this.$instance.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()
         }
       })
@@ -158,77 +102,18 @@ export default {
         return this.fullArea
       })
     },
-    getChildAreas(id) {
+    handleJump() {
-      id && this.$instance.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.$instance.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
       if (!this.disabled) {
-        if (this.value) {
+        uni.$once('selectArea', data => {
-          this.getFullArea(this.value).then(() => {
+          this.$emit("select", data.id)
-            let area = this.fullArea.find(e => e.id == this.value) || {}
+          this.areaName = data.name
-            if (area.type == this.valueLevel) this.getChildAreas(area.parentId)
+          this.fullArea = data.fullArea
-            else this.getChildAreas(area.id)
+        })
-          })
+        let {value, all, valueLevel, selectRoot, areaId} = this.$props
-        } else if (this.all) {
+        let url = qs.stringifyUrl({
-          this.getProvinces()
+          url: "/components/pages/selectArea", query: {...this.$attrs, value, all, valueLevel, selectRoot, areaId}
-        } else {
+        })
-          this.getFullArea(this.root).then(() => {
+        uni.navigateTo({url})
-            this.getChildAreas(this.root)
-          })
-        }
       }
     },
     getAreaName(area, name) {
@@ -236,154 +121,17 @@ export default {
         let arr = JSON.parse(JSON.stringify(list))
         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 !important;
-      position: relative;
-
-      &:last-of-type {
-        margin-right: 0 !important;
-
-        &: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 {
-      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;
-    box-sizing: border-box;
-
-    .pendingItem {
-      color: #333;
-      height: 104px;
-      text-align: start;
-
-      .self {
-        font-weight: bold;
-      }
-    }
-  }
-
-  ::v-deep.bottomBtns {
-    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 {

src/components/pages/selectArea.vue

@@ -0,0 +1,344 @@
+<template>
+  <section class="selectArea">
+    <div class="areaSelector">
+      <div class="fixedTop">
+        <b>选择地区</b>
+        <em>选择区域</em>
+        <div class="selectedArea">
+          <p v-if="hasSelected" v-text="fullArea.map(e=>e.name).join('')"/>
+          <p v-else>请选择</p>
+        </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>
+    <scroll-view class="fill pendingList" scroll-y>
+      <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>
+      <AiEmpty v-if="pending.length==0" description="无下级地区数据"/>
+    </scroll-view>
+    <div class="bottomBtns">
+      <div @click.stop="back">取消</div>
+      <div class="primary fill" @click.stop="handleSelect">确定</div>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import AiEmpty from "../AiEmpty/AiEmpty";
+
+export default {
+  name: "selectArea",
+  components: {AiEmpty},
+  appName: "选择地区",
+  computed: {
+    ...mapState(['user']),
+    dataRange() {
+      if (this.all || this.disabled) return 0
+      return this.getAreaType(this.root)
+    },
+    root() {
+      return this.areaId || this.user.areaId || this.$areaId
+    },
+    pending() {
+      return this.list?.map(e => ({...e, levelLabel: this.levelLabels[e.type]})) || []
+    },
+    hasSelected() {
+      return this.fullArea?.length > 0
+    },
+    hasLastLevelValue() {
+      return this.fullArea.some(e => e.type >= this.valueLevel)
+    }
+  },
+  data() {
+    Object.keys(this.$route.query).map(k => this.$route.query[k] = this.$route.query[k] == "false" ? false : this.$route.query[k])
+    return {
+      ...this.$route.query,
+      fullArea: [],
+      index: '',
+      list: [],
+      levelLabels: ["省", "市", "县/区", "镇/街道", "村/社区"],
+      selected: {},
+    }
+  },
+  watch: {
+    root(v) {
+      v && (this.getFullArea(v))
+    }
+  },
+  methods: {
+    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()
+        }
+      })
+    },
+    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
+      })
+    },
+    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) {
+            if (this.hasLastLevelValue) {
+              let parent = JSON.parse(JSON.stringify(this.fullArea?.slice(-2)?.[0]))
+              this.list.unshift(parent)
+            } else {
+              let parent = JSON.parse(JSON.stringify(this.fullArea?.slice(-1)?.[0]))
+              this.list.unshift(parent)
+            }
+          }
+        }
+      })
+    },
+    getProvinces() {
+      this.$http.post('/admin/area/queryProvinceList', null, {withoutToken: true}).then((res) => {
+        if (res?.data) {
+          this.list = res.data
+        }
+      })
+    },
+    handleSelect() {
+      let {selected, fullArea} = this
+      uni.$emit("selectArea", {...selected, fullArea})
+      this.back()
+    },
+    getChild(op) {
+      if (op.id != this.index) {
+        this.selected = op
+        this.index = op.id
+        if (op.type == this.valueLevel) {
+          if (this.hasLastLevelValue) {
+            this.fullArea.splice(this.fullArea.length - 1, 1, op)
+          } else this.fullArea.push(op)
+        } else if (op.type < this.valueLevel) {
+          if (this.hasLastLevelValue) {
+            this.fullArea.splice(this.fullArea.length - 1, 1)
+          } else {
+            this.fullArea.push(op)
+            this.getChildAreas(op.id)
+          }
+        }
+      }
+    },
+    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
+      if (!this.disabled) {
+        if (this.value) {
+          this.getFullArea(this.value).then(() => {
+            let area = this.fullArea.find(e => e.id == this.value) || {}
+            //当前选择列表必须是可选范围内的值
+            let top = area.type == this.valueLevel ? area.parentId : area.id
+            if (this.getAreaType(top) >= this.dataRange) {
+              this.getChildAreas(top)
+            }
+          })
+        } else if (this.all) {
+          this.getProvinces()
+        } else {
+          this.getFullArea(this.root).then(() => {
+            this.getChildAreas(this.root)
+          })
+        }
+      }
+    },
+    back() {
+      uni.navigateBack({})
+    },
+    getAreaType(area) {
+      let rules = [10, 8, 6, 3, 0], level = 0
+      if (area) {
+        rules.some((e, i) => {
+          let reg = new RegExp(`0{${e}}`, 'g')
+          if (reg.test(area)) {
+            return (level = i)
+          }
+        })
+      }
+      return level
+    }
+  },
+  created() {
+    this.handleInit()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.selectArea {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fff;
+
+  ::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);
+      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;
+
+      & > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: rtl;
+      }
+    }
+
+    .fixedTop {
+      top: 0;
+      width: 100vw;
+      left: 0;
+      background: #fff;
+      border-bottom: 4px solid #f5f5f5;
+      z-index: 1;
+      text-align: start;
+      padding: 0 32px;
+      box-sizing: border-box;
+    }
+  }
+
+  ::v-deep .pendingList {
+    padding: 0 32px;
+    box-sizing: border-box;
+
+    .emptyWrap {
+      width: 100%;
+    }
+
+    .pendingItem {
+      color: #333;
+      height: 84px;
+      text-align: start;
+
+      .self {
+        font-weight: bold;
+      }
+    }
+  }
+
+  ::v-deep.bottomBtns {
+    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;
+      }
+    }
+  }
+}
+</style>

src/mods/AppVideoSurve/AppVideoSurve.vue

@@ -61,10 +61,10 @@ export default {
   },
   computed: {...mapState(['user'])},
   onLoad() {
-  },
-  onShow() {
     this.areaId = this.$areaId
     this.areaName = this.$areaName
+  },
+  onShow() {
     this.getList()
   },
   methods: {