更新地址选择

pages/select_address/select_address.vue

@@ -22,7 +22,7 @@
           <view class="re-title">当前位置: </view>
           <view>{{street}}</view>
         </view>
-        <view class="re-btn"><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,11 +36,44 @@
         <view>泸州区县</view>
       </view>
       <view class="area">
-        <view class="area-item" :class="{'area-item-on': item==2}" v-for="item in 7" >江阳区</view>
+        <view class="area-item" 
+          :class="{'area-item-on': item.code==area_change}" 
+          v-for="(item, index) in areaList" 
+          :key="index"
+          @click="changeArea(item)"
+        >
+          {{item.name}}
+        </view>
       </view>
       <view class="head_item_tips">
         <view>选择街道/镇</view>
       </view>
+      <view class="street">
+        <view class="letter-item">
+          <view class="letter">A</view>
+          <view class="item-box">
+            <view class="street-item" v-for="item in streetList.slice(0, 3)">
+              {{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>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -51,6 +84,10 @@
   	merClassifly,
     getProductslist
   } from '@/api/store.js';
+  import {
+    getArea,
+    getStreet
+  } from "@/api/article.js";
   export default {
     data() {
       return {
@@ -64,11 +101,16 @@
         longitude: '',
         town: '',
         street_id: '',
-        street: ''
+        street: '',
+        areaList: [],
+        streetList: [],
+        area_change: '',
+        street_change: '',
       }
     },
     onLoad() {
       this.getLoaction();
+      this.loadArea();
     },
     onShow() {},
     methods: {
@@ -120,6 +162,29 @@
         		// });
         	}
         });
+      },
+      reGetLocation(){
+        this.getLoaction()
+      },
+      loadArea(){
+        getArea({
+          city_code: 510500
+        }).then((res)=>{
+          this.areaList = res.data;
+          this.changeArea(this.areaList[0]);
+        })
+      },
+      loadStreet(area_code){
+        this.street_change = '';
+        getStreet({
+          area_code
+        }).then((res)=>{
+          this.streetList = res.data;
+        })
+      },
+      changeArea(item){
+        this.area_change = item.code;
+        this.loadStreet(this.area_change);
       }
     },
     onPullDownRefresh() {
@@ -208,9 +273,32 @@
         margin-right: 22rpx;
       }
       .area-item-on{
-        background-color: #F4F4F4;
+        // background-color: #F4F4F4;
-        color: #333;
+        color: #ff6d20;
-        font-weight: bold;
+        // font-weight: bold;
+        border: 2rpx solid #ff6d20;
+      }
+    }
+    
+    .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;
+          color: #737373;
+        }
+        .street-item{
+          padding-bottom: 28rpx;
+          font-size: 28rpx;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+        }
       }
     }
   }