秒杀活动处理

static/nativeComponents/GoodsList/GoodsItem/index.js

@@ -23,9 +23,23 @@ const componentOptions = {
     isPageHidden: false, // 页面是否处于隐藏状态
     timeData: {},
     imgFillType: "widthFix",
+    secKillTimer1: null,
+    secKillTimer2: null,
+    secRestTime: {}, // 秒杀倒计时
+    isBeginSecKill: false, // 是否开始秒杀
+    isLessTenHour: false, // 秒杀活动小于 10 小时
+    currentSecKillInfo: {}, // 当前秒杀信息
   },
   // 数据监听器
-  observers: {},
+  observers: {
+    items(val) {
+      if (val && val.secondKillActivityInfoGoodsList && !this.data.currentSecKillInfo.id) {
+        if (val.secondKillActivityInfoGoodsList.length > 0) {
+          this.getSecKillInfo(val);
+        }
+      }
+    }
+  },
   // 组件方法
   methods: {
     init() {
@@ -47,7 +61,73 @@ const componentOptions = {
       })
       log.info('datas');
     },
+    secKillText() {
+      return `${this.data.currentSecKillInfo.activityTag ? this.data.currentSecKillInfo.activityTag + ' ' : ''}${this.formatDate(this.data.currentSecKillInfo.startTime)}` 
+    },
+    // 获取当前秒杀信息
+    getSecKillInfo(val) {
+      if (val.secondKillActivityInfoGoodsList.length === 0) return;
+      const tempObj = val.secondKillActivityInfoGoodsList[0];
+      const item = val.goodsItems.find(item => item.goodsId == tempObj.goodsId);
+      tempObj.spikePrice = Number(tempObj.spikePrice).toFixed(2);
+      tempObj.originPrice = Number(item.salePrice).toFixed(2);
+      this.setData({ currentSecKillInfo: tempObj })
+      if (new Date(this.data.currentSecKillInfo.startTime) - Date.now() > 0) {
+        this.setData({ isBeginSecKill: false });
+        // 判断当前剩余时间是否小于 10 分钟
+        if (timestamp < 10 * 60 * 1000) {
+          this.calcSecKillIsBeginLoop();
+        }
+      } else {
+        this.setData({ isBeginSecKill: true });
+        this.calcSecKillIsLessTenMin();
+      }
+    },
+    // 判断秒杀活动是否开始
+    calcSecKillIsBeginLoop() {
+      clearTimeout(this.data.secKillTimer1);
+      if (this.data.isBeginSecKill) return;
+      const secKillTimer1 = setTimeout(() => {
+        if (new Date(this.data.currentSecKillInfo.startTime) - Date.now() > 0) {
+          this.setData({ isBeginSecKill: true })
+        }
+      }, 1000);
+      this.setData({ secKillTimer1 });
+    },
+    // 判断秒杀活动是否小于 10 小时
+    calcSecKillIsLessTenMin() {
+      clearTimeout(this.data.secKillTimer2);
+      if (this.data.isLessTenHour) return;
+      const secKillTimer2 = setTimeout(() => {
+        if (new Date(this.data.currentSecKillInfo.endTime) - Date.now() <= 36000000) {
+          this.setData({ isLessTenHour: true });
+          this.setData({ currentSecKillInfo: { ...this.data.currentSecKillInfo, restTime: this.getSaleTime(this.data.currentSecKillInfo.endTime) } })
+        }
+      }, 1000);
+      this.setData({ secKillTimer2 })
+    },
+    formatDate(str) {
+      if (!str) return;
+      const date = new Date(str.replace(/-/g, '/')); // 将横线替换为斜杠
+      const month = date.getMonth() + 1; // 获取月份（注意要加 1）
+      const day = date.getDate(); // 获取日期
+      const hour = date.getHours(); // 获取小时
+      const min = date.getMinutes(); // 获取分钟
 
+      return `${month}月${day}日 ${hour}:${min.toString().padStart(2, '0')}开始`;
+    },
+    onSecRestTimeChange(e) {
+      const detail = e.detail;
+      detail.hours = detail.hours.toString().padStart(2, '0');
+      detail.minutes = detail.minutes.toString().padStart(2, '0');
+      detail.seconds = detail.seconds.toString().padStart(2, '0');
+      this.setData({ secRestTime: detail });
+    },
+    // 秒杀结束
+    handleSecFinish() {
+      this.setData({ isBeginSecKill: false });
+      this.setData({ items: { ...this.data.items, secondKillActivityInfoGoodsList: null } })
+    },
     getSaleTime(val) {
       return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
     },

static/nativeComponents/GoodsList/GoodsItem/index.wxml

@@ -35,6 +35,27 @@
 			 wx:if="{{items!=null}}"
 			 style="padding:{{datas.componentData.imgSize}}"
 			>
+				 <!-- 秒杀活动 -->
+        <block wx:if="{{items && items.secondKillActivityInfoGoodsList}}">
+          <view class="secKillBanner" style="border-radius:{{datas.componentData.borderRadius*2}}rpx 0 {{datas.componentData.borderRadius*2}}rpx 0">
+            <block wx:if="{{!isBeginSecKill}}">{{ secKillText || "" }}</block>
+            <block wx:else>
+              <block wx:if="{{!isLessTenHour}}">正在抢购中</block>
+              <block wx:else>
+                <van-count-down
+									use-slot
+                  time="{{currentSecKillInfo.restTime}}"
+									bind:finish="handleSecFinish"
+                  bind:change="onSecRestTimeChange"
+                >
+									<view style="color: #fff;font-size: 24rpx;">
+										距结束还剩 {{secRestTime.hours}}:{{secRestTime.minutes}}:{{secRestTime.seconds}}
+									</view>
+                </van-count-down>
+              </block>
+            </block>
+          </view>
+        </block>
 				<!-- 开启售卖 -->
 				<view class="saleWay" wx:if="{{items.saleWay==2 && items.getSaleTime>0 && datas.componentData.style!='heap'}}">
 					<view class="saleWayBg"></view>
@@ -136,11 +157,23 @@
 			<!-- 底部 -->
 			<view class="bottom" wx:if="{{datas.componentData['goodsType'] !=1}}">
 				<!-- 价格 -->
-				<view class="priceItem flex">
+				<view class="priceItem flex" style="flex-wrap:{{items && items.secondKillActivityInfoGoodsList ? 'wrap' : 'nowrap'}}">
+					<!-- 秒杀展示 -->
+          <block wx:if="{{items && items.secondKillActivityInfoGoodsList}}">
+            <view class="flex" style="margin: 12rpx 0 6rpx;align-items: center;width: 100%;">
+              <view style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;">
+                ￥{{ currentSecKillInfo.spikePrice }}
+              </view>
+              <view class="secKillTag">秒杀价</view>
+            </view>
+            <view style="color: #999;font-size: 24rpx;margin-bottom: 6rpx;">
+              ￥{{ currentSecKillInfo.originPrice }}
+            </view>
+          </block>
 					<view
 					 class="price flex"
 					 style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;"
-					 wx:if="{{datas.componentData['priceShow']}}"
+					 wx:elif="{{datas.componentData['priceShow']}}"
 					>
 						<text>￥{{items!=null ? items['minPrice']:0}}</text>
 						<text style="font-size:24rpx;color:#999;text-decoration:line-through;" wx:if="{{items!=null&&datas.componentData['priceMarking']&&items['minGoodsSuggestedRetailPrice']&&(items['minPrice']-0<items['minGoodsSuggestedRetailPrice']-0)&&datas.componentData['columnNum']<3}}">￥{{items['minGoodsSuggestedRetailPrice']}}</text>

static/nativeComponents/GoodsList/GoodsItem/index.wxss

@@ -81,6 +81,13 @@ align-items: flex-start;
 .maxHeight{
   height: 48vw!important;
 }
+.goodsPicture .secKillBanner {
+  position: absolute;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  background: linear-gradient(84.33deg, #FE1F4C 10.5%, #FE3D1C 41.53%, #FE140D 71.52%, #FF673E 97.28%);
+}
 .goodsPicture .saleWay{
   position: absolute;
   bottom: 0;
@@ -309,6 +316,16 @@ align-items: flex-start;
   right: 50rpx;
   bottom: 0;
 }
+.secKillTag {
+  display: inline-block;
+  color: #fff;
+  padding: 2px 6px;
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  border-radius: 12px;
+  background: linear-gradient(84.33deg, #FE1F4C 10.5%, #FE3D1C 41.53%, #FE140D 71.52%, #FF673E 97.28%);
+}
 .showCommission {
   width: auto;
   display: inline-block;