添加页面

src/router/levelRouter.js

@@ -25,6 +25,15 @@ let levelRouter = [{
 		description: "报名",
 		weight: 2 // 页面权重
 	}
+}, {
+	path: "/signUpBaseInfo",
+	name: "signUpBaseInfo",
+	component: () =>
+		import( /* webpackChunkName: "SignUpBaseInfo" */ "@/views/level/SignUpBaseInfo"),
+	meta: {
+		description: "报名",
+		weight: 3 // 页面权重
+	}
 }]
 
 export default levelRouter

src/views/level/SignUpAccount.vue

@@ -13,9 +13,9 @@
                 </template>
             </van-field>
 
-            <van-field v-model="form.password" name="passwrod" label="设置密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPhone, message: '6-16位数字或字母' }]" />
+            <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: patternPhone, 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>
@@ -32,6 +32,7 @@ export default {
     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,
@@ -51,6 +52,9 @@ export default {
     methods: {
         onSubmit() {
             // console.log('submit', values)
+            this.$router.push({
+                path: '/signUpBaseInfo'
+            })
         },
         onFailed() {
             // console.log('failed', errorInfo);

src/views/level/SignUpBaseInfo.vue

@@ -0,0 +1,111 @@
+<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>