<template>
    <!-- 顶部导航栏 -->
    <van-nav-bar class="navBar" :fixed="true">
            <template #left>
                <div @click="$router.go(-1)">
                    <van-icon name="cross" size="18" color="#333333"/>
                </div>
            </template>
            <template #right>
                <van-icon name="ellipsis" size="18" color="#333333"/>
            </template>
    </van-nav-bar>
    <div class="content">
        <div class="content_title">我的银行卡</div>
        <div class="content_tip">成功绑定后不能修改</div>
        <div class="prompt_information">银行卡号</div>
        <input type="text" v-model="bankCard" placeholder="点击输入*某某 银行卡号" class="input_information"/>
        <div class="prompt_information">银行预留手机号</div>
        <input type="text" v-model="phoneNumber" placeholder="请输入银行预留手机号" class="input_information"/>
    </div>
    <div class="next_step">
        <div class="next_step_con" @click="nextStep">下一步</div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
    data(){
        return{
            realName: false
        }
    },
    methods: {
        nextStep(){
            let that = this
            if(that.realName){
                console.log("有实名认证")
            }else{
                console.log("11111111")
                Dialog.confirm({
                    title: '认证提醒',
                    message: '您的账户还未实名认证，认证后 可进行添加银行卡',
                    confirmButtonText: '前往认证',
                    confirmButtonColor: '#28B6FF',
                    cancelButtonColor: '#939599',
                }).then(()=>{
                    that.$router.push('/realName')
                }).catch(()=>{

                })
                // that.$router.push("/mineBanksAdd")
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .navBar{
        width: 100%;
        height: 44px;
    }
    .content{
        width: 100%;
        height: 100%;
        position: absolute;
        margin-top: 44px;
        background: #0F0F27;
        padding: 16px 16px 16px 16px;
        box-sizing: border-box;
        .content_title{
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 6px;
        }
        .content_tip{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFCA5E;
        }
        .prompt_information{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .input_information{
            width: 100%;
            height: 44px;
            background: #29293F;
            border-radius: 8px;
            padding-left: 10px;
            box-sizing: border-box;
            border: 0;
            line-height: 44px;
        }
    }
    .next_step{
        width: 100%;
        height: 56px;
        background: #15152D;
        position: fixed;
        bottom: 0;
        padding: 8px 16px;
        box-sizing: border-box;
        .next_step_con{
            width: 100%;
            height: 40px;
            background: #28B6FF;
            border-radius: 8px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
</style>
