<!--
|
* @Author: your name
|
* @Date: 2021-10-28 17:26:45
|
* @LastEditTime: 2022-10-11 17:44:10
|
* @LastEditors: zxq
|
* @Description: In User Settings Edit
|
* @FilePath: \axx_ins_client\src\views\bankCard\index.vue
|
-->
|
<template>
|
<div class="bankCard_page">
|
<v-navbar title="我的银行卡" back="/home/personal"></v-navbar>
|
<van-form ref='submitFrom' label-width='120px' input-align='right' error-message-align='right'>
|
<!-- <h-cell :disabled='disabled' readonly v-model="mation.goodsName" label="请填写银行名称"></h-cell> -->
|
<van-field
|
|
v-model="dataFrom.bankName"
|
name="bankName"
|
readonly
|
clickable
|
label="银行名称"
|
placeholder="银行名称"
|
@click="showBankList"
|
:rules="[{ required: true, message: '请填写银行名称' }]"
|
/>
|
<van-field
|
:readonly='disabled'
|
v-model="dataFrom.bankCardNo"
|
type="number"
|
name="bankCardNo"
|
label="银行卡号"
|
placeholder="银行卡号"
|
:rules="[{ required: true, message: '请填写银行卡号' }]"
|
/>
|
<van-field
|
v-model="dataFrom.bankCardMblNo"
|
:readonly='disabled'
|
type="tel"
|
:maxlength="11"
|
name="bankCardMblNo"
|
label="银行预留手机号"
|
placeholder="银行预留手机号"
|
:rules="[{ required: true, message: '请填写银行预留手机号' },,{validator, message: '手机号格式有误'}]"
|
>
|
<template #button>
|
<van-button v-if='!disabled&&dataFrom.bankCardMblNo' :disabled='waitTime>0' size="small" @click='sendCode' type="primary">{{codeText}}</van-button>
|
</template>
|
</van-field>
|
<van-field
|
v-model="dataFrom.verCode"
|
:readonly='disabled'
|
v-if='!disabled'
|
name="verCode"
|
label="验证码"
|
placeholder="验证码"
|
:rules="[{ required: true, message: '请输入验证码'}]"
|
/>
|
<div style="margin: 16px;">
|
<van-button v-if='disabled' round block type="info" @click='disabled=false'>换绑</van-button>
|
<van-button v-if='!disabled' round block @click='onSubmit' type="info">确认</van-button>
|
</div>
|
</van-form>
|
<van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" >
|
<van-picker
|
show-toolbar
|
:columns="columns"
|
@confirm="onConfirm"
|
@cancel="onCancel"
|
:default-index="defaultIndex"
|
>
|
<template #title>
|
<form action="/">
|
<van-search v-model="searchValue" @search='onSearch' @input='inputSearch' placeholder="输入银行名称">
|
<!-- <template #action>
|
<div @click="onSearch">搜索</div>
|
</template> -->
|
</van-search>
|
</form>
|
</template>
|
</van-picker>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue';
|
import { Form } from 'vant';
|
import { Field,Button,Picker,Popup,Search,Dialog } from 'vant';
|
|
Vue.use(Form);
|
Vue.use(Field);
|
Vue.use(Button);
|
Vue.use(Picker);
|
Vue.use(Popup);
|
Vue.use(Search);
|
export default {
|
name: '',
|
components: {[Dialog.Component.name]: Dialog.Component,},
|
data() {
|
return {
|
dataFrom:{},
|
submitText:"换绑",
|
columns:[],
|
showPicker:false,
|
searchValue:'',
|
bankCradList:[],
|
defaultIndex:0,
|
disabled:true,
|
codeText:'发送验证码',
|
waitTime:0,
|
timer:null,
|
bankId:"",
|
isClickSend:false,
|
}
|
},
|
methods:{
|
validator(val) {
|
console.log(val)
|
return val.length==11;
|
},
|
onSubmit(values) {
|
console.log(this.isClickSend)
|
if(!this.isClickSend){
|
this.$tool.toast('请先获取验证码');
|
return false
|
}
|
this.$refs.submitFrom.validate().then(()=>{
|
if(!this.disabled){
|
let data ={...values,...this.dataFrom,bankId:this.bankId};
|
this.$api.bindBankCard(data).then(({body})=>{
|
Dialog.alert({
|
title: '提示',
|
message: '实名认证成功',
|
});
|
this.disabled =true;
|
clearInterval(this.timer);
|
this.codeText =`发送验证码`;
|
this.waitTime =0;
|
this.dataFrom.verCode ='';
|
}).catch((msg)=>{
|
// Dialog.alert({
|
// title: '失败提示',
|
// message: '绑卡信息有误，请确认信息',
|
// });
|
});
|
}
|
}).catch(()=>{
|
//验证失败
|
})
|
},
|
onConfirm(value){
|
this.dataFrom.bankName =value.text;
|
this.dataFrom.bankCode =value.code;
|
this.searchValue = '';
|
this.columns = this.bankCradList;
|
this.showPicker = false;
|
},
|
onCancel(){
|
this.showPicker = false;
|
this.searchValue = '';
|
this.columns = this.bankCradList;
|
},
|
showBankList(){
|
if(this.disabled){
|
return true;
|
}
|
sessionStorage.bankList = JSON.stringify(this.columns);
|
this.$router.push({
|
path: "/order-handling/bank-list",
|
query:{isBackName:'backCard'}
|
});
|
|
},
|
onSearch(){
|
let arr =[];
|
this.bankCradList.forEach(k=>{
|
if(k.name.indexOf(this.searchValue)>-1){
|
arr.push(k);
|
}
|
});
|
this.columns = arr;
|
},
|
inputSearch(){
|
if(!this.searchValue){
|
this.columns = this.bankCradList;
|
}
|
},
|
sendCode(){
|
let {bankCardMblNo,bankCardNo,bankCode} =this.dataFrom;
|
let data ={bankCardMblNo,bankCardNo,bankCode};
|
let _this =this;
|
if(this.waitTime>0){
|
this.codeText =`${_this.waitTime}秒后重发`;
|
clearInterval(this.timer);
|
}else{
|
this.$api.bankVerCode(data).then(({body})=>{
|
this.isClickSend = true;
|
this.bankId =body.bankId;
|
this.waitTime = 60;
|
this.timer = setInterval(() => {
|
this.waitTime--;
|
this.codeText =`${_this.waitTime}秒后重发`
|
if (this.waitTime <= 0) {
|
this.codeText =`发送验证码`
|
clearInterval(this.timer)
|
}
|
}, 1000);
|
});
|
}
|
|
}
|
},
|
created(){
|
this.$api.bankCardInfo().then(({body})=>{
|
let {bankCode,bankCardNo,bankCardMblNo} =body;
|
let bankName ='请选择银行';
|
this.columns = body.bankList.map(val=>{
|
if(bankCode == val.code){
|
bankName = val.name;
|
}
|
return {
|
text:val.name,
|
...val
|
}
|
});
|
this.bankCradList = this.columns;
|
this.dataFrom = {bankCode,bankCardNo,bankCardMblNo,bankName:bankName};
|
let queryObj = this.$route.query;
|
if(queryObj.code){
|
this.dataFrom.bankCode =queryObj.code;
|
this.dataFrom.bankName =queryObj.name;
|
this.disabled =false;
|
}
|
});
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.bankCard_page{
|
.van-search{
|
padding: 0;
|
width: 180px;
|
}
|
.van-search>.van-cell{
|
padding: 0;
|
}
|
/deep/ .van-field__control:disabled{
|
color: #999 !important;
|
opacity: 1 !important;
|
-webkit-text-fill-color:#999 !important;
|
-webkit-opacity:1 !important;
|
}
|
}
|
</style>
|
