feat:完成收货地址开发

2 years ago · a670935eff
parent 032b6b01b9
commit a670935eff
4 changed files with 272 additions and 37 deletions
--- 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>
--- 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'
 	},
--- 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"
--- 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>