更新版本

manifest.json

@@ -2,8 +2,8 @@
     "name" : "惠农生活",
     "appid" : "__UNI__3A527D1",
     "description" : "",
-    "versionName" : "1.6.0",
+    "versionName" : "1.6.1",
-    "versionCode" : 160,
+    "versionCode" : 161,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

package-lock.json

@@ -1,6 +1,8 @@
 {
-  "requires": true,
+  "name": "e-select下拉选择器",
+  "version": "1.0.7",
   "lockfileVersion": 1,
+  "requires": true,
   "dependencies": {
     "ansi-regex": {
       "version": "2.1.1",
@@ -424,6 +426,11 @@
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
       "dev": true
     },
+    "tiny-pinyin": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/tiny-pinyin/-/tiny-pinyin-1.3.2.tgz",
+      "integrity": "sha512-uHNGu4evFt/8eNLldazeAM1M8JrMc1jshhJJfVRARTN3yT8HEEibofeQ7QETWQ5ISBjd6fKtTVBCC/+mGS6FpA=="
+    },
     "to-fast-properties": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",

package.json

@@ -12,5 +12,8 @@
             "前端组件",
             "通用组件"
         ]
+    },
+    "dependencies": {
+        "tiny-pinyin": "^1.3.2"
     }
 }

pages/select_address/select_address.vue

@@ -4,14 +4,8 @@
       <view class="head_top">
         <u-search placeholder="搜索小区、办公楼等" :showAction="false"></u-search>
         <view style="height: 20rpx;"></view>
-        <u-tabs 
+        <u-tabs :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" :current="current" @change="changeCurrent"
-          :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" 
+          lineColor="#FF6D20" lineWidth="105rpx" height="7rpx"></u-tabs>
-          :current="current"
-          @change="changeCurrent"
-          lineColor="#FF6D20"
-          lineWidth="105rpx"
-          height="7rpx"
-          ></u-tabs>
         </u-tabs>
       </view>
     </u-sticky>
@@ -22,7 +16,9 @@
           <view class="re-title">当前位置: </view>
           <view>{{street}}</view>
         </view>
-        <view class="re-btn" @click="reGetLocation"><image class="re-address-img" src="@/static/images/re_address.png"></image>重新定位</view>
+        <view class="re-btn" @click="reGetLocation">
+          <image class="re-address-img" src="@/static/images/re_address.png"></image>重新定位
+        </view>
       </view>
       <view class="head_item_tips">
         <view>附近地址</view>
@@ -36,12 +32,8 @@
         <view>泸州区县</view>
       </view>
       <view class="area">
-        <view class="area-item" 
+        <view class="area-item" :class="{'area-item-on': item.code==area_change}" v-for="(item, index) in areaList"
-          :class="{'area-item-on': item.code==area_change}" 
+          :key="index" @click="changeArea(item)">
-          v-for="(item, index) in areaList" 
-          :key="index"
-          @click="changeArea(item)"
-        >
           {{item.name}}
         </view>
       </view>
@@ -49,26 +41,10 @@
         <view>选择街道/镇</view>
       </view>
       <view class="street">
-        <view class="letter-item">
+        <view class="letter-item" v-for="key in mapKey" :key="key">
-          <view class="letter">A</view>
+          <view class="letter">{{key}}</view>
           <view class="item-box">
-            <view class="street-item" v-for="item in streetList.slice(0, 3)">
+            <view class="street-item" v-for="item in mapList[key]" :key="item.code" @click="changeStreet(item)">
-              {{item.name}}
-            </view>
-          </view>
-        </view>
-        <view class="letter-item">
-          <view class="letter">B</view>
-          <view class="item-box">
-            <view class="street-item" v-for="item in streetList.slice(3,5)">
-              {{item.name}}
-            </view>
-          </view>
-        </view>
-        <view class="letter-item">
-          <view class="letter">D</view>
-          <view class="item-box">
-            <view class="street-item" v-for="item in streetList.slice(5,10)">
               {{item.name}}
             </view>
           </view>
@@ -88,6 +64,7 @@
     getArea,
     getStreet
   } from "@/api/article.js";
+  import pinyin from "tiny-pinyin";
   export default {
     data() {
       return {
@@ -104,6 +81,7 @@
         street: '',
         areaList: [],
         streetList: [],
+        mapList: {},
         area_change: '',
         street_change: '',
       }
@@ -113,6 +91,11 @@
       this.loadArea();
     },
     onShow() {},
+    computed: {
+      mapKey() {
+        return Object.keys(this.mapList).sort()
+      }
+    },
     methods: {
       changeCurrent(e) {
         this.current = e.index;
@@ -180,11 +163,39 @@
           area_code
         }).then((res) => {
           this.streetList = res.data;
+          this.initPinyin();
         })
       },
+      initPinyin() {
+        this.mapList = {};
+        if (pinyin.isSupported()) {
+          this.streetList.forEach((item) => {
+            let str = pinyin.convertToPinyin(item.name[0]);
+            str = str[0] ? str[0] : '#';
+            if (this.mapList[str]) {
+              this.mapList[str].push(item);
+            } else {
+              this.mapList[str] = [];
+              this.mapList[str].push(item)
+            }
+          })
+        } else {
+          this.mapList['#'] = this.streetList;
+        }
+      },
       changeArea(item) {
         this.area_change = item.code;
         this.loadStreet(this.area_change);
+      },
+      changeStreet(item){
+        uni.navigateBack({
+          success: () => {
+            uni.$emit('changeAddress', {
+              area: this.area_change,
+              street: item
+            })
+          }
+        })
       }
     },
     onPullDownRefresh() {
@@ -197,14 +208,17 @@
   page {
     background-color: #fff;
   }
+
   .head_top {
     background-color: #fff;
     padding: 28rpx;
   }
+
   .address-box {
     // background-color: red;
     border-radius: 21rpx 21rpx 0rpx 0rpx;
     padding: 30rpx 28rpx;
+
     .head_item {
       display: flex;
       justify-content: space-between;
@@ -214,18 +228,22 @@
       font-family: PingFang SC-Regular, PingFang SC;
       font-weight: 400;
       color: #333333;
+
       .re-location {
         display: flex;
+
         .re-title {
           flex-shrink: 0;
           padding-right: 14rpx;
         }
       }
+
       .re-address-img {
         width: 38.55rpx;
         height: 38.55rpx;
         margin-right: 14rpx;
       }
+
       .re-btn {
         display: flex;
         align-items: center;
@@ -233,6 +251,7 @@
         padding-left: 14rpx;
       }
     }
+
     .head_item_tips {
       height: 44rpx;
       font-size: 32rpx;
@@ -240,6 +259,7 @@
       font-weight: 400;
       color: #737373;
     }
+
     .address-list {
       font-size: 28rpx;
       font-family: PingFang SC-Regular, PingFang SC;
@@ -254,6 +274,7 @@
       display: flex;
       flex-wrap: wrap;
       padding-top: 30rpx;
+
       .area-item {
         // width: 158rpx;
         height: 64rpx;
@@ -272,6 +293,7 @@
         margin-bottom: 22rpx;
         margin-right: 22rpx;
       }
+
       .area-item-on {
         // background-color: #F4F4F4;
         color: #ff6d20;
@@ -282,17 +304,26 @@
 
     .street {
       padding-top: 28rpx;
+
       .letter-item {
         display: flex;
+
         .letter {
           flex-shrink: 0;
           margin-right: 28rpx;
           font-size: 25rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
+          width: 40rpx;
+          text-align: center;
           color: #737373;
         }
+
+        .item-box {
+          flex: 1;
+
           .street-item {
+            width: 100%;
             padding-bottom: 28rpx;
             font-size: 28rpx;
             font-family: PingFang SC, PingFang SC;
@@ -302,4 +333,5 @@
         }
       }
     }
+  }
 </style>

pages/user/index.vue

@@ -639,7 +639,6 @@
 						that.filterMenus(item)
 						that.personalMenu.push(item)
 					})
-
 					that.imgUrls = res.data.banner
 				});
 			},