From a670935eff41c5aba993ccdf8afb42e4907b166d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=BE=81?= <zhangz@163.com>
Date: Tue, 10 May 2022 16:55:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E6=88=90=E6=94=B6=E8=B4=A7?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsAddress.vue   | 280 +++++++++++++++++++++++++++++++++----
 nuxt.config.js             |   7 +-
 package.json               |   1 +
 pages/goods/detail/_id.vue |  21 +--
 4 files changed, 272 insertions(+), 37 deletions(-)

diff --git a/components/BsAddress.vue b/components/BsAddress.vue
index 7b81097..fc59b8c 100644
--- a/components/BsAddress.vue
+++ b/components/BsAddress.vue
@@ -3,66 +3,218 @@
     <div class="address flex flex-middle" v-if="!isEdit">
       <article class="address__msg">
         <div class="address__msg-line flex flex-middle">
-          <img src="@/static/images/goods/point.png" alt="收货地址" />
+          <img src="@/assets/img/goods/point.png" alt="收货地址" />
           <span class="address__msg-line--txt">默认地址</span>
           <UiButton type="yellow_panel">修改</UiButton>
         </div>
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">收货地址:</span>
-          <span class="address__msg-line--txt"
-            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
-          >
+          <span class="address__msg-line--txt">{{
+            curAddressListItem.area +
+            curAddressListItem.city +
+            curAddressListItem.province +
+            curAddressListItem.detailAddress
+          }}</span>
         </div>
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">收 货 人 :</span>
-          <span class="address__msg-line--txt"
-            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
-          >
+          <span class="address__msg-line--txt">{{
+            curAddressListItem.name
+          }}</span>
         </div>
         <div class="address__msg-line flex flex-middle">
           <span class="address__msg-line--type">手机号码:</span>
-          <span class="address__msg-line--txt"
-            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
-          >
+          <span class="address__msg-line--txt">{{
+            curAddressListItem.phone
+          }}</span>
         </div>
       </article>
       <div class="hr"></div>
       <div class="address__operation flex flex-column flex-middle">
-        <UiButton type="grey" class="flex flex-middle"
-          ><img
-            class="icon"
-            src="@/static/images/goods/switch.png"
-            alt="切换地址"
-          />
-          切换地址</UiButton
-        >
-        <UiButton type="grey" class="flex flex-middle"
-          ><img
+        <UiButton type="grey" class="flex flex-middle" @click="onSwtich">
+          <img
             class="icon"
-            src="@/static/images/goods/add.png"
+            src="@/assets/img/goods/switch.png"
             alt="切换地址"
           />
-          新建地址</UiButton
-        >
+          切换地址
+        </UiButton>
+        <UiButton type="grey" @click="isEdit = true" class="flex flex-middle">
+          <img class="icon" src="@/assets/img/goods/add.png" alt="新建地址" />
+          新建地址
+        </UiButton>
       </div>
     </div>
     <div class="address flex flex-middle" v-else>
-      <article class="address__msg"></article>
+      <article class="address__msg">
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">所在区域</span>
+          <no-ssr><v-distpicker @selected="onSelected"></v-distpicker></no-ssr>
+        </div>
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">详细地址</span>
+          <el-input
+            v-model="detailAddress"
+            type="textarea"
+            :rows="3"
+            class="max-ipt"
+          ></el-input>
+        </div>
+        <div class="address__msg-line flex flex-middle">
+          <span class="address__msg-line--type">收货人</span>
+          <el-input v-model="addressUser" class="min-ipt"></el-input>
+          <span class="address__msg-line--type">手机号码</span>
+          <el-input
+            v-model="addressPhone"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            class="min-ipt"
+          ></el-input>
+        </div>
+      </article>
       <div class="hr"></div>
-      <div class="address__operation"></div>
+      <div class="address__operation flex flex-column flex-middle">
+        <el-checkbox v-model="defaultAddress">设为默认地址</el-checkbox>
+        <div>
+          <UiButton
+            v-if="addressList && addressList.length"
+            type="grey"
+            @click="isEdit = false"
+            >取消</UiButton
+          >
+          <UiButton type="yellow_panel" @click="onAddAddress"
+            >保存地址</UiButton
+          >
+        </div>
+      </div>
     </div>
+
+    <el-dialog
+      title="选择地址"
+      center
+      :visible.sync="dialogVisible"
+      width="380px"
+    >
+      <div class="address__list">
+        <section
+          @click="onAddressItem(item)"
+          class="address__list--item"
+          v-for="item in addressList"
+          :key="item.id"
+        >
+          <div>收货人：{{ item.name }}</div>
+          <div>手机号码：{{ item.phone }}</div>
+          <div>收货地址：{{ item.detailAddress }}</div>
+        </section>
+      </div>
+      <span slot="footer" class="dialog-footer flex flex-between">
+        <UiButton type="grey" @click="onCancel">取消</UiButton>
+        <UiButton type="yellow_panel">确认</UiButton>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import UiButton from "@/components/UiButton.vue";
+
+import { ApiGetAddress, ApiPostAddress } from "@/plugins/api/base";
 export default {
   components: { UiButton },
+  props: {
+    addressData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  model: {
+    prop: "addressData",
+    event: "emitAddress",
+  },
   data() {
     return {
       isEdit: false,
+      dialogVisible: false,
+      detailAddress: "",
+      addressUser: "",
+      addressPhone: "",
+      defaultAddress: true,
+      selectData: {},
+      addressList: [{}],
+      curAddressListItem: 0,
     };
   },
-  methods: {},
+  created() {
+    this.getAddressData();
+  },
+  methods: {
+    async getAddressData() {
+      let vm = this;
+      let res = await ApiGetAddress();
+      if (res.result && res.result.length) {
+        vm.isEdit = false;
+        vm.addressList = res.result;
+        let curIndex = vm.addressList.findIndex((item) => item.id == 3);
+        vm.curAddressListItem =
+          curIndex > -1 ? vm.addressList[curIndex] : vm.addressList[0];
+        vm.$emit("emitAddress", vm.curAddressListItem);
+      } else {
+        vm.isEdit = true;
+      }
+      console.log("获取收货地址", res);
+    },
+    onSwtich() {
+      this.dialogVisible = true;
+    },
+    onCancel() {
+      this.dialogVisible = false;
+    },
+    onSelected(data) {
+      console.log(data);
+      this.selectData = data;
+    },
+    async onAddAddress() {
+      let vm = this;
+      if (!vm.selectData?.area?.code) {
+        vm.$message.error("请选择所在区域~");
+        return;
+      }
+      if (!vm.detailAddress) {
+        vm.$message.error("请输入详细地址~");
+        return;
+      }
+      if (!vm.addressUser) {
+        vm.$message.error("请输入收货人~");
+        return;
+      }
+      if (!vm.addressPhone) {
+        vm.$message.error("请输入收货人手机号码~");
+        return;
+      }
+      let params = {
+        area: vm.selectData.area.value,
+        areaCode: vm.selectData.area.code,
+        city: vm.selectData.city.value,
+        cityCode: vm.selectData.city.code,
+        detailAddress: vm.detailAddress,
+        isDefault: vm.defaultAddress,
+        name: vm.addressUser,
+        phone: vm.addressPhone,
+        province: vm.selectData.province.value,
+        provinceCode: vm.selectData.province.code,
+      };
+      let res = await ApiPostAddress(params);
+      if (!res.error) {
+        vm.$message.success("添加成功!");
+        vm.getAddressData();
+      }
+      console.log(res);
+    },
+    onAddressItem(item) {
+      let vm = this;
+      vm.curAddressListItem = item;
+      vm.$emit("emitAddress", item);
+      vm.dialogVisible = false;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -101,6 +253,22 @@ export default {
         border-radius: 4px 4px 4px 4px;
         margin-left: 54px;
       }
+
+      .max-ipt {
+        width: 450px;
+      }
+
+      .min-ipt {
+        width: 164px;
+        margin-right: 50px;
+        /deep/.el-input__inner {
+          width: 164px;
+          height: 28px;
+          background: #ffffff;
+          border-radius: 2px;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+        }
+      }
     }
   }
   .hr {
@@ -127,4 +295,64 @@ export default {
     }
   }
 }
+
+.address__list {
+  height: 265px;
+  overflow-y: auto;
+  //滚动条样式
+  overflow-y: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  /*定义滚动条轨道 内阴影+圆角*/
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #fff;
+  }
+  /*定义滑块 内阴影+圆角*/
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #eeeeee;
+  }
+  &--item {
+    width: 320px;
+    height: 120px;
+    border: 1px solid #dddddd;
+    margin-bottom: 24px;
+  }
+}
+
+.dialog-footer {
+  /deep/.ui-button {
+    width: 150px;
+    height: 36px;
+    background: #ffffff;
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid #eeeeee;
+    font-size: 14px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 400;
+    color: #000;
+  }
+  /deep/.ui-button__yellow_panel {
+    background: #ff875b;
+    color: #fff;
+  }
+}
+
+/deep/.distpicker-address-wrapper {
+  select {
+    width: 164px;
+    height: 28px;
+    background: #ffffff;
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    font-size: 14px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 400;
+    color: #333333;
+    padding: 0;
+  }
+}
 </style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 8af2ead..521cc4b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -43,7 +43,8 @@ export default {
 		'@/plugins/element-ui',
 		'@/plugins/axios',
 		'@plugins/axiosTk.js',
-		'@plugins/vue-inject.js'
+		'@plugins/vue-inject.js',
+    '@/plugins/v-distpicker', 
 	],
 
 	// Auto import components: https://go.nuxtjs.dev/config-components
@@ -53,6 +54,10 @@ export default {
 	buildModules: [
 	],
 
+  build: {
+    vendor: ['v-distpicker']
+  },
+
 	styleResources: {
 		scss: '@/assets/scss/global.scss'
 	},
diff --git a/package.json b/package.json
index 13fe036..2d092e4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",
     "nuxt": "^2.15.8",
+    "v-distpicker": "^1.2.13",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14"
diff --git a/pages/goods/detail/_id.vue b/pages/goods/detail/_id.vue
index ca3db6d..a2ed4d5 100644
--- a/pages/goods/detail/_id.vue
+++ b/pages/goods/detail/_id.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <BsAddress></BsAddress>
+    <BsAddress v-model="addressData"></BsAddress>
     <nav class="nav flex flex-middle flex-center">
       <p class="nav__crumbs">
         全部商品
@@ -120,17 +120,17 @@
   </div>
 </template>
 <script>
-import BsAddress from '@/components/BsAddress.vue'
+import BsAddress from "@/components/BsAddress.vue";
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
+import UiGoodsItem from "@/components/UiGoodsItem.vue";
 import {
   ApiGetGoodsDetail,
   ApiGetGoodsSkus,
   ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
-import UiGoodsItem from "@/components/UiGoodsItem.vue";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem,BsAddress },
+  componetns: { UiMoney, UiButton, UiGoodsItem, BsAddress },
   data() {
     return {
       curBuyNum: 1,
@@ -445,6 +445,13 @@ export default {
             margin-bottom: 6px;
             border-color: #ccc;
           }
+          .attr-item__active {
+            border: 1px solid #FF512B;
+          }
+          .attr-item__disabled {
+            color: #999999;
+            background: #eeeeee;
+          }
         }
       }
     }
@@ -493,10 +500,4 @@ export default {
     color: #666666;
   }
 }
-.attr-item__active {
-  background: red !important;
-}
-.attr-item__disabled {
-  background: cyan !important;
-}
 </style>