Skip to content

M
mayi-mp-shop
Commit f774848f by 李嘉林
Options

秒杀样式重构

parent b5a09725
Showing with 77 additions and 4 deletions
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
......@@ -462,3 +462,41 @@ margin-right: 8rpx;
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, //是否查询多商户 //商城使用
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment