Authored by yyq

cut price

<div class="timed-cut-container" {{#if bgImg}} style="background-image:url({{image2 bgImg w=750 h=460 q=85}});"{{/if}} data-skn="{{SKN}}">
<a href="{{producturl}}">
<div class="act-time">
<p class="start-time">开始时间:<span>{{beginTime}}</span></p>
<p class="end-time">结束时间:{{endTime}}</p>
<p class="start-time" data-time="{{beginTime}}">开始时间:<span>{{beginTime}}</span></p>
<p class="end-time" data-time="{{endTime}}">结束时间:{{endTime}}</p>
</div>
<div class="now-price"></div>
<div class="limit-time"></div>
<div class="now-price">¥<span></span></div>
<div class="limit-time"><p></p></div>
<div class="opt-btn"></div>
</a>
</div>
... ...
... ... @@ -341,9 +341,38 @@ function timedCutProductInit() {
if (skn) {
timedCutArr.push({
$price: $this.find('.now-price > span'),
$time: $this.find('.limit-time'),
$time: $this.find('.limit-time > p'),
$bth: $this.find('.opt-btn'),
skn: skn
startTimeStr: $this.find('.start-time').data('time'),
endTimeStr: $this.find('.end-time').data('time'),
skn: skn,
btnClass: '',
changeNowPrice: function(curPrice) {
if (this.curPrice !== curPrice) {
this.$price.text(curPrice);
this.curPrice = curPrice;
}
},
changeBtnClass: function(status) {
let className = 'btn-status' + status;
if (this.btnClass !== className) {
this.$bth.removeClass(this.btnClass);
this.$bth.addClass(className);
this.btnClass = className;
switch (+status) {
case 3:
this.$time.text('活动商品已售罄');
break;
case 4:
this.$time.text('活动已结束');
break;
default:
break;
}
}
}
});
skns.push(skn);
... ... @@ -378,9 +407,35 @@ function timedCutProductInit() {
value.plan = info.product_price_plan_list || [];
value.stockNumber = +info.stock_number;
value.startTime = value.plan[0] && value.plan[0].show_begin_time; // 活动开始时间
value.endTime = value.plan[0] && value.plan[0].show_begin_time; // 活动结束时间
if (value.startTimeStr) {
value.startTime = Date.parse(new Date(value.startTimeStr)) / 1000;
}
if (value.endTimeStr) {
value.endTime = Date.parse(new Date(value.endTimeStr)) / 1000;
}
if (!value.startTime) {
value.startTime = value.plan[0] && value.plan[0].show_begin_time; // 活动开始时间
}
if (!value.endTime) {
value.endTime = value.plan[0] && value.plan[0].show_begin_time; // 活动结束时间
}
let plan = [];
value.plan.forEach(val => {
if (+val.effect_time > +value.endTime || +val.end_time < +value.startTime) {
return;
}
plan.push(val);
});
value.curEndTime = 0; // 当前价格档结束时间
value.saleprice = info.saleprice; // 商品售价
});
let timer;
... ... @@ -391,48 +446,57 @@ function timedCutProductInit() {
timedCutArr.forEach(value => {
if (time > value.endTime) { // 【活动已结束】
if (value.btnClass !== 'btn-status4') {
value.$bth.removeClass(value.btnClass || '');
value.$bth.addClass('btn-status4');
value.$time.text('活动已结束');
}
value.changeBtnClass(4);
// 活动已结束时价格恢复售价
value.changeNowPrice(value.saleprice);
endNum++;
} else if (time >= value.startTime) { // 【活动进行中】
if (!value.stockNumber) { // 【活动进行中-售罄】
if (value.btnClass !== 'btn-status3') {
value.$bth.removeClass(value.btnClass || '');
value.$bth.addClass('btn-status3');
value.$time.text('活动商品已售罄');
}
value.changeBtnClass(3);
return;
}
let curPrice;
value.changeBtnClass(2);
if (time >= value.curEndTime) {
let curEndTime,
curPrice;
curStartTime;
value.plan.forEach(val => {
if (!curEndTime && val.end_time - time > 0) {
curEndTime = val.end_time;
curEndTime = +val.end_time;
curStartTime = +val.effect_time;
curPrice = +val.current_saleprice;
}
});
if (value.curPrice !== curPrice) {
value.$price.text(${curPrice}`);
value.curPrice = curPrice;
}
// 取不到下一档时价格恢复售价
curPrice = curPrice || value.saleprice;
value.curStartTime = curStartTime;
value.curEndTime = curEndTime;
}
value.$time.text(`距离下次降价还剩 ${convertTime(value.curEndTime - time)}`);
} else { // 【活动未开始】
if (value.btnClass !== 'btn-status1') {
value.$bth.removeClass(value.btnClass || '');
value.$bth.addClass('btn-status1');
let limitTime;
if (time >= value.curStartTime) {
limitTime = value.curEndTime - time;
} else {
// 当前降价未开始时价格恢复售价
curPrice = value.saleprice;
limitTime = value.curStartTime - time;
}
value.changeNowPrice(curPrice);
value.$time.text(`距离下次降价还剩 ${convertTime(limitTime)}`);
} else { // 【活动未开始】
value.changeBtnClass(1);
value.changeNowPrice(value.saleprice);
if (value.startTime) {
value.$time.text(`距离下次降价还剩 ${convertTime(value.startTime - time)}`);
} else {
... ...
... ... @@ -37,8 +37,15 @@
color: #fff;
text-align: center;
position: absolute;
bottom: 2%;
bottom: 3%;
left: 8.4%;
> p {
display: inline-block;
width: 100%;
line-height: 1.4;
vertical-align: middle;
}
}
.opt-btn {
... ...