秒杀样式重构

static/nativeComponents/GoodsList/GoodsItem/index.js

@@ -28,6 +28,8 @@ const componentOptions = {
     secRestTime: {}, // 秒杀倒计时
     isBeginSecKill: false, // 是否开始秒杀
     isLessTenHour: false, // 秒杀活动小于 10 小时
+    isMoreThanOneDay: false, // 秒杀活动大于 1 天
+    moreThanOneDay: 0, // 秒杀活动天数
     currentSecKillInfo: {}, // 当前秒杀信息
     priceTextStyle: 'flex-start',
     cutPrice: "", // 砍价价格
@@ -102,6 +104,7 @@ const componentOptions = {
       this.setData({ currentSecKillInfo: tempObj })
       console.log('currentSecKillInfo', this.data.currentSecKillInfo);
       const timestamp = new Date(this.data.currentSecKillInfo.startTime) - Date.now()
+      this.setData({ currentSecKillInfo: { ...this.data.currentSecKillInfo, restTime: this.getSaleTime(this.data.currentSecKillInfo.endTime) } })
       if (timestamp > 0) {
         this.setData({ isBeginSecKill: false });
         // 判断当前剩余时间是否小于 10 分钟
@@ -111,6 +114,7 @@ const componentOptions = {
       } else {
         this.setData({ isBeginSecKill: true });
         this.calcSecKillIsLessTenMin();
+        this.calcMoreThanOneDay();
       }
     },
     // 判断秒杀活动是否开始
@@ -136,6 +140,12 @@ const componentOptions = {
       }, 1000);
       this.setData({ secKillTimer2 })
     },
+    calcMoreThanOneDay() {
+      if (new Date(this.data.currentSecKillInfo.endTime) - Date.now() > 86400000) {
+        this.setData({ isMoreThanOneDay: true });
+        this.setData({ moreThanOneDay: Math.floor((new Date(this.data.currentSecKillInfo.endTime) - Date.now()) / 86400000) })
+      }
+    },
     formatDate(str) {
       if (!str) return;
       const date = new Date(str.replace(/-/g, '/')); // 将横线替换为斜杠

static/nativeComponents/GoodsList/GoodsItem/index.wxml

@@ -26,7 +26,7 @@
 			 style="padding:{{datas.componentData.imgSize}}"
 			>
 				 <!-- 秒杀活动 -->
-        <block wx:if="{{items && items.secondKillActivityInfoGoodsList && !(items.cutActivityGoodsList && items.cutActivityGoodsList.length != 0 && items.cutActivityGoodsList[0].status == 2)}}">
+        <block wx:if="{{ false && items && items.secondKillActivityInfoGoodsList && !(items.cutActivityGoodsList && items.cutActivityGoodsList.length != 0 && items.cutActivityGoodsList[0].status == 2)}}">
           <view class="secKillBanner" style="border-radius:{{datas.componentData.borderRadius*2}}rpx 0 {{datas.componentData.borderRadius*2}}rpx 0">
 						<image class="seckill-image" src="../../../svg/seckill.svg"></image>
             <block wx:if="{{!isBeginSecKill}}">{{ currentSecKillInfo.formatTime || "" }}</block>
@@ -173,7 +173,7 @@
               <view style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;">
                 ￥{{ currentSecKillInfo.spikePrice }}
               </view>
-              <view class="secKillTag">秒杀价</view>
+              <!-- <view class="secKillTag">秒杀价</view> -->
             </view>
             <view style="color: #999;font-size: 24rpx;margin-bottom: 6rpx;">
               ￥{{ currentSecKillInfo.originPrice }}
@@ -257,6 +257,30 @@
 					</view>
 				</view>
 			</block>
+			<!-- 秒杀价新样式 -->
+			<block wx:if="{{items && items.depositInflationInfoList && items.depositInflationInfoList.length != 0 && items.depositInflationInfoList[0].status == 1}}"></block>
+			<block wx:elif="{{items && items.cutActivityGoodsList && items.cutActivityGoodsList.length != 0 && items.cutActivityGoodsList[0].status == 2}}"></block>
+			<block wx:elif="{{items && items.secondKillActivityInfoGoodsList}}">
+				<view class="newSecKill {{'newSecKill--' + datas.componentData.columnNum}}">
+					<view class="newSecKill__tag">秒杀价</view>
+					<view class="newSecKill__status">
+						<text wx:if="{{isMoreThanOneDay}}">仅剩{{ moreThanOneDay }}天</text>
+						<view wx:else>
+							<text wx:if="{{datas.componentData.columnNum == 1}}">距结束还剩</text>
+							<van-count-down
+								use-slot
+								time="{{currentSecKillInfo.restTime}}"
+								bind:finish="handleSecFinish"
+								bind:change="onSecRestTimeChange"
+							>
+								<view style="color: #cb383b;font-size: 12px;line-height: 28rpx;">
+									 {{secRestTime.hours}}:{{secRestTime.minutes}}:{{secRestTime.seconds}}
+								</view>
+							</van-count-down>
+						</view>
+					</view>
+				</view>
+			</block>
 		<!-- 商户入口二 -->
 		<view
 		 class="merchantsEntrance flex"

static/nativeComponents/GoodsList/GoodsItem/index.wxss

@@ -461,4 +461,42 @@ margin-right: 8rpx;
   border: 2rpx solid;
   border-radius: 8rpx;
   color: #C72A30;
+}
+
+.newSecKill{
+  display: flex;
+  background: #fdecee;
+  height: 52rpx;
+  border-radius: 52rpx;
+  padding: 4rpx;
+  gap: 20rpx;
+  align-items: center;
+  margin-top: 8rpx;
+}
+.newSecKill .newSecKill__tag{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(84.33deg, #FE1F4C 10.5%, #FE3D1C 41.53%, #FE140D 71.52%, #FF673E 97.28%);
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  height: 22px;
+  border-radius: 22px;
+  flex-shrink: 0;
+}
+.newSecKill .newSecKill__status{
+  flex-shrink: 0;
+  color: #cb383b;
+  font-size: 11px;
+  font-weight: 500;
+}
+.newSecKill--3{
+  gap: 4rpx;
+}
+.newSecKill--3 .newSecKill__tag{
+  font-size: 20rpx;
+}
+.newSecKill--3 .newSecKill__status{
+  font-size: 20rpx;
 }
\ No newline at end of file

static/nativeComponents/GoodsList/index.js

@@ -296,7 +296,7 @@ const componentOptions = {
           whetherQueryCollectCount: true,
           whetherUseVirtualSalesQty: true,
           whetherUseVirtualCollectCount: true,
-          whetherFindDistributionCommission: this.data.datas.componentData.whetherFindDistributionCommission,
+          whetherFindDistributionCommission: this.data.datas.componentData.whetherFindDistributionCommission ? 1 : 0,
           whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice
             ? 1
             : 0,
@@ -408,7 +408,7 @@ const componentOptions = {
         whetherQueryCollectCount: true, //查询收藏数
         whetherUseVirtualSalesQty: true, //是否使用虚拟销售数量
         whetherUseVirtualCollectCount: true, //是否使用虚拟收藏人数
-        whetherFindDistributionCommission: whetherFindDistributionCommission, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
+        whetherFindDistributionCommission: whetherFindDistributionCommission ? 1 : 0, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
         whetherFindRecommendedCardFlag: vipPrice ? 1 : 0, //是否查询会员价  1是  0否
         whetherShowGoodsDefaultTagFlag: marketingTag ? 1 : 0, //是否展示营销标签  1是  0否
         whetherFindMultiShopFlag: 1, //是否查询多商户   //商城使用