Merge branch 'feature/task1.0.0-0505-ch' into msb_test

components/BsAddress.vue

@@ -1,20 +1,358 @@
 <template>
   <div>
-    <div class="address"></div>
+    <div class="address flex flex-middle" v-if="!isEdit">
+      <article class="address__msg">
+        <div class="address__msg-line flex flex-middle">
+          <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">{{
+            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">{{
+            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">{{
+            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" @click="onSwtich">
+          <img
+            class="icon"
+            src="@/assets/img/goods/switch.png"
+            alt="切换地址"
+          />
+          切换地址
+        </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">
+        <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 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 {};
+    return {
+      isEdit: false,
+      dialogVisible: false,
+      detailAddress: "",
+      addressUser: "",
+      addressPhone: "",
+      defaultAddress: true,
+      selectData: {},
+      addressList: [{}],
+      curAddressListItem: 0,
+    };
+  },
+  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;
+    },
   },
-  methods: {},
 };
 </script>
 <style lang="scss" scoped>
 .address {
-  width: 1200px;
+  @include layout-box;
-  height: 189px;
+  min-height: 189px;
   border: 1px solid #dddddd;
+  padding: 28px 34px 8px;
+  &__msg {
+    width: 776px;
+    &-line {
+      margin-bottom: 20px;
+      img {
+        width: 20px;
+        height: 24px;
+        margin-right: 14px;
+      }
+      &--type {
+        width: 70px;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #999999;
+      }
+      &--txt {
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #333333;
+      }
+      /deep/.ui-button__yellow_panel {
+        width: 62px;
+        height: 30px;
+        color: #ff875b;
+        background: rgba(255, 135, 91, 0.1);
+        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 {
+    width: 2px;
+    height: 107px;
+    background: #eeeeee;
+  }
+  &__operation {
+    flex: 1;
+    /deep/.ui-button__grey {
+      width: 114px;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #666666;
+      &:nth-child(1) {
+        margin-bottom: 30px;
+      }
+    }
+    .icon {
+      width: 18px;
+      height: 18px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.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>

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'
 	},

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"

pages/goods/detail/_id.vue

@@ -119,16 +119,17 @@
   </div>
 </template>
 <script>
+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 },
+  componetns: { UiMoney, UiButton, UiGoodsItem, BsAddress },
   data() {
     return {
       curBuyNum: 1,
@@ -301,8 +302,7 @@ export default {
   }
 }
 .main {
-  width: 1200px;
+  @include layout-box;
-  margin: 0 auto;
   &__preview {
     width: 456px;
     margin-right: 30px;
@@ -444,6 +444,13 @@ export default {
             margin-bottom: 6px;
             border-color: #ccc;
           }
+          .attr-item__active {
+            border: 1px solid #FF512B;
+          }
+          .attr-item__disabled {
+            color: #999999;
+            background: #eeeeee;
+          }
         }
       }
     }
@@ -492,10 +499,4 @@ export default {
     color: #666666;
   }
 }
-.attr-item__active {
-  background: red !important;
-}
-.attr-item__disabled {
-  background: cyan !important;
-}
 </style>

pages/goods/list/index.vue

@@ -13,6 +13,9 @@
         <p class="main__nav-crumbs">
           全部商品<i class="el-icon-arrow-right"></i>开发书籍
         </p>
+        <!-- <div class="main__nav-sort flex flex-middle">
+          <span class="main__nav-sort-txt">分类 :</span>
+        </div> -->
         <div class="main__nav-sort flex flex-middle">
           <span class="main__nav-sort-txt">排序 :</span>
           <span
@@ -144,12 +147,12 @@ export default {
 }
 
 .main {
-  width: 1200px;
+  @include layout-box;
-  margin: 0 auto;
   padding-top: 14px;
   padding-bottom: 60px;
 
   &__nav {
+    padding-top: 24px;
     &::after {
       display: block;
       width: 1200px;
@@ -165,7 +168,6 @@ export default {
     &-sort {
       width: 100%;
       height: 50px;
-      margin-top: 24px;
       padding: 0 30px;
       &-txt {
         color: #999999;

pages/order/submit/index.vue

@@ -2,12 +2,14 @@
  * @Author: ch
  * @Date: 2022-05-04 17:30:58
  * @LastEditors: ch
- * @LastEditTime: 2022-05-10 15:49:36
+ * @LastEditTime: 2022-05-10 17:41:16
  * @Description: file content
 -->
 
 <template>
 	<div class="main">
+		<h3 class="title">收货地址</h3>
+		<BsAddress v-model="address"/>
 		<!-- <h3 class="title">支付方式</h3>
 		<div class="pay-type">
 			<el-radio label="微信支付" />
@@ -32,11 +34,12 @@ import OrderInfo from './module/OrderInfo.vue';
 import Message from './module/Message.vue';
 import Amount from './module/Amount.vue';
 import UiButton from '../../../components/UiButton.vue';
+import BsAddress from '../../../components/BsAddress.vue';
 export default {
-	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton },
+	components: { BsPay, UIGoodsInfo, OrderInfo, Message, Amount, UiButton, BsAddress },
 	data(){
 		return {
-			address : {id:3},
+			address : {},
 			orderInfo : {},
 			userMessage : '',
 			payOrder : {},
@@ -125,7 +128,7 @@ export default {
 		 */
 		calcTimerStartSecondNum(){
 			let expireTime = (new Date(this.payOrder.expireTime.replace(/-/g,'/'))).getTime(),
-				curTime = (new Date(this.payOrder.serverTime.replace(/-/g,'/'))).getTime(),
+				curTime = (this.payOrder.serverTime ? new Date(this.payOrder.serverTime.replace(/-/g,'/')) : new Date()).getTime(),
 				second = Math.floor((expireTime - curTime) / 1000);
 			this.payStartSecondNum = second > 0 ? second : 0;
 			this.timer();
@@ -155,7 +158,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .main{
-	@include layout-box
+	@include layout-box;
+	padding: 30px 0;
 }
 .title{
 	margin: 24px 0 13px;

plugins/v-distpicker.js

@@ -0,0 +1,6 @@
+import Vue from "vue";
+if (process.browser) {
+  var Distpicker = require("v-distpicker");
+  Vue.use(Distpicker);
+  Vue.component("v-distpicker", Distpicker);
+}