快捷支付

src/main/resources/static/css/user-center/account/cards.css

@@ -24,7 +24,7 @@ li{list-style:none}
     .list-main .list-main-code{width: 100%;height: 22px;line-height: 22px;font-size: 16px;color: #ffffff;}
     .list-btn{font-size: 14px;color: #ffffff;height: 22px;line-height: 22px;position: absolute;right: 16px;top: 16px;cursor: pointer;}
     .model-cards-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
-    .model-cards-popup .model-content{width:704px;height:480px;padding: 16px 32px; position:absolute;top:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
+    .model-cards-popup .model-content{width:710px;height:480px;padding: 16px 32px; position:absolute;top:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
     .model-content .title{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 40px;}
     .model-content .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:0;top: 0;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
     .model-content .title .title-tabs{width: 100%;height: 27px;float: left;}
@@ -35,7 +35,7 @@ li{list-style:none}
     .model-content .content .list img{width: 100%;height: 100%;display: block;}
     .model-content .content .list.current{border-color: #FF2A2A;}
     .model-content .content .list.current:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
-    .model-content .button{width: 100%;height: 34px;float: left;}
+    .model-content .button{width: 100%;height: 34px;float: left;margin-top: 24px;}
     .model-content .button .button-btn{display: block;width: 100px;height: 34px;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 34px;text-align: center;font-size: 14px;color: #FFFFFF;}
     .model-content .button .button-btn.disabled{border: 1px solid #B8BFCA;background: #B8BFCA;color: #FFFFFF;}
     .model-content .content .content-labe{width: 100%;height: 38px;line-height: 38px;float: left;font-size: 16px;color: #333333;font-weight: bold;}
@@ -48,12 +48,19 @@ li{list-style:none}
     .model-content .content .content-labe .form-type .form-radio span{font-size: 14px;color: #666666;font-weight: normal;margin-left: 5px;}
     .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -210px -0px; }
     .model-content .content .content-labe .form-type .form-radio .icon:before{position: absolute;left: 0;bottom: 0;width:16px ;height:16px;background-position: -236px -0px;}
+    .model-content .content .content-label{width: 100%;height:32px;float: left;line-height: 32px;text-align: left;font-size: 14px;color: #1890F9;padding-left: 44px;box-sizing: border-box;}
     .model-content .content .content-form{width: 100%;height: 32px;float: left;margin-bottom: 24px;}
+    .model-content .content .content-form.none{margin-bottom: 10px;}
     .model-content .content .content-form .form-label{width: 70px;height: 32px;float: left;line-height: 32px;text-align: right;font-size: 14px;color: #666666;}
+    .model-content .content .content-form .form-label.sen{width: 92px;}
     .model-content .content .content-form .form-label span{color: #F94B4B;}
     .model-content .content .content-form .form-input{width: 500px;height: 32px;float: left;margin-left:10px;color: #F94B4B;box-sizing: border-box;padding: 0 13px;border:1px solid #B8BFCA;}
     .model-content .content .content-form .form-input input{width: 100%;height:30px;float: left;line-height: 30px;font-size: 14px;color: #333333;border: none;font-style: normal;}
-
+    .model-content .content .content-form .form-input.code{ width: 350px; }
+    .model-content .content .content-form .form-btn{width: 110px;height: 32px;float: left;margin-left: 20px;}
+    .model-content .content .content-form .form-btn a{display: block;width: 100px;height: 32px;box-sizing: border-box;background: #FF5B00;line-height: 32px;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .content .content-form .form-btn a.disabled{background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-form .form-text{ line-height: 32px; font-size: 14px;color: #333333; }
 
 
 

src/main/resources/static/js/pay/mixin/cardsMixns.js

@@ -3,16 +3,26 @@ var cardsMixns = function () {
     return {
         data() {
             return {
+                maxLen:24,
                 isPopup:true,
                 tabsIndex:0,
                 bankIndex:'',
                 isCardStep:0,
+                isHassCardStep:0,
+                isShowSupport:false,
                 checkedCards:{},
                 params: {
                     name: '',
                     cardNumber: '',
-                    cardtype:0
+                    cardtype:0,
+                    mobile:'',
+                    code:''
                 },
+                showCardNumber:'',
+                mobilCount:0,
+                mobileCodeText:'获取验证码',
+                mobilTime:null,
+                isMobileDisabled:false,
             }
         },
         filters: {
@@ -28,13 +38,25 @@ var cardsMixns = function () {
             disabled1() {
                 return !(this.params.name && this.params.cardNumber.length > 18);
             },
+            disabled2() {
+                return this.params.cardNumber.length <= 12;
+            },
+            disabled3() {
+                return !(this.params.code && this.params.code.length === 6 );
+            },
         },
         methods: {
+
             handleCardStep(){
                 // 选择银行下一步
                 if(this.disabled){ return }
                 this.isCardStep = 1
             },
+            handleHassCardStep(){
+                // 选择银行下一步
+                if(this.disabled){ return }
+                this.isHassCardStep = 1
+            },
             handleConfirm(){
                 //确认信息并跳转银行页面
             },
@@ -61,6 +83,23 @@ var cardsMixns = function () {
                 this.isCardStep = 0
                 this.isPopup = false
             },
+            handleInput(e) {
+                this.params.cardNumber = e.target.value
+                this.showCardNumber = this.formatAccNo(e.target.value)
+            },
+            formatAccNo(value) {
+                const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
+                const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
+                const inputLen = this.getOriginValue().length
+                if (inputLen > this.maxLen) {
+                    return
+                }
+                return formatValue
+            },
+            getOriginValue() {
+                //获取input的原始值
+                return this.showCardNumber.split(' ').join('');
+            }
         }
     }
 }();

src/main/resources/templates/user-center/account/cards.html

@@ -97,27 +97,61 @@
                             </div>
                         </template>
                         <template v-else>
-                            <div class="content">
-                                <div class="content-labe"><span>确认信息</span></div>
+                            <div class="content" v-if="isHassCardStep === 0">
                                 <div class="content-form">
-                                    <div class="form-label"><span>*</span>姓名：</div>
+                                    <div class="form-label sen"><span>*</span>卡号：</div>
+                                    <div class="form-input">
+                                        <input type="text" maxlength="24" v-model="showCardNumber" @input="handleInput" placeholder="请输入本人的银行卡号">
+                                    </div>
+                                </div>
+                                <div class="content-label" @click="isShowSupport=!isShowSupport">查看支持银行</div>
+                                <template v-if="isShowSupport">
+                                    <a href="javascript:void(0)" class="list" v-for="(bank, index) in bankList" :key="index">
+                                        <img :src="bank.bankLogo" :alt="bank.bankName">
+                                    </a>
+                                </template>
+                            </div>
+                            <div class="content" v-if="isHassCardStep === 1">
+                                <div class="content-form none">
+                                    <div class="form-label sen">卡号：</div>
+                                    <div class="form-text">6217  0340  0002  4704  888</div>
+                                </div>
+                                <div class="content-form none">
+                                    <div class="form-label sen">卡类型：</div>
+                                    <div class="form-text">农业银行借记卡</div>
+                                </div>
+                                <div class="content-form">
+                                    <div class="form-label sen"><span>*</span>姓名：</div>
                                     <div class="form-input">
                                         <input type="text" maxlength="10" v-model="params.name" placeholder="请输入您的姓名">
                                     </div>
                                 </div>
                                 <div class="content-form">
-                                    <div class="form-label"><span>*</span>身份证：</div>
+                                    <div class="form-label sen"><span>*</span>身份证：</div>
                                     <div class="form-input">
                                         <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的身份证号">
                                     </div>
                                 </div>
                                 <div class="content-form">
-                                    <div class="form-label"><span>*</span>手机号：</div>
+                                    <div class="form-label sen"><span>*</span>手机号：</div>
                                     <div class="form-input">
-                                        <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的手机号">
+                                        <input type="text" maxlength="18" v-model="params.mobile" placeholder="请输入您的手机号">
+                                    </div>
+                                </div>
+                                <div class="content-form">
+                                    <div class="form-label sen"><span>*</span>短信验证码：</div>
+                                    <div class="form-input code">
+                                        <input type="text" maxlength="6" v-model="params.code" placeholder="请输入短信验证码">
+                                    </div>
+                                    <div class="form-btn">
+                                        <a class="btn" :class="[disabled3 ? 'disabled' : '']" href="javascript:void(0)" @click="handleCardStep">{{ mobileCodeText }}</a>
                                     </div>
                                 </div>
                             </div>
+                            <div class="button">
+                                <a class="button-btn" :class="[disabled2 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 0" @click="handleCardStep">下一步</a>
+                                <a class="button-btn" :class="[disabled3 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 1" @click="handleConfirm">下一步</a>
+                            </div>
                         </template>
                     </div>
                 </div>