张泽世 / yohobuywap-node · Commits

Go to a project

Authored by 张丽霞
Commit 2d6efa82938cf9a62ef3a36bef6480a8b262e78f 1 parent 6a743f46

分享模板

Inline Side-by-side
Showing 5 changed files with 52 additions and 256 deletions
<div class="receive-coupon-page">
<div class="page">
<div class="coupon-header">
<img src="/activity/cocacola/images/cokeBanner.jpg">
</div>
<div class="coupon-centent">
<div class="title">
</div>
<div>
<input id="phone" type="text" placeholder="请输入手机号" maxlength="11"/>
<span>获取红包</span>
</div>
<div>
<input id="verification" type="text" placeholder="请输入验证码" maxlength="4"/>
<span>验证领红包</span>
</div>
<div class="use-coupon-btn">
<img src="/activity/cocacola/images/cokefooter.jpg">
<span></span>
</div>
</div>
</div>
<div class="messages hidden" id="dialog">
<div class="content"></div>
</div>
<div class="keep-out hidden"></div>
<div class="dialog hidden" id="message">
<span class="close"><img src="/activity/cocacola/images/close.png"></span>
<div class="activity-message">
<h3>活动说明</h3>
<div class="message">
<P>1、活动时间：2016年4月7日到2016年7月7日</P>
<P>2、仅限新注册用户以及首次购买用户使用</P>
<P>3、同一手机号限领一次优惠券</P>
</div>
</div>
</div>
<div class="gain">
<div class="coupon-centent">
<div class="coupon">
<img src="/activity/cocacola/images/cokeCoupon.png">
</div>
<p class="phone" id="mobile"></p>
<p>登录Yoho!Buy有货客户端即可使用</p>
<div class="use-coupon-btn">
<img src="/activity/cocacola/images/cokeBtn.png">
</div>
<span>活动说明</span>
</div>
</div>
</div>
\ No newline at end of file
... ... @@ -13,4 +13,5 @@ module.exports = app => {
// 业务模块
app.use('/product', require('./apps/product'));
app.use('/coupon', require('./apps/coupon'));
};
... ...
var $ = require('yoho-jquery'),
num = 0,
phone,
reg,
time;
$('#phone').bind('input propertychange', function() {
if ($(this).val().length === 11) {
$('.centent span').eq('0').addClass('verification-code');
} else {
$('.centent span').eq('0').removeClass();
}
});
$('#verification').bind('input propertychange', function() {
if ($(this).val().length === 4) {
$('.centent span').eq('1').addClass('get');
} else {
$('.centent span').eq('1').removeClass();
}
});
$('.centent').on('click', '.verification-code', function() {
$('.centent span').eq('0').removeClass('verification-code');
phone = $(this).siblings('input').val();
reg = /[0-9]{11}/;
if (!reg.test(phone)) {
$('#dialog').removeClass('hidden');
$('.keep-out').removeClass('hidden');
$('#dialog .content').html('<p class="phone-error">手机号错误，请重新输入。<p>');
setTimeout(function() {
$('.messages').addClass('hidden');
$('.keep-out').addClass('hidden');
$('#dialog .content').html(' ');
}, 1400);
return;
}
$.ajax({
url: '/activity/cocacola/CocacolaController/sendSms',
data: {
mobile: $('#phone').val()
},
dataType: 'json',
success: function(data) {
if (data.code === 200) {
time = setInterval(function() {
num++;
if (num > 60) {
num = 0;
$('.centent span').eq('0').addClass('verification-code').html('获取验证码');
clearInterval(time);
} else {
$('.centent span').eq('0').removeClass('verification-code').html('重新发送' + (60 - num));
}
}, 1000);
} else {
$('#dialog').removeClass('hidden');
$('.keep-out').removeClass('hidden');
$('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
setTimeout(function() {
$('.messages').addClass('hidden');
$('.keep-out').addClass('hidden');
$('#dialog .content').html(' ');
}, 1400);
}
}
});
});
$('.centent').on('click', '.get', function() {
$('.centent span').eq('1').removeClass('get');
if ($(this).siblings('input').val().length === 4) {
$.ajax({
url: '/activity/cocacola/CocacolaController/validRegCodeAndSendCode',
data: {
code: $('#verification').val(),
mobile: $('#phone').val(),
client_id: $.cookie('_yasvd')
},
dataType: 'json',
success: function(data) {
if (data.code === 200) {
location.href = 'gain.html?mobile=' + $('#phone').val();
} else {
$('#dialog').removeClass('hidden');
$('.keep-out').removeClass('hidden');
$('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
setTimeout(function() {
$('.messages').addClass('hidden');
$('.keep-out').addClass('hidden');
$('#dialog .content').html(' ');
}, 1400);
}
}
});
} else {
$('#dialog').removeClass('hidden');
$('.keep-out').removeClass('hidden');
$('#dialog .content').html('<p class="phone-error">验证码错误，请重新输入。<p>');
setTimeout(function() {
$('.messages').addClass('hidden');
$('.keep-out').addClass('hidden');
$('#dialog .content').html(' ');
}, 1400);
}
});
$('.close').on('click', function() {
$('.dialog').addClass('hidden');
$('.keep-out').addClass('hidden');
$('#dialog .content').html(' ');
});
$('.footer span').on('click', function() {
$('#message').removeClass('hidden');
$('.keep-out').removeClass('hidden');
});
$('.centent').on('click', '.get', function() {
if (window._yas) {
window._yas.sendCustomInfo({
receiveCoupon: 'Y'
}, true);
}
});
... ... @@ -5,93 +5,74 @@
font-size: 14px;
}
html,
body {
width: 100%;
height: 100%;
background: #e10c1e;
}
.page {
width: 100%;
height: 100%;
background: #e10c1e;
padding-bottom: 60px;
background: #c4211a;
}
.coupon-header {
width: 100%;
height: auto;
overflow: hidden;
height: 428px;
background: url("../img/coupon/header.png");
background-size: 100%;
}
.use-coupon-btn {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 2rem;
.coupon-centent,
.gain-coupon-centent {
height: 520px;
margin: 0 30px;
background: #9d1a15;
}
.use-coupon-btn img,
.coupon-header img {
.coupon-centent .title {
width: 100%;
height: 111px;
background: url("../img/coupon/coupon-title.png");
}
.use-coupon-btn span {
position: absolute;
bottom: 0;
left: 40%;
width: 20%;
height: 2rem;
.coupon-centent .input-content {
height: 206px;
margin: 30px 30px 0;
}
.coupon-centent {
.coupon-centent .input-content input {
height: 88px;
width: 100%;
height: auto;
overflow: hidden;
padding-top: 2.4rem;
background: #e10c1e;
}
.coupon-centent div {
width: 81.25%;
height: 4rem;
overflow: hidden;
margin: 0 auto;
padding-bottom: 1rem;
}
.coupon-centent input {
width: 68%;
height: 3.6rem;
overflow: hidden;
margin-bottom: 30px;
border: 1px solid #fff;
border-right: none;
background: none;
font-size: 18px;
color: #fff;
float: left;
box-sizing: border-box;
border-radius: 0.3rem 0 0 0.3rem;
background: #9d1a15;
border-radius: 0.3rem;
text-align: center;
outline: none;
}
.coupon-centent span {
width: 30%;
height: 3.6rem;
float: left;
line-height: 3.6rem;
.coupon-centent .input-content div {
height: 88px;
width: 100%;
text-align: center;
font-size: 1em;
border-radius: 0 0.3rem 0.3rem 0;
background: #b0b0b0;
color: #e0e0e0;
font-size: 18px;
border-radius: 0.3rem;
background: #fff;
color: #444;
line-height: 88px;
}
.coupon-centent .verification-code,
.coupon-centent .get {
background: #fff;
color: #000;
.coupon-description {
width: 100%;
height: 173px;
position: relative;
background: url("../img/coupon/coupon-footer.png");
}
.coupon-description span {
position: absolute;
bottom: 0;
left: 40%;
width: 20%;
height: 2rem;
}
.gain-coupon-centent {
... ... @@ -124,6 +105,7 @@
height: auto;
overflow: hidden;
margin: 0 auto;
background: url("../img/coupon/close.png");
}
.coupon img {
... ... @@ -144,24 +126,19 @@
}
.dialog .close {
width: 1.4rem;
height: 1.4rem;
width: 40px;
height: 40px;
overflow: hidden;
background: #444;
background: url("../img/coupon/close.png");
color: #f1f1f1;
border-radius: 50%;
border-radius: 20px;
position: absolute;
top: -0.5rem;
right: -0.5rem;
line-height: 1.4rem;
top: -20px;
right: -20px;
line-height: 40px;
text-align: center;
}
.dialog .close img {
width: 100%;
height: auto;
}
.use-coupon-btn .btn {
width: 75.25%;
height: auto;
... ...
... ... @@ -9,3 +9,4 @@
@import "product/index";
@import "common/index";
@import "cart/chose-panel";
@import "coupon/index";
... ...