mgrading/src/views/signup/SignUpBaseInfo.vue

<template>
    <div class="signupBaseInfo">
        <m-header />
        <m-step :number="2" />

        <!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
        <div class="title">基本信息</div>
        <van-field v-model="form.phone" required name="phone" label="身份证号" placeholder="请输入身份证号" :rules="[{ pattern: patternCard, message: '身份证号输入有误' }]" >
            <template #button>
                <span class="codeText">上传</span>
            </template>
        </van-field>
        <!-- #2DC7AA -->
        <div class="cardTips">如有括号，请用英文括号()</div>
        <van-field required 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 checked-color="var(--main-color)" :name="1">男</van-radio>
                    <van-radio checked-color="var(--main-color)" :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>

        <div class="upload-img">
            <van-uploader v-model="fileList" multiple :max-count="1" :max-size="3 * 1024 * 1024" >
                <div class="upload-container">
                    <i class="icon-upload-add"></i>
                    <p>点击上传</p>
                </div>
            </van-uploader>
            <p class="upload-tips">须使用免冠证件照，纯底色<br/>（纯白、纯蓝或纯红）<br/>（图像预览可能会异常）</p>
        </div>

        <m-button class="step-btn" @click="onSubmit" text="下一步" native-type="submit" />
        <!-- </van-form> -->

        <van-popup v-model="birthdayStatus" position="bottom">
            <van-datetime-picker
                type="date"
                :formatter="formatter"
                @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 { getYMD } from '@/utils/common'
export default {
    name: 'signupBaseInfo',
	components: { MHeader, MStep, MButton },
    data () {
        return {
            patternCard: /^1(3|4|5|6|7|8|9)\d{9}$/,
            birthdayStatus: false,
            form: {
                phone: null,
                sex: 1,
                birthday: null,
                nation: null
            },
            fileList: [],
        }
    },
    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: '/signUpLevel'
            })
        },
        onFailed() {
            // console.log('failed', errorInfo);
            // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
            // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
        },
        onConfirm(val) {
            this.form.birthday = getYMD(val, true)
            this.birthdayStatus = false
        },
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val
        }
    }
}
</script>
<style lang="less" scoped>
.signupBaseInfo {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--main-bg-color);
    .title {
        font-size: .16rem;
        color: var(--font-second-color);
        padding: .12rem .16rem;
    }
    /deep/.van-cell {
        padding: .13rem .16rem;
    }
    /deep/.van-field__label {
        font-size: .17rem;
        color: var(--font-main-color);
        width: 1.15rem;
    }
    /deep/.van-field__body {
        font-size: .16rem
    }

    .codeText {
        font-size: .16rem;
        color: var(--main-color);
    }
}

.upload-img {
    background: #ffffff;
    text-align: center;
    padding: .3rem 0 .2rem;
    .upload-container {
        width: 1rem;
        height: 1.4rem;
        background: url('../../assets/images/level/uploadBg.png') no-repeat center;
        background-size: contain;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .upload-tips {
        padding-top: .18rem;
        font-size: .14rem;
        color: var(--font-second-color);
    }
    .icon-upload-add {
        display: inline-block;
        width: .55rem;
        height: .55rem;
        background: url('../../assets/images/level/icon_upload_add.png') no-repeat center;
        background-size: contain;
    }
    p {
        margin-top: -.04rem;
        font-size: .16rem;
        color: var(--main-color);
    }
}
/deep/.van-uploader__preview {
    margin: 0;
}
/deep/.van-uploader__preview-image {
    width: 1rem;
    height: 1.4rem;
}
.cardTips {
    font-size: .14rem;
    color: #2DC7AA;
    padding-left: 1.28rem;
    padding-top: .03rem;
    padding-bottom: .15rem;
}
</style>