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

components/BsAddress.vue

@@ -10,9 +10,9 @@
         <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.city +
+            curAddressListItem.area +
             curAddressListItem.detailAddress
           }}</span>
         </div>

components/BsChosen.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="chosen">
+    <div class="chosen-title flex flex-between flex-middle">
+      <h3 class="chosen-title--txt">为你精选</h3>
+      <div class="chosen-title--btn flex" @click="getRecommendedGoodsList()">
+        <img src="@/assets/img/goods/each.png" alt="切换推荐" />
+        <span>换一组</span>
+      </div>
+    </div>
+    <div class="chosen-list">
+      <UiGoodsItem
+        :item="item"
+        v-for="item in recommendedData"
+        :key="item.id"
+      ></UiGoodsItem>
+    </div>
+  </div>
+</template>
+<script>
+import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
+import UiGoodsItem from "@/components/UiGoodsItem.vue";
+export default {
+  components: { UiGoodsItem },
+  data() {
+    return {
+      recommendedData: [],
+    };
+  },
+  created() {
+    this.getRecommendedGoodsList();
+  },
+  methods: {
+    async getRecommendedGoodsList() {
+      let vm = this;
+      let res = await ApiGetRecommendedGoodsList();
+      vm.recommendedData = res.result;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chosen {
+  width: 100%;
+  padding: 30px 0 40px;
+  background: #f8f8f8;
+
+  &-title {
+    @include layout-box;
+    &--txt {
+      font-size: 24px;
+      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+      font-weight: bold;
+      color: #333333;
+    }
+    &--btn {
+      width: 140px;
+      cursor: pointer;
+      img {
+        width: 27px;
+        height: 27px;
+        margin-right: 5px;
+      }
+      span {
+        font-size: 18px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+  &-list {
+    @include layout-box;
+    padding-top: 40px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 232px);
+    justify-content: space-between;
+    grid-row-gap: 10px;
+  }
+}
+</style>

components/UiRadio.vue

@@ -1,10 +0,0 @@
-<!--
- * @Author: ch
- * @Date: 2022-05-07 22:57:24
- * @LastEditors: ch
- * @LastEditTime: 2022-05-07 22:57:39
- * @Description: file content
--->
-<template>
-	<el-radio/>
-</template>

layouts/module/header/index.vue

@@ -215,10 +215,6 @@ export default {
       tabPath: "/",
       tabList: [
         { label: "首页", value: "/" },
-        {
-          label: "爆款推荐",
-          value: `/goods/list?id=recommend`,
-        },
         {
           label: "开发书籍",
           value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,

pages/account/index/address.vue

@@ -23,9 +23,9 @@
       <el-table-column label="收货地址" width="430px">
         <template slot-scope="scope">
           {{
-            scope.row.area +
-            scope.row.city +
             scope.row.province +
+            scope.row.city +
+            scope.row.area +
             scope.row.detailAddress
           }}
         </template>

pages/cart/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-03 22:41:15
  * @LastEditors: ch
- * @LastEditTime: 2022-05-12 17:36:08
+ * @LastEditTime: 2022-05-12 18:11:55
  * @Description: file content
 -->
 <template>
@@ -72,19 +72,21 @@
 				</div>
 			</div>
 		</div>
+		<BsChosen></BsChosen>
 	</div>
 	
 </template>
 <script>
 import {ApiGetCartList, ApiDeleteCartGoods, ApiPutCartNum} from '@/plugins/api/cart';
 import {Debounce} from '@/plugins/utils';
-import UIGoodsInfo from '../../components/UIGoodsInfo.vue';
+import UIGoodsInfo from '@/components/UIGoodsInfo.vue';
-import UiButton from '../../components/UiButton.vue';
+import UiButton from '@/components/UiButton.vue';
-import UiMoney from '../../components/UiMoney.vue';
+import UiMoney from '@/components/UiMoney.vue';
-import UiEmpty from '../../components/UiEmpty.vue';
+import UiEmpty from '@/components/UiEmpty.vue';
-import UiLoading from '../../components/UiLoading.vue';
+import UiLoading from '@/components/UiLoading.vue';
+import BsChosen from '@/components/BsChosen.vue';
 export default {
-	components: { UIGoodsInfo, UiButton, UiMoney, UiEmpty, UiLoading },
+	components: { UIGoodsInfo, UiButton, UiMoney, UiEmpty, UiLoading, BsChosen },
 	data(){
 		return {
 			isLoading : false,
@@ -104,7 +106,6 @@ export default {
                 tempPrice += unitPrice * (item.number || 0)
 			});
 			return (tempPrice / 100).toFixed(2);
-
 		},
 		// 正常可结算的商品
 		normalList(){
@@ -276,6 +277,7 @@ export default {
 	td{
 		text-align: center;
 		padding: 40px 0;
+		border-bottom: 1px solid #ddd;
 	}
 }
 .operation{

pages/goods/detail/_id.vue

@@ -11,7 +11,7 @@
         Java从入门到项目实战
       </p>
     </nav>
-    <main class="main flex">
+    <main class="main flex" v-if="detailData.isEnable">
       <aside class="main__preview">
         <img
           class="main__preview-big"
@@ -55,10 +55,40 @@
           <span class="main__details-title--label">新品</span>
           {{ detailData.name }}
         </p>
+        <div
+          v-if="detailData.productActivityVO.isStartActivity"
+          class="main__details-skill flex flex-right flex-middle"
+        >
+          距结束仅剩
+          <span>{{ getSurplus.lefth }}</span>
+          <span>{{ getSurplus.leftm }}</span>
+          <span>{{ getSurplus.lefts }}</span>
+        </div>
         <div class="main__details-msg">
-          <div class="main__details-msg--price flex">
+          <div class="main__details-msg--price flex flex-middle">
             <span class="msg-txt">售价</span>
-            <UiMoney :money="detailData.startingPrice"></UiMoney>
+            <UiMoney
+              :money="
+                detailData.productActivityVO.isStartActivity
+                  ? detailData.productActivityVO.activityPrice
+                  : detailData.startingPrice
+              "
+            ></UiMoney>
+            <div
+              v-if="
+                detailData.productActivityVO.isActivity &&
+                !detailData.productActivityVO.isStartActivity
+              "
+              class="main__details-msg--skill flex flex-column flex-bottom"
+            >
+              <span class="skill-txt">即将开始秒杀</span>
+              <div class="skill-2" v-if="isToday()">
+                <span>{{ getSurplus.lefth }}</span>
+                <span>{{ getSurplus.leftm }}</span>
+                <span>{{ getSurplus.lefts }}</span>
+              </div>
+              <span class="skill-1" v-else>{{ getBeginTime() }}</span>
+            </div>
           </div>
           <div class="hr"></div>
           <div class="main__details-msg--service flex flex-middle">
@@ -73,7 +103,7 @@
             />
           </div>
         </div>
-        <div class="main__details-option">
+        <div class="main__details-option" v-if="skuData.stock">
           <div
             class="main__details-option--line flex flex-middle"
             v-for="(item, index) in detailData.attributeGroupList"
@@ -94,15 +124,29 @@
               >
             </div>
           </div>
+          <div class="main__details-option--line flex flex-middle">
+            <span class="line-txt">数量</span>
+            <div class="line-btns">
+              <el-input-number v-model="curBuyNum" :min="1"></el-input-number>
+            </div>
+          </div>
+        </div>
+        <div class="main__details-none flex flex-middle" v-else>
+          <img src="@/assets/img/goods/tips.png" alt="" />
+          <span>此商品暂无库存啦~看看其他的吧</span>
         </div>
         <div class="main__details-pay">
-          <UiButton type="yellow_line">加入购物车</UiButton>
+          <UiButton type="yellow_line" @click="addCart">加入购物车</UiButton>
           <UiButton type="yellow_panel" @click="buyNow">立即购买</UiButton>
         </div>
       </article>
     </main>
 
-    <section class="section flex">
+    <main v-else class="main">
+      <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
+      <p class="main-none-txt">商品已下架啦，去逛逛别的吧~</p>
+    </main>
+    <section class="section flex" v-if="detailData.isEnable">
       <div class="section-recommend">
         <p class="section-title">看了又看</p>
         <UiGoodsItem
@@ -113,22 +157,33 @@
       </div>
       <div class="section-details">
         <p class="section-title">商品详情</p>
-        <div class="rich" v-html="detailData.detail"></div>
+        <div
+          class="rich"
+          v-html="detailData.detail"
+          v-if="detailData.detail"
+        ></div>
+        <div class="section-details--none" v-else>
+          <img src="@/assets/img/goods/none.png" alt="" />
+          <p>暂无详情</p>
+        </div>
       </div>
     </section>
+    <BsChosen v-else></BsChosen>
   </div>
 </template>
 <script>
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
+import BsChosen from "@/components/BsChosen.vue";
+import {ApiPutAddCart} from "@/plugins/api/cart";
 import {
   ApiGetGoodsDetail,
   ApiGetGoodsSkus,
   ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem },
+  componetns: { UiMoney, UiButton, UiGoodsItem, BsChosen },
   data() {
     return {
       curBuyNum: 1,
@@ -136,8 +191,11 @@ export default {
       recommendedData: [],
       skuData: {},
       detailData: {
+        isEnable: false,
         pictureList: [],
+        productActivityVO: {},
       },
+      surplus: {},
     };
   },
   async created() {
@@ -149,9 +207,27 @@ export default {
     vm.detailData = res1.result;
     vm.skuData = res2.result;
     vm.recommendedData = res3.result;
-    console.log(`res1`, res1.result);
+    if (
-    console.log(`res2`, res2.result);
+      vm.detailData.productActivityVO.isActivity &&
-    console.log(`res3`, res3.result);
+      !vm.detailData.productActivityVO.isStartActivity &&
+      vm.isToday()
+    ) {
+      let startTime = new Date(
+        vm.detailData.productActivityVO.currentTime
+      ).getTime();
+      let endTime = new Date(
+        vm.detailData.productActivityVO.activityStartTime
+      ).getTime();
+      vm.setSurplus(startTime, endTime);
+    } else if (vm.detailData.productActivityVO.isStartActivity) {
+      let startTime = new Date(
+        vm.detailData.productActivityVO.currentTime
+      ).getTime();
+      let endTime = new Date(
+        vm.detailData.productActivityVO.activityEndTime
+      ).getTime();
+      vm.setSurplus(startTime, endTime);
+    }
   },
   computed: {
     /**
@@ -185,6 +261,62 @@ export default {
     },
   },
   methods: {
+    /* 获取倒计时 */
+    getSurplus(startTime, endTime) {
+      let nowtime = new Date(startTime), //获取当前时间
+        endtime = new Date(endTime); //定义结束时间
+      let leftObj = {};
+      leftObj["lefttime"] = endtime.getTime() - nowtime.getTime(); //距离结束时间的毫秒数
+      leftObj["leftd"] = Math.floor(
+        leftObj["lefttime"] / (1000 * 60 * 60 * 24)
+      ); //计算天数
+      leftObj["lefth"] = Math.floor(
+        (leftObj["lefttime"] / (1000 * 60 * 60)) % 24
+      ); //计算小时数
+      leftObj["leftm"] = Math.floor((leftObj["lefttime"] / (1000 * 60)) % 60); //计算分钟数
+      leftObj["lefts"] = Math.floor((leftObj["lefttime"] / 1000) % 60); //计算秒数
+      return leftObj;
+    },
+    setSurplus(startTime, endTime) {
+      let vm = this;
+      vm.surplus = getSurplus(startTime, endTime);
+      if (vm.timer) {
+        return false;
+      }
+      vm.timer = setInterval(() => {
+        vm.startTime += 1000;
+        vm.surplus = getSurplus(vm.startTime, vm.endTime);
+        if (vm.surplus.lefttime <= 0) {
+          clearInterval(vm.timer);
+          location.reload();
+        }
+      }, 1000);
+    },
+    isToday() {
+      let vm = this;
+      let begin = new Date(
+        vm.detailData.productActivityVO.activityStartTime
+      ).getTime();
+      let now = new Date(vm.detailData.productActivityVO.currentTime).getTime();
+      if (new Date(begin).toDateString() === new Date(now).toDateString()) {
+        return true;
+      } else if (new Date(begin) < new Date()) {
+        return false;
+      }
+    },
+    getBeginTime() {
+      let vm = this;
+      let begin = new Date(
+        vm.detailData.productActivityVO.activityStartTime
+      ).getTime();
+      let timestr = new Date(begin);
+      let month = timestr.getMonth() + 1;
+      let date = timestr.getDate();
+      let hour = timestr.getHours();
+      let minute = timestr.getMinutes();
+      let datetime = `${month}月${date}日 ${hour}:${minute} 开始`;
+      return datetime;
+    },
     onActiveImg(i) {
       this.activeImg = i;
     },
@@ -287,6 +419,27 @@ export default {
         query,
       });
     },
+
+		/**
+		 * 加入购物车
+		 */
+		async addCart(){
+			if(!this.curSku.skuId){
+        this.$message.error("请选择规格~");
+				return false;
+			}
+			const {error, result} = await ApiPutAddCart({
+				productSkuId : this.curSku.skuId,
+				productId : this.detailData.id,
+				number : this.curBuyNum
+			});
+			if(error){
+				this.$message.error(error.message);
+				return false;
+			}
+			this.$message.success('加入购物车成功~');
+			// this.$Router.push('/cart');
+		},
   },
 };
 </script>
@@ -384,6 +537,31 @@ export default {
       }
     }
 
+    &-skill {
+      width: 100%;
+      height: 32px;
+      background: url(@/assets/img/goods/skill.png) no-repeat;
+      background-size: contain;
+      padding: 0 20px;
+      font-size: 14px;
+      font-family: PingFang SC-常规体, PingFang SC;
+      font-weight: normal;
+      color: #ffffff;
+      span {
+        width: 22px;
+        height: 22px;
+        background: #e83710;
+        border-radius: 2px;
+        margin-left: 10px;
+        font-size: 14px;
+        font-family: PingFang SC-常规体, PingFang SC;
+        font-weight: normal;
+        color: #ffffff;
+        line-height: 22px;
+        text-align: center;
+      }
+    }
+
     &-msg {
       width: 714px;
       height: 127px;
@@ -411,6 +589,34 @@ export default {
       &--price {
         padding-bottom: 30px;
       }
+
+      &--skill {
+        margin-left: auto;
+
+        .skill-1 {
+          font-size: 16px;
+          font-family: PingFang SC-常规体, PingFang SC;
+          font-weight: normal;
+          color: #e83710;
+        }
+
+        .skill-2 {
+          margin-top: 6px;
+          span {
+            display: inline-block;
+            width: 22px;
+            height: 22px;
+            background: #e83710;
+            border-radius: 2px;
+            font-size: 14px;
+            font-family: PingFang SC-常规体, PingFang SC;
+            font-weight: normal;
+            color: #ffffff;
+            text-align: center;
+            line-height: 22px;
+          }
+        }
+      }
       .hr {
         width: 673px;
         height: 1px;
@@ -444,7 +650,7 @@ export default {
             border-color: #ccc;
           }
           .attr-item__active {
-            border: 1px solid #FF512B;
+            border: 1px solid #ff512b;
           }
           .attr-item__disabled {
             color: #999999;
@@ -454,6 +660,27 @@ export default {
       }
     }
 
+    &-none {
+      width: 713px;
+      height: 40px;
+      background: #f3f3f3;
+      margin-top: 20px;
+      padding: 0 20px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 12px;
+      }
+
+      span {
+        font-size: 14px;
+        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+
     &-pay {
       margin-top: 40px;
       button {
@@ -470,6 +697,21 @@ export default {
       }
     }
   }
+  &-none-img {
+    display: block;
+    width: 228px;
+    height: 144px;
+    margin: 60px auto 20px;
+  }
+  &-none-txt {
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFang SC-常规体, PingFang SC;
+    font-weight: normal;
+    color: #999999;
+    margin-bottom: 50px;
+  }
 }
 .section {
   width: 1200px;
@@ -484,6 +726,24 @@ export default {
   }
   &-details {
     width: 960px;
+
+    &--none {
+      img {
+        display: block;
+        width: 228px;
+        height: 144px;
+        margin: 133px auto 20px;
+      }
+
+      p {
+        width: 100%;
+        text-align: center;
+        font-size: 14px;
+        font-family: PingFang SC-常规体, PingFang SC;
+        font-weight: normal;
+        color: #999999;
+      }
+    }
   }
   &-title {
     width: 100%;

pages/goods/list/index.vue

@@ -54,7 +54,6 @@
           :item="item"
           v-for="item in listData"
           :key="item.id"
-          :isRecommend="isRecommend"
         ></UiGoodsItem>
       </div>
       <el-pagination
@@ -71,23 +70,7 @@
       <img class="main-none-img" src="@/assets/img/goods/none.png" alt="" />
       <p class="main-none-txt">没有搜到你想要的商品哦，换个关键词试试</p>
     </main>
-    <section class="section">
+    <BsChosen></BsChosen>
-      <div class="section-title flex flex-between flex-middle">
-        <h3 class="section-title--txt">为你精选</h3>
-        <div class="section-title--btn flex" @click="getRecommendedGoodsList()">
-          <img src="@/assets/img/goods/each.png" alt="切换推荐" />
-          <span>换一组</span>
-        </div>
-      </div>
-
-      <div class="section-list">
-        <UiGoodsItem
-          :item="item"
-          v-for="item in recommendedData"
-          :key="item.id"
-        ></UiGoodsItem>
-      </div>
-    </section>
   </div>
 </template>
 <script>
@@ -95,15 +78,14 @@ import {
   ApiGetGoodsList,
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
-  ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
+import BsChosen from '@/components/BsChosen.vue';
 export default {
-  components: { Sort, UiGoodsItem },
+  components: { Sort, UiGoodsItem,BsChosen },
   data() {
     return {
-      isRecommend: false,
       navActive: 0,
       levelActive: 0,
       listData: [],
@@ -111,7 +93,6 @@ export default {
       // 0:综合,1:desc,2:asc,3:上新
       sortType: 0,
       categoryOneList: [],
-      recommendedData: [],
       levelType: "",
       levelId: "",
       params: {
@@ -132,19 +113,12 @@ export default {
       this.levelType = this.$route.query.levelType || "";
       this.levelId = this.$route.query.id || "";
       this.levelType == 2 ? (this.params.categoryId = this.levelId) : "";
-      this.isRecommend = this.levelId == "recommend" ? true : false;
-      this.getRecommendedGoodsList();
       if (this.levelType == 1) {
         this.getCategoryTwoAndGoods();
       } else {
         this.getGoodsListData();
       }
     },
-    async getRecommendedGoodsList() {
-      let vm = this;
-      let res = await ApiGetRecommendedGoodsList();
-      vm.recommendedData = res.result;
-    },
     async getCategoryOneList() {
       let res = await ApiGetCategoryOneList();
       this.categoryOneList = res.result;
@@ -312,42 +286,5 @@ export default {
     color: #999999;
   }
 }
-.section {
-  width: 100%;
-  padding: 30px 0 40px;
-  background: #f8f8f8;
 
-  &-title {
-    @include layout-box;
-    &--txt {
-      font-size: 24px;
-      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-      font-weight: bold;
-      color: #333333;
-    }
-    &--btn {
-      width: 140px;
-      cursor: pointer;
-      img {
-        width: 27px;
-        height: 27px;
-        margin-right: 5px;
-      }
-      span {
-        font-size: 18px;
-        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-        font-weight: 400;
-        color: #999999;
-      }
-    }
-  }
-  &-list {
-    @include layout-box;
-    padding-top: 40px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 232px);
-    justify-content: space-between;
-    grid-row-gap: 10px;
-  }
-}
 </style>