Showing
6 changed files
with
129 additions
and
29 deletions
@@ -9,7 +9,6 @@ const headerModel = require('../../../doraemon/models/header'); | @@ -9,7 +9,6 @@ const headerModel = require('../../../doraemon/models/header'); | ||
9 | const installmentModel = require('../models/installment'); | 9 | const installmentModel = require('../models/installment'); |
10 | const _ = require('lodash'); | 10 | const _ = require('lodash'); |
11 | const helpers = global.yoho.helpers; | 11 | const helpers = global.yoho.helpers; |
12 | - | ||
13 | const index = (req, res) => { | 12 | const index = (req, res) => { |
14 | let query = req.query.query || ''; | 13 | let query = req.query.query || ''; |
15 | let uid = req.user.uid || 3236556; | 14 | let uid = req.user.uid || 3236556; |
@@ -29,9 +28,7 @@ const index = (req, res) => { | @@ -29,9 +28,7 @@ const index = (req, res) => { | ||
29 | installmentOnly: { | 28 | installmentOnly: { |
30 | title: '分期专享', | 29 | title: '分期专享', |
31 | goods: [ | 30 | goods: [ |
32 | - { | ||
33 | - | ||
34 | - } | 31 | + {} |
35 | ] | 32 | ] |
36 | } | 33 | } |
37 | }; | 34 | }; |
@@ -82,9 +79,7 @@ const review = (req, res) => { | @@ -82,9 +79,7 @@ const review = (req, res) => { | ||
82 | installmentOnly: { | 79 | installmentOnly: { |
83 | title: '分期专享', | 80 | title: '分期专享', |
84 | goods: [ | 81 | goods: [ |
85 | - { | ||
86 | - | ||
87 | - } | 82 | + {} |
88 | ] | 83 | ] |
89 | } | 84 | } |
90 | } | 85 | } |
@@ -110,18 +105,24 @@ const review = (req, res) => { | @@ -110,18 +105,24 @@ const review = (req, res) => { | ||
110 | }; | 105 | }; |
111 | 106 | ||
112 | 107 | ||
113 | -const startingService = (req, res, next) => { | 108 | +const startingService = (req, res) => { |
114 | res.render('installment/starting-service', { | 109 | res.render('installment/starting-service', { |
115 | module: 'home', | 110 | module: 'home', |
116 | page: 'installment.starting-service', | 111 | page: 'installment.starting-service', |
117 | navTitle: '开通有货分期', | 112 | navTitle: '开通有货分期', |
118 | navBtn: false | 113 | navBtn: false |
119 | }); | 114 | }); |
120 | - console.log(next); | 115 | +}; |
116 | + | ||
117 | +const verifyCode = (req, res, next) => { | ||
118 | + installmentModel.sendVerifyCode(req.user.uid, req.body.mobile).then((result)=> { | ||
119 | + res.json(result); | ||
120 | + }).catch(next); | ||
121 | }; | 121 | }; |
122 | 122 | ||
123 | module.exports = { | 123 | module.exports = { |
124 | index, | 124 | index, |
125 | review, | 125 | review, |
126 | - startingService | 126 | + startingService, |
127 | + verifyCode | ||
127 | }; | 128 | }; |
@@ -89,8 +89,42 @@ const getQueryAmtInfo = (uid) => { | @@ -89,8 +89,42 @@ const getQueryAmtInfo = (uid) => { | ||
89 | }); | 89 | }); |
90 | }; | 90 | }; |
91 | 91 | ||
92 | +/** | ||
93 | + * 获取短信验证码 | ||
94 | + * | ||
95 | + * @param uid 用户ID | ||
96 | + * @param mobile 手机号码 | ||
97 | + */ | ||
98 | +const sendVerifyCode = (uid, mobile) => { | ||
99 | + return api.get('', { | ||
100 | + method: 'user.instalment.getSnsCheckCode' | ||
101 | + }, { | ||
102 | + uid, | ||
103 | + mobile | ||
104 | + }); | ||
105 | +}; | ||
106 | + | ||
107 | +/** | ||
108 | + * 开通服务 | ||
109 | + * | ||
110 | + * @param uid 用户id | ||
111 | + * @param userName 姓名 | ||
112 | + * @param identityCardNo 身份证号码 | ||
113 | + * @param cardNo 银行卡号码 | ||
114 | + * @param mobile 手机号码 | ||
115 | + * @param snsCheckCode 验证码 | ||
116 | + * @returns {*} | ||
117 | + */ | ||
118 | +const activateService = (params) => { | ||
119 | + return api.get('', { | ||
120 | + method: 'user.instalment.activate' | ||
121 | + }, params); | ||
122 | +}; | ||
123 | + | ||
92 | module.exports = { | 124 | module.exports = { |
93 | getStauts, | 125 | getStauts, |
94 | getQueryCreditInfo, | 126 | getQueryCreditInfo, |
95 | - getQueryAmtInfo | 127 | + getQueryAmtInfo, |
128 | + sendVerifyCode, | ||
129 | + activateService | ||
96 | }; | 130 | }; |
@@ -16,5 +16,5 @@ const router = express.Router(); // eslint-disable-line | @@ -16,5 +16,5 @@ const router = express.Router(); // eslint-disable-line | ||
16 | router.get('/installment/index', installment.index);// 开通分期首页 | 16 | router.get('/installment/index', installment.index);// 开通分期首页 |
17 | router.get('/installment/review', installment.review); // 开通分期首页 | 17 | router.get('/installment/review', installment.review); // 开通分期首页 |
18 | router.get('/installment/starting-service', installment.startingService); // 分期付款开通 | 18 | router.get('/installment/starting-service', installment.startingService); // 分期付款开通 |
19 | - | 19 | +router.get('/installment/starting-service/verify-code', installment.verifyCode); |
20 | module.exports = router; | 20 | module.exports = router; |
@@ -4,18 +4,18 @@ | @@ -4,18 +4,18 @@ | ||
4 | 基本信息的有效性决定您能否激活有货分期,以及最终可获得的额度! | 4 | 基本信息的有效性决定您能否激活有货分期,以及最终可获得的额度! |
5 | </div> | 5 | </div> |
6 | 6 | ||
7 | - <form action="" class="apply-form"> | 7 | + <form id="apply-form" method="post" class="apply-form"> |
8 | <div class="field"> | 8 | <div class="field"> |
9 | - <label for="name">姓名:</label> | 9 | + <label for="userName">姓名:</label> |
10 | 10 | ||
11 | - <input id="name" name="name" type="text" placeholder="姓名" maxlength="20"/> | 11 | + <input id="userName" name="userName" type="text" placeholder="姓名" maxlength="20"/> |
12 | <div class="clearfix"></div> | 12 | <div class="clearfix"></div> |
13 | </div> | 13 | </div> |
14 | 14 | ||
15 | <div class="field"> | 15 | <div class="field"> |
16 | - <label for="name">身份证号:</label> | 16 | + <label for="identityCardNo">身份证号:</label> |
17 | 17 | ||
18 | - <input id="name" name="idCardNo" type="text" placeholder="身份证号" maxlength="18"/> | 18 | + <input id="identityCardNo" name="identityCardNo" type="text" placeholder="身份证号" maxlength="18"/> |
19 | <div class="clearfix"></div> | 19 | <div class="clearfix"></div> |
20 | </div> | 20 | </div> |
21 | 21 | ||
@@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
23 | <div class="field"> | 23 | <div class="field"> |
24 | <label for="name">卡号:</label> | 24 | <label for="name">卡号:</label> |
25 | 25 | ||
26 | - <input id="card-no" name="cardNo" type="text" placeholder="银行卡号" size="26"/> | 26 | + <input id="cardNo" name="cardNo" type="text" placeholder="银行卡号" size="26" maxlength="30"/> |
27 | <div class="clearfix"></div> | 27 | <div class="clearfix"></div> |
28 | </div> | 28 | </div> |
29 | 29 | ||
@@ -53,6 +53,6 @@ | @@ -53,6 +53,6 @@ | ||
53 | 数据智能加密,保障您的用卡安全 | 53 | 数据智能加密,保障您的用卡安全 |
54 | </div> | 54 | </div> |
55 | 55 | ||
56 | - <button class="apply-button" type="submit">下一步</button> | 56 | + <button id="apply-button" class="apply-button" type="submit">下一步</button> |
57 | </form> | 57 | </form> |
58 | </div> | 58 | </div> |
@@ -5,24 +5,36 @@ const Timer = function() { | @@ -5,24 +5,36 @@ const Timer = function() { | ||
5 | this.countdownTimer = null; | 5 | this.countdownTimer = null; |
6 | }; | 6 | }; |
7 | 7 | ||
8 | +const FormModel = function() { | ||
9 | +}; | ||
10 | + | ||
11 | +const formModel = new FormModel(); | ||
8 | 12 | ||
9 | /** | 13 | /** |
10 | * 倒计时 | 14 | * 倒计时 |
11 | * | 15 | * |
12 | - * @param progress 进度回调 | 16 | + * @param start 启动回调 |
17 | + * @param tick 进度回调 | ||
13 | * @param complete 完成回调 | 18 | * @param complete 完成回调 |
14 | */ | 19 | */ |
15 | -Timer.prototype.startCountdown = function(progress, complete) { | 20 | +Timer.prototype.startCountdown = function(start, tick, complete) { |
16 | if (this.counter > 0 || this.countdownTimer) { | 21 | if (this.counter > 0 || this.countdownTimer) { |
17 | return; | 22 | return; |
18 | } else { | 23 | } else { |
19 | this.counter = 59; | 24 | this.counter = 59; |
20 | } | 25 | } |
21 | 26 | ||
22 | - if (progress) { | ||
23 | - progress.call(this, this.counter); | 27 | + |
28 | + // 启动回调 | ||
29 | + if (start) { | ||
30 | + start.call(this); | ||
24 | } | 31 | } |
25 | 32 | ||
33 | + if (tick) { | ||
34 | + tick.call(this, this.counter); | ||
35 | + } | ||
36 | + | ||
37 | + // 开始计时器 | ||
26 | this.countdownTimer = setInterval(()=> { | 38 | this.countdownTimer = setInterval(()=> { |
27 | this.counter--; | 39 | this.counter--; |
28 | 40 | ||
@@ -30,14 +42,16 @@ Timer.prototype.startCountdown = function(progress, complete) { | @@ -30,14 +42,16 @@ Timer.prototype.startCountdown = function(progress, complete) { | ||
30 | if (complete) { | 42 | if (complete) { |
31 | clearInterval(this.countdownTimer); | 43 | clearInterval(this.countdownTimer); |
32 | 44 | ||
45 | + // 重置计时器 | ||
33 | this.counter = 0; | 46 | this.counter = 0; |
34 | this.countdownTimer = null; | 47 | this.countdownTimer = null; |
35 | complete.call(this); | 48 | complete.call(this); |
36 | } | 49 | } |
37 | } | 50 | } |
38 | 51 | ||
39 | - if (progress && this.counter > 0) { | ||
40 | - progress.call(this, this.counter); | 52 | + // 完成回调 |
53 | + if (tick && this.counter > 0) { | ||
54 | + tick.call(this, this.counter); | ||
41 | } | 55 | } |
42 | }, 1000); | 56 | }, 1000); |
43 | }; | 57 | }; |
@@ -47,17 +61,65 @@ Timer.prototype.startCountdown = function(progress, complete) { | @@ -47,17 +61,65 @@ Timer.prototype.startCountdown = function(progress, complete) { | ||
47 | * 点击发送短信事件 | 61 | * 点击发送短信事件 |
48 | */ | 62 | */ |
49 | $('#send-sms').click(function() { | 63 | $('#send-sms').click(function() { |
50 | - new Timer().startCountdown(function(counter) { | 64 | + new Timer().startCountdown(function() { |
65 | + $.get('/home/installment/starting-service/verify-code', {}).then((result)=> { | ||
66 | + console.log(result); | ||
67 | + }); | ||
68 | + }, function(counter) { | ||
69 | + // 进度回调 | ||
51 | $('#send-sms').text(counter + 's'); | 70 | $('#send-sms').text(counter + 's'); |
52 | }, function() { | 71 | }, function() { |
72 | + // 倒计时结束后再次显示 "获取验证码" | ||
53 | $('#send-sms').text('获取验证码'); | 73 | $('#send-sms').text('获取验证码'); |
54 | }); | 74 | }); |
55 | 75 | ||
56 | return false; | 76 | return false; |
57 | }); | 77 | }); |
58 | 78 | ||
59 | -$('#card-no').keydown(function() { | 79 | +/** |
80 | + * 银行卡格式化 | ||
81 | + */ | ||
82 | +$('#cardNo').keyup(function() { | ||
60 | const value = $(this).val(); | 83 | const value = $(this).val(); |
61 | 84 | ||
62 | - $(this).val(value.replace(/\s[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')); | 85 | + $(this).val(value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')).trigger('change'); |
86 | +}); | ||
87 | + | ||
88 | +/** | ||
89 | + * 表单验证 | ||
90 | + */ | ||
91 | +const validateForm = function() { | ||
92 | + const applyButton = $('#apply-button'); | ||
93 | + | ||
94 | + if (formModel.userName && | ||
95 | + formModel.identityCardNo && | ||
96 | + formModel.cardNo && | ||
97 | + formModel.mobilePhone && | ||
98 | + formModel.verifyCode && | ||
99 | + formModel.agreements === 'on') { | ||
100 | + applyButton.prop('disabled', false); | ||
101 | + } else { | ||
102 | + applyButton.prop('disabled', true); | ||
103 | + } | ||
104 | +}; | ||
105 | + | ||
106 | +// 输入框改变时同时更新模型 | ||
107 | +$('input').on('change', function() { | ||
108 | + const name = $(this).attr('name'); | ||
109 | + | ||
110 | + if ($(this).is(':checkbox')) { | ||
111 | + formModel[name] = $(this).is(':checked') ? $(this).val() : null; | ||
112 | + } else { | ||
113 | + formModel[name] = $(this).val(); | ||
114 | + } | ||
115 | + | ||
116 | + validateForm(); | ||
117 | +}); | ||
118 | + | ||
119 | + | ||
120 | +/** | ||
121 | + * 表单提交 | ||
122 | + */ | ||
123 | +$('#apply-form').submit(function() { | ||
124 | + console.log(formModel); | ||
63 | }); | 125 | }); |
@@ -7,7 +7,6 @@ | @@ -7,7 +7,6 @@ | ||
7 | & + label { | 7 | & + label { |
8 | &:before { | 8 | &:before { |
9 | position: absolute; | 9 | position: absolute; |
10 | - margin-top: 4px; | ||
11 | content: ""; | 10 | content: ""; |
12 | display: inline-block; | 11 | display: inline-block; |
13 | width: 32px; | 12 | width: 32px; |
@@ -50,6 +49,10 @@ | @@ -50,6 +49,10 @@ | ||
50 | height: 90px; | 49 | height: 90px; |
51 | margin: 0 auto; | 50 | margin: 0 auto; |
52 | display: block; | 51 | display: block; |
52 | + | ||
53 | + &:disabled { | ||
54 | + opacity: 0.5; | ||
55 | + } | ||
53 | } | 56 | } |
54 | 57 | ||
55 | .agreements { | 58 | .agreements { |
-
Please register or login to post a comment