功能：新全国网点

components/pick-regions/pick-regions.vue

+<template>
+  <picker
+    mode="multiSelector"
+    :value="multiIndex"
+    :range="multiArray"
+    @change="handleValueChange"
+    @columnchange="handleColumnChange"
+  >
+    <slot></slot>
+  </picker>
+</template>
+
+<script>
+import CHINA_REGIONS from './regions.json'
+
+export default {
+  props: {
+    defaultRegions: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    defaultRegionCode: {
+      type: String
+    },
+    defaultRegion: [String, Array]
+  },
+  data() {
+    return {
+      cityArr: CHINA_REGIONS[0].childs,
+      districtArr: CHINA_REGIONS[0].childs[0].childs,
+      multiIndex: [0, 0, 0],
+      isInitMultiArray: true
+    }
+  },
+  computed: {
+    multiArray() {
+      return this.pickedArr.map((arr) => arr.map((item) => item.name))
+    },
+    pickedArr() {
+      // 进行初始化
+      if (this.isInitMultiArray) {
+        return [CHINA_REGIONS, CHINA_REGIONS[0].childs, CHINA_REGIONS[0].childs[0].childs]
+      }
+      return [CHINA_REGIONS, this.cityArr, this.districtArr]
+    }
+  },
+  watch: {
+    defaultRegion: {
+      handler(region, oldRegion) {
+        if (Array.isArray(region)) {
+          // 避免传的是字面量的时候重复触发
+          oldRegion = oldRegion || []
+          if (region.join('') !== oldRegion.join('')) {
+            this.handleDefaultRegion(region)
+          }
+        } else if (region && region.length == 6) {
+          this.handleDefaultRegion(region)
+        } else {
+          console.warn('defaultRegion非有效格式')
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleColumnChange(e) {
+      // console.log(e);
+      this.isInitMultiArray = false
+      const that = this
+      const col = e.detail.column
+      const row = e.detail.value
+      that.multiIndex[col] = row
+      try {
+        switch (col) {
+          case 0:
+            if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
+              that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
+              break
+            }
+            that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
+            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
+            break
+          case 1:
+            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
+            break
+          case 2:
+            break
+        }
+      } catch (e) {
+        // console.log(e);
+        that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
+      }
+    },
+    handleValueChange(e) {
+      // 结构赋值
+      const [index0, index1, index2] = e.detail.value
+      const [arr0, arr1, arr2] = this.pickedArr
+      const address = [arr0[index0], arr1[index1], arr2[index2]]
+      // console.log(address);
+      this.$emit('getRegion', address)
+    },
+    handleDefaultRegion(region) {
+      const isCode = !Array.isArray(region)
+      this.isInitMultiArray = false
+      let children = CHINA_REGIONS
+      for (let i = 0; i < 3; i++) {
+        for (let j = 0; j < children.length; j++) {
+          const condition = isCode
+            ? children[j].code == region.slice(0, (i + 1) * 2)
+            : children[j].name.includes(region[i])
+          if (condition) {
+            // 匹配成功进行赋值
+            // console.log(i,j,children.length-1);
+            children = children[j].childs
+            if (i == 0) {
+              this.cityArr = children
+            } else if (i == 1) {
+              this.districtArr = children
+            }
+            this.$set(this.multiIndex, i, j)
+            // console.log(this.multiIndex);
+            break
+          } else {
+            // 首次匹配失败就用默认的初始化
+            // console.log(i,j,children.length-1);
+            if (i == 0 && j == children.length - 1) {
+              this.isInitMultiArray = true
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

pages/network/components/network-item/index.vue

+<template>
+  <view class="network-item-wrap">
+    <view class="network-item">
+      <view class="network-item-img">
+        <image
+          :src="networkItem.addressDescImg"
+        />
+      </view>
+      <view class="network-item-content">
+        <view class="network-info-wrap">
+          <view class="network-info">
+            <view class="info-title">{{networkItem.address}}</view>
+            <view class="info-meta">{{networkItem.distance.toFixed(2)}}KM</view>
+          </view>
+          <!-- <view class="select-icon"> <image src="/page-home/static/image/select-icon.png" /> </view> -->
+		</view>
+      </view>
+    </view>
+  </view>
+</template>
+<script >
+	export default{
+		props:['networkItem']
+	}
+</script>
+<style lang="scss" scoped>
+.network-item-wrap {
+  background-color: #fff;
+  height: 168rpx;
+  padding: 8rpx 16rpx;
+  .network-item {
+    display: flex;
+    border-bottom: 1rpx solid #e8e8e8;
+    &-img {
+      margin-right: 16rpx;
+      image {
+        width: 156rpx;
+        height: 156rpx;
+      }
+    }
+    &-content {
+      flex: 1;
+      .network-info-wrap {
+        display: flex;
+        align-items: center;
+        .network-info {
+          flex: 1;
+          .info-title {
+            font-size: 28rpx;
+            color: #1a1a1a;
+            line-height: 40rpx;
+            margin-bottom: 12rpx;
+            word-break: break-all;
+          }
+          .info-meta {
+            font-size: 24rpx;
+            color: #b3b3b3;
+            line-height: 34rpx;
+            word-break: break-all;
+          }
+        }
+        .select-icon {
+          margin: 0 54rpx 0 24rpx;
+          image {
+            width: 28rpx;
+            height: 24rpx;
+            vertical-align: bottom;
+          }
+        }
+      }
+    }
+  }
+}
+</style>