fe / yohobuywap-node · Commits

Go to a project

Authored by 张丽霞
Commit 98fdea32d33feb0d6e822aa743ee3122b169954e 1 parent d57a43e5

分享领券模板

Inline Side-by-side
Showing 13 changed files with 302 additions and 116 deletions
1 'use strict'; 1 'use strict';
2 2
  3 +const mRoot = '../models';
  4 +
  5 +// const couponModel = require(`${mRoot}/coupon`); // 领取优惠券 model
  6 +// const cookie = require('../../../utils/cookie');
  7 +
3 exports.index = (req, res) => { 8 exports.index = (req, res) => {
4 9
5 - // res.render('coupon', {aa: 1}); 10 + // var renderData = {
  11 + // layout: false, // 原有活动移植，忽略公有模板
  12 + // module: 'coupon/index',
  13 + // title: 'YOHO!BUY有货微信分享',
  14 + // isApp: req.isApp,
  15 + // appUrl: 'http://www.yohoshow.com/about/index/yohobuyqr', // APP 下载地址
  16 + // };
  17 +
  18 + // var uid = cookie.getUid(req);
  19 + // var couponId = res.app.locals.proEnv ? '22184' : '13061';
  20 +
  21 + // couponModel({
  22 + // uid: uid,
  23 + // couponId: couponId,
  24 + // }).then((couponData) => {
  25 + // var couponInfo = JSON.parse(couponData[0]);
  26 +
  27 + // if (couponData.length && couponInfo.code === 200) {
  28 + // //领券成功
  29 + // console.log('领券成功');
  30 +
  31 + // }
  32 + // }).then((couponData) => {
  33 + // var couponInfo = JSON.parse(couponData[0]);
  34 +
  35 + // if (couponInfo.code === 401) {
  36 + // renderData.geted = true;
  37 + // }
  38 +
  39 + // if (couponInfo.code !== 401 && couponInfo.code !== 200) {
  40 + // renderData.fail = true;
  41 + // }
  42 +
  43 + // res.render('coupon/index', renderData); // 渲染页面
  44 + // }).catch((err) => {
  45 + // errUtil.webError(err, res); // 抓取 Promise 链的错误
  46 + // });
  47 +
6 res.render('coupon', { 48 res.render('coupon', {
7 module: 'coupon', 49 module: 'coupon',
8 page: 'index' 50 page: 'index'
  1 +
  2 +
  3 +// var Http = require('../../../library/api');
  4 +
  5 +// var http = new Http();
  6 +
  7 +// module.exports = (data) => {
  8 +// var defaultParam = {
  9 +// method: 'app.promotion.getCoupon'
  10 +// },
  11 +// requestList = [],
  12 +// requestData = _.cloneDeep(data);
  13 +
  14 +// // 处理完成后，发给后端
  15 +// data = Object.assign(defaultParam, data);
  16 +// return api.get('/', data); // 所有数据返回一个 Promise，方便 Promise.all 调用
  17 +
  18 +// var defaultParam = {
  19 +// method: 'app.promotion.getCoupon'
  20 +// },
  21 +// requestList = [],
  22 +// requestData = _.cloneDeep(data);
  23 +
  24 +// // 根据券号取优惠券
  25 +// if (data.couponId) {
  26 +// return http.post(defaultParam,data);
  27 +// };
  28 +
  29 +// // 处理完成后，发给后端
  30 +// data = Object.assign(defaultParam, data);
  31 +// return http.get('/', data); // 所有数据返回一个 Promise，方便 Promise.all 调用
  32 +// };
@@ -4,15 +4,16 @@ @@ -4,15 +4,16 @@
4 </div> 4 </div>
5 <div class="coupon-centent"> 5 <div class="coupon-centent">
6 <div class="title"> 6 <div class="title">
  7 + <img src="../img/coupon/coupon-title.png">
7 </div> 8 </div>
8 9
9 - <div class="input-content"> 10 + <div class="input-content hidden">
10 <input id="phone" type="text" placeholder="请输入手机号" maxlength="11"/> 11 <input id="phone" type="text" placeholder="请输入手机号" maxlength="11"/>
11 <div>获取红包</div> 12 <div>获取红包</div>
12 </div> 13 </div>
13 14
14 - <div class="input-content hidden">  
15 - <input id="verification hidden" type="text" placeholder="请输入验证码" maxlength="4"/> 15 + <div class="input-content">
  16 + <input id="verification" type="text" placeholder="请输入验证码" maxlength="4"/>
16 <div>验证领红包</div> 17 <div>验证领红包</div>
17 </div> 18 </div>
18 19
@@ -22,27 +23,41 @@ @@ -22,27 +23,41 @@
22 </div> 23 </div>
23 24
24 <div class="gain-coupon-centent hidden"> 25 <div class="gain-coupon-centent hidden">
25 - <div class="gain-coupon-centent">  
26 <div class="coupon"> 26 <div class="coupon">
27 - <!-- <img src="/activity/cocacola/images/cokeCoupon.png"> --> 27 + <!-- <img src="{{img}}"> -->
  28 + <img src="../img/coupon/coupon.png">
28 </div> 29 </div>
29 <p class="phone" id="mobile"></p> 30 <p class="phone" id="mobile"></p>
30 <p>登录Yoho!Buy有货客户端即可使用</p> 31 <p>登录Yoho!Buy有货客户端即可使用</p>
31 32
32 <div class="use-coupon-btn"> 33 <div class="use-coupon-btn">
33 - <!-- <img src="/activity/cocacola/images/cokeBtn.png"> --> 34 + 马上去Yoho!Buy有货使用
34 </div> 35 </div>
35 - <span>活动说明</span> 36 + <span class="description">活动说明&#xe604;</span>
36 </div> 37 </div>
37 </div> 38 </div>
38 39
39 - </div>  
40 - 40 + {{#if fail}}
  41 + <div class="tip-wrap">
  42 + <div class="tip fail">
  43 + <div class="header">
  44 + </div>
  45 +
  46 + <div class="title">
  47 + 本次活动已结束
  48 + <!-- 优惠券已领光 -->
  49 + </div>
  50 +
  51 + <div class="logo">
  52 + </div>
  53 + </div>
  54 + </div>
  55 + {{/if}}
41 <div class="messages hidden" id="dialog"> 56 <div class="messages hidden" id="dialog">
42 <div class="content"></div> 57 <div class="content"></div>
43 </div> 58 </div>
44 59
45 - <div class="keep-out hidden"></div> 60 + <div class="mask hidden"></div>
46 <div class="dialog hidden" id="message"> 61 <div class="dialog hidden" id="message">
47 <span class="close"></span> 62 <span class="close"></span>
48 <div class="activity-message"> 63 <div class="activity-message">

2.15 KB | W: | H:

1.92 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

11.4 KB | W: | H:

7.76 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

84.5 KB | W: | H:

83.4 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -7,21 +7,21 @@ var $ = require('yoho-jquery'), @@ -7,21 +7,21 @@ var $ = require('yoho-jquery'),
7 7
8 $('#phone').bind('input propertychange', function() { 8 $('#phone').bind('input propertychange', function() {
9 if ($(this).val().length === 11) { 9 if ($(this).val().length === 11) {
10 - $('.centent span').eq('0').addClass('verification-code'); 10 + $('.input-content div').eq('0').addClass('verification-code');
11 } else { 11 } else {
12 - $('.centent span').eq('0').removeClass(); 12 + $('.input-content div').eq('0').removeClass();
13 } 13 }
14 }); 14 });
15 $('#verification').bind('input propertychange', function() { 15 $('#verification').bind('input propertychange', function() {
16 if ($(this).val().length === 4) { 16 if ($(this).val().length === 4) {
17 - $('.centent span').eq('1').addClass('get'); 17 + $('.input-content div').eq('1').addClass('get');
18 } else { 18 } else {
19 - $('.centent span').eq('1').removeClass(); 19 + $('.input-content div').eq('1').removeClass();
20 } 20 }
21 }); 21 });
22 22
23 -$('.centent').on('click', '.verification-code', function() {  
24 - $('.centent span').eq('0').removeClass('verification-code'); 23 +$('.input-content').on('click', '.verification-code', function() {
  24 + $('.input-content div').eq('0').removeClass('verification-code');
25 phone = $(this).siblings('input').val(); 25 phone = $(this).siblings('input').val();
26 reg = /[0-9]{11}/; 26 reg = /[0-9]{11}/;
27 if (!reg.test(phone)) { 27 if (!reg.test(phone)) {
@@ -47,11 +47,11 @@ $('.centent').on('click', '.verification-code', function() { @@ -47,11 +47,11 @@ $('.centent').on('click', '.verification-code', function() {
47 num++; 47 num++;
48 if (num > 60) { 48 if (num > 60) {
49 num = 0; 49 num = 0;
50 - $('.centent span').eq('0').addClass('verification-code').html('获取验证码'); 50 + $('.input-content div').eq('0').addClass('verification-code').html('获取验证码');
51 clearInterval(time); 51 clearInterval(time);
52 52
53 } else { 53 } else {
54 - $('.centent span').eq('0').removeClass('verification-code').html('重新发送' + (60 - num)); 54 + $('.input-content div').eq('0').removeClass('verification-code').html('重新发送' + (60 - num));
55 } 55 }
56 }, 1000); 56 }, 1000);
57 } else { 57 } else {
@@ -67,8 +67,8 @@ $('.centent').on('click', '.verification-code', function() { @@ -67,8 +67,8 @@ $('.centent').on('click', '.verification-code', function() {
67 } 67 }
68 }); 68 });
69 }); 69 });
70 -$('.centent').on('click', '.get', function() {  
71 - $('.centent span').eq('1').removeClass('get'); 70 +$('.input-content').on('click', '.get', function() {
  71 + $('.input-content div').eq('1').removeClass('get');
72 if ($(this).siblings('input').val().length === 4) { 72 if ($(this).siblings('input').val().length === 4) {
73 $.ajax({ 73 $.ajax({
74 url: '/activity/cocacola/CocacolaController/validRegCodeAndSendCode', 74 url: '/activity/cocacola/CocacolaController/validRegCodeAndSendCode',
@@ -109,13 +109,16 @@ $('.close').on('click', function() { @@ -109,13 +109,16 @@ $('.close').on('click', function() {
109 $('.keep-out').addClass('hidden'); 109 $('.keep-out').addClass('hidden');
110 $('#dialog .content').html(' '); 110 $('#dialog .content').html(' ');
111 }); 111 });
112 -$('.footer span').on('click', function() { 112 +$('.coupon-description span').on('click', function() {
  113 + $('#message').removeClass('hidden');
  114 + $('.keep-out').removeClass('hidden');
  115 +});
  116 +$('.description').on('click', function() {
113 $('#message').removeClass('hidden'); 117 $('#message').removeClass('hidden');
114 $('.keep-out').removeClass('hidden'); 118 $('.keep-out').removeClass('hidden');
115 }); 119 });
116 120
117 -  
118 -$('.centent').on('click', '.get', function() { 121 +$('.input-content').on('click', '.get', function() {
119 if (window._yas) { 122 if (window._yas) {
120 window._yas.sendCustomInfo({ 123 window._yas.sendCustomInfo({
121 receiveCoupon: 'Y' 124 receiveCoupon: 'Y'
@@ -25,101 +25,125 @@ @@ -25,101 +25,125 @@
25 background: #9d1a15; 25 background: #9d1a15;
26 } 26 }
27 27
28 - .coupon-centent .title {  
29 - width: 100%;  
30 - height: 111px;  
31 - background: url("../img/coupon/coupon-title.png");  
32 - } 28 + .coupon-centent {
  29 + .title {
  30 + padding: 40px 90px;
  31 + height: 111px;
  32 + background: #9d1a15;
33 33
34 - .coupon-centent .input-content {  
35 - height: 206px;  
36 - margin: 30px 30px 0;  
37 - } 34 + img {
  35 + width: 100%;
  36 + height: auto;
  37 + }
  38 + }
38 39
39 - .coupon-centent .input-content input {  
40 - height: 88px;  
41 - width: 100%;  
42 - margin-bottom: 30px;  
43 - border: 1px solid #fff;  
44 - font-size: 18px;  
45 - color: #fff;  
46 - background: #9d1a15;  
47 - border-radius: 0.3rem;  
48 - text-align: center;  
49 - outline: none;  
50 - } 40 + .input-content {
  41 + height: 206px;
  42 + margin: 30px 30px 0;
51 43
52 - .coupon-centent .input-content div {  
53 - height: 88px;  
54 - width: 100%;  
55 - text-align: center;  
56 - font-size: 18px;  
57 - border-radius: 0.3rem;  
58 - background: #fff;  
59 - color: #444;  
60 - line-height: 88px;  
61 - } 44 + input {
  45 + height: 88px;
  46 + width: 100%;
  47 + margin-bottom: 30px;
  48 + border: 1px solid #fff;
  49 + font-size: 18px;
  50 + color: #fff;
  51 + background: #9d1a15;
  52 + border-radius: 0.3rem;
  53 + text-align: center;
  54 + outline: none;
  55 + }
62 56
63 - .coupon-description {  
64 - width: 100%;  
65 - height: 173px;  
66 - position: relative;  
67 - background: url("../img/coupon/coupon-footer.png");  
68 - } 57 + div {
  58 + height: 88px;
  59 + width: 100%;
  60 + text-align: center;
  61 + font-size: 18px;
  62 + border-radius: 0.3rem;
  63 + background: #b0b0b0;
  64 + color: #e0e0e0;
  65 + line-height: 88px;
  66 + }
69 67
70 - .coupon-description span {  
71 - position: absolute;  
72 - bottom: 0;  
73 - left: 40%;  
74 - width: 20%;  
75 - height: 2rem; 68 + .get {
  69 + background: #fff;
  70 + color: #444;
  71 + }
  72 + }
  73 +
  74 + .coupon-description {
  75 + width: 100%;
  76 + height: 173px;
  77 + position: relative;
  78 + background: url("../img/coupon/coupon-footer.png");
  79 +
  80 + span {
  81 + position: absolute;
  82 + bottom: 0;
  83 + left: 40%;
  84 + width: 20%;
  85 + height: 2rem;
  86 + }
  87 + }
76 } 88 }
77 89
78 .gain-coupon-centent { 90 .gain-coupon-centent {
79 - width: 100%;  
80 - height: auto;  
81 - overflow: hidden;  
82 - padding-top: 2rem;  
83 - padding-bottom: 0.6rem;  
84 - background: #e10c1e;  
85 - } 91 + p {
  92 + width: 100%;
  93 + height: 40px;
  94 + line-height: 40px;
  95 + text-align: center;
  96 + color: #fff;
  97 + font-size: 17px;
  98 + }
86 99
87 - .gain-coupon-centent p {  
88 - width: 100%;  
89 - height: auto;  
90 - overflow: hidden;  
91 - text-align: center;  
92 - color: #fff;  
93 - line-height: 2rem;  
94 - font-size: 0.9rem;  
95 - } 100 + p.phone {
  101 + margin-top: 10px;
  102 + font-size: 30px;
  103 + font-weight: bold;
  104 + }
96 105
97 - .gain-coupon-centent p.phone {  
98 - font-size: 1.3rem;  
99 - font-weight: bold;  
100 - line-height: 2.6rem;  
101 - } 106 + .coupon {
  107 + padding-top: 50px;
  108 + width: 100%;
  109 + height: 220px;
  110 + background: ##9d1a15;
  111 + }
102 112
103 - .coupon {  
104 - width: 81.25%;  
105 - height: auto;  
106 - overflow: hidden;  
107 - margin: 0 auto;  
108 - background: url("../img/coupon/close.png");  
109 - } 113 + .coupon img {
  114 + width: 100%;
  115 + height: auto;
  116 + }
110 117
111 - .coupon img {  
112 - width: 100%;  
113 - height: auto; 118 + .use-coupon-btn {
  119 + height: 88px;
  120 + line-height: 88px;
  121 + margin: 30px 55px;
  122 + background: #444;
  123 + color: #fff;
  124 + text-align: center;
  125 + font-size: 18px;
  126 + border-radius: 4px;
  127 + }
  128 +
  129 + span {
  130 + font-weight: bold;
  131 + display: inline-block;
  132 + width: 139px;
  133 + height: 42px;
  134 + align: center;
  135 + color: #fff;
  136 + margin: 0 40%;
  137 + }
114 } 138 }
115 139
116 .dialog { 140 .dialog {
117 - width: 82%;  
118 - height: 14rem; 141 + width: 84%;
  142 + height: 410px;
119 position: absolute; 143 position: absolute;
120 background: #fff; 144 background: #fff;
121 border-radius: 0.6rem; 145 border-radius: 0.6rem;
122 - left: 9%; 146 + left: 8%;
123 top: 45%; 147 top: 45%;
124 margin-top: -7rem; 148 margin-top: -7rem;
125 z-index: 2; 149 z-index: 2;
@@ -131,7 +155,6 @@ @@ -131,7 +155,6 @@
131 overflow: hidden; 155 overflow: hidden;
132 background: url("../img/coupon/close.png"); 156 background: url("../img/coupon/close.png");
133 color: #f1f1f1; 157 color: #f1f1f1;
134 - border-radius: 20px;  
135 position: absolute; 158 position: absolute;
136 top: -20px; 159 top: -20px;
137 right: -20px; 160 right: -20px;
@@ -139,17 +162,6 @@ @@ -139,17 +162,6 @@
139 text-align: center; 162 text-align: center;
140 } 163 }
141 164
142 - .use-coupon-btn .btn {  
143 - width: 75.25%;  
144 - height: auto;  
145 - margin: 0 auto 1.6rem;  
146 - }  
147 -  
148 - .use-coupon-btn .btn img {  
149 - width: 100%;  
150 - height: auto;  
151 - }  
152 -  
153 .hidden { 165 .hidden {
154 display: none; 166 display: none;
155 } 167 }
@@ -159,7 +171,7 @@ @@ -159,7 +171,7 @@
159 line-height: 14rem; 171 line-height: 14rem;
160 } 172 }
161 173
162 - .keep-out { 174 + .mask {
163 width: 100%; 175 width: 100%;
164 height: 100%; 176 height: 100%;
165 overflow: hidden; 177 overflow: hidden;
@@ -193,12 +205,12 @@ @@ -193,12 +205,12 @@
193 } 205 }
194 206
195 .messages { 207 .messages {
196 - width: 82%; 208 + width: 84%;
197 height: 4rem; 209 height: 4rem;
198 position: absolute; 210 position: absolute;
199 background: rgba(0, 0, 0, 0.9); 211 background: rgba(0, 0, 0, 0.9);
200 border-radius: 0.6rem; 212 border-radius: 0.6rem;
201 - left: 9%; 213 + left: 8%;
202 top: 45%; 214 top: 45%;
203 margin-top: -2rem; 215 margin-top: -2rem;
204 z-index: 2; 216 z-index: 2;
@@ -208,5 +220,68 @@ @@ -208,5 +220,68 @@
208 .messages p { 220 .messages p {
209 line-height: 4rem; 221 line-height: 4rem;
210 } 222 }
  223 +
  224 + .tip-wrap {
  225 + width: 100%;
  226 + height: 100%;
  227 + background: #9d1a15;
  228 + position: absolute;
  229 + top: 0;
  230 + left: 0;
  231 + z-index: 3;
  232 + }
  233 +
  234 + .tip {
  235 + width: 100%;
  236 + height: 100%;
  237 + background: #9d1a15;
  238 + position: absolute;
  239 + top: 0;
  240 + left: 0;
  241 +
  242 + .header {
  243 + width: 170px;
  244 + height: 170px;
  245 + margin-top: 40%;
  246 + margin-left: auto;
  247 + margin-right: auto;
  248 + background: url("../img/coupon/unfortunately.png");
  249 + }
  250 +
  251 + .title {
  252 + margin-top: 30px;
  253 + font-size: 28px;
  254 + color: #fff;
  255 + text-align: center;
  256 + margin-left: auto;
  257 + margin-right: auto;
  258 + }
  259 +
  260 + .logo {
  261 + width: 391px;
  262 + height: 78px;
  263 + margin-top: 190px;
  264 + margin-left: auto;
  265 + margin-right: auto;
  266 + background: url("../img/coupon/logo.png");
  267 + }
  268 +
  269 + .desc {
  270 + font-size: 24px;
  271 + color: #444;
  272 + }
  273 +
  274 + .button {
  275 + display: block;
  276 + margin: 30px auto;
  277 + width: 270px;
  278 + height: 56px;
  279 + font-size: 26px;
  280 + line-height: 56px;
  281 + text-align: center;
  282 + color: #fff;
  283 + background: #000;
  284 + }
  285 + }
211 } 286 }
212 287
  1 +// 获取 UID
  2 +exports.getUid = (req) => {
  3 + var _uid = 0,
  4 + cookie = req.cookies._UID,
  5 + cookieList;
  6 +
  7 + if (req.isApp) {
  8 + return req.query.uid || 0;
  9 + }
  10 +
  11 + if (cookie) {
  12 + cookieList = cookie.split('::');
  13 + if (cookieList[1] && !isNaN(cookieList[1])) {
  14 + _uid = cookieList[1];
  15 + }
  16 + }
  17 +
  18 + return _uid;
  19 +};