mgrading/src/views/signup/SignUpAccount.vue

<template>
    <div class="signupAccount">
        <m-header />
        <m-step style="margin-top: .12rem" />

        <div class="title">基本信息</div>
        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
            <van-field v-model="form.phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="[{ pattern: patternPhone, message: '手机号输入有误' }]" />

            <van-field v-model="form.code" clearable name="code" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]" >
                <template #button>
                    <span class="codeText">获取验证码</span>
                </template>
            </van-field>

            <van-field v-model="form.password" name="passwrod" label="设置密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPwd, message: '6-16位数字或字母' }]" />

            <van-field v-model="form.rePassword" name="rePassword" label="再次输入密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPwd, message: '6-16位数字或字母' }]" />

            <m-button class="stepBtn" text="下一步" native-type="submit" />
        </van-form>
    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MStep from '@/components/MStep'
import MButton from '@/components/MButton'
// import { browser } from '@/common/common'
export default {
    name: 'signupAccount',
	components: { MHeader, MStep, MButton },
    data () {
        return {
            patternPhone: /1(3|4|5|6|7|8|9)\d{9}/,
            patternPwd: /^[0-9A-Za-z]{6,16}$/,
            form: {
                phone: null,
                code: null,
                password: null,
                rePassword: null
            },
        }
    },
    mounted() {
        // 插入token
        // let params = this.$route.query
        // if(params.Authorization) {
        //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
        //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
        // }
    },
    methods: {
        onSubmit() {
            // console.log('submit', values)
            this.$router.push({
                path: '/signUpBaseInfo'
            })
        },
        onFailed() {
            // console.log('failed', errorInfo);
            // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
            // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
        }
    }
}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

.signupAccount {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F3F4F8;
    .title {
        font-size: .16rem;
        color: #999999;
        padding: .12rem .16rem;
    }
    /deep/.van-cell {
        padding: .13rem .16rem;
    }
    /deep/.van-field__label {
        font-size: .17rem;
        color: #333;
        width: 1.15rem;
    }
    /deep/.van-field__body {
        font-size: .16rem
    }

    .codeText {
        font-size: .16rem;
        color: #2DC7AA;
    }
}

</style>