地区选择器追加多选

src/components/pages/multiplyArea.vue

@@ -0,0 +1,208 @@
+<template>
+  <section class="multiplyArea">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="search" :show-action="false"/>
+      <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span>
+        <span class="color-3F8DF5" @click="selectListClick(item, index)" v-text="item.name"/>
+      </span>
+    </AiTopFixed>
+    <div class="header-middle">
+      <div class="showTypes">
+        <div v-if="options.length > 0">
+          <div class="cards" v-for="(item, index) in optionsList" :key="index" @click="getChildren(item)">
+            <div class="checkbox" :class="{checked:item.isChecked}" @click.stop="handleCheck(item)"/>
+            <div class="cardRight fill">
+              <div class="applicationNames fill">{{ item.name }}</div>
+              <u-icon v-if="item.type<valueLevel" name="arrow-right" color="#ddd"/>
+            </div>
+          </div>
+        </div>
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+      </div>
+    </div>
+    <u-gap height="118"/>
+    <div class="footer">
+      <div class="btn cancel" @click="selectAll">全选</div>
+      <div class="btn cancel" @click="cancelAll">清空</div>
+      <div class="btn cancel" @click="back">取消</div>
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </section>
+</template>
+
+<script>
+import AiTopFixed from "../AiTopFixed";
+
+export default {
+  name: "multiplyArea",
+  components: {AiTopFixed},
+  data() {
+    return {
+      search: "",
+      options: [],
+      selectList: [],
+      selected: {}
+    }
+  },
+  computed: {
+    optionsList() {
+      let {search} = this
+      return this.options.filter(e => !search || e.name.indexOf(search) > -1)
+    },
+    valueLevel() {
+      return this.$route.query.valueLevel || 5
+    }
+  },
+  methods: {
+    getOptionsByRoot() {
+      let {areaId, all} = this.$route.query, action = "/admin/area/queryAreaByParentId"
+      if (all == true || !areaId) {
+        action = "/admin/area/queryProvinceList"
+      }
+      this.selectList = [{name: "可选范围", id: areaId}]
+      this.$http.post(action, null, {
+        withoutToken: true, params: {id: areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.options = res.data.map(e => ({...e, isChecked: !!this.selected[e.id]}))
+        }
+      })
+    },
+    getChildren(row) {
+      let {id, type} = row
+      if (type < this.valueLevel && !row.locked) {
+        row.locked = true
+        this.$http.post("/admin/area/queryAreaByParentId", null, {
+          withoutToken: true, params: {id}
+        }).then(res => {
+          if (res?.data) {
+            this.selectList.push(row)
+            this.options = res.data.map(e => ({...e, isChecked: !!this.selected[e.id]}))
+          }
+          row.locked = false
+        })
+      }
+    },
+    selectListClick(row, index) {
+      if (index == 0) { //第一级别
+        this.getOptionsByRoot()
+      } else {
+        this.selectList.splice(index, 5)
+        this.getChildren(row)
+      }
+    },
+    handleCheck(row, value) {
+      if (value > -1) {
+        row.isChecked = Boolean(value)
+      } else row.isChecked = !row.isChecked
+      if (row.isChecked) {
+        this.$set(this.selected, row.id, row)
+      } else {
+        delete this.selected[row.id]
+      }
+    },
+    confirm() {
+      uni.$emit("selectArea", Object.keys(this.selected))
+      this.back()
+    },
+    selectAll() {
+      this.optionsList.map(e => this.handleCheck(e, 1))
+    },
+    cancelAll() {
+      this.optionsList.map(e => this.handleCheck(e, 0))
+    },
+    back() {
+      uni.navigateBack({})
+    }
+  },
+  created() {
+    [this.$route.query.value].flat().map(id => this.$set(this.selected, id, {id}))
+    this.getOptionsByRoot()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.multiplyArea {
+  .color-3F8DF5 {
+    color: #3F8DF5;
+  }
+
+  .header-middle {
+    .showTypes {
+      .empty-div {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        padding: 0 0 0 32px;
+
+        .checkbox {
+          width: 48px;
+          height: 48px;
+          background-image: url("./img/xz.png");
+          background-size: 100%;
+
+          &.checked {
+            background-image: url("./img/xzh.png");
+          }
+        }
+
+        .cardRight {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 16px;
+          box-sizing: border-box;
+
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      padding: 0 32px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+
+      &.cancel {
+        background: #fff;
+        color: #333;
+        border: 1px solid #ddd;
+      }
+    }
+  }
+}
+</style>

src/components/pages/selectGird.vue

@@ -272,29 +272,6 @@ export default {
       }
     }
   }
-
-  .subBtn {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 118px;
-    background: #f4f8fb;
-
-    div {
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      background: #1365dd;
-      border-radius: 4px;
-      font-size: 32px;
-      color: #fff;
-      margin: 20px 34px 0 0;
-      float: right;
-    }
-  }
-
   .footer {
     width: 100%;
     height: 118px;