快捷支付

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

@@ -22,7 +22,44 @@ li{list-style:none}
     .list-main .list-main-tag{width: 100%;height: 20px;margin:4px 0 14px 0;}
     .list-main .list-main-tag .tag{display: inline-block;line-height: 20px;padding: 0 5px;border-radius: 2px;font-size: 12px;color: #ffffff;background: rgba(255, 255, 255, 0.2);float: left;}
     .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;}
+    .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-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;}
+    .model-content .title .title-tabs a{width: 100px;height: 27px;float: left;margin-right: 64px;display: block;font-size: 16px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 3px solid #FFFFFF;color: #333333;}
+    .model-content .title .title-tabs a.current{ font-weight: bold;border-color: #FF5B00;}
+    .model-content .content{ width:100%;height:300px;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto }
+    .model-content .content .list{width: 142px;height: 46px;display: block;margin:0 16px 16px 0;float: left;border: 1px solid #FFFFFF;position: relative;border-radius: 2px;}
+    .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 .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;}
+    .model-content .content .content-labe p{float: left;}
+    .model-content .content .content-labe img{width: 120px;height: 38px;display: block;margin-left: 20px;float: left;border-radius: 2px;}
+    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:11px;margin-left: 30px;}
+    .model-content .content .content-labe .form-type .form-radio {height: 16px;margin-right: 40px;line-height: 16px;box-sizing: border-box;float: left;cursor: pointer;}
+    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 16px;line-height: 16px;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
+    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 16px;height: 16px;position: relative;overflow: hidden;float: left;}
+    .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-form{width: 100%;height: 32px;float: left;margin-bottom: 24px;}
+    .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 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;}
+
+
+
+
+
+
+
 }
 
 /**

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

@@ -0,0 +1,66 @@
+// 快捷支付银行卡
+var cardsMixns = function () {
+    return {
+        data() {
+            return {
+                isPopup:true,
+                tabsIndex:0,
+                bankIndex:'',
+                isCardStep:0,
+                checkedCards:{},
+                params: {
+                    name: '',
+                    cardNumber: '',
+                    cardtype:0
+                },
+            }
+        },
+        filters: {
+            cardsFormat(valus) {
+                // 银行卡只显示最后四位数 ,隐藏信息用*代替
+                return  valus.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2")
+            },
+        },
+        computed: {
+            disabled() {
+                return !(this.bankIndex === 0 || this.bankIndex > 0);
+            },
+            disabled1() {
+                return !(this.params.name && this.params.cardNumber.length > 18);
+            },
+        },
+        methods: {
+            handleCardStep(){
+                // 选择银行下一步
+                if(this.disabled){ return }
+                this.isCardStep = 1
+            },
+            handleConfirm(){
+                //确认信息并跳转银行页面
+            },
+            handleTabsClick(index){
+                // 切换
+                console.log('tabsIndex',index)
+                this.tabsIndex = index
+            },
+            handleShowPopup(){
+                //显示添加银行卡弹窗
+                this.getBankList();
+                this.isPopup = true
+            },
+            hanldeChooseBanks(cards,index){
+                //选择银行
+                this.bankIndex = index
+                this.checkedCards = cards
+                console.log('bank',cards)
+            },
+            handleCloseModel(){
+                //关闭窗口
+                this.tabsIndex = 0
+                this.bankIndex = ''
+                this.isCardStep = 0
+                this.isPopup = false
+            },
+        }
+    }
+}();

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

@@ -1,6 +1,7 @@
 ;
 var cardsPage = new Vue({
     el: "#cardsPage",
+    mixins: [cardsMixns],
     data: {
         isRequset:true,
         listQuery:{
@@ -11,7 +12,6 @@ var cardsPage = new Vue({
             pageNum:1,
             pageSize:10
         },
-        isPopup:false,
         list: [
             {
                 type: 1,
@@ -35,16 +35,22 @@ var cardsPage = new Vue({
                 code:'45454545454521212'
             }
         ],
+        bankList:[],
         listRecord: 0,
         pageInput: '1'
     },
-    filters: {
 
-    },
-    computed: {
-
-    },
     methods: {
+        getBankList:function () {// 获取网银支付银行列表
+            var _self = this;
+            PayApi.PayGetBankCode({},function(response){
+                if(response.code == 0){
+                    _self.bankList = response.data.B2B;
+                }else{
+                    console.log('获取网银支付银行列表异常')
+                }
+            })
+        },
         GetQueryBeansListData:function(){//查询订单列表
             var _self = this;
             UserApi.GetUserClubBeansList(_self.listQuery,function (response) {
@@ -81,10 +87,6 @@ var cardsPage = new Vue({
                 })
             })
         },
-        handleShowPopup(){
-            //显示添加银行卡弹窗
-            this.isPopup = true
-        },
         handleLogo(value) {
             const LogoMap = {
                 'CCB':'https://img2.baidu.com/it/u=4262210206,1883697020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
@@ -94,13 +96,11 @@ var cardsPage = new Vue({
             return LogoMap[value]
         },
         handleClass(value) {
-            console.log('value',value)
             const styleMap = {
                 'CCB':'CCB',
                 'ICBC':'ICBC',
                 'ABC':'ABC'
             }
-            console.log('styleMap[value]',styleMap[value])
             return styleMap[value]
         },
         handleStyle(value) {
@@ -117,14 +117,13 @@ var cardsPage = new Vue({
     mounted: function () {
         var _self = this;
         if(globalUserData){
-            _self.userId = globalUserData.userId;
-            _self.listQuery.userId = this.userId;
+            this.userId = globalUserData.userId;
+            this.listQuery.userId = this.userId;
             var _Date = new Date();
-            _self.listQuery.year = _Date.getFullYear();
-            _self.listQuery.month = _Date.getMonth()+1;
-            console.log('当前年份==========>', _self.listQuery.year);
-            console.log('当前月份==========>', _self.listQuery.month);
-            _self.GetQueryBeansListData();
+            this.listQuery.year = _Date.getFullYear();
+            this.listQuery.month = _Date.getMonth()+1;
+            this.GetQueryBeansListData();
+            this.getBankList();
         }
     }
 });

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

@@ -32,8 +32,8 @@
                         <div class="list-logo"><div class="logo"><img :src="handleLogo(card.B2B)"></img></div></div>
                         <div class="list-main">
                             <div class="list-main-name">{{ card.name }}</div>
-                            <div class="list-main-tag"> <text class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </text> </div>
-                            <div class="list-main-code">{{ card.code }}</div>
+                            <div class="list-main-tag"> <span class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </span> </div>
+                            <div class="list-main-code">{{ card.code | cardsFormat}}</div>
                         </div>
                         <div class="list-btn" @click="handleUnbind">解绑</div>
                     </div>
@@ -44,6 +44,83 @@
                         </div>
                     </div>
                 </div>
+                <!--添加银行卡-->
+                <div class="model-cards-popup" v-show="isPopup">
+                    <div class="model-content">
+                        <div class="title">
+                            <div class="title-tabs">
+                                <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 0 }"  @click="handleTabsClick(0)">免输卡号添加</a>
+                                <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 1 }"  @click="handleTabsClick(1)">输入卡号添加</a>
+                            </div>
+                            <i class="icon-close" @click.stop="handleCloseModel"></i>
+                        </div>
+                        <template v-if="tabsIndex === 0">
+                            <div class="content" v-if="isCardStep === 0">
+                                <a href="javascript:void(0)" class="list" v-for="(bank, index) in bankList" @click="hanldeChooseBanks(bank,index)" :key="index" :class="bankIndex === index ? 'current' : ''">
+                                    <img :src="bank.bankLogo" :alt="bank.bankName">
+                                </a>
+                            </div>
+                            <div class="content" v-if="isCardStep === 1">
+                                <div class="content-labe"><span>确认信息</span></div>
+                                <div class="content-form">
+                                    <div class="form-label"><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-input">
+                                        <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的身份证号">
+                                    </div>
+                                </div>
+                                <div class="content-labe">
+                                    <p>银行卡类型</p>
+                                    <img :src="checkedCards.bankLogo" alt="checkedCards.bankName">
+                                    <div class="form-type">
+                                        <label class="form-radio">
+                                            <input type="radio" name="cardtype" v-model="params.cardtype" value="0">
+                                            <i class="icon mIcon"></i>
+                                            <span>借记卡</span>
+                                        </label>
+                                        <label class="form-radio">
+                                            <input type="radio" name="cardtype" v-model="params.cardtype" value="1">
+                                            <i class="icon mIcon"></i>
+                                            <span>贷记卡</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="button">
+                                <a class="button-btn" :class="[disabled ? 'disabled' : '']" href="javascript:void(0)" v-if="isCardStep === 0" @click="handleCardStep">下一步</a>
+                                <a class="button-btn" :class="[disabled1 ? 'disabled' : '']" href="javascript:void(0)" v-if="isCardStep === 1" @click="handleConfirm">下一步</a>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="content">
+                                <div class="content-labe"><span>确认信息</span></div>
+                                <div class="content-form">
+                                    <div class="form-label"><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-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-input">
+                                        <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的手机号">
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -53,6 +130,8 @@
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/cardsMixns.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/cards.js(v=${version})}"></script>
 </body>
 </html>