张泽世 / yohobuywap-node · Commits

Go to a project

Authored by 张丽霞
Commit 6a743f46fe2908a09ae72766399794f86db87653 1 parent 1686c9a8

分享 领取优惠券

Inline Side-by-side
Showing 3 changed files with 418 additions and 0 deletions
  1 +<div class="receive-coupon-page">
  2 + <div class="page">
  3 + <div class="coupon-header">
  4 + <img src="/activity/cocacola/images/cokeBanner.jpg">
  5 + </div>
  6 + <div class="coupon-centent">
  7 + <div class="title">
  8 + </div>
  9 +
  10 + <div>
  11 + <input id="phone" type="text" placeholder="请输入手机号" maxlength="11"/>
  12 + <span>获取红包</span>
  13 + </div>
  14 +
  15 + <div>
  16 + <input id="verification" type="text" placeholder="请输入验证码" maxlength="4"/>
  17 + <span>验证领红包</span>
  18 + </div>
  19 +
  20 + <div class="use-coupon-btn">
  21 + <img src="/activity/cocacola/images/cokefooter.jpg">
  22 + <span></span>
  23 + </div>
  24 + </div>
  25 +
  26 + </div>
  27 + <div class="messages hidden" id="dialog">
  28 + <div class="content"></div>
  29 + </div>
  30 +
  31 + <div class="keep-out hidden"></div>
  32 + <div class="dialog hidden" id="message">
  33 + <span class="close"><img src="/activity/cocacola/images/close.png"></span>
  34 + <div class="activity-message">
  35 + <h3>活动说明</h3>
  36 + <div class="message">
  37 + <P>1、活动时间：2016年4月7日到2016年7月7日</P>
  38 + <P>2、仅限新注册用户以及首次购买用户使用</P>
  39 + <P>3、同一手机号限领一次优惠券</P>
  40 + </div>
  41 + </div>
  42 + </div>
  43 +
  44 + <div class="gain">
  45 + <div class="coupon-centent">
  46 + <div class="coupon">
  47 + <img src="/activity/cocacola/images/cokeCoupon.png">
  48 + </div>
  49 + <p class="phone" id="mobile"></p>
  50 + <p>登录Yoho!Buy有货客户端即可使用</p>
  51 +
  52 + <div class="use-coupon-btn">
  53 + <img src="/activity/cocacola/images/cokeBtn.png">
  54 + </div>
  55 + <span>活动说明</span>
  56 + </div>
  57 +
  58 + </div>
  59 +</div>
  1 +
  2 +var $ = require('yoho-jquery'),
  3 + num = 0,
  4 + phone,
  5 + reg,
  6 + time;
  7 +
  8 +$('#phone').bind('input propertychange', function() {
  9 + if ($(this).val().length === 11) {
  10 + $('.centent span').eq('0').addClass('verification-code');
  11 + } else {
  12 + $('.centent span').eq('0').removeClass();
  13 + }
  14 +});
  15 +$('#verification').bind('input propertychange', function() {
  16 + if ($(this).val().length === 4) {
  17 + $('.centent span').eq('1').addClass('get');
  18 + } else {
  19 + $('.centent span').eq('1').removeClass();
  20 + }
  21 +});
  22 +
  23 +$('.centent').on('click', '.verification-code', function() {
  24 + $('.centent span').eq('0').removeClass('verification-code');
  25 + phone = $(this).siblings('input').val();
  26 + reg = /[0-9]{11}/;
  27 + if (!reg.test(phone)) {
  28 + $('#dialog').removeClass('hidden');
  29 + $('.keep-out').removeClass('hidden');
  30 + $('#dialog .content').html('<p class="phone-error">手机号错误，请重新输入。<p>');
  31 + setTimeout(function() {
  32 + $('.messages').addClass('hidden');
  33 + $('.keep-out').addClass('hidden');
  34 + $('#dialog .content').html(' ');
  35 + }, 1400);
  36 + return;
  37 + }
  38 + $.ajax({
  39 + url: '/activity/cocacola/CocacolaController/sendSms',
  40 + data: {
  41 + mobile: $('#phone').val()
  42 + },
  43 + dataType: 'json',
  44 + success: function(data) {
  45 + if (data.code === 200) {
  46 + time = setInterval(function() {
  47 + num++;
  48 + if (num > 60) {
  49 + num = 0;
  50 + $('.centent span').eq('0').addClass('verification-code').html('获取验证码');
  51 + clearInterval(time);
  52 +
  53 + } else {
  54 + $('.centent span').eq('0').removeClass('verification-code').html('重新发送' + (60 - num));
  55 + }
  56 + }, 1000);
  57 + } else {
  58 + $('#dialog').removeClass('hidden');
  59 + $('.keep-out').removeClass('hidden');
  60 + $('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
  61 + setTimeout(function() {
  62 + $('.messages').addClass('hidden');
  63 + $('.keep-out').addClass('hidden');
  64 + $('#dialog .content').html(' ');
  65 + }, 1400);
  66 + }
  67 + }
  68 + });
  69 +});
  70 +$('.centent').on('click', '.get', function() {
  71 + $('.centent span').eq('1').removeClass('get');
  72 + if ($(this).siblings('input').val().length === 4) {
  73 + $.ajax({
  74 + url: '/activity/cocacola/CocacolaController/validRegCodeAndSendCode',
  75 + data: {
  76 + code: $('#verification').val(),
  77 + mobile: $('#phone').val(),
  78 + client_id: $.cookie('_yasvd')
  79 + },
  80 + dataType: 'json',
  81 + success: function(data) {
  82 + if (data.code === 200) {
  83 + location.href = 'gain.html?mobile=' + $('#phone').val();
  84 + } else {
  85 + $('#dialog').removeClass('hidden');
  86 + $('.keep-out').removeClass('hidden');
  87 + $('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
  88 + setTimeout(function() {
  89 + $('.messages').addClass('hidden');
  90 + $('.keep-out').addClass('hidden');
  91 + $('#dialog .content').html(' ');
  92 + }, 1400);
  93 + }
  94 + }
  95 + });
  96 + } else {
  97 + $('#dialog').removeClass('hidden');
  98 + $('.keep-out').removeClass('hidden');
  99 + $('#dialog .content').html('<p class="phone-error">验证码错误，请重新输入。<p>');
  100 + setTimeout(function() {
  101 + $('.messages').addClass('hidden');
  102 + $('.keep-out').addClass('hidden');
  103 + $('#dialog .content').html(' ');
  104 + }, 1400);
  105 + }
  106 +});
  107 +$('.close').on('click', function() {
  108 + $('.dialog').addClass('hidden');
  109 + $('.keep-out').addClass('hidden');
  110 + $('#dialog .content').html(' ');
  111 +});
  112 +$('.footer span').on('click', function() {
  113 + $('#message').removeClass('hidden');
  114 + $('.keep-out').removeClass('hidden');
  115 +});
  116 +
  117 +
  118 +$('.centent').on('click', '.get', function() {
  119 + if (window._yas) {
  120 + window._yas.sendCustomInfo({
  121 + receiveCoupon: 'Y'
  122 + }, true);
  123 + }
  124 +});
  1 +.receive-coupon-page {
  2 + * {
  3 + margin: 0;
  4 + padding: 0;
  5 + font-size: 14px;
  6 + }
  7 +
  8 + html,
  9 + body {
  10 + width: 100%;
  11 + height: 100%;
  12 + background: #e10c1e;
  13 + }
  14 +
  15 + .page {
  16 + width: 100%;
  17 + height: 100%;
  18 + background: #e10c1e;
  19 + }
  20 + .coupon-header {
  21 + width: 100%;
  22 + height: auto;
  23 + overflow: hidden;
  24 + }
  25 +
  26 + .use-coupon-btn {
  27 + width: 100%;
  28 + height: auto;
  29 + overflow: hidden;
  30 + position: relative;
  31 + padding-bottom: 2rem;
  32 + }
  33 +
  34 + .use-coupon-btn img,
  35 + .coupon-header img {
  36 + width: 100%;
  37 + }
  38 +
  39 + .use-coupon-btn span {
  40 + position: absolute;
  41 + bottom: 0;
  42 + left: 40%;
  43 + width: 20%;
  44 + height: 2rem;
  45 + }
  46 +
  47 + .coupon-centent {
  48 + width: 100%;
  49 + height: auto;
  50 + overflow: hidden;
  51 + padding-top: 2.4rem;
  52 + background: #e10c1e;
  53 + }
  54 +
  55 + .coupon-centent div {
  56 + width: 81.25%;
  57 + height: 4rem;
  58 + overflow: hidden;
  59 + margin: 0 auto;
  60 + padding-bottom: 1rem;
  61 + }
  62 +
  63 + .coupon-centent input {
  64 + width: 68%;
  65 + height: 3.6rem;
  66 + overflow: hidden;
  67 + border: 1px solid #fff;
  68 + border-right: none;
  69 + background: none;
  70 + font-size: 18px;
  71 + color: #fff;
  72 + float: left;
  73 + box-sizing: border-box;
  74 + border-radius: 0.3rem 0 0 0.3rem;
  75 + text-align: center;
  76 + outline: none;
  77 + }
  78 +
  79 + .coupon-centent span {
  80 + width: 30%;
  81 + height: 3.6rem;
  82 + float: left;
  83 + line-height: 3.6rem;
  84 + text-align: center;
  85 + font-size: 1em;
  86 + border-radius: 0 0.3rem 0.3rem 0;
  87 + background: #b0b0b0;
  88 + color: #e0e0e0;
  89 + }
  90 +
  91 + .coupon-centent .verification-code,
  92 + .coupon-centent .get {
  93 + background: #fff;
  94 + color: #000;
  95 + }
  96 +
  97 + .gain-coupon-centent {
  98 + width: 100%;
  99 + height: auto;
  100 + overflow: hidden;
  101 + padding-top: 2rem;
  102 + padding-bottom: 0.6rem;
  103 + background: #e10c1e;
  104 + }
  105 +
  106 + .gain-coupon-centent p {
  107 + width: 100%;
  108 + height: auto;
  109 + overflow: hidden;
  110 + text-align: center;
  111 + color: #fff;
  112 + line-height: 2rem;
  113 + font-size: 0.9rem;
  114 + }
  115 +
  116 + .gain-coupon-centent p.phone {
  117 + font-size: 1.3rem;
  118 + font-weight: bold;
  119 + line-height: 2.6rem;
  120 + }
  121 +
  122 + .coupon {
  123 + width: 81.25%;
  124 + height: auto;
  125 + overflow: hidden;
  126 + margin: 0 auto;
  127 + }
  128 +
  129 + .coupon img {
  130 + width: 100%;
  131 + height: auto;
  132 + }
  133 +
  134 + .dialog {
  135 + width: 82%;
  136 + height: 14rem;
  137 + position: absolute;
  138 + background: #fff;
  139 + border-radius: 0.6rem;
  140 + left: 9%;
  141 + top: 45%;
  142 + margin-top: -7rem;
  143 + z-index: 2;
  144 + }
  145 +
  146 + .dialog .close {
  147 + width: 1.4rem;
  148 + height: 1.4rem;
  149 + overflow: hidden;
  150 + background: #444;
  151 + color: #f1f1f1;
  152 + border-radius: 50%;
  153 + position: absolute;
  154 + top: -0.5rem;
  155 + right: -0.5rem;
  156 + line-height: 1.4rem;
  157 + text-align: center;
  158 + }
  159 +
  160 + .dialog .close img {
  161 + width: 100%;
  162 + height: auto;
  163 + }
  164 +
  165 + .use-coupon-btn .btn {
  166 + width: 75.25%;
  167 + height: auto;
  168 + margin: 0 auto 1.6rem;
  169 + }
  170 +
  171 + .use-coupon-btn .btn img {
  172 + width: 100%;
  173 + height: auto;
  174 + }
  175 +
  176 + .hidden {
  177 + display: none;
  178 + }
  179 +
  180 + .phone-error {
  181 + text-align: center;
  182 + line-height: 14rem;
  183 + }
  184 +
  185 + .keep-out {
  186 + width: 100%;
  187 + height: 100%;
  188 + overflow: hidden;
  189 + background-color: #000;
  190 + opacity: 0.4;
  191 + position: absolute;
  192 + top: 0;
  193 + left: 0;
  194 + z-index: 1;
  195 + }
  196 +
  197 + .activity-message {
  198 + overflow: auto;
  199 + }
  200 +
  201 + .activity-message h3 {
  202 + width: 100%;
  203 + height: 3.4rem;
  204 + padding-top: 0.6rem;
  205 + line-height: 3.4rem;
  206 + font-size: 1.2rem;
  207 + text-align: center;
  208 + }
  209 +
  210 + .activity-message p {
  211 + width: 85%;
  212 + height: auto;
  213 + overflow: hidden;
  214 + margin: 0 auto;
  215 + line-height: 2rem;
  216 + }
  217 +
  218 + .messages {
  219 + width: 82%;
  220 + height: 4rem;
  221 + position: absolute;
  222 + background: rgba(0, 0, 0, 0.9);
  223 + border-radius: 0.6rem;
  224 + left: 9%;
  225 + top: 45%;
  226 + margin-top: -2rem;
  227 + z-index: 2;
  228 + color: #fff;
  229 + }
  230 +
  231 + .messages p {
  232 + line-height: 4rem;
  233 + }
  234 +}
  235 +