<template>
    <view class="page_css">
        <view class="container">
            <betone-header-top :title="title" />
            <u-form labelPosition="left" :model="forgotInfo" :rules="rules" ref="registerForm">
                <u-form-item prop="businessName" :border-bottom="false" label-position="top" label="手机号">
                    <u-input v-model="forgotInfo.mobile" :border="true" placeholder="请输入" />
                </u-form-item>
                <u-form-item prop="businessName" :border-bottom="false" label-position="top" label="验证码">

                </u-form-item>
                <u-form-item prop="businessName" :border-bottom="false" label-position="top" label="密码">
                    <u-input v-model="forgotInfo.password" type="password" :border="true" :password-icon="true" />
                </u-form-item>
                <u-form-item prop="businessName" :border-bottom="false" label-position="top" label="确认密码">
                    <u-input v-model="forgotInfo.confirmPassword" type="password" :border="true" :password-icon="true" />
                </u-form-item>
            </u-form>
            <!-- <u-button @click="submit">确定</u-button> -->
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            title: "忘记密码",
            forgotInfo: {
                mobile: '',
                verificationCode:'',//验证码
                password:"",//密码
                confirmPassword:'',//确认密码
            },
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: ['change', 'blur'],
                    },
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // this.$u.test.mobile()就是返回true或者false的
                            return this.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change', 'blur'],
                    }
                ]
            },
        }
    }
}
</script>
<style lang="scss" scoped>
.page_css {
    .container {
        padding: 32rpx 64rpx 32rpx 64rpx;

    }
}
</style>