mgrading/src/views/level/SignUpBaseInfo.vue

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

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

            <van-field v-model="form.phone" name="phone" label="姓名" placeholder="请输入姓名" :rules="[{ required: true, message: '姓名输入有误' }]" />

            <van-field name="radio" label="性别">
                <template #input>
                    <van-radio-group v-model="form.sex" direction="horizontal">
                    <van-radio :name="1">男</van-radio>
                    <van-radio :name="0">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <van-field readonly clickable name="birthday" v-model="form.birthday" label="生日" placeholder="请选择" @click="birthdayStatus = true" is-link />

            <van-field readonly clickable name="nation" v-model="form.nation" label="民族" placeholder="请选择" is-link />
            <div class="title">证件照上传</div>
            <m-button class="stepBtn" text="下一步" native-type="submit" />
        </van-form>

        <van-popup v-model="birthdayStatus" position="bottom">
            <van-datetime-picker
                type="date"
                @cancel="birthdayStatus = false"/>
                <!-- @confirm="onConfirm" -->
        </van-popup>
    </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}$/,
            birthdayStatus: false,
            form: {
                phone: null,
                sex: 1,
                birthday: null,
                nation: 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)
        },
        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;
    }
}

.stepBtn {
    margin-top: .35rem;
}
</style>