fe / yohobuy-node · Commits

Go to a project

Authored by 黄涛
Commit 72575449406221fdbb84458cc3d959f6d472eb80 1 parent 07c1fe09

add big

Inline Side-by-side
Showing 6 changed files with 358 additions and 136 deletions
@@ -7,49 +7,61 @@ @@ -7,49 +7,61 @@
7 const api = global.yoho.API; 7 const api = global.yoho.API;
8 8
9 const getProductBannerAsync = (pid) => { 9 const getProductBannerAsync = (pid) => {
10 - return api.get('', {  
11 - method: 'web.productBanner.data',  
12 - product_id: pid  
13 - }); 10 + return api.get(
  11 + '', {
  12 + method: 'web.productBanner.data',
  13 + product_id: pid
  14 + }
  15 + );
14 16
15 }; 17 };
16 18
17 const sizeInfoAsync = skn => { 19 const sizeInfoAsync = skn => {
18 - return api.get('', {  
19 - method: 'h5.product.intro',  
20 - productskn: skn  
21 - }); 20 + return api.get(
  21 + '', {
  22 + method: 'h5.product.intro',
  23 + productskn: skn
  24 + }
  25 + );
22 26
23 }; 27 };
24 28
25 // 退换支持 29 // 退换支持
26 const isSupportReturnedSale = skn => { 30 const isSupportReturnedSale = skn => {
27 - return api.get('', {  
28 - method: 'app.product.refundExchange',  
29 - product_skn: skn  
30 - }); 31 + return api.get(
  32 + '', {
  33 + method: 'app.product.refundExchange',
  34 + product_skn: skn
  35 + }
  36 + );
31 }; 37 };
32 38
33 const getProductComfortAsync = pid => { 39 const getProductComfortAsync = pid => {
34 - return api.get('', {  
35 - method: 'web.productComfort.data',  
36 - product_id: pid  
37 - }); 40 + return api.get(
  41 + '', {
  42 + method: 'web.productComfort.data',
  43 + product_id: pid
  44 + }
  45 + );
38 46
39 }; 47 };
40 48
41 const getProductModelCardAsync = pid => { 49 const getProductModelCardAsync = pid => {
42 - return api.get('', {  
43 - method: 'web.productModelcard.list',  
44 - product_id: pid  
45 - }); 50 + return api.get(
  51 + '', {
  52 + method: 'web.productModelcard.list',
  53 + product_id: pid
  54 + }
  55 + );
46 }; 56 };
47 57
48 const getProductModelTryAsync = skn => { 58 const getProductModelTryAsync = skn => {
49 - return api.get('', {  
50 - method: 'web.productModelTry.data',  
51 - product_skn: skn  
52 - }); 59 + return api.get(
  60 + '', {
  61 + method: 'web.productModelTry.data',
  62 + product_skn: skn
  63 + }
  64 + );
53 }; 65 };
54 66
55 /** 67 /**
@@ -104,88 +116,107 @@ const getLimitedProductStatusAsync = (code, uid, skn) => { @@ -104,88 +116,107 @@ const getLimitedProductStatusAsync = (code, uid, skn) => {
104 }; 116 };
105 117
106 const getCouponAsync = (bid, skn, uid) => { 118 const getCouponAsync = (bid, skn, uid) => {
107 - //let params = {  
108 - // method: 'app.coupons.queryProdPageCoupons',  
109 - // brandId: bid,  
110 - // skn: skn  
111 - //};  
112 - //  
113 - //if (uid) {  
114 - // params.uid = uid;  
115 - //}  
116 - //  
117 - //return api.get('', params);  
118 -  
119 - return Promise.resolve({  
120 - "alg": "SALT_MD5",  
121 - "code": 200,  
122 - "data": [  
123 - {  
124 - "couponName": "满￥199减10",  
125 - "amount": 10,  
126 - "acquireStatus": 3,  
127 - "createTime": 1476358043,  
128 - "startTime": 1476633600,  
129 - "lifeTime": "2016.10.17-2016.10.28",  
130 - "endTime": 1477584000,  
131 - "couponId": 14200  
132 - },  
133 - {  
134 - "couponName": "满￥199减10",  
135 - "amount": 22,  
136 - "acquireStatus": 3,  
137 - "createTime": 1475152374,  
138 - "startTime": 1474992000,  
139 - "lifeTime": "2016.09.28-2016.11.17",  
140 - "endTime": 1479312000,  
141 - "couponId": 14144 119 + // let params = {
  120 + // method: 'app.coupons.queryProdPageCoupons',
  121 + // brandId: bid,
  122 + // skn: skn
  123 + // };
  124 + //
  125 + // if (uid) {
  126 + // params.uid = uid;
  127 + // }
  128 + //
  129 + // return api.get('', params);
  130 +
  131 + return Promise.resolve(
  132 + {
  133 + 'alg': 'SALT_MD5',
  134 + 'code': 200,
  135 + 'data': {
  136 + newList: {
  137 + title: '可领取的券',
  138 + body: [
  139 + {
  140 + 'couponName': '满￥199减10',
  141 + 'amount': 10,
  142 + 'acquireStatus': 1,
  143 + 'createTime': 1476358043,
  144 + 'startTime': 1476633600,
  145 + 'lifeTime': '2016.10.17-2016.10.28',
  146 + 'endTime': 1477584000,
  147 + 'couponId': 14200,
  148 + 'rule4ShortName': '满￥100减10元'
  149 + },
  150 + {
  151 + 'couponName': '满￥199减10',
  152 + 'amount': 22,
  153 + 'acquireStatus': 1,
  154 + 'createTime': 1475152374,
  155 + 'startTime': 1474992000,
  156 + 'lifeTime': '2016.09.28-2016.11.17',
  157 + 'endTime': 1479312000,
  158 + 'couponId': 14144,
  159 + 'rule4ShortName': '满￥100减10元'
  160 + },
  161 + {
  162 + 'couponName': '满￥199减10',
  163 + 'amount': 15,
  164 + 'acquireStatus': 1,
  165 + 'createTime': 1476358258,
  166 + 'startTime': 1476115200,
  167 + 'lifeTime': '2016.10.11-2016.11.18',
  168 + 'endTime': 1479398400,
  169 + 'couponId': 14202,
  170 + 'rule4ShortName': '满￥100减10元'
  171 + }
  172 + ]
142 }, 173 },
143 - {  
144 - "couponName": "满￥199减10",  
145 - "amount": 15,  
146 - "acquireStatus": 3,  
147 - "createTime": 1476358258,  
148 - "startTime": 1476115200,  
149 - "lifeTime": "2016.10.11-2016.11.18",  
150 - "endTime": 1479398400,  
151 - "couponId": 14202  
152 - },  
153 - {  
154 - "couponName": "满￥199减10",  
155 - "amount": 10,  
156 - "acquireStatus": 3,  
157 - "createTime": 1476358043,  
158 - "startTime": 1476633600,  
159 - "lifeTime": "2016.10.17-2016.10.28",  
160 - "endTime": 1477584000,  
161 - "couponId": 14200  
162 - },  
163 - {  
164 - "couponName": "满￥199减10",  
165 - "amount": 22,  
166 - "acquireStatus": 3,  
167 - "createTime": 1475152374,  
168 - "startTime": 1474992000,  
169 - "lifeTime": "2016.09.28-2016.11.17",  
170 - "endTime": 1479312000,  
171 - "couponId": 14144  
172 - },  
173 - {  
174 - "couponName": "满￥199减10",  
175 - "amount": 15,  
176 - "acquireStatus": 3,  
177 - "createTime": 1476358258,  
178 - "startTime": 1476115200,  
179 - "lifeTime": "2016.10.11-2016.11.18",  
180 - "endTime": 1479398400,  
181 - "couponId": 14202 174 + oldList: {
  175 + title: '已领取的券',
  176 + body: [
  177 + {
  178 + 'couponName': '满￥199减10',
  179 + 'amount': 10,
  180 + 'acquireStatus': 3,
  181 + 'createTime': 1476358043,
  182 + 'startTime': 1476633600,
  183 + 'lifeTime': '2016.10.17-2016.10.28',
  184 + 'endTime': 1477584000,
  185 + 'couponId': 14200,
  186 + 'rule4ShortName': '满￥100减10元'
  187 + },
  188 + {
  189 + 'couponName': '满￥199减10',
  190 + 'amount': 22,
  191 + 'acquireStatus': 3,
  192 + 'createTime': 1475152374,
  193 + 'startTime': 1474992000,
  194 + 'lifeTime': '2016.09.28-2016.11.17',
  195 + 'endTime': 1479312000,
  196 + 'couponId': 14144,
  197 + 'rule4ShortName': '满￥100减10元'
  198 + },
  199 + {
  200 + 'couponName': '满￥199减10',
  201 + 'amount': 15,
  202 + 'acquireStatus': 3,
  203 + 'createTime': 1476358258,
  204 + 'startTime': 1476115200,
  205 + 'lifeTime': '2016.10.11-2016.11.18',
  206 + 'endTime': 1479398400,
  207 + 'couponId': 14202,
  208 + 'rule4ShortName': '满￥100减10元'
  209 + }
  210 + ]
182 } 211 }
183 - ],  
184 - "md5": "fe8f6e48b14c8f0b5044cb73d7c79900",  
185 - "message": "操作成功" 212 + },
  213 + 'md5': 'fe8f6e48b14c8f0b5044cb73d7c79900',
  214 + 'message': '操作成功'
186 } 215 }
187 - );  
188 -}; 216 + )
  217 + ;
  218 +}
  219 + ;
189 220
190 module.exports = { 221 module.exports = {
191 getProductBannerAsync, 222 getProductBannerAsync,
@@ -1033,12 +1033,14 @@ const _getCoupon = (coupons) => { @@ -1033,12 +1033,14 @@ const _getCoupon = (coupons) => {
1033 return false; 1033 return false;
1034 } 1034 }
1035 1035
1036 - let couponList = _.get(coupons, 'data', []); 1036 + // let couponList = _.get(coupons, 'data', []);
1037 1037
1038 - let pickProp = Fn.pick(['couponName', 'amount', 'couponId', 'acquireStatus']);  
1039 - let encodeId = Fn.update('couponId', (cid) => crypto.encryption(null, cid + '')); 1038 + // let pickProp = Fn.pick(['couponName', 'amount', 'couponId', 'acquireStatus','rule4ShortName']);
  1039 + // let encodeId = Fn.update('couponId', (cid) => crypto.encryption(null, cid + ''));
1040 1040
1041 - return Fn.map(Fn.pipe(pickProp, encodeId))(couponList); 1041 + // return Fn.map(Fn.pipe(pickProp, encodeId))(couponList);
  1042 +
  1043 + return coupons.data;
1042 }; 1044 };
1043 1045
1044 /** 1046 /**
  1 +{{#if body}}
  2 + <div class="coupon-list">
  3 + <div class="header">
  4 + <div class="divide-line"></div>
  5 + <div class="title">{{title}}</div>
  6 + </div>
  7 +
  8 + <div class="body">
  9 + {{#each body}}
  10 + <div class="item-bg">
  11 +
  12 + <div class="pre">优惠券</div>
  13 +
  14 + <div class="desc">
  15 + <div class="amount">¥&nbsp;{{amount}}</div>
  16 + <div class="rule">{{rule4ShortName}}</div>
  17 + </div>
  18 +
  19 + <div class="status" data-id="{{couponId}}" data-domain="{{domain}}">
  20 + {{#if_cond acquireStatus '==' 1}}
  21 + <div class="coupon-status">点击</div>
  22 + <div class="coupon-go">领取</div>
  23 + {{else}}
  24 + <div class="coupon-status">已领取</div>
  25 + <div class="coupon-go"><a class="btn">去使用</a></div>
  26 + {{/if_cond}}
  27 + </div>
  28 + </div>
  29 + {{/each}}
  30 + </div>
  31 + </div>
  32 +{{/if}}
1 -<div class="small-coupon-list">  
2 - <ul>  
3 - {{#each coupon}} 1 +{{#if coupon}}
  2 + <div class="small-coupon-list">
  3 + <ul>
  4 + {{#each coupon}}
4 5
5 - {{#if @first}}  
6 - <li>  
7 - <a class="left small-pre">领&nbsp;&nbsp;&nbsp;&nbsp;券：</a>  
8 - </li>  
9 - {{/if}} 6 + {{#if @first}}
  7 + <li>
  8 + <a class="left small-pre">领&nbsp;&nbsp;&nbsp;&nbsp;券：</a>
  9 + </li>
  10 + {{/if}}
  11 +
  12 + {{!大于三条记录}}
  13 + {{#if_cond @index '==' 3}}
  14 + <li>
  15 + <a class="left more-coupon small-suf">更多</a>
  16 + </li>
  17 + {{/if_cond}}
10 18
11 - {{!大于三条记录}}  
12 - {{#if_cond @index '==' 3}}  
13 - <li>  
14 - <a class="left more-coupon small-suf">更多</a> 19 + {{!大于三条记录不显示}}
  20 + <li class="{{#if_cond @index '<' 3}}more-coupon{{/if_cond}} {{#if_cond @index '>=' 3}}hide{{/if_cond}}">
  21 + <div class="small coupon-item"
  22 + data-id="{{couponId}}"
  23 + data-name="{{couponName}}"
  24 + data-amount="{{amount}}"
  25 + data-status="{{acquireStatus}}"
  26 + data-rule="{{rule4ShortName}}">
  27 +
  28 + <a class="more-coupon small-desc">{{rule4ShortName}}</a>
  29 + </div>
15 </li> 30 </li>
16 - {{/if_cond}}  
17 -  
18 - {{!大于三条记录不显示}}  
19 - <li class="{{#if_cond @index '<' 3}}more-coupon{{/if_cond}} {{#if_cond @index '>=' 3}}hide{{/if_cond}}">  
20 - <div class="small coupon-item"  
21 - data-id="{{couponId}}"  
22 - data-name="{{couponName}}"  
23 - data-amount="{{amount}}"  
24 - data-status="{{acquireStatus}}">  
25 -  
26 - <a class="more-coupon small-desc">{{couponName}}</a>  
27 - </div>  
28 - </li>  
29 - {{/each}}  
30 - </ul>  
31 -</div> 31 + {{/each}}
  32 + </ul>
  33 + </div>
  34 +{{/if}}
  35 +
  36 +{{#coupon}}
  37 + <div class="big-coupon-list">
  38 + {{#newList}}
  39 + {{> product/coupon-big-item}}
  40 + {{/newList}}
  41 +
  42 + {{#oldList}}
  43 + {{> product/coupon-big-item}}
  44 + {{/oldList}}
  45 + </div>
  46 +{{/coupon}}
  47 +
  48 +
@@ -31,6 +31,33 @@ var colTxt = { @@ -31,6 +31,33 @@ var colTxt = {
31 31
32 var $saleReturn = $('#saleReturn'); 32 var $saleReturn = $('#saleReturn');
33 33
  34 +var couponTpl = [
  35 + ''
  36 +].json('');
  37 +
  38 +Handlebars.registerHelper('if_cond', function(left, operator, right, options) {
  39 + switch (operator) {
  40 + case '==':
  41 + return (left == right) ? options.fn(this) : options.inverse(this); // eslint-disable-line
  42 + case '===':
  43 + return (left === right) ? options.fn(this) : options.inverse(this);
  44 + case '<':
  45 + return (left < right) ? options.fn(this) : options.inverse(this);
  46 + case '<=':
  47 + return (left <= right) ? options.fn(this) : options.inverse(this);
  48 + case '>':
  49 + return (left > right) ? options.fn(this) : options.inverse(this);
  50 + case '>=':
  51 + return (left >= right) ? options.fn(this) : options.inverse(this);
  52 + case '&&':
  53 + return (left && right) ? options.fn(this) : options.inverse(this);
  54 + case '||':
  55 + return (left || right) ? options.fn(this) : options.inverse(this);
  56 + default:
  57 + return options.inverse(this);
  58 + }
  59 +});
  60 +
34 bindEvent.add(function() { 61 bindEvent.add(function() {
35 var $imgShow = $('#img-show'), 62 var $imgShow = $('#img-show'),
36 $thumbs = $('#thumbs > .thumb-wrap'); 63 $thumbs = $('#thumbs > .thumb-wrap');
@@ -73,6 +100,14 @@ bindEvent.add(function() { @@ -73,6 +100,14 @@ bindEvent.add(function() {
73 }; 100 };
74 }).get(); 101 }).get();
75 102
  103 + var gotCoupons = $.grep($coupons, function(val) {
  104 + return val.status === 3;
  105 + });
  106 +
  107 + var newCoupons = $.grep($coupons, function(val) {
  108 + return val.status === 1;
  109 + });
  110 +
76 $moreCoupon.on('click', function() { 111 $moreCoupon.on('click', function() {
77 112
78 }); 113 });
@@ -811,6 +846,8 @@ function fetchReturn() { @@ -811,6 +846,8 @@ function fetchReturn() {
811 846
812 window.fetchReturn = fetchReturn; 847 window.fetchReturn = fetchReturn;
813 848
  849 +
  850 +
814 // 首屏加载后，对比数据是否变化，如果变化，重新渲染，重新绑定事件 851 // 首屏加载后，对比数据是否变化，如果变化，重新渲染，重新绑定事件
815 // 当前只渲染商品详情页的变化敏感的部分 852 // 当前只渲染商品详情页的变化敏感的部分
816 (function() { 853 (function() {
@@ -256,7 +256,6 @@ @@ -256,7 +256,6 @@
256 256
257 .small { 257 .small {
258 float: left; 258 float: left;
259 - color: white !important;  
260 width: 86px; 259 width: 86px;
261 height: 18px; 260 height: 18px;
262 background: resolve("product/coupon-small.png") no-repeat; 261 background: resolve("product/coupon-small.png") no-repeat;
@@ -264,6 +263,110 @@ @@ -264,6 +263,110 @@
264 } 263 }
265 } 264 }
266 265
  266 +
  267 + .big-coupon-list {
  268 + width: 400px;
  269 + height: 700px;
  270 + overflow :auto;
  271 +
  272 + .divide-line {
  273 + position: relative;
  274 + height: 1px;
  275 + background-color: #999;
  276 + top: 15px;
  277 + text-align: center;
  278 + margin-right: 60px;
  279 + margin-left: 60px;
  280 + z-index: 1;
  281 + }
  282 +
  283 + .title {
  284 + position: relative;
  285 + line-height: 30px;
  286 + font-size: 18px;
  287 + color: #999;
  288 + text-align: center;
  289 + background-color: white;
  290 + margin-right: 125px;
  291 + margin-left: 125px;
  292 + text-align: center;
  293 + z-index: 2;
  294 + }
  295 +
  296 + .pre {
  297 + width: 20px;
  298 + height: 100%;
  299 + float: left;
  300 + font-size: 18px;
  301 + color:white;
  302 + margin-left: 16px;
  303 + margin-right: 20px;
  304 + margin-top: 10px;
  305 + }
  306 +
  307 + .desc {
  308 + float:left;
  309 + width: 180px;
  310 + margin-left: 20px;
  311 + height: 100%;
  312 + }
  313 +
  314 + .amount {
  315 + font-size:30px;
  316 + color: white;
  317 + margin-top: 10px;
  318 + }
  319 +
  320 + .rule {
  321 + font-size: 15px;
  322 + color: white;
  323 + line-height: 30px;
  324 + }
  325 +
  326 + .status {
  327 + float:left;
  328 + width: 70px;
  329 + margin-left: 10px;
  330 + height: 100%;
  331 + cursor: pointer;
  332 + }
  333 +
  334 + .coupon-status {
  335 + margin-top: 12px;
  336 + width: 100%;
  337 + text-align: center;
  338 + color: white;
  339 + font-size: 20px;
  340 + margin-bottom: 10px;
  341 + }
  342 +
  343 + .coupon-go {
  344 + width: 100%;
  345 + text-align: center;
  346 + color: white;
  347 + font-size: 20px;
  348 + }
  349 +
  350 + .btn {
  351 + display: inline-block;
  352 + heigth: 20px;
  353 + font-size: 15px !important;
  354 + line-height: @height;
  355 + color: #cf021b;
  356 + padding: 4px 8px;
  357 + background-color: white;
  358 + }
  359 +
  360 + .item-bg {
  361 + width: 341px;
  362 + height: 75px;
  363 + background: resolve("product/coupon-big.png") no-repeat;
  364 + margin: 20px auto;
  365 + }
  366 +
  367 + }
  368 +
  369 +
267 .ac-type { 370 .ac-type {
268 display: inline-block; 371 display: inline-block;
269 width: 60px; 372 width: 60px;