feat: 添加秒杀商品售罄状态

components/UiButton.vue

@@ -72,6 +72,7 @@ export default {
 		height: 28px;
 		padding: 0 10px;
 		color: #FF512B;
+		background: #FFFFFF;;
 	}
 	&__yellow_panel{
 		background:#FF512B;

pages/seckill/index.vue

@@ -50,10 +50,15 @@
           @click="onJumpGoodsDetail(item.productId)"
           class="seckill-products-wrap"
         >
-          <img
-            :src="item.productMainPicture"
-            class="seckill-products-wrap__cover"
-          />
+          <div class="seckill-products-wrap__cover">
+            <img :src="item.productMainPicture" />
+            <div
+              v-if="item.percentage === 100"
+              class="products-wrap-cover__sold flex flex-middle flex-center"
+            >
+              已售罄
+            </div>
+          </div>
           <div class="seckill-products-wrap__content">
             <p class="products-wrap-content__title">{{ item.productName }}</p>
             <div class="products-wrap-content__price">
@@ -64,10 +69,21 @@
               class="products-wrap-content__footer flex flex-middle flex-between"
             >
               <div class="wrap-content-footer__stock">
-                <el-progress :percentage="40" :show-text="false"></el-progress>
+                <el-progress
+                  :percentage="item.percentage"
+                  :show-text="false"
+                ></el-progress>
                 <p>仅剩{{ item.stock }}件</p>
               </div>
-              <div class="wrap-content-footer__btn">立即抢购</div>
+              <div
+                v-if="item.percentage === 100"
+                class="wrap-content-footer__btn wrap-content-footer__btn--gray"
+              >
+                已售罄
+              </div>
+              <div v-else class="wrap-content-footer__btn">
+                {{ goodsBtnText }}
+              </div>
             </div>
           </div>
         </div>
@@ -122,6 +138,7 @@ export default {
       seckillTime: 0, // 秒杀时间
       seckillEndVisible: false, //秒杀结束弹窗
       seckillStatus: SECKILL_STATUS.NOT_START, // 当前秒杀时间段状态
+      inProgressId: 0, // 秒杀中的活动id
     };
   },
   computed: {
@@ -136,6 +153,11 @@ export default {
         second: second < 10 ? `0${second}` : `${second}`,
       };
     },
+    goodsBtnText() {
+      return this.query.activityTimeId === this.inProgressId
+        ? "立即开抢"
+        : "即将开抢";
+    },
   },
   watch: {
     // 切换秒杀时间段
@@ -186,10 +208,16 @@ export default {
       if (result && result.length > 0) {
         this.tabList = result;
         const inProgressItem = result.find((item) => item.isInProgress);
-        this.query.activityTimeId =
-          (inProgressItem && inProgressItem.id) || result[0].id;
+        if (inProgressItem) {
+          this.inProgressId = inProgressItem.id;
+          this.query.activityTimeId = inProgressItem.id;
+        } else {
+          this.query.activityTimeId = result[0].id;
+        }
         this.getGoodsList();
+        return;
       }
+      this.seckillEndVisible = true;
     },
     async getGoodsList() {
       this.loading = true;
@@ -197,7 +225,17 @@ export default {
       this.loading = false;
       if (result) {
         this.total = result.total;
-        this.goodsList = result.records;
+        this.goodsList = result.records.map((item) => {
+          // 售出数量
+          const saleNumber = item.number - item.stock;
+          return {
+            ...item,
+            percentage:
+              saleNumber === 0
+                ? 0
+                : (saleNumber / item.number).toFixed(2) * 100,
+          };
+        });
       }
     },
 
@@ -346,8 +384,25 @@ export default {
         box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
       }
       .seckill-products-wrap__cover {
+        position: relative;
         width: 100%;
         height: 288px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .products-wrap-cover__sold {
+          position: absolute;
+          width: 110px;
+          height: 110px;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          background: rgba(0, 0, 0, 0.5);
+          font-size: 24px;
+          color: #ffffff;
+          border-radius: 50%;
+        }
       }
       .seckill-products-wrap__content {
         padding: 20px 16px;
@@ -387,6 +442,10 @@ export default {
             background: #ff512b;
             font-size: 14px;
             color: #ffffff;
+            &--gray {
+              color: #999999;
+              background: #eeeeee;
+            }
           }
         }
       }