From 72b97f1813ea98eda0c5116939b9c717e8072e11 Mon Sep 17 00:00:00 2001 From: xiaoguang Date: Tue, 17 May 2022 15:43:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=A7=92=E6=9D=80?= =?UTF-8?q?=E5=95=86=E5=93=81=E5=94=AE=E7=BD=84=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/UiButton.vue | 1 + pages/seckill/index.vue | 77 ++++++++++++++++++++++++++++++++++++----- 2 files changed, 69 insertions(+), 9 deletions(-) diff --git a/components/UiButton.vue b/components/UiButton.vue index b1b823b..aae9a67 100644 --- a/components/UiButton.vue +++ b/components/UiButton.vue @@ -72,6 +72,7 @@ export default { height: 28px; padding: 0 10px; color: #FF512B; + background: #FFFFFF;; } &__yellow_panel{ background:#FF512B; diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue index 3be6f4e..836bc8d 100644 --- a/pages/seckill/index.vue +++ b/pages/seckill/index.vue @@ -50,10 +50,15 @@ @click="onJumpGoodsDetail(item.productId)" class="seckill-products-wrap" > - +
+ +
+ 已售罄 +
+

{{ item.productName }}

@@ -64,10 +69,21 @@ class="products-wrap-content__footer flex flex-middle flex-between" > - + +
@@ -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; + } } } }