Authored by 黄涛

add big

... ... @@ -7,49 +7,61 @@
const api = global.yoho.API;
const getProductBannerAsync = (pid) => {
return api.get('', {
method: 'web.productBanner.data',
product_id: pid
});
return api.get(
'', {
method: 'web.productBanner.data',
product_id: pid
}
);
};
const sizeInfoAsync = skn => {
return api.get('', {
method: 'h5.product.intro',
productskn: skn
});
return api.get(
'', {
method: 'h5.product.intro',
productskn: skn
}
);
};
// 退换支持
const isSupportReturnedSale = skn => {
return api.get('', {
method: 'app.product.refundExchange',
product_skn: skn
});
return api.get(
'', {
method: 'app.product.refundExchange',
product_skn: skn
}
);
};
const getProductComfortAsync = pid => {
return api.get('', {
method: 'web.productComfort.data',
product_id: pid
});
return api.get(
'', {
method: 'web.productComfort.data',
product_id: pid
}
);
};
const getProductModelCardAsync = pid => {
return api.get('', {
method: 'web.productModelcard.list',
product_id: pid
});
return api.get(
'', {
method: 'web.productModelcard.list',
product_id: pid
}
);
};
const getProductModelTryAsync = skn => {
return api.get('', {
method: 'web.productModelTry.data',
product_skn: skn
});
return api.get(
'', {
method: 'web.productModelTry.data',
product_skn: skn
}
);
};
/**
... ... @@ -104,88 +116,107 @@ const getLimitedProductStatusAsync = (code, uid, skn) => {
};
const getCouponAsync = (bid, skn, uid) => {
//let params = {
// method: 'app.coupons.queryProdPageCoupons',
// brandId: bid,
// skn: skn
//};
//
//if (uid) {
// params.uid = uid;
//}
//
//return api.get('', params);
return Promise.resolve({
"alg": "SALT_MD5",
"code": 200,
"data": [
{
"couponName": "满¥199减10",
"amount": 10,
"acquireStatus": 3,
"createTime": 1476358043,
"startTime": 1476633600,
"lifeTime": "2016.10.17-2016.10.28",
"endTime": 1477584000,
"couponId": 14200
},
{
"couponName": "满¥199减10",
"amount": 22,
"acquireStatus": 3,
"createTime": 1475152374,
"startTime": 1474992000,
"lifeTime": "2016.09.28-2016.11.17",
"endTime": 1479312000,
"couponId": 14144
// let params = {
// method: 'app.coupons.queryProdPageCoupons',
// brandId: bid,
// skn: skn
// };
//
// if (uid) {
// params.uid = uid;
// }
//
// return api.get('', params);
return Promise.resolve(
{
'alg': 'SALT_MD5',
'code': 200,
'data': {
newList: {
title: '可领取的券',
body: [
{
'couponName': '满¥199减10',
'amount': 10,
'acquireStatus': 1,
'createTime': 1476358043,
'startTime': 1476633600,
'lifeTime': '2016.10.17-2016.10.28',
'endTime': 1477584000,
'couponId': 14200,
'rule4ShortName': '满¥100减10元'
},
{
'couponName': '满¥199减10',
'amount': 22,
'acquireStatus': 1,
'createTime': 1475152374,
'startTime': 1474992000,
'lifeTime': '2016.09.28-2016.11.17',
'endTime': 1479312000,
'couponId': 14144,
'rule4ShortName': '满¥100减10元'
},
{
'couponName': '满¥199减10',
'amount': 15,
'acquireStatus': 1,
'createTime': 1476358258,
'startTime': 1476115200,
'lifeTime': '2016.10.11-2016.11.18',
'endTime': 1479398400,
'couponId': 14202,
'rule4ShortName': '满¥100减10元'
}
]
},
{
"couponName": "满¥199减10",
"amount": 15,
"acquireStatus": 3,
"createTime": 1476358258,
"startTime": 1476115200,
"lifeTime": "2016.10.11-2016.11.18",
"endTime": 1479398400,
"couponId": 14202
},
{
"couponName": "满¥199减10",
"amount": 10,
"acquireStatus": 3,
"createTime": 1476358043,
"startTime": 1476633600,
"lifeTime": "2016.10.17-2016.10.28",
"endTime": 1477584000,
"couponId": 14200
},
{
"couponName": "满¥199减10",
"amount": 22,
"acquireStatus": 3,
"createTime": 1475152374,
"startTime": 1474992000,
"lifeTime": "2016.09.28-2016.11.17",
"endTime": 1479312000,
"couponId": 14144
},
{
"couponName": "满¥199减10",
"amount": 15,
"acquireStatus": 3,
"createTime": 1476358258,
"startTime": 1476115200,
"lifeTime": "2016.10.11-2016.11.18",
"endTime": 1479398400,
"couponId": 14202
oldList: {
title: '已领取的券',
body: [
{
'couponName': '满¥199减10',
'amount': 10,
'acquireStatus': 3,
'createTime': 1476358043,
'startTime': 1476633600,
'lifeTime': '2016.10.17-2016.10.28',
'endTime': 1477584000,
'couponId': 14200,
'rule4ShortName': '满¥100减10元'
},
{
'couponName': '满¥199减10',
'amount': 22,
'acquireStatus': 3,
'createTime': 1475152374,
'startTime': 1474992000,
'lifeTime': '2016.09.28-2016.11.17',
'endTime': 1479312000,
'couponId': 14144,
'rule4ShortName': '满¥100减10元'
},
{
'couponName': '满¥199减10',
'amount': 15,
'acquireStatus': 3,
'createTime': 1476358258,
'startTime': 1476115200,
'lifeTime': '2016.10.11-2016.11.18',
'endTime': 1479398400,
'couponId': 14202,
'rule4ShortName': '满¥100减10元'
}
]
}
],
"md5": "fe8f6e48b14c8f0b5044cb73d7c79900",
"message": "操作成功"
},
'md5': 'fe8f6e48b14c8f0b5044cb73d7c79900',
'message': '操作成功'
}
);
};
)
;
}
;
module.exports = {
getProductBannerAsync,
... ...
... ... @@ -1033,12 +1033,14 @@ const _getCoupon = (coupons) => {
return false;
}
let couponList = _.get(coupons, 'data', []);
// let couponList = _.get(coupons, 'data', []);
let pickProp = Fn.pick(['couponName', 'amount', 'couponId', 'acquireStatus']);
let encodeId = Fn.update('couponId', (cid) => crypto.encryption(null, cid + ''));
// let pickProp = Fn.pick(['couponName', 'amount', 'couponId', 'acquireStatus','rule4ShortName']);
// let encodeId = Fn.update('couponId', (cid) => crypto.encryption(null, cid + ''));
return Fn.map(Fn.pipe(pickProp, encodeId))(couponList);
// return Fn.map(Fn.pipe(pickProp, encodeId))(couponList);
return coupons.data;
};
/**
... ...
{{#if body}}
<div class="coupon-list">
<div class="header">
<div class="divide-line"></div>
<div class="title">{{title}}</div>
</div>
<div class="body">
{{#each body}}
<div class="item-bg">
<div class="pre">优惠券</div>
<div class="desc">
<div class="amount">¥&nbsp;{{amount}}</div>
<div class="rule">{{rule4ShortName}}</div>
</div>
<div class="status" data-id="{{couponId}}" data-domain="{{domain}}">
{{#if_cond acquireStatus '==' 1}}
<div class="coupon-status">点击</div>
<div class="coupon-go">领取</div>
{{else}}
<div class="coupon-status">已领取</div>
<div class="coupon-go"><a class="btn">去使用</a></div>
{{/if_cond}}
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
... ...
<div class="small-coupon-list">
<ul>
{{#each coupon}}
{{#if coupon}}
<div class="small-coupon-list">
<ul>
{{#each coupon}}
{{#if @first}}
<li>
<a class="left small-pre">&nbsp;&nbsp;&nbsp;&nbsp;券:</a>
</li>
{{/if}}
{{#if @first}}
<li>
<a class="left small-pre">&nbsp;&nbsp;&nbsp;&nbsp;券:</a>
</li>
{{/if}}
{{!大于三条记录}}
{{#if_cond @index '==' 3}}
<li>
<a class="left more-coupon small-suf">更多</a>
</li>
{{/if_cond}}
{{!大于三条记录}}
{{#if_cond @index '==' 3}}
<li>
<a class="left more-coupon small-suf">更多</a>
{{!大于三条记录不显示}}
<li class="{{#if_cond @index '<' 3}}more-coupon{{/if_cond}} {{#if_cond @index '>=' 3}}hide{{/if_cond}}">
<div class="small coupon-item"
data-id="{{couponId}}"
data-name="{{couponName}}"
data-amount="{{amount}}"
data-status="{{acquireStatus}}"
data-rule="{{rule4ShortName}}">
<a class="more-coupon small-desc">{{rule4ShortName}}</a>
</div>
</li>
{{/if_cond}}
{{!大于三条记录不显示}}
<li class="{{#if_cond @index '<' 3}}more-coupon{{/if_cond}} {{#if_cond @index '>=' 3}}hide{{/if_cond}}">
<div class="small coupon-item"
data-id="{{couponId}}"
data-name="{{couponName}}"
data-amount="{{amount}}"
data-status="{{acquireStatus}}">
<a class="more-coupon small-desc">{{couponName}}</a>
</div>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</ul>
</div>
{{/if}}
{{#coupon}}
<div class="big-coupon-list">
{{#newList}}
{{> product/coupon-big-item}}
{{/newList}}
{{#oldList}}
{{> product/coupon-big-item}}
{{/oldList}}
</div>
{{/coupon}}
... ...
... ... @@ -31,6 +31,33 @@ var colTxt = {
var $saleReturn = $('#saleReturn');
var couponTpl = [
''
].json('');
Handlebars.registerHelper('if_cond', function(left, operator, right, options) {
switch (operator) {
case '==':
return (left == right) ? options.fn(this) : options.inverse(this); // eslint-disable-line
case '===':
return (left === right) ? options.fn(this) : options.inverse(this);
case '<':
return (left < right) ? options.fn(this) : options.inverse(this);
case '<=':
return (left <= right) ? options.fn(this) : options.inverse(this);
case '>':
return (left > right) ? options.fn(this) : options.inverse(this);
case '>=':
return (left >= right) ? options.fn(this) : options.inverse(this);
case '&&':
return (left && right) ? options.fn(this) : options.inverse(this);
case '||':
return (left || right) ? options.fn(this) : options.inverse(this);
default:
return options.inverse(this);
}
});
bindEvent.add(function() {
var $imgShow = $('#img-show'),
$thumbs = $('#thumbs > .thumb-wrap');
... ... @@ -73,6 +100,14 @@ bindEvent.add(function() {
};
}).get();
var gotCoupons = $.grep($coupons, function(val) {
return val.status === 3;
});
var newCoupons = $.grep($coupons, function(val) {
return val.status === 1;
});
$moreCoupon.on('click', function() {
});
... ... @@ -811,6 +846,8 @@ function fetchReturn() {
window.fetchReturn = fetchReturn;
// 首屏加载后,对比数据是否变化,如果变化,重新渲染,重新绑定事件
// 当前只渲染商品详情页的变化敏感的部分
(function() {
... ...
... ... @@ -256,7 +256,6 @@
.small {
float: left;
color: white !important;
width: 86px;
height: 18px;
background: resolve("product/coupon-small.png") no-repeat;
... ... @@ -264,6 +263,110 @@
}
}
.big-coupon-list {
width: 400px;
height: 700px;
overflow :auto;
.divide-line {
position: relative;
height: 1px;
background-color: #999;
top: 15px;
text-align: center;
margin-right: 60px;
margin-left: 60px;
z-index: 1;
}
.title {
position: relative;
line-height: 30px;
font-size: 18px;
color: #999;
text-align: center;
background-color: white;
margin-right: 125px;
margin-left: 125px;
text-align: center;
z-index: 2;
}
.pre {
width: 20px;
height: 100%;
float: left;
font-size: 18px;
color:white;
margin-left: 16px;
margin-right: 20px;
margin-top: 10px;
}
.desc {
float:left;
width: 180px;
margin-left: 20px;
height: 100%;
}
.amount {
font-size:30px;
color: white;
margin-top: 10px;
}
.rule {
font-size: 15px;
color: white;
line-height: 30px;
}
.status {
float:left;
width: 70px;
margin-left: 10px;
height: 100%;
cursor: pointer;
}
.coupon-status {
margin-top: 12px;
width: 100%;
text-align: center;
color: white;
font-size: 20px;
margin-bottom: 10px;
}
.coupon-go {
width: 100%;
text-align: center;
color: white;
font-size: 20px;
}
.btn {
display: inline-block;
heigth: 20px;
font-size: 15px !important;
line-height: @height;
color: #cf021b;
padding: 4px 8px;
background-color: white;
}
.item-bg {
width: 341px;
height: 75px;
background: resolve("product/coupon-big.png") no-repeat;
margin: 20px auto;
}
}
.ac-type {
display: inline-block;
width: 60px;
... ...