fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit 11d7b11d55c348d1ddb3cac256610f203f5ad9c0 1 parent 6f609bc3

秒杀详情页

Inline Side-by-side
Showing 5 changed files with 173 additions and 63 deletions
... ... @@ -993,8 +993,8 @@ const _getSeckillData = (productSkn) => {
data = {
'productSkn': 512581470,
'activityId': 4,
'startTime': 1474192655,
'endTime': 1478758971,
'startTime': 1375192655,
'endTime': 1475758971,
'formatSecKillPrice': '¥50.00',
'secKillPrice': 50,
'status': 1,
... ... @@ -1071,13 +1071,27 @@ let getProductData = (data) => {
Object.assign(finalResult.feedbacks, info[2]);
Object.assign(finalResult, {// 判断秒杀假数据
isSecKil: {
notStart: true,
startIng: false,
end: false,
startTime: 111,
secKillTime: 5600
// 秒杀详情页
let nowDate = Date.parse(new Date()) / 1000;
let notStart = nowDate < info[5].startTime ? true : false;
let startIng = info[5].startTime < nowDate && info[5].endTime > nowDate ? true : false;
let end = nowDate > info[5].endTime ? true : false;
Object.assign(finalResult, {
isSecKill: {
notStart: notStart,
startIng: startIng,
end: startIng,
startTime: info[5].startTime,
endTime: info[5].endTime,
secKillPrice: info[5].formatSecKillPrice,
noneLeft: false
}
});
... ...
... ... @@ -38,8 +38,8 @@
<div class="price-date">
{{# goodsPrice}}
<div class="goods-price">
{{#if isSecKil}}
<h1 class="current-price">{{secKillPrice}}</h1>
{{#if ../isSecKill}}
<h1 class="current-price">{{../isSecKill/secKillPrice}}</h1>
{{else}}
<h1 class="current-price">{{currentPrice}}</h1>
{{/if}}
... ... @@ -67,18 +67,24 @@
<h1 >{{periodOfMarket}}</h1>
</div>
{{/if}}
{{#if isSecKil/notStart}}
<div class="seckill-time">
{{#isSecKill}}
{{#if startIng}}
<div class="seckill-time seckill-time-border">
<span>距结束 </span>
<span>{{startTime}}</span>
<span class="end-time">
<i class="tick hour">00</i>:
<i class="tick minute">00</i>:
<i class="tick second">00</i>
</span>
</div>
{{/if}}
{{#if isSecKil}}
<div class="seckill-time">
{{#if notStart}}
<div class="seckill-time notStart">
<span class="seckill-time-pic">秒杀预告</span>
<span>8月27日 12:00</span>
<span class="seckill-time-c">月日</span>
</div>
{{/if}}
{{/isSecKill}}
</div>
{{#if studentPrice}}
... ... @@ -174,7 +180,8 @@
<div id="productDesc"> </div>
{{> detail/recommend-for-you}}
{{> cart/chose-panel}}
{{# is_secKil}}
{{# isSecKill}}
{{# notStart}}
<div class="seckill-count">
<div class="seckill-count-bg"></div>
<div class="seckill-count-num">距开抢
... ... @@ -182,42 +189,52 @@
<i class="tick minute">00</i>:
<i class="tick second">00</i>
</div>
<input type="hidden" class="secKill-date" value="{{secKillTime}}">
</div>
{{/is_secKil}}
{{/notStart}}
{{/isSecKill}}
{{#cartInfo}}
<div class="cart-bar">
<a href="{{cartUrl}}" class="num-incart iconfont"><span class="num-tag hide"></span>&#xe62c;</a>
{{#if ../isSecKill/noneLeft}}
<a href="javascript:;" class="sold-out">已售罄</a>
{{else if ../isSecKill/startIng}}
<a href="javascript:;" id="addtoCart" class="addto-cart">立即购买</a>
{{else if ../isSecKill/notStart}}
<a href="javascript:;" class="sold-out">即将开抢</a>
{{else}}
{{#if addToCartUrl}}
<a id="addtoCart" href="javascript:;" class="addto-cart">{{#if ../tickets}}立即购买{{else}}加入购物车{{/if}}</a>
{{/if}}
{{#if addToCartUrl}}
<a id="addtoCart" href="javascript:;" class="addto-cart">{{#if ../tickets}}立即购买{{else}}加入购物车{{/if}}</a>
{{/if}}
{{#if soldOut}}
<a href="javascript:;" class="sold-out">已售罄</a>
{{/if}}
{{#if soldOut}}
<a href="javascript:;" class="sold-out">已售罄</a>
{{/if}}
{{#if notForSale}}
<a href="javascript:;" class="sold-out">非卖品</a>
{{/if}}
{{#if notForSale}}
<a href="javascript:;" class="sold-out">非卖品</a>
{{/if}}
{{#if limitNotForSale}}
<a href="javascript:;" class="sold-out limit">即将发售</a>
{{/if}}
{{#if limitNotForSale}}
<a href="javascript:;" class="sold-out limit">即将发售</a>
{{/if}}
{{#if canBuyLimit}}
<a href="javascript:;" id="addtoCart" class="addto-cart">立即购买</a>
{{/if}}
{{#if canBuyLimit}}
<a href="javascript:;" id="addtoCart" class="addto-cart">立即购买</a>
{{/if}}
{{#if noLimitCode}}
<a href="javascript:;" class="sold-out limit">立即购买</a>
{{/if}}
{{#if noLimitCode}}
<a href="javascript:;" class="sold-out limit">立即购买</a>
{{/if}}
<input type="hidden" id="limitCodeUrl" name="limitCodeUrl" value="{{limitCodeUrl}}">
<input type="hidden" id="limitProductPay" name="limitProductPay" value="{{limitProductPay}}">
{{#limitProductCode}}
<input type="hidden" id="limitProductCode" name="limitProductCode" value="{{.}}">
{{/limitProductCode}}
<input type="hidden" id="limitCodeUrl" name="limitCodeUrl" value="{{limitCodeUrl}}">
<input type="hidden" id="limitProductPay" name="limitProductPay" value="{{limitProductPay}}">
{{#limitProductCode}}
<input type="hidden" id="limitProductCode" name="limitProductCode" value="{{.}}">
{{/limitProductCode}}
{{/if}}
<a href="javascript:;" id="likeBtn" class="favorite iconfont {{#isCollect}}liked{{/isCollect}}">&#xe605;</a>
</div>
{{/cartInfo}}
... ... @@ -249,4 +266,8 @@
{{/if}}
</div>
{{# isSecKill}}
<input type="hidden" class="start-time-text" value={{startTime}} />
<input type="hidden" class="end-time-text" value={{endTime}} />
{{/isSecKill}}
{{/ result}}
... ...
... ... @@ -14,6 +14,16 @@
<span class="market-price">{{price}}</span>
{{/if}}
</p>
{{#if ../isSecKill/startIng}}
<div class="seckill-time seckill-time-border seckill-chose">
<span>距结束 </span>
<span class="end-time">
<i class="tick hour">00</i>:
<i class="tick minute">00</i>:
<i class="tick second">00</i>
</span>
</div>
{{/if}}
</div>
</div>
<div class="chose-items">
... ... @@ -45,13 +55,24 @@
<div class="num">
<span>数量</span>
<div class="clearfix">
<a class="btn btn-minus" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe625;</span>
</a>
<input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">
<a class="btn btn-plus" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe624;</span>
</a>
{{#if ../isSecKill/startIng}}
<a class="btn" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe625;</span>
</a>
<input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">
<a class="btn" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe624;</span>
</a>
<span class="limit-num-text">限购1件</span>
{{else}}
<a class="btn btn-minus" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe625;</span>
</a>
<input id="good-num" class="good-num disabled" type="text" value="1" disabled="true">
<a class="btn btn-plus" href="javascript:void(0);">
<span class="iconfont {{#if promotionId}}disabled{{/if}}">&#xe624;</span>
</a>
{{/if}}
</div>
<span class="left-num"></span>
<input id="left-num" type="hidden" value="0">
... ... @@ -61,7 +82,17 @@
</div>
</div>
<div class="btn-wrap">
<button id="chose-btn-sure" class="btn btn-sure">{{#if ../tickets}}立即购买{{else}}加入购物车{{/if}}</button>
<button id="chose-btn-sure" class="btn btn-sure">
{{#if ../isSecKill/startIng}}
立即抢购
{{else}}
{{#if ../tickets}}
立即购买
{{else}}
加入购物车
{{/if}}
{{/if}}
</button>
</div>
</div>
</div>
... ...
... ... @@ -8,18 +8,25 @@ var $ = require('yoho-jquery'),
tip = require('../plugin/tip'),
seckillObj = {};
require('../common');
var offsetTime = $('.seckill-count').find('.secKill-date').val();
var timeObj = '';
var nowTime = Date.parse(new Date()) / 1000;
var startTime = $('.start-time-text').val();
var endTime = $('.end-time-text').val();
if (startTime > nowTime) {
offsetTime = startTime - nowTime;
timeObj = $('.seckill-count-num');
} else if (nowTime > startTime && nowTime < endTime) {
offsetTime = endTime - nowTime;
timeObj = $('.end-time');
}
seckillObj = {
el: {
// doms
$navUl: $('.nav-ul'),
$navList: $('.nav-list'),
// 变量
times: $('.nav-ul>li').length,
startX: 0,
timeWidth: 0,
focusTimeWidth: 0,
iScroll: null,
currentTick: null
},
... ... @@ -37,7 +44,7 @@ seckillObj = {
$(elem).find('.tick.minute').text(minute < 0 ? '00' : (minute < 10 ? ('0' + minute) : minute));
$(elem).find('.tick.second').text(second < 0 ? '00' : (second < 10 ? ('0' + second) : second));
if (offsetTime <= 0) { // 结束倒计时刷新状态
that.refreshList(elem);
// that.refreshList(elem);
} else {
$el.currentTick = setTimeout(function() {
that.startTick(elem, --offsetTime);
... ... @@ -48,4 +55,16 @@ seckillObj = {
}
};
seckillObj.startTick($('.seckill-count-num'), offsetTime);
seckillObj.startTick(timeObj, offsetTime);
$(
function() {
var dateText = Number($('.start-time-text').val() * 1000);
var newDate = new Date(dateText);
var newMonth = newDate.getMonth() + 1;
var newDay = newDate.getDate();
var newHour = newDate.getHours();
var newMinus = newDate.getMinutes();
$('.notStart').find('.seckill-time-c').text(newMonth + '月' + newDay + '日' + newHour + ':' + newMinus);
}
);
... ...
... ... @@ -391,6 +391,31 @@ $basicBtnC: #eb0313;
}
}
.seckill-chose {
position: absolute;
bottom: 0px;
right: 0px;
}
.limit-num-text {
color: #d0021b;
font-size: 30px;
line-height: 80px;
text-align: right;
padding-left: 50px;
}
.seckill-time-border {
border: solid 1px #d0021b;
margin-top: 26px;
border-radius: 19px;
padding: 0 10px;
span {
line-height: 34px;
}
}
.vip-level {
box-sizing: box-border;
padding-right: 28px;
... ...