feat:完成为你竞选

components/UiChosen.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>

layouts/module/header/index.vue

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

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"
@@ -56,9 +56,24 @@
           {{ detailData.name }}
         </p>
         <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>
+            <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>08</span>
+                <span>08</span>
+                <span>08</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 +88,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"
@@ -101,6 +116,10 @@
             </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_panel" @click="buyNow">立即购买</UiButton>
@@ -108,7 +127,11 @@
       </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
@@ -119,22 +142,32 @@
       </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>
+    <UiChosen v-else></UiChosen>
   </div>
 </template>
 <script>
 import UiMoney from "@/components/UiMoney.vue";
 import UiButton from "@/components/UiButton.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
+import UiChosen from "@/components/UiChosen.vue";
 import {
   ApiGetGoodsDetail,
   ApiGetGoodsSkus,
   ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 export default {
-  componetns: { UiMoney, UiButton, UiGoodsItem },
+  componetns: { UiMoney, UiButton, UiGoodsItem, UiChosen },
   data() {
     return {
       curBuyNum: 1,
@@ -142,8 +175,11 @@ export default {
       recommendedData: [],
       skuData: {},
       detailData: {
+        isEnable: false,
         pictureList: [],
+        productActivityVO: {},
       },
+      surplus: {},
     };
   },
   async created() {
@@ -155,9 +191,6 @@ export default {
     vm.detailData = res1.result;
     vm.skuData = res2.result;
     vm.recommendedData = res3.result;
-    console.log(`res1`, res1.result);
-    console.log(`res2`, res2.result);
-    console.log(`res3`, res3.result);
   },
   computed: {
     /**
@@ -191,6 +224,68 @@ 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() {
+      let vm = this;
+      let startTime = new Date(
+        vm.detailData.productActivityVO.currentTime
+      ).getTime();
+      let endTime = new Date(
+        vm.detailData.productActivityVO.activityEndTime
+      ).getTime();
+      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;
     },
@@ -417,6 +512,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;
@@ -460,6 +583,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 {
@@ -476,6 +620,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;
@@ -490,6 +649,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

@@ -70,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">
+    <UiChosen></UiChosen>
-      <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>
@@ -94,12 +78,12 @@ import {
   ApiGetGoodsList,
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
-  ApiGetRecommendedGoodsList,
 } from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
+import UiChosen from '@/components/UiChosen.vue';
 export default {
-  components: { Sort, UiGoodsItem },
+  components: { Sort, UiGoodsItem,UiChosen },
   data() {
     return {
       navActive: 0,
@@ -109,7 +93,6 @@ export default {
       // 0:综合,1:desc,2:asc,3:上新
       sortType: 0,
       categoryOneList: [],
-      recommendedData: [],
       levelType: "",
       levelId: "",
       params: {
@@ -130,18 +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.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;
@@ -309,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>