Authored by 郝肖肖

Merge branch 'feature/installment' of git.yoho.cn:fe/yohobuywap-node into feature/installment

<div class="installment-starting-service-page">
<div class="installment-starting-service-page yoho-page">
{{> resources/banner-top}}
<div class="exclamation">
基本信息的有效性决定您能否激活有货分期,以及最终可获得的额度!
</div>
<div class="exclamation">
基本信息的有效性决定您能否激活有货分期,以及最终可获得的额度!
</div>
<form id="apply-form" method="post" class="apply-form">
<div class="field">
<label for="userName">姓名:</label>
<form id="apply-form" method="post" class="apply-form">
<div class="field">
<label for="userName">姓名:</label>
<input id="userName" name="userName" type="text" placeholder="真实姓名" maxlength="20"/>
<div class="clearfix"></div>
</div>
<input id="userName" name="userName" type="text" placeholder="真实姓名" maxlength="20"/>
<div class="clearfix"></div>
</div>
<div class="field">
<label for="identityCardNo">身份证号:</label>
<div class="field">
<label for="identityCardNo">身份证号:</label>
<input id="identityCardNo" name="identityCardNo" type="text" placeholder="请填写身份证号" maxlength="18"/>
<div class="clearfix"></div>
</div>
<input id="identityCardNo" name="identityCardNo" type="text" placeholder="请填写身份证号" maxlength="18"/>
<div class="clearfix"></div>
</div>
<div class="field">
<label for="name">卡号:</label>
<div class="field">
<label for="name">卡号:</label>
<input id="cardNo" name="cardNo" type="text" placeholder="银行卡号" size="26" maxlength="30"/>
<div class="clearfix"></div>
</div>
<input id="cardNo" name="cardNo" type="text" placeholder="银行卡号" size="26" maxlength="30"/>
<div class="clearfix"></div>
</div>
<div class="field" id="bank-desc" style="display: none;">
<div>
<img src="" alt="">
<span id="bank-name">中国工商银行</span>
</div>
</div>
<div class="field" id="bank-desc" style="display: none;">
<div class="bank-info">
<img id="bank-icon" src="" alt="">
<span id="bank-name">中国工商银行</span>
</div>
</div>
<div class="field">
<label for="name">手机号:</label>
<input id="name" name="mobile" type="text" placeholder="银行预留手机号码" maxlength="11"/>
<div class="clearfix"></div>
</div>
<div class="field">
<label for="name">手机号:</label>
<input id="name" name="mobile" type="text" placeholder="银行预留手机号码" maxlength="11"/>
<div class="clearfix"></div>
</div>
<div class="field">
<label for="name">验证码:</label>
<input id="name" name="snsCheckCode" type="text" placeholder="请输入验证码" size="14" maxlength="4"/>
<button id="send-sms" class="count-down">获取验证码</button>
<div class="clearfix"></div>
</div>
<div class="field">
<label for="name">验证码:</label>
<input id="name" name="snsCheckCode" type="text" placeholder="请输入验证码" size="14" maxlength="4"/>
<button id="send-sms" class="count-down">获取验证码</button>
<div class="clearfix"></div>
</div>
<div class="agreements">
<input id="accept-agreements" name="agreements" type="checkbox" class="installment-check-btn" />
<label for="accept-agreements">
<span>免费开通,详情见 <a href="#">《有货分期服务协议》&《第三方支付协议》</a></span>
</label>
<div class="clearfix"></div>
</div>
<div class="agreements">
<input id="accept-agreements" name="agreements" type="checkbox" class="installment-check-btn"/>
<label for="accept-agreements">
<span>免费开通,详情见 <a href="#">《有货分期服务协议》&《第三方支付协议》</a></span>
</label>
<div class="clearfix"></div>
</div>
<div class="bottom-block">
<div class="data-encryption">
数据智能加密,保障您的用卡安全
</div>
<div class="bottom-block">
<div class="data-encryption">
数据智能加密,保障您的用卡安全
</div>
<button id="apply-button" class="apply-button" type="submit">下一步</button>
<div class="provider-mark">
Yoho!Buy信而富联合提供
</div>
</div>
</form>
<button id="apply-button" class="apply-button" type="submit">下一步</button>
<div class="provider-mark">
Yoho!Buy信而富联合提供
</div>
</div>
</form>
</div>
... ...
... ... @@ -18,7 +18,7 @@
(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=640){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/640)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
</script>
{{#if devEnv}}
<link rel="stylesheet" href="//localhost:5001/css/index.css">
<link rel="stylesheet" href="//172.16.11.32:5001/css/index.css">
{{^}}
<link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css">
{{/if}}
... ... @@ -41,8 +41,8 @@
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
{{/wechatShare}}
{{#if devEnv}}
<script src="//localhost:5001/libs.js"></script>
<script src="//localhost:5001/{{module}}.{{page}}.js"></script>
<script src="//172.16.11.32:5001/libs.js"></script>
<script src="//172.16.11.32:5001/{{module}}.{{page}}.js"></script>
{{^}}
<script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/libs.js"></script>
<script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script>
... ...
... ... @@ -47,10 +47,10 @@ $('.header-tab a').click(function() {
return false;
});
// const
// 默认加载第一页
loadOrderList(search.pageIndex, 1);
// TODO: 滚屏分页
$(window).scroll(()=> {
// var scrollTop = $(window).scrollTop();
... ...
const $ = require('yoho-jquery');
const tip = require('../plugin/tip');
const Timer = function() {
this.counter = 0;
... ... @@ -98,9 +99,14 @@ $('#cardNo').keyup(function() {
}).change(function() {
const cardNo = $(this).val().replace(/\s/, '');
// 获取银行信息
$.get('/home/installment/bank-info', {cardNo: cardNo}).then((result)=> {
if (result.code === 200) {
// 设置银行名称
$('#bank-name').text(result.data.bankName);
// 设置银行图标
$('#bank-icon').attr('src', '/img/home/bank-icons/' + result.data.bankCode + '.png');
$('#bank-desc').show();
}
});
... ... @@ -148,8 +154,13 @@ setInterval(()=> {
*/
$('#apply-form').submit(function() {
$.post('/home/installment/activate-service', formModel).then((result)=> {
const params = { action: 'go.instalmentRepayment' };
if (result.code === 200) {
location.href = '';
location.href = `/home/installment/review?openby:yohobuy=${encodeURIComponent(JSON.stringify(params))}`;
} else {
tip.show(result.message);
}
});
return false;
... ...
... ... @@ -27,12 +27,10 @@ const Repayment = function(options) {
const params = {
action: 'go.instalmentRepayment',
params: {
amount: self.total
}
list: self.getSelection()
};
$(this).attr('href', path + '?openby:yohobuy=' + JSON.stringify(params));
$(this).attr('href', path + '?openby:yohobuy=' + encodeURIComponent(JSON.stringify(params)));
});
$('#repayment-total').click(()=> {
... ...
... ... @@ -47,12 +47,29 @@
}
}
.bank-info {
padding-left: 100px;
img {
width: 32px;
height: 32px;
display: inline-block;
}
span {
line-height: 32px;
position: absolute;
margin-left: 10px;
margin-top: 1px;
}
}
.count-down {
border: 1px solid #84c990;
border-radius: 4px;
background: transparent;
color: #84c990;
width: 160px;
width: 180px;
height: 55px;
float: right;
}
... ... @@ -75,6 +92,8 @@
color: #444;
float: left;
margin-top: 2px;
border: none;
background: transparent;
}
.provider-mark {
... ... @@ -88,12 +107,10 @@
.bottom-block {
width: 100%;
text-align: center;
position: fixed;
bottom: 0;
margin-top: 30px;
}
}
.installment-check-btn {
display: none;
... ... @@ -117,4 +134,4 @@
background-size: cover;
}
}
}
\ No newline at end of file
}
... ...