vant 绑定银行卡页面+验证所属银行+身份证号码+所属银行选择器

<template>
    <div>
        <van-nav-bar  class="navBar" style="background-color: white" title="绑定银行卡"  @border="false">
            <template #left  >
                <van-icon name="arrow-left" class="navBarLeft"  size="18" @click="onClickLeft" />
            </template>
        </van-nav-bar>

       <van-col v-show="oneShow" span="24">
           <van-field
                   v-model="name"
                   label="持卡人姓名"
                   placeholder="持卡人姓名"
                   :error-message="nameChange"
                   clearable
           />
           <van-field
                   v-model="idCard"
                   label="身份证号码"
                   placeholder="身份证号码"
                   :error-message="idCardChange"
                   clearable
           />
           <div style="width: 100%;height: 0.1rem;background-color: #6e6e6e"></div>
           <van-field
                   readonly
                   clickable
                   name="picker"
                   :value="value"
                   label="所属银行"
                   placeholder="点击选择银行"
                   @click="showPicker = true"
           />
           <van-popup v-model="showPicker" position="bottom">
               <van-picker
                       show-toolbar
                       :columns="bankList"
                       @confirm="onConfirm"
                       @cancel="showPicker = false"
               />
           </van-popup>
           <van-field
                   v-model="bankNo"
                   label="银行卡号"
                   placeholder="银行卡号"
                   :error-message="bankNoChange"
                   clearable
           />
           <van-field
                   v-model="tel"
                   label="手机号码"
                   placeholder="手机号码"
                   :error-message="telChange"
                   clearable
           />
           <div style="margin-top: 0.2rem;padding: 0.2rem">
               <van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(1)">下一步</van-button>

           </div>
       </van-col>
       <van-col v-show="twoShow" span="24">
           <van-field
                   v-model="tel"
                   placeholder="手机号码"
                   :error-message="telChange"
                   clearable
           />
           <van-field
                   v-model="code"
                   placeholder="验证码"
                   :error-message="codeChange"
                   clearable
           />

           <div style="margin-top: 0.2rem;padding: 0.2rem">
               <van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(2)">下一步</van-button>

           </div>
       </van-col>
        <van-col v-show="threeShow" span="24">
            <div style="margin-top: 0.2rem;padding: 0.2rem">
                <van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(3)">返回</van-button>
            </div>
        </van-col>


    </div>
</template>

<script>
    import axios from "axios";
    import {post} from "../util/http";
    export default {
        name: "AddBank",
        data(){
            return {
                name:"",
                idCard:'',
                tel:'',
                code:'',
                bankNo:'',
                bankId:'',
                zhud:false,
                loading:false,
                oneShow:true,
                twoShow:false,
                threeShow:false,
                showPicker: false,
                value: '',
                bankList: [],
            }
        },
        computed:{
            nameChange () {
                if(this.name) {
                    if (/^[\u4e00-\u9fa5]{2,6}$/.test(this.name)){
                        return ''
                    } else {
                        return '您输入的姓名有误'
                    }
                } else {
                    return '输入的姓名不能为空'
                }


            },
            idCardChange () {


                if ( this.idCard.length == 15) {
                    if (this.isValidityBrithBy15IdCard(this.idCard)){
                        return ''
                    } else {
                        return'您输入的身份证有误'
                    }
                } else if ( this.idCard.length == 18) {
                    var a_idCard =  this.idCard.split(""); // 得到身份证数组
                    if (this.isValidityBrithBy18IdCard(this.idCard) && this.isTrueValidateCodeBy18IdCard(a_idCard)) { //进行18位身份证的基本验证和第18位的验证
                        return ''
                    } else {
                        return '您输入的身份证有误'
                    }
                } else {
                    if (this.idCard.length === 0) {
                        return '输入的身份证号不能为空'
                    } else {
                        return '您输入的身份证长度有误'
                    }
                }


            },
            bankNoChange () {
                if(this.bankNo) {
                    if (/^\d*$/.test(this.bankNo)){
                       if(this.bankNo.length<16){
                           return '您输入的银行卡号长度有误'
                       }else {
                           return ''
                       }
                    } else {
                        return '您输入的银行卡号有误'
                    }
                } else {
                    return '输入的银行卡号不能为空'
                }


            },
            telChange () {
                if(this.tel) {
                    if (/^\d*$/.test(this.tel)){
                        return ''
                    } else {
                        return '您输入的手机号码有误'
                    }
                } else {
                    return '输入的手机不能为空'
                }


            },
            codeChange () {
                if(this.code) {
                    if (/^\d*$/.test(this.code)){
                        return ''
                    } else {
                        return '您输入的验证码有误'
                    }
                } else {
                    return '输入的验证码不能为空'
                }


            },
        },
        mounted() {
            this.getBankList()
        },
        methods:{
            onClickLeft() {
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                    return false
                } else {
                    this.$router.go(-1)
                }
            },

            //15位身份证
            isValidityBrithBy15IdCard(idCard15) {
                var year = idCard15.substring(6, 8);
                var month = idCard15.substring(8, 10);
                var day = idCard15.substring(10, 12);
                var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
                // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
                if(temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
                    return false;
                } else {
                    return true;
                }
            },
            //18位生日校验
            isValidityBrithBy18IdCard(idCard18) {
                var year = idCard18.substring(6, 10);
                var month = idCard18.substring(10, 12);
                var day = idCard18.substring(12, 14);
                var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
                // 这里用getFullYear()获取年份，避免千年虫问题
                if(temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
                    return false;
                } else {
                    return true;
                }
            },
            //18位最后一位校验
            isTrueValidateCodeBy18IdCard(a_idCard) {
                var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子
                var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证验证位值.10代表X
                var sum = 0; // 声明加权求和变量
                if(a_idCard[17].toLowerCase() == 'x') {
                    a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作
                }
                for (var i = 0; i < 17; i++) {
                    sum += Wi[i] * a_idCard[i]; // 加权求和
                }
                var valCodePosition = sum % 11; // 得到验证码所位置
                if (a_idCard[17] == ValideCode[valCodePosition]) {
                    return true;
                } else {
                    return false;
                }
            },
            login (value) {
                console.log(value)
                if(value == 1){
                    if (this.tel === '' || this.usertel === '手机号码格式错误') {
                        this.$toast('手机号码输入有误')
                        return
                    }
                    if (this.bankId === '') {
                        this.$toast('所属银行不能为空')
                        return
                    }
                    this.oneShow = false
                    this.twoShow = true
                    this.threeShow = false
                }else if(value == 2 ){
                    this.oneShow = false
                    this.twoShow = false
                    this.threeShow = true
                }else{
                    this.$router.push({path:'/'})
                }

              //  this.reallR()
            },
            reallR () {
                this.zhud=true
                this.loading=true
                var post_data={
                    tel: this.tel,
                    password: this.password
                }
                axios.post(this.globalAPI.setLogin, post_data).then(res=>{
                    // console.log(res)

                    this.zhud=false
                    this.loading=false
                    if (res.data.status  === 200) { 
                        this.$toast(res.data.info)


                        this.userToken = 'Bearer ' + res.data.token;
                        // 将用户token保存到vuex中
                        this.changeLogin({ Authorization: this.userToken });
                        // localStorage.setItem('token',res.data.token) //登录标识


                        if (window.history.length <= 1) {
                            this.$router.push({path:'/'})
                            return false
                        } else {
                            this.$router.go(-1)
                        }


                    }  else {
                        this.$toast(res.data.info)
                    }
                })
            },
            onConfirm(value) {

                console.log(value)
                this.value = value.text;
                this.bankId = value.keyId
                this.showPicker = false;
            },
            getBankList(){
                let postData={

                };
                //localStorage.clear()  //清除所有localStorage
                // 获取轮播图
                post({ //函数内部调用函数 传参为对象形式
                    url: this.globalAPI.getBankList,          //请求地址
                    data: postData,                     //请求数据
                    IS: false                              //是否需要弹框提示
                }).then(res => {
                   // console.log(res.data.data)
                    let list = [];
                    for (var i=0;i<res.data.data.length;i++){

                        var index ={"keyId":res.data.data[i].id,"text":res.data.data[i].name}
                        list.push(index)
                    }
                   // console.log(list)
                    this.bankList = list;        //处理业务逻辑........
                });
            },
        }
    }
</script>

<style scoped>

</style>