From 5e8f7befd9590cdce7191977b2b0c170216b9232 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Sun, 7 Nov 2021 23:51:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=80=89=E6=8B=A9=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80=E5=9B=9E=E6=98=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CitySelect.vue               | 197 ++++++++++++++----------
 manifest.json                           |   2 +-
 pages/user/address/AddAddress/index.vue | 166 ++++++++++----------
 3 files changed, 201 insertions(+), 164 deletions(-)

diff --git a/components/CitySelect.vue b/components/CitySelect.vue
index 8d4e887..181b837 100644
--- a/components/CitySelect.vue
+++ b/components/CitySelect.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <text class="uni-input" @tap="open">{{value}}</text>
+    <text class="uni-input" @tap="open">{{ value }}</text>
     <uni-popup ref="popup" type="bottom">
       <view class="cityselect">
         <view class="cityselect-header">
@@ -9,13 +9,13 @@
           </view>
           <view class="cityselect-nav">
             <view class="item" v-if="provinceActive" @tap="changeNav(0)">
-              <text>{{provinceActive.n}}</text>
+              <text>{{ provinceActive.n }}</text>
             </view>
             <view class="item" v-if="cityActive" @tap="changeNav(1)">
-              <text>{{cityActive.n}}</text>
+              <text>{{ cityActive.n }}</text>
             </view>
             <view class="item" v-if="districtActive" @tap="changeNav(2)">
-              <text>{{districtActive.n}}</text>
+              <text>{{ districtActive.n }}</text>
             </view>
             <view class="item active" v-else>
               <text>请选择</text>
@@ -27,14 +27,9 @@
             <swiper-item>
               <scroll-view scroll-y class="cityScroll">
                 <view>
-                  <view
-                    class="cityselect-item"
-                    v-for="(item,index) in province"
-                    :key="index"
-                    @tap="selectProvince(index)"
-                  >
-                    <view class="cityselect-item-box">
-                      <text>{{item.n}}</text>
+                  <view class="cityselect-item" v-for="(item, index) in province" :key="index" @tap="selectProvince(index)">
+                    <view class="cityselect-item-box" :class="{ active: isProvinceActive(item) }">
+                      <text>{{ item.n }}</text>
                     </view>
                   </view>
                 </view>
@@ -43,14 +38,9 @@
             <swiper-item>
               <scroll-view scroll-y class="cityScroll">
                 <view>
-                  <view
-                    class="cityselect-item"
-                    v-for="(item,index) in city"
-                    :key="index"
-                    @tap="selectCity(index)"
-                  >
-                    <view class="cityselect-item-box">
-                      <text>{{item.n}}</text>
+                  <view class="cityselect-item" v-for="(item, index) in city" :key="index" @tap="selectCity(index)">
+                    <view class="cityselect-item-box" :class="{ active: isCityActive(item)}">
+                      <text>{{ item.n }}</text>
                     </view>
                   </view>
                 </view>
@@ -59,14 +49,9 @@
             <swiper-item>
               <scroll-view scroll-y class="cityScroll">
                 <view>
-                  <view
-                    class="cityselect-item"
-                    v-for="(item,index) in district"
-                    :key="index"
-                    @tap="selectDistrict(index)"
-                  >
-                    <view class="cityselect-item-box">
-                      <text>{{item.n}}</text>
+                  <view class="cityselect-item" v-for="(item, index) in district" :key="index" @tap="selectDistrict(index)">
+                    <view class="cityselect-item-box" :class="{ active: isDistrictActive(item) }">
+                      <text>{{ item.n }}</text>
                     </view>
                   </view>
                 </view>
@@ -80,21 +65,21 @@
 </template>
 
 <script type="text/babel">
-import uniPopup from "./uni-popup/uni-popup.vue";
-import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
-import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";
+import uniPopup from './uni-popup/uni-popup.vue'
+import uniPopupMessage from './uni-popup/uni-popup-message.vue'
+import uniPopupDialog from './uni-popup/uni-popup-dialog.vue'
 
 export default {
-  name: "CitySelect",
+  name: 'CitySelect',
   components: {
     uniPopup,
     uniPopupMessage,
-    uniPopupDialog
+    uniPopupDialog,
   },
-  props: ["callback", "items", "defaultValue"],
+  props: ['callback', 'items', 'defaultValue'],
   data() {
     return {
-      value: "请选择",
+      value: '请选择',
       show: this.value,
       province: [],
       provinceActive: null,
@@ -102,60 +87,107 @@ export default {
       cityActive: null,
       district: [],
       districtActive: null,
-      current: 0
-    };
+      current: 0,
+    }
   },
   watch: {
-    items(nextItem) {
-      this.province = nextItem;
+    items(next) {
+      this.province = next
+    },
+    defaultValue(next) {
+      this.value = `${next.province.n} ${next.city.n} ${next.district.n}`
+      this.setDefaultValue(this.items, next)
     },
-    defaultValue(next){
-      this.value=next
-    }
   },
+  
   mounted() {
-    console.log(this);
+    console.log(this)
     if (this.value) {
-      this.value = this.value;
+      this.value = this.value
     }
-    this.province = this.items;
+    this.province = this.items
   },
   methods: {
+     isProvinceActive(item) {
+      return this.provinceActive && item.v == this.provinceActive.v
+    },
+    isCityActive(item) {
+      return this.cityActive && item.v == this.cityActive.v
+    },
+    isDistrictActive(item) {
+      return this.districtActive && item.v == this.districtActive.v
+    },
+    setDefaultValue(items, value) {
+      if (!items || !value) {
+        return
+      }
+      this.province = items
+      items.map(province => {
+        if (province.n == value.province.n) {
+          this.city = province.c
+          this.provinceActive = {
+            v: province.v,
+            n: value.province.n,
+          }
+          province.c.map(city => {
+            if (city.n == value.city.n) {
+              this.district = city.c
+              this.cityActive = {
+                v: city.v,
+                n: value.city.n,
+              }
+              city.c.map(district => {
+                if (district.n == value.district.n) {
+                  this.districtActive = {
+                    v: city.v,
+                    n: value.district.n,
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+      console.log(this.provinceActive, this.cityActive, this.districtActive)
+      console.log(this)
+    },
     open() {
-      this.province = this.items;
-      this.provinceActive = null;
-      this.cityActive = null;
-      this.districtActive = null;
-      this.city = [];
-      this.district = [];
-      this.current = 0;
-      this.$refs.popup.open();
+      this.province = this.items
+      this.provinceActive = null
+      this.cityActive = null
+      this.districtActive = null
+      this.city = []
+      this.district = []
+      this.current = 0
+      this.$refs.popup.open()
+
+      this.setDefaultValue(this.items, this.defaultValue)
     },
     changeNav(index) {
       if (index == 0) {
-        this.provinceActive = null;
+        this.provinceActive = null
       }
       if (index == 1) {
-        this.cityActive = null;
+        this.cityActive = null
       }
       if (index == 2) {
-        this.districtActive = null;
+        this.districtActive = null
       }
-      this.current = index;
+      this.current = index
     },
     selectProvince(index) {
-      this.provinceActive = this.province[index];
-      this.city = this.province[index].c;
-      this.current = 1;
+      this.provinceActive = this.province[index]
+      this.city = this.province[index].c
+      this.current = 1
     },
     selectCity(index) {
-      this.cityActive = this.city[index];
-      this.district = this.city[index].c;
-      this.current = 2;
+      this.cityActive = this.city[index]
+      this.district = this.city[index].c
+      this.current = 2
     },
     selectDistrict(index) {
-      this.districtActive = this.district[index];
-      this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
+      this.districtActive = this.district[index]
+      this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`
       // this.callback({
       //   province: {
       //     id: this.provinceActive.v,
@@ -170,24 +202,24 @@ export default {
       //     name: this.districtActive.n
       //   }
       // });
-      this.$emit("callback", {
+      this.$emit('callback', {
         province: {
           id: this.provinceActive.v,
-          name: this.provinceActive.n
+          name: this.provinceActive.n,
         },
         city: {
           id: this.cityActive.v,
-          name: this.cityActive.n
+          name: this.cityActive.n,
         },
         district: {
           id: this.districtActive.v,
-          name: this.districtActive.n
-        }
-      });
-      this.$refs.popup.close();
-    }
-  }
-};
+          name: this.districtActive.n,
+        },
+      })
+      this.$refs.popup.close()
+    },
+  },
+}
 </script>
 
 <style lang="less">
@@ -197,14 +229,14 @@ export default {
   background-color: #fff;
   z-index: 1502;
   position: relative;
-  padding-bottom: 0;  
-  padding-bottom: constant(safe-area-inset-bottom);  
-  padding-bottom: env(safe-area-inset-bottom);  
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
   .cityScroll {
     height: 100%;
   }
   .swiper {
-      height: 800rpx;
+    height: 800rpx;
   }
 }
 .cityselect-header {
@@ -224,7 +256,7 @@ export default {
     z-index: 0;
     bottom: 0;
     left: 0;
-    content: "";
+    content: '';
     width: 100%;
     background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
   }
@@ -274,8 +306,11 @@ export default {
     max-height: 65rpx;
     font-size: 26rpx;
     color: #333;
+    &.active{
+      color:#f23030 !important;
+    }
     &:after {
-      content: "";
+      content: '';
       height: 1rpx;
       position: absolute;
       z-index: 0;
diff --git a/manifest.json b/manifest.json
index 54bbd88..2d5cf21 100644
--- a/manifest.json
+++ b/manifest.json
@@ -166,7 +166,7 @@
     "devServer": {
       "disableHostCheck": true,
       "proxy": {
-        "/api": {
+        "^/api": {
           "target": "https://wxapi.yixiang.co",
           "changeOrigin": true,
           "secure": true,
diff --git a/pages/user/address/AddAddress/index.vue b/pages/user/address/AddAddress/index.vue
index 5cea9f8..45977eb 100644
--- a/pages/user/address/AddAddress/index.vue
+++ b/pages/user/address/AddAddress/index.vue
@@ -13,7 +13,7 @@
         <view class="name">所在地区</view>
         <view class="picker acea-row row-between-wrapper select-value form-control">
           <view class="address">
-            <CitySelect ref="cityselect" :defaultValue="addressText" @callback="result" :items="district"></CitySelect>
+            <CitySelect ref="cityselect" :defaultValue="defaultAddress" @callback="result" :items="district"></CitySelect>
           </view>
           <view class="iconfont icon-dizhi font-color-red"></view>
         </view>
@@ -28,7 +28,7 @@
         <view class="checkbox-wrapper">
           <checkbox-group @change="ChangeIsDefault">
             <label class="well-check">
-              <checkbox :value="userAddress.isDefault==1?'checked':''" :checked="userAddress.isDefault ? true : false"></checkbox>
+              <checkbox :value="userAddress.isDefault == 1 ? 'checked' : ''" :checked="userAddress.isDefault ? true : false"></checkbox>
               <text class="def">设置为默认地址</text>
             </label>
           </checkbox-group>
@@ -42,17 +42,17 @@
 </template>
 
 <script type="text/babel">
-  import CitySelect from "@/components/CitySelect";
-import { getAddress, postAddress, getCity } from "@/api/user";
-import attrs, { required, chs_phone } from "@/utils/validate";
-import { validatorDefaultCatch } from "@/utils/dialog";
+import CitySelect from '@/components/CitySelect'
+import { getAddress, postAddress, getCity } from '@/api/user'
+import attrs, { required, chs_phone } from '@/utils/validate'
+import { validatorDefaultCatch } from '@/utils/dialog'
 // import { openAddress } from "@/libs/wechat";
-import { isWeixin } from "@/utils";
+import { isWeixin } from '@/utils'
 
 export default {
-  name: "AddAddress",
+  name: 'AddAddress',
   components: {
-    CitySelect
+    CitySelect,
   },
   data() {
     return {
@@ -61,73 +61,75 @@ export default {
       userAddress: { isDefault: 0 },
       address: {},
       isWechat: isWeixin(),
-      addressText: ""
-    };
+      defaultAddress: {},
+      addressText: '',
+    }
   },
   mounted: function() {
-    let id = this.$yroute.query.id;
-    this.id = id;
-    this.getUserAddress();
-    this.getCityList();
+    let id = this.$yroute.query.id
+    this.id = id
+    this.getUserAddress()
+    this.getCityList()
   },
   watch: {
     addressText(nextModel2) {
-      console.log(nextModel2, 8585858585);
-    }
+      console.log(nextModel2, 8585858585)
+    },
   },
   methods: {
     getCityList: function() {
-      let that = this;
+      let that = this
       getCity()
         .then(res => {
-          that.district = res.data;
-          that.ready = true;
+          that.district = res.data
+          that.ready = true
         })
         .catch(err => {
           uni.showToast({
-					title: err.msg,
-					icon: "none",
-					duration: 2000,
-				});
-        });
+            title: err.msg,
+            icon: 'none',
+            duration: 2000,
+          })
+        })
     },
     getUserAddress: function() {
-      if (!this.id) return false;
-      let that = this;
+      if (!this.id) return false
+      let that = this
       getAddress(that.id).then(res => {
-        that.userAddress = res.data;
-        that.addressText =
-          res.data.province + " " + res.data.city + " " + res.data.district;
-        that.address.province = res.data.province;
-        that.address.city = res.data.city;
-        that.address.district = res.data.district;
-      });
+        that.userAddress = res.data
+        that.defaultAddress = {
+          province: {
+            n: res.data.province,
+          },
+          city: {
+            n: res.data.city,
+          },
+          district: {
+            n: res.data.district,
+          },
+        }
+        that.addressText = res.data.province + ' ' + res.data.city + ' ' + res.data.district
+        that.address.province = res.data.province
+        that.address.city = res.data.city
+        that.address.district = res.data.district
+      })
     },
     getAddress() {},
     async submit() {
-      console.log(this);
-      console.log(this.address);
-      console.log(this.addressText);
       let name = this.userAddress.realName,
         phone = this.userAddress.phone,
         addressText = this.addressText,
         detail = this.userAddress.detail,
-        isDefault = this.userAddress.isDefault;
+        isDefault = this.userAddress.isDefault
       try {
         await this.$validator({
-          name: [
-            required(required.message("姓名")),
-            attrs.range([2, 16], attrs.range.message("姓名"))
-          ],
-          phone: [
-            required(required.message("联系电话")),
-            chs_phone(chs_phone.message())
-          ],
-          addressText: [required("请选择地址")],
-          detail: [required(required.message("具体地址"))]
-        }).validate({ name, phone, addressText, detail });
+          name: [required(required.message('姓名')), attrs.range([2, 16], attrs.range.message('姓名'))],
+          phone: [required(required.message('联系电话')), chs_phone(chs_phone.message())],
+          addressText: [required('请选择地址')],
+          detail: [required(required.message('具体地址'))],
+        }).validate({ name, phone, addressText, detail })
       } catch (e) {
-        return validatorDefaultCatch(e);
+        return validatorDefaultCatch(e)
       }
       try {
         let that = this,
@@ -138,21 +140,21 @@ export default {
             address: this.address,
             detail: detail,
             is_default: isDefault ? true : false,
-            post_code: ""
-          };
+            post_code: '',
+          }
         postAddress(data).then(function() {
           if (that.id) {
             uni.showToast({
-              title: "修改成功",
-              icon: "none",
-              duration: 2000
-            });
+              title: '修改成功',
+              icon: 'none',
+              duration: 2000,
+            })
           } else {
             uni.showToast({
-              title: "操作成功",
-              icon: "none",
-              duration: 2000
-            });
+              title: '操作成功',
+              icon: 'none',
+              duration: 2000,
+            })
             // uni.showToast({
             //   title: "已取消绑定",
             //   icon: "none",
@@ -162,41 +164,41 @@ export default {
             //   path: "/pages/user/PersonalData/index"
             // });
           }
-          that.$yrouter.back();
-        });
+          that.$yrouter.back()
+        })
       } catch (err) {
         uni.showToast({
           title: err.msg || err.response.data.msg || err.response.data.message,
-          icon: "none",
-          duration: 2000
-        });
+          icon: 'none',
+          duration: 2000,
+        })
       }
     },
     ChangeIsDefault: function() {
-      this.userAddress.isDefault = !this.userAddress.isDefault;
+      this.userAddress.isDefault = !this.userAddress.isDefault
     },
     result(values) {
-      console.log(this);
-      console.log(values);
+      console.log(this)
+      console.log(values)
       this.address = {
-        province: values.province.name || "",
-        city: values.city.name || "",
-        district: values.district.name || "",
-        city_id: values.city.id
-      };
-      this.addressText = `${this.address.province}${this.address.city}${this.address.district}`;
+        province: values.province.name || '',
+        city: values.city.name || '',
+        district: values.district.name || '',
+        city_id: values.city.id,
+      }
+      this.addressText = `${this.address.province}${this.address.city}${this.address.district}`
       // this.addressText =
       //   this.address.province + this.address.city + this.address.district;
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
 <style lang="less">
-  .address {
-    text {
-      width: 100%;
-      display: block;
-    }
+.address {
+  text {
+    width: 100%;
+    display: block;
   }
+}
 </style>