<template>
    <div style=" background-image: url('./picture/hhr/01.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 150%;">
        <div style="height:60px"></div>
       <div  style="width: auto; height: 80px; background: white;">
           <van-row type="flex" justify="center">
               <span style="font-size: 28px;text-align: center;color: rgb(1,12,146);width: 80%;margin: auto">绑定29元新黑牛卡校园网提速到50M</span>
           </van-row>
           <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />
           <van-row type="flex" justify="center">
               <span style="font-size: 22px;padding-top: 10px;text-align: center;color: black;width: 80%;margin: auto">请填写以下有效消息</span>
           </van-row>
           <van-form validate-first @submit="onSubmit" @failed="onFailed">
               <van-field v-model="phone" name="phone" label="手机号" :rules="phoneRules" />
               <van-field
                       v-model="code"
                       center
                       clearable
                       label="验证码"
                       :rules="codeRules"
                       placeholder="请输入短信验证码"
               >
                   <van-button slot="button" size="small" type="primary">发送验证码</van-button>
               </van-field>
              <div style=" width: 15.0rem;margin: 10px 20px 10px 70px;">
                   <span style="color: black;font-size: 14px;"><font style="color:red">注意：</font>
               以上填写的手机号和身份证号必须要和办理校园网的本人一致，否则无法绑定进行提速。
                </span>
              </div>
               <div>
                   <van-grid :column-num="1">
                       <van-row >
                           <van-col span="20" offset="2"> <div style="color: black;font-size: 17px;text-align: center;">未有电信号码请按以下按钮办理</div></van-col>
                           <van-col span="10" offset="8"> <div style="color: black;font-size: 17px;text-align: center;"><van-sticky :offset-top="50">
                               <van-button type="info">申请办理手机卡</van-button>
                           </van-sticky></div></van-col>
                       </van-row>

                       <van-row type="flex" justify="center">
                           <p style="color: red;font-size: 14px">请办理完手机卡后，重新访问此网页进行绑定，申请校园网提速。</p>
                       </van-row>
                   </van-grid>

               </div>
               <div style="margin: 16px;">
                   <van-button round block type="info" native-type="submit">
                       提交
                   </van-button>
               </div>
           </van-form>
       </div>

    </div>


</template>

<script>
    import { Toast } from 'vant';

    export default {
        name:"rongHe",
        data(){
            this.phoneRules = [
                { required: true, message: '请输入手机号' },
                { validator: this.phoneValidator, message: '手机号格式错误' },
            ];
            this.codeRules = [
                { required: true, message: '请输入验证码' },
                { validator: this.codeValidator, message: '验证码错误' },
            ];
            return{
                code: '',
                phone: '',
            }
        }
        ,

        methods: {
            // 校验函数返回 true 表示校验通过，false 表示不通过
            phoneValidator(val) {
                return /1\d{10}/.test(val);
            },
            // 校验函数返回 Promise 来实现异步校验
            codeValidator(val) {
                return new Promise(resolve => {
                    Toast.loading('验证中...');

                    setTimeout(() => {
                        Toast.clear();
                        resolve(/\d{6}/.test(val));
                    }, 1000);
                });
            },
            onSubmit(values) {
                console.log('submit', values);
            },
            onFailed(errorInfo) {
                console.log('failed', errorInfo);
            },
        },
    }

</script>

<style scoped>
</style>
