feat:完成秒杀详情

pages/goods/detail/_id.vue

@@ -55,10 +55,25 @@
           <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 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 &&
@@ -68,9 +83,9 @@
             >
               <span class="skill-txt">即将开始秒杀</span>
               <div class="skill-2" v-if="isToday()">
-                <span>08</span>
+                <span>{{ getSurplus.lefth }}</span>
-                <span>08</span>
+                <span>{{ getSurplus.leftm }}</span>
-                <span>08</span>
+                <span>{{ getSurplus.lefts }}</span>
               </div>
               <span class="skill-1" v-else>{{ getBeginTime() }}</span>
             </div>
@@ -191,6 +206,27 @@ export default {
     vm.detailData = res1.result;
     vm.skuData = res2.result;
     vm.recommendedData = res3.result;
+    if (
+      vm.detailData.productActivityVO.isActivity &&
+      !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: {
     /**
@@ -240,14 +276,8 @@ export default {
       leftObj["lefts"] = Math.floor((leftObj["lefttime"] / 1000) % 60); //计算秒数
       return leftObj;
     },
-    setSurplus() {
+    setSurplus(startTime, endTime) {
       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;
@@ -485,6 +515,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;