fe / yohobuy-node · Commits

Go to a project

Authored by 郝肖肖
Commit ee06f949ee522609c679c0897fa0c7b261160600 1 parent eda6c32b

'我的礼品卡消费详情'

Inline Side-by-side
Showing 8 changed files with 836 additions and 150 deletions
@@ -61,11 +61,11 @@ module.exports = class extends global.yoho.BaseModel { @@ -61,11 +61,11 @@ module.exports = class extends global.yoho.BaseModel {
61 61
62 /** 62 /**
63 * [验证邮箱验证码] 63 * [验证邮箱验证码]
  64 + * @param {[type]} code [邮箱验证码]
64 * @param {[type]} uid [用户id] 65 * @param {[type]} uid [用户id]
65 - * @param {[type]} email [邮箱]  
66 * @return {[type]} [{}] 66 * @return {[type]} [{}]
67 */ 67 */
68 - verifyEmail(uid, code) { 68 + verifyEmail(code, uid) {
69 let options = { 69 let options = {
70 method: 'app.giftcard.verifyemail', 70 method: 'app.giftcard.verifyemail',
71 uid: uid, 71 uid: uid,
@@ -89,12 +89,12 @@ module.exports = class extends global.yoho.BaseModel { @@ -89,12 +89,12 @@ module.exports = class extends global.yoho.BaseModel {
89 return this.meGiftAPi.consumeList(params.cardCode, uid, params.page, params.limit).then(rlist => { 89 return this.meGiftAPi.consumeList(params.cardCode, uid, params.page, params.limit).then(rlist => {
90 let giftData = {}; 90 let giftData = {};
91 91
92 - giftData.data = _.get(rlist[0], 'data.giftCardInfoBOList', []); 92 + giftData.data = _.get(rlist, 'data', {});
93 giftData.pager = Object.assign({ 93 giftData.pager = Object.assign({
94 - count: _.get(rlist[0], 'data.total', 0), 94 + count: _.get(rlist, 'data.total', 0),
95 curPage: params.page, 95 curPage: params.page,
96 - totalPages: _.get(rlist[0], 'data.pageSize', 0)  
97 - }, setPager(_.get(rlist[0], 'data.pageSize', 0), { 96 + totalPages: _.get(rlist, 'data.pageSize', 0)
  97 + }, setPager(_.get(rlist, 'data.pageSize', 0), {
98 page: params.page 98 page: params.page
99 })); 99 }));
100 100
@@ -138,7 +138,13 @@ module.exports = class extends global.yoho.BaseModel { @@ -138,7 +138,13 @@ module.exports = class extends global.yoho.BaseModel {
138 138
139 // 发验证码 139 // 发验证码
140 smsBind(params) { 140 smsBind(params) {
141 - return this.meGiftAPi.checkIsCanBind(params.area, params.mobile).then(() => { 141 + return this.meGiftAPi.checkIsCanBind(params.area, params.mobile).then(res => {
  142 + if (_.get(res, 'data.isCanBind') === 'N') {
  143 + return {
  144 + code: 401,
  145 + message: '<p>绑定失败，该手机号已被绑定</p><p>请更换手机号</p>'
  146 + };
  147 + }
142 return this.meGiftAPi.smsbind(params.area, params.mobile); 148 return this.meGiftAPi.smsbind(params.area, params.mobile);
143 }); 149 });
144 } 150 }
1 - <div class="verify-input"> 1 +{{# data}}
2 <table class="info-gift-header"> 2 <table class="info-gift-header">
3 - <tr>  
4 - <td class="text-left">卡号：L242353456436456</td>  
5 - <td>状态：使用中</td>  
6 - <td class="text-right validity-time">有效期：2016-04-17 至2017-04-17（即将过期）</td>  
7 - </tr>  
8 - <tr>  
9 - <td class="text-left">面值：2000.00 </td>  
10 - <td colspan="2">余额：500.00</td>  
11 - </tr> 3 + <tr>
  4 + <td class="text-left">卡号：{{cardCode}}</td>
  5 + <td>状态：{{statusStr}}</td>
  6 + <td class="text-right validity-time">有效期：{{dateStr}}{{#if willExpire}}（{{willExpire}}）{{/if}}</td>
  7 + </tr>
  8 + <tr>
  9 + <td class="text-left">面值：{{amount}} </td>
  10 + <td colspan="2">余额：{{remainAmount}}</td>
  11 + </tr>
12 </table> 12 </table>
13 <div class="me-gift-info-table"> 13 <div class="me-gift-info-table">
14 <div class="me-gift-header"> 14 <div class="me-gift-header">
@@ -25,30 +25,23 @@ @@ -25,30 +25,23 @@
25 </div> 25 </div>
26 <div>金额(元)</div> 26 <div>金额(元)</div>
27 </div> 27 </div>
28 - <div class="me-gift-tr">  
29 - <div>2017-12-21 09:30</div>  
30 - <div>3456436456</div>  
31 - <div class="consume">消费</div>  
32 - <div class="consume">-122</div>  
33 - </div>  
34 - <div class="me-gift-tr">  
35 - <div>2017-12-21 09:30</div>  
36 - <div>3456436456</div>  
37 - <div class="refund">退款</div>  
38 - <div class="refund">+122</div>  
39 - </div>  
40 - <div class="me-gift-tr">  
41 - <div>2017-12-21 09:30</div>  
42 - <div>3456436456</div>  
43 - <div class="consume">消费</div>  
44 - <div class="consume">-122</div>  
45 - </div>  
46 - <div class="me-gift-tr">  
47 - <div>2017-12-21 09:30</div>  
48 - <div>3456436456</div>  
49 - <div class="refund">退款</div>  
50 - <div class="refund">+122</div>  
51 - </div>  
52 - <div class="cart-list-empty"></div> 28 + {{#if giftCardConsumeInfoBOList}}
  29 + {{# giftCardConsumeInfoBOList}}
  30 + <div class="me-gift-tr">
  31 + <div>{{createTime}}</div>
  32 + <div>{{orderCode}}</div>
  33 + {{#if type}}
  34 + <div class="consume">消费</div>
  35 + <div class="consume">-{{changeAmount}}</div>
  36 + {{else if type}}
  37 + <div class="refund">退款</div>
  38 + <div class="refund">+{{changeAmount}}</div>
  39 + {{/if}}
  40 + </div>
  41 + {{/giftCardConsumeInfoBOList}}
  42 + {{^}}
  43 + <div class="cart-list-empty"></div>
  44 + {{/if}}
53 </div> 45 </div>
54 -</div> 46 +{{/data}}
  47 + {{> pager}}
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 </div> 20 </div>
21 {{#if giftData.data}} 21 {{#if giftData.data}}
22 {{#giftData.data}} 22 {{#giftData.data}}
23 - <div class="me-gift-tr"> 23 + <div class="me-gift-tr" data-card-code={{cardCode}}>
24 <div>{{cardCode}}</div> 24 <div>{{cardCode}}</div>
25 <div>{{amount}}</div> 25 <div>{{amount}}</div>
26 <div>{{remainAmount}}</div> 26 <div>{{remainAmount}}</div>
@@ -51,6 +51,9 @@ @@ -51,6 +51,9 @@
51 <input type="text" placeholder="短信验证码" class="email-code" /> 51 <input type="text" placeholder="短信验证码" class="email-code" />
52 <input type="button" value="获取短信验证码" class="email-btn" /> 52 <input type="button" value="获取短信验证码" class="email-btn" />
53 </div> 53 </div>
  54 + <div class="gift-group">
  55 + <div id="captcha" style="display: inline-block; position: relative;"></div>
  56 + </div>
54 </script> 57 </script>
55 58
56 {{!-- 绑定手机模板 --}} 59 {{!-- 绑定手机模板 --}}
@@ -82,6 +85,9 @@ @@ -82,6 +85,9 @@
82 <input type="text" placeholder="短信验证码" class="mobile-code" /> 85 <input type="text" placeholder="短信验证码" class="mobile-code" />
83 <input type="button" value="获取短信验证码" class="mobile-btn" /> 86 <input type="button" value="获取短信验证码" class="mobile-btn" />
84 </div> 87 </div>
  88 + <div class="gift-group">
  89 + <div id="captcha" style="display: inline-block; position: relative;"></div>
  90 + </div>
85 </div> 91 </div>
86 </script> 92 </script>
87 93
@@ -99,59 +105,9 @@ @@ -99,59 +105,9 @@
99 105
100 {{!-- 消费明细 --}} 106 {{!-- 消费明细 --}}
101 <script id="detail-gift-tpl" type="text/html"> 107 <script id="detail-gift-tpl" type="text/html">
  108 +<div class="detail-gift-list">
102 <div class="info-title">消费明细</div> 109 <div class="info-title">消费明细</div>
103 - <div class="verify-input">  
104 - <table class="info-gift-header">  
105 - <tr>  
106 - <td class="text-left">卡号：L242353456436456</td>  
107 - <td>状态：使用中</td>  
108 - <td class="text-right validity-time">有效期：2016-04-17 至2017-04-17（即将过期）</td>  
109 - </tr>  
110 - <tr>  
111 - <td class="text-left">面值：2000.00 </td>  
112 - <td colspan="2">余额：500.00</td>  
113 - </tr>  
114 - </table>  
115 - <div class="me-gift-info-table">  
116 - <div class="me-gift-header">  
117 - <div>时间</div>  
118 - <div>订单编号</div>  
119 - <div>  
120 - <span class="gift-filter">  
121 - <em class="gift-type">类型</em>  
122 - <ul class="ul-list">  
123 - <li data-cc="1">消费</li>  
124 - <li data-cc="2">退款</li>  
125 - </ul>  
126 - </span>  
127 - </div>  
128 - <div>金额(元)</div>  
129 - </div>  
130 - <div class="me-gift-tr">  
131 - <div>2017-12-21 09:30</div>  
132 - <div>3456436456</div>  
133 - <div class="consume">消费</div>  
134 - <div class="consume">-122</div>  
135 - </div>  
136 - <div class="me-gift-tr">  
137 - <div>2017-12-21 09:30</div>  
138 - <div>3456436456</div>  
139 - <div class="refund">退款</div>  
140 - <div class="refund">+122</div>  
141 - </div>  
142 - <div class="me-gift-tr">  
143 - <div>2017-12-21 09:30</div>  
144 - <div>3456436456</div>  
145 - <div class="consume">消费</div>  
146 - <div class="consume">-122</div>  
147 - </div>  
148 - <div class="me-gift-tr">  
149 - <div>2017-12-21 09:30</div>  
150 - <div>3456436456</div>  
151 - <div class="refund">退款</div>  
152 - <div class="refund">+122</div>  
153 - </div>  
154 - <div class="cart-list-empty"></div>  
155 - </div> 110 + <div class="verify-input detail-gift-content">
156 </div> 111 </div>
  112 +</div>
157 </script> 113 </script>
@@ -8,6 +8,7 @@ var meGift; @@ -8,6 +8,7 @@ var meGift;
8 require('../common'); 8 require('../common');
9 9
10 meGift = { 10 meGift = {
  11 + isFlag: false, // 防止用户频繁点击
11 // 验证邮箱模板 12 // 验证邮箱模板
12 emailTpl: Hbs.compile($('#verify-email-tpl').html()), 13 emailTpl: Hbs.compile($('#verify-email-tpl').html()),
13 14
@@ -27,7 +28,7 @@ meGift = { @@ -27,7 +28,7 @@ meGift = {
27 isBinMobile: +$('.me-content').data('is-bin-mobile'), 28 isBinMobile: +$('.me-content').data('is-bin-mobile'),
28 29
29 // 用户邮箱 30 // 用户邮箱
30 - userEmail: +$('.me-content').data('email'), 31 + userEmail: $('.me-content').data('email'),
31 32
32 init: function() { 33 init: function() {
33 var that = this; 34 var that = this;
@@ -37,13 +38,13 @@ meGift = { @@ -37,13 +38,13 @@ meGift = {
37 if (that.isBinMobile) { 38 if (that.isBinMobile) {
38 that.activateGift(); 39 that.activateGift();
39 } else { 40 } else {
40 - that.verifyEmailCode(); 41 + that.getMobileCode();
41 } 42 }
42 }); 43 });
43 44
44 // 消费明细 45 // 消费明细
45 $('.me-gift-table').on('click', '.info-list', function() { 46 $('.me-gift-table').on('click', '.info-list', function() {
46 - that.infoList(); 47 + that.infoList($(this).closest('.me-gift-tr').data('card-code'));
47 }); 48 });
48 49
49 // 显示手机区号或类型下拉列表 50 // 显示手机区号或类型下拉列表
@@ -66,9 +67,50 @@ meGift = { @@ -66,9 +67,50 @@ meGift = {
66 }); 67 });
67 }, 68 },
68 69
69 - // 我的礼品卡列表  
70 - getList: function() { 70 + postAjax: function(url, data, verifyData, captcha) {
  71 + var deferred = $.Deferred(); // eslint-disable-line
  72 + var that = this;
  73 + var x;
  74 +
  75 + if (that.isFlag) {
  76 + return deferred.resolve({
  77 + code: 401,
  78 + message: '数据请求中...'
  79 + });
  80 + }
  81 +
  82 + if (verifyData) {
  83 + for (x in verifyData) {
  84 + if (!data[x]) {
  85 + that.meAlert(verifyData[x], false);
  86 + return deferred.resolve({
  87 + code: 401,
  88 + message: verifyData[x]
  89 + });
  90 + }
  91 + }
  92 + }
  93 +
  94 + that.isFlag = true;
  95 +
  96 + return $.ajax({
  97 + url: url,
  98 + type: 'post',
  99 + data: data
  100 + }).then(function(res) {
  101 + captcha && captcha.hideTip();
  102 +
  103 + if (res.code === 405) {
  104 + captcha && captcha.showTip(res.message);
  105 + } else {
  106 + that.meAlert(res.message, false);
  107 + }
71 108
  109 + that.isFlag = false;
  110 + return res;
  111 + }, function() {
  112 + that.isFlag = false;
  113 + });
72 }, 114 },
73 115
74 // 礼品卡详情列表 116 // 礼品卡详情列表
@@ -76,13 +118,41 @@ meGift = { @@ -76,13 +118,41 @@ meGift = {
76 118
77 }, 119 },
78 120
  121 + intTimer: function($dom) {
  122 + var intTime = 60;
  123 + var intval = setInterval(function() {
  124 +
  125 + if (intTime-- <= 0) {
  126 + clearInterval(intval);
  127 + $dom.removeClass('int-timer').val('获取短信验证码');
  128 + return false;
  129 + }
  130 +
  131 + $dom.val(intTime + ' S');
  132 + }, 1000);
  133 +
  134 + $dom.addClass('int-timer');
  135 + $dom.val(intTime + ' S');
  136 + },
  137 +
79 // 获取邮箱验证码 138 // 获取邮箱验证码
80 - getEmailCode: function() { 139 + getEmailCode: function(captcha) {
  140 + var that = this;
  141 +
  142 + this.postAjax('/home/megift/sendEmailCode', {
  143 + email: this.userEmail,
  144 + verifyCode: captcha.getResults()
  145 + }).then(function(res) {
  146 + if (res.code === 200) {
  147 + that.intTimer($('.email-btn'));
  148 + }
  149 + });
81 }, 150 },
82 151
83 // 效验邮箱验证码 152 // 效验邮箱验证码
84 verifyEmailCode: function() { 153 verifyEmailCode: function() {
85 var that = this; 154 var that = this;
  155 + var captcha;
86 var dg = new dialog.Dialog({ 156 var dg = new dialog.Dialog({
87 content: that.emailTpl({}), 157 content: that.emailTpl({}),
88 className: 'me-gift-confirm', 158 className: 'me-gift-confirm',
@@ -91,16 +161,36 @@ meGift = { @@ -91,16 +161,36 @@ meGift = {
91 name: '绑定手机号', 161 name: '绑定手机号',
92 btnClass: ['alert-sure'], 162 btnClass: ['alert-sure'],
93 cb: function() { 163 cb: function() {
94 - dg.close();  
95 - that.getMobileCode(); 164 + var emailCode = $('.email-code').val();
  165 + var verifyData = {code: '验证码不能为空'};
  166 +
  167 + that.postAjax('/home/megift/verifyEmail', {
  168 + email: that.userEmail,
  169 + code: emailCode
  170 + }, verifyData, captcha).then(function(res) {
  171 + if (res.code === 200) {
  172 + dg.close();
  173 + that.getMobileCode();
  174 + }
  175 + });
96 } 176 }
97 }] 177 }]
98 }).show(); 178 }).show();
  179 +
  180 + captcha = new Captcha('#captcha').init();
  181 +
  182 + // 发送邮箱验证码
  183 + $('.me-gift-confirm').find('.email-btn').unbind('click').bind('click', function() {
  184 + if (!$(this).hasClass('int-timer')) {
  185 + that.getEmailCode(captcha);
  186 + }
  187 + });
99 }, 188 },
100 189
101 // 获取手机验证码 190 // 获取手机验证码
102 getMobileCode: function() { 191 getMobileCode: function() {
103 var that = this; 192 var that = this;
  193 + var captcha;
104 var dg = new dialog.Dialog({ 194 var dg = new dialog.Dialog({
105 content: that.mobileTpl({}), 195 content: that.mobileTpl({}),
106 className: 'me-gift-confirm', 196 className: 'me-gift-confirm',
@@ -116,22 +206,60 @@ meGift = { @@ -116,22 +206,60 @@ meGift = {
116 name: '激活', 206 name: '激活',
117 btnClass: ['confirm-sure'], 207 btnClass: ['confirm-sure'],
118 cb: function() { 208 cb: function() {
119 - dg.close();  
120 - that.activateGift(); 209 + var verifyData = {
  210 + area: '请选择手机区号',
  211 + mobile: '手机号不能为空',
  212 + code: '手机验证码不能为空'
  213 + };
  214 +
  215 + that.postAjax('/home/megift/changeMobile', {
  216 + area: ($('.mobile-area').find('em').text() || '').replace(/^\+/, ''),
  217 + mobile: $('.mobile').val(),
  218 + code: $('.mobile-code').val()
  219 + }, verifyData, captcha).then(function(res) {
  220 + if (res.code === 200) {
  221 + dg.close();
  222 + that.activateGift();
  223 + }
  224 + });
121 } 225 }
122 }] 226 }]
123 }).show(); 227 }).show();
124 - },  
125 228
126 - // 效验手机验证码并激活  
127 - verifyMobileCode: function() { 229 + captcha = new Captcha('#captcha').init();
128 230
  231 + // 发送邮箱验证码
  232 + $('.me-gift-confirm').find('.mobile-btn').unbind('click').bind('click', function() {
  233 + if (!$(this).hasClass('int-timer')) {
  234 + that.smsBind(captcha);
  235 + }
  236 + });
  237 + },
  238 +
  239 + // 发送手机验证码
  240 + smsBind: function(captcha) {
  241 + var that = this;
  242 + var area = ($('.mobile-area').find('em').text() || '').replace(/^\+/, '');
  243 + var mobile = $('.mobile').val();
  244 + var verifyData = {
  245 + area: '请选择手机区号',
  246 + mobile: '手机号不能为空'
  247 + };
  248 +
  249 + this.postAjax('/home/megift/smsBind', {
  250 + area: area,
  251 + mobile: mobile,
  252 + verifyCode: captcha.getResults()
  253 + }, verifyData, captcha).then(function(res) {
  254 + if (res.code === 200) {
  255 + that.intTimer($('.email-btn'));
  256 + }
  257 + });
129 }, 258 },
130 259
131 // 激活礼品卡 260 // 激活礼品卡
132 activateGift: function() { 261 activateGift: function() {
133 var that = this; 262 var that = this;
134 - var isFlag = false;  
135 var captcha; 263 var captcha;
136 var dg = new dialog.Dialog({ 264 var dg = new dialog.Dialog({
137 content: that.giftTpl({}), 265 content: that.giftTpl({}),
@@ -149,61 +277,46 @@ meGift = { @@ -149,61 +277,46 @@ meGift = {
149 btnClass: ['confirm-sure'], 277 btnClass: ['confirm-sure'],
150 cb: function() { 278 cb: function() {
151 var $confirm = $('.me-gift-confirm'); 279 var $confirm = $('.me-gift-confirm');
152 -  
153 - captcha.hideTip();  
154 -  
155 - if ($confirm.find('.card-code').val() === '') {  
156 - that.meAlert('礼品卡卡号不能为空', false);  
157 - return false;  
158 - } else if ($confirm.find('.card-pwd').val() === '') {  
159 - that.meAlert('礼品卡卡密不能为空', false);  
160 - return false;  
161 - }  
162 -  
163 - if (isFlag) {  
164 - return false;  
165 - }  
166 -  
167 - isFlag = true;  
168 - $.ajax({  
169 - url: '/home/activateGift',  
170 - type: 'post',  
171 - data: {  
172 - cardCode: $confirm.find('.card-code').val(),  
173 - cardPwd: $confirm.find('.card-pwd').val(),  
174 - verifyCode: captcha.getResults()  
175 - }  
176 - }).then(function(res) {  
177 - isFlag = false;  
178 - 280 + var verifyData = {
  281 + cardCode: '礼品卡卡号不能为空',
  282 + cardPwd: '礼品卡卡密不能为空'
  283 + };
  284 +
  285 + that.postAjax('/home/meGift/activateGift', {
  286 + cardCode: $confirm.find('.card-code').val(),
  287 + cardPwd: $confirm.find('.card-pwd').val(),
  288 + verifyCode: captcha.getResults()
  289 + }, verifyData, captcha).then(function(res) {
179 if (res.code === 200) { 290 if (res.code === 200) {
180 dg.close(); 291 dg.close();
181 that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>', false); 292 that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>', false);
182 - } else if (res.code === 405) {  
183 - captcha.showTip(res.message);  
184 - return true;  
185 - } else {  
186 - that.meAlert(res.message, false);  
187 } 293 }
188 - }, function() {  
189 - isFlag = false;  
190 }); 294 });
191 } 295 }
192 }] 296 }]
193 }).show(); 297 }).show();
194 298
195 captcha = new Captcha('#captcha').init(); 299 captcha = new Captcha('#captcha').init();
196 - captcha.hideTip();  
197 }, 300 },
198 301
199 // 消费明细 302 // 消费明细
200 - infoList: function() { 303 + infoList: function(cardCode) {
201 var that = this; 304 var that = this;
202 305
203 new dialog.Dialog({ 306 new dialog.Dialog({
204 content: that.detailGiftTpl({}), 307 content: that.detailGiftTpl({}),
205 - className: 'me-gift-page me-gift-confirm' 308 + className: 'me-page me-gift-page me-gift-confirm detail-gift-list'
206 }).show(); 309 }).show();
  310 +
  311 + $.get('/home/megift/detail', {
  312 + cardCode: cardCode
  313 + }).then(function(res) {
  314 + if (!res) {
  315 + return false;
  316 + }
  317 +
  318 + $('.detail-gift-content').html(res);
  319 + });
207 }, 320 },
208 321
209 // 我的弹框 322 // 我的弹框
  1 +var $ = require('yoho-jquery'),
  2 + Hbs = require('yoho-handlebars'),
  3 + dialog = require('../common/dialog'),
  4 + Captcha = require('../plugins/captcha');
  5 +
  6 +var meGift;
  7 +
  8 +require('../common');
  9 +
  10 +meGift = {
  11 + isFlag: false, //防止用户频繁点击
  12 + // 验证邮箱模板
  13 + emailTpl: Hbs.compile($('#verify-email-tpl').html()),
  14 +
  15 + // 绑定手机模板
  16 + mobileTpl: Hbs.compile($('#verify-mobile-tpl').html()),
  17 +
  18 + // 激活礼品卡模板
  19 + giftTpl: Hbs.compile($('#activate-gift-tpl').html()),
  20 +
  21 + // 消费明细模板
  22 + detailGiftTpl: Hbs.compile($('#detail-gift-tpl').html()),
  23 +
  24 + // 添加礼品卡按钮
  25 + $addGift: $('.add-gift'),
  26 +
  27 + // 是否绑定手机
  28 + isBinMobile: +$('.me-content').data('is-bin-mobile'),
  29 +
  30 + // 用户邮箱
  31 + userEmail: $('.me-content').data('email'),
  32 +
  33 + init: function() {
  34 + var that = this;
  35 +
  36 + // 添加礼品卡
  37 + this.$addGift.click(function() {
  38 + if (that.isBinMobile) {
  39 + that.activateGift();
  40 + } else {
  41 + that.getMobileCode();
  42 + }
  43 + });
  44 +
  45 + // 消费明细
  46 + $('.me-gift-table').on('click', '.info-list', function() {
  47 + that.infoList($(this).closest('.me-gift-tr').data('card-code'));
  48 + });
  49 +
  50 + // 显示手机区号或类型下拉列表
  51 + $('body').on('click', '.mobile-area,.gift-filter', function() {
  52 + $(this).find('.ul-list').toggle();
  53 + });
  54 +
  55 + // 选择手机区号
  56 + $('body').on('click', '.mobile-area-list', function(event) {
  57 + var $li = $(event.target).closest('li');
  58 +
  59 + $('.mobile-area').find('em').text($li.data('cc'));
  60 + });
  61 +
  62 + // 选择类型筛选
  63 + $('body').on('click', '.gift-filter ul', function(event) {
  64 + var $li = $(event.target).closest('li');
  65 +
  66 + $('.gift-filter').find('em').text($li.text());
  67 + });
  68 + },
  69 +
  70 + postAjax: function(url, data, verifyData, captcha) {
  71 + var that = this;
  72 + var deferred = $.Deferred();
  73 + var x;
  74 +
  75 + if (that.isFlag) {
  76 + return deferred.resolve({
  77 + code: 401,
  78 + message: '数据请求中...'
  79 + });
  80 + }
  81 +
  82 + if (verifyData) {
  83 + for(x in verifyData) {
  84 + if (!data[x]) {
  85 + that.meAlert(verifyData[x], false);
  86 + return deferred.resolve({
  87 + code: 401,
  88 + message: verifyData[x]
  89 + });
  90 + }
  91 + }
  92 + }
  93 +
  94 + that.isFlag = true;
  95 +
  96 + return $.ajax({
  97 + url: url,
  98 + type: 'post',
  99 + data: data
  100 + }).then(function(res) {
  101 + captcha && captcha.hideTip();
  102 +
  103 + if (res.code === 405) {
  104 + captcha && captcha.showTip(res.message);
  105 + } else {
  106 + that.meAlert(res.message, false);
  107 + }
  108 +
  109 + that.isFlag = false;
  110 + return res;
  111 + }, function() {
  112 + that.isFlag = false;
  113 + });
  114 + },
  115 +
  116 + // 礼品卡详情列表
  117 + detailList: function() {
  118 +
  119 + },
  120 +
  121 + intTimer: function($dom) {
  122 + var intTime = 60;
  123 + var intval = setInterval(function() {
  124 +
  125 + if (intTime-- <= 0) {
  126 + clearInterval(intval);
  127 + $dom.removeClass('intTimer').val('获取短信验证码');
  128 + return false;
  129 + }
  130 +
  131 + $dom.val(intTime + ' S');
  132 + }, 1000);
  133 +
  134 + $dom.addClass('intTimer');
  135 + $dom.val(intTime + ' S');
  136 + },
  137 + // 获取邮箱验证码
  138 + getEmailCode: function(captcha) {
  139 + this.postAjax('/home/megift/sendEmailCode', {
  140 + email: this.userEmail,
  141 + verifyCode: captcha.getResults()
  142 + }).then(function(res) {
  143 + if (res.code === 200) {
  144 + that.intTimer($('.email-btn'));
  145 + }
  146 + });
  147 + },
  148 +
  149 + // 效验邮箱验证码
  150 + verifyEmailCode: function() {
  151 + var that = this;
  152 + var captcha;
  153 + var dg = new dialog.Dialog({
  154 + content: that.emailTpl({}),
  155 + className: 'me-gift-confirm',
  156 + btns: [{
  157 + id: 'confirm-email-btn',
  158 + name: '绑定手机号',
  159 + btnClass: ['alert-sure'],
  160 + cb: function() {
  161 + var emailCode = $('.email-code').val();
  162 + var verifyData = {code: '验证码不能为空'};
  163 +
  164 + that.postAjax('/home/megift/verifyEmail', {
  165 + email: that.userEmail,
  166 + code: emailCode
  167 + }, verifyData, captcha).then(function(res) {
  168 + if (res.code === 200) {
  169 + dg.close();
  170 + that.getMobileCode();
  171 + }
  172 + });
  173 + }
  174 + }]
  175 + }).show();
  176 +
  177 + captcha = new Captcha('#captcha').init();
  178 +
  179 + //发送邮箱验证码
  180 + $('.me-gift-confirm').find('.email-btn').unbind('click').bind('click', function() {
  181 + if (!$(this).hasClass('intTimer')) {
  182 + that.getEmailCode(captcha);
  183 + }
  184 + });
  185 + },
  186 +
  187 + // 获取手机验证码
  188 + getMobileCode: function() {
  189 + var that = this;
  190 + var captcha;
  191 + var dg = new dialog.Dialog({
  192 + content: that.mobileTpl({}),
  193 + className: 'me-gift-confirm',
  194 + btns: [{
  195 + id: 'confirm-mobile-cancel',
  196 + name: '取消',
  197 + btnClass: ['confirm-cancel'],
  198 + cb: function() {
  199 + dg.close();
  200 + }
  201 + }, {
  202 + id: 'confirm-mobile-sure',
  203 + name: '激活',
  204 + btnClass: ['confirm-sure'],
  205 + cb: function() {
  206 + var verifyData = {
  207 + area: '请选择手机区号',
  208 + mobile: '手机号不能为空',
  209 + code: '手机验证码不能为空',
  210 + };
  211 +
  212 + that.postAjax('/home/megift/changeMobile', {
  213 + area: ($('.mobile-area').find('em').text() || '').replace(/^\+/, ''),
  214 + mobile: $('.mobile').val(),
  215 + code: $('.mobile-code').val()
  216 + }, verifyData, captcha).then(function(res) {
  217 + if (res.code === 200) {
  218 + dg.close();
  219 + that.activateGift();
  220 + }
  221 + });
  222 + }
  223 + }]
  224 + }).show();
  225 +
  226 + captcha = new Captcha('#captcha').init();
  227 +
  228 + //发送邮箱验证码
  229 + $('.me-gift-confirm').find('.mobile-btn').unbind('click').bind('click', function() {
  230 + if (!$(this).hasClass('intTimer')) {
  231 + that.smsBind(captcha);
  232 + }
  233 + });
  234 + },
  235 +
  236 + // 发送手机验证码
  237 + smsBind: function(captcha) {
  238 + var that = this;
  239 + var area = ($('.mobile-area').find('em').text() || '').replace(/^\+/, '');
  240 + var mobile = $('.mobile').val();
  241 + var verifyData = {
  242 + area: '请选择手机区号',
  243 + mobile: '手机号不能为空'
  244 + };
  245 +
  246 + this.postAjax('/home/megift/smsBind', {
  247 + area: area,
  248 + mobile: mobile,
  249 + verifyCode: captcha.getResults()
  250 + }, verifyData, captcha).then(function(res) {
  251 + if (res.code === 200) {
  252 + that.intTimer($('.email-btn'));
  253 + }
  254 + });
  255 + },
  256 + // 激活礼品卡
  257 + activateGift: function() {
  258 + var that = this;
  259 + var captcha;
  260 + var dg = new dialog.Dialog({
  261 + content: that.giftTpl({}),
  262 + className: 'me-gift-confirm',
  263 + btns: [{
  264 + id: 'confirm-gift-cancel',
  265 + name: '取消',
  266 + btnClass: ['confirm-cancel'],
  267 + cb: function() {
  268 + dg.close();
  269 + }
  270 + }, {
  271 + id: 'confirm-gift-sure',
  272 + name: '激活',
  273 + btnClass: ['confirm-sure'],
  274 + cb: function() {
  275 + var $confirm = $('.me-gift-confirm');
  276 + var verifyData = {
  277 + cardCode: '礼品卡卡号不能为空',
  278 + cardPwd: '礼品卡卡密不能为空'
  279 + };
  280 +
  281 + that.postAjax('/home/meGift/activateGift', {
  282 + cardCode: $confirm.find('.card-code').val(),
  283 + cardPwd: $confirm.find('.card-pwd').val(),
  284 + verifyCode: captcha.getResults()
  285 + }, verifyData, captcha).then(function(res) {
  286 + if (res.code === 200) {
  287 + dg.close();
  288 + that.meAlert('<p>您的礼品卡激活成功</p><p>请尽情享用</p>', false);
  289 + }
  290 + });
  291 + }
  292 + }]
  293 + }).show();
  294 +
  295 + captcha = new Captcha('#captcha').init();
  296 + },
  297 +
  298 + // 消费明细
  299 + infoList: function(cardCode) {
  300 + var that = this;
  301 +
  302 + new dialog.Dialog({
  303 + content: that.detailGiftTpl({}),
  304 + className: 'me-gift-page me-gift-confirm detail-gift-list'
  305 + }).show();
  306 +
  307 + $.get('/home/megift/detail', {
  308 + cardCode: cardCode
  309 + }).then(function(res) {
  310 + if (!res) {
  311 + return false;
  312 + }
  313 +
  314 + $('.detail-gift-content').html(res)
  315 + });
  316 + },
  317 +
  318 + // 我的弹框
  319 + meAlert: function(content, mask) {
  320 + var dg = new dialog.Dialog({
  321 + content: content,
  322 + className: 'me-gift-alert',
  323 + mask: mask || true,
  324 + btns: [{
  325 + name: '我知道了',
  326 + btnClass: ['btn-close', 'alert-sure'],
  327 + cb: function() {
  328 + dg.close();
  329 + }
  330 + }]
  331 + }).show();
  332 + }
  333 +};
  334 +
  335 +$(function() {
  336 + meGift.init();
  337 +});
@@ -61,6 +61,10 @@ @@ -61,6 +61,10 @@
61 } 61 }
62 } 62 }
63 63
  64 + .me-gift-info-table {
  65 + margin-bottom: 0;
  66 + }
  67 +
64 .me-gift-info-table .me-gift-tr div { 68 .me-gift-info-table .me-gift-tr div {
65 width: auto; 69 width: auto;
66 height: 40px; 70 height: 40px;
@@ -70,7 +74,7 @@ @@ -70,7 +74,7 @@
70 background: resolve("home/gift.png") no-repeat center; 74 background: resolve("home/gift.png") no-repeat center;
71 background-size: 110px 132px; 75 background-size: 110px 132px;
72 width: 775px; 76 width: 775px;
73 - height: 225px; 77 + height: 300px;
74 display: table-caption; 78 display: table-caption;
75 caption-side: bottom; 79 caption-side: bottom;
76 border: 1px solid #e6e6e6; 80 border: 1px solid #e6e6e6;
@@ -148,6 +152,11 @@ @@ -148,6 +152,11 @@
148 height: 29px; 152 height: 29px;
149 border: none; 153 border: none;
150 cursor: pointer; 154 cursor: pointer;
  155 + width: 110px;
  156 + }
  157 +
  158 + .int-timer {
  159 + background-color: #b0b0b0 !important;
151 } 160 }
152 } 161 }
153 162
@@ -204,7 +213,7 @@ @@ -204,7 +213,7 @@
204 } 213 }
205 214
206 .info-gift-header { 215 .info-gift-header {
207 - width: 100%; 216 + width: 777px;
208 text-align: center; 217 text-align: center;
209 margin: 25px 10px 30px; 218 margin: 25px 10px 30px;
210 font-size: 14px; 219 font-size: 14px;
@@ -241,4 +250,18 @@ @@ -241,4 +250,18 @@
241 margin-left: 52px; 250 margin-left: 52px;
242 margin-top: 0; 251 margin-top: 0;
243 } 252 }
  253 +
  254 + .img-check-main .img-check-tip {
  255 + top: auto;
  256 + }
  257 +
  258 + .detail-gift-list {
  259 + width: 817px;
  260 + min-height: 500px;
  261 +
  262 + .me-pager {
  263 + width: 758px;
  264 + margin: 0 10px;
  265 + }
  266 + }
244 } 267 }
  1 +.me-gift-page {
  2 + .me-gift .me-content {
  3 + min-height: 370px;
  4 + }
  5 +
  6 + .tabs li.add-gift {
  7 + margin-top: -5px;
  8 + background-image: none;
  9 + background-color: #000;
  10 + float: right;
  11 +
  12 + a {
  13 + color: #fff;
  14 + }
  15 + }
  16 +
  17 + .me-gift-table,
  18 + .me-gift-info-table {
  19 + display: table;
  20 + width: 775px;
  21 + text-align: center;
  22 + border: 1px solid #e6e6e6;
  23 + margin: 0 10px 30px;
  24 +
  25 + .me-gift-header {
  26 + display: table-row;
  27 + background-color: #efefef;
  28 +
  29 + div {
  30 + height: 30px;
  31 + display: table-cell;
  32 + vertical-align: middle;
  33 + font-size: 13px;
  34 + width: 120px;
  35 +
  36 + &:first-child {
  37 + width: 174px;
  38 + }
  39 + }
  40 + }
  41 +
  42 + .me-gift-tr {
  43 + display: table-row;
  44 +
  45 + &:first-child div {
  46 + border-top: none;
  47 + }
  48 +
  49 + div {
  50 + display: table-cell;
  51 + height: 50px;
  52 + vertical-align: middle;
  53 + font-size: 13px;
  54 + border-top: 1px solid #e6e6e6;
  55 + }
  56 +
  57 + div.info-list {
  58 + color: #4a90e2;
  59 + cursor: pointer;
  60 + }
  61 + }
  62 + }
  63 +
  64 + .me-gift-info-table .me-gift-tr div {
  65 + width: auto;
  66 + height: 40px;
  67 + }
  68 +
  69 + .cart-list-empty {
  70 + background: resolve("home/gift.png") no-repeat center;
  71 + background-size: 110px 132px;
  72 + width: 775px;
  73 + height: 300px;
  74 + display: table-caption;
  75 + caption-side: bottom;
  76 + border: 1px solid #e6e6e6;
  77 + border-top: none;
  78 + }
  79 +
  80 + .refund {
  81 + color: #86bf4a;
  82 + }
  83 +
  84 + .consume {
  85 + color: #d0021b;
  86 + }
  87 +}
  88 +
  89 +.me-gift-alert {
  90 + width: 350px;
  91 + height: 190px;
  92 +
  93 + .content {
  94 + color: #444;
  95 + padding: 55px 0;
  96 + font-size: 18px;
  97 +
  98 + p {
  99 + margin-top: 10px;
  100 + }
  101 + }
  102 +}
  103 +
  104 +.me-gift-confirm {
  105 + color: #444;
  106 +
  107 + .title,
  108 + .info-title {
  109 + font-size: 18px;
  110 + padding-bottom: 25px;
  111 + margin: 0 20px;
  112 + }
  113 +
  114 + .info-title {
  115 + border-bottom: 1px solid #e6e6e6;
  116 + }
  117 +
  118 + .gift-group {
  119 + margin-top: 10px;
  120 + overflow: hidden;
  121 + }
  122 +
  123 + .left {
  124 + float: left;
  125 + }
  126 +
  127 + .right {
  128 + float: right;
  129 + }
  130 +
  131 + .verify-input {
  132 + margin: 15px 10px;
  133 +
  134 + input {
  135 + height: 30px;
  136 + line-height: 28px;
  137 + padding: 0 5px;
  138 + font-size: 14px;
  139 + color: #444;
  140 + border: 1px solid #e6e6e6;
  141 + outline: none;
  142 + box-sizing: border-box;
  143 + }
  144 +
  145 + input[type=button] {
  146 + background-color: #444;
  147 + color: #fff;
  148 + height: 29px;
  149 + border: none;
  150 + cursor: pointer;
  151 + width: 110px;
  152 + }
  153 +
  154 + .intTimer {
  155 + background-color: #b0b0b0 !important;
  156 + }
  157 + }
  158 +
  159 + input.mobile {
  160 + width: 260px;
  161 + border-left: none;
  162 + }
  163 +
  164 + .mobile-area {
  165 + width: 70px;
  166 + line-height: 30px;
  167 + height: 30px;
  168 + text-align: center;
  169 + border: 1px solid #e6e6e6;
  170 + outline: none;
  171 + box-sizing: border-box;
  172 + border-right: none;
  173 + background-color: #fff;
  174 + cursor: pointer;
  175 + }
  176 +
  177 + .ul-list {
  178 + position: absolute;
  179 + width: 130px;
  180 + margin-left: -25px;
  181 + background-color: #fff;
  182 + margin-top: -3px;
  183 + border: 1px solid #e6e6e6;
  184 + display: none;
  185 + cursor: pointer;
  186 +
  187 + li {
  188 + border-bottom: 1px solid #e6e6e6;
  189 + height: 30px;
  190 + line-height: 30px;
  191 +
  192 + &:hover {
  193 + color: #4a90e2;
  194 + }
  195 + }
  196 + }
  197 +
  198 + input.mobile-code {
  199 + width: 217px;
  200 + }
  201 +
  202 + .card-code,
  203 + .card-pwd {
  204 + width: 310px;
  205 + }
  206 +
  207 + .border-top-info {
  208 + border-top: 1px solid #e6e6e6;
  209 + }
  210 +
  211 + .info-gift-header {
  212 + width: 777px;
  213 + text-align: center;
  214 + margin: 25px 10px 30px;
  215 + font-size: 14px;
  216 +
  217 + .text-left {
  218 + text-align: left;
  219 + }
  220 +
  221 + .text-right {
  222 + text-align: right;
  223 + }
  224 +
  225 + td {
  226 + height: 25px;
  227 + }
  228 +
  229 + .validity-time {
  230 + width: 360px;
  231 + }
  232 + }
  233 +
  234 + .gift-type {
  235 + background: resolve("home/gift-filter.png") no-repeat center;
  236 + background-size: 69px 21px;
  237 + width: 69px;
  238 + height: 21px;
  239 + line-height: 21px;
  240 + display: inline-block;
  241 + cursor: pointer;
  242 + }
  243 +
  244 + .gift-filter .ul-list {
  245 + width: 69px;
  246 + margin-left: 52px;
  247 + margin-top: 0;
  248 + }
  249 +
  250 + .img-check-main .img-check-tip {
  251 + top: auto;
  252 + }
  253 +
  254 + .detail-gift-list {
  255 + width: 817px;
  256 + min-height: 500px;
  257 + }
  258 +}