添加新页面

src/components/MButton.vue

@@ -23,6 +23,9 @@ export default {
 
 <style lang="less" scoped>
 @import url("../assets/commonLess/variable");
+.mbutton {
+    margin: .35rem 0 .2rem;
+}
 .van-button--primary {
     background-color: #2DC7AA;
     border: 1px solid #2DC7AA;

src/main.js

@@ -10,14 +10,14 @@ import { Button, Icon, Tag, Popup, Picker, Form,
     Tab, Tabs, Row, Col, Cell, CellGroup, NavBar,
     Field, DatetimePicker, Image, Loading, Overlay,
     ActionSheet, RadioGroup, Radio, CheckboxGroup, Checkbox,
-    CountDown, Panel, Dialog, Divider, Rate } from 'vant'
+    CountDown, Panel, Dialog, Divider, Rate, Uploader } from 'vant'
 Vue.use(Button).use(Icon).use(Tag).use(NavBar)
    .use(Popup).use(Picker).use(Search).use(Collapse).use(CollapseItem)
    .use(PullRefresh).use(Toast).use(List).use(Form)
    .use(Tab).use(Tabs).use(Row).use(Col).use(Cell).use(CellGroup)
    .use(Field).use(DatetimePicker).use(Image).use(Loading).use(Overlay)
    .use(ActionSheet).use(RadioGroup).use(Radio).use(CheckboxGroup).use(Checkbox)
-   .use(CountDown).use(Panel).use(Dialog).use(Divider).use(Rate)
+   .use(CountDown).use(Panel).use(Dialog).use(Divider).use(Rate).use(Uploader)
 Vue.config.productionTip = false
 
 

src/router/applyRouter.js

@@ -0,0 +1,30 @@
+let applyRouter = [{
+	path: "/applyList",
+	name: "applyList",
+	component: () =>
+		import( /* webpackChunkName: "ApplyList" */ "@/views/apply/ApplyList"),
+	meta: {
+		description: "报考列表",
+		weight: 2 // 页面权重
+	}
+}, {
+	path: "/applyCertificate",
+	name: "applyCertificate",
+	component: () =>
+		import( /* webpackChunkName: "ApplyCertificate" */ "@/views/apply/ApplyCertificate"),
+	meta: {
+		description: "准考证",
+		weight: 3 // 页面权重
+	}
+}, {
+	path: "/applyNeed",
+	name: "applyNeed",
+	component: () =>
+		import( /* webpackChunkName: "ApplyNeed" */ "@/views/apply/ApplyNeed"),
+	meta: {
+		description: "待考",
+		weight: 4 // 页面权重
+	}
+}]
+
+export default applyRouter

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import LevelRouter from './levelRouter'
+import ApplyRouter from './applyRouter'
 
 Vue.use(Router)
 
@@ -10,10 +11,20 @@ let defaultRouter = [
     redirect: {
       name: 'levelMusic'
     }
+  }, {
+    path: "/levelMusic",
+    name: "levelMusic",
+    component: () =>
+      import( /* webpackChunkName: "LevelMusic" */ "@/views/LevelMusic"),
+    meta: {
+      description: "音乐考级",
+      weight: 1 // 页面权重
+    }
   }
 ]
 
 defaultRouter = defaultRouter.concat(LevelRouter)
+                .concat(ApplyRouter)
 
 const router = new Router({
   // mode: 'history',

src/router/levelRouter.js

@@ -1,17 +1,8 @@
 let levelRouter = [{
-	path: "/levelMusic",
-	name: "levelMusic",
-	component: () =>
-		import( /* webpackChunkName: "LevelMusic" */ "@/views/level/LevelMusic"),
-	meta: {
-		description: "音乐考级",
-		weight: 1 // 页面权重
-	}
-}, {
 	path: "/signUp",
 	name: "signUp",
 	component: () =>
-		import( /* webpackChunkName: "SignUp" */ "@/views/level/SignUp"),
+		import( /* webpackChunkName: "SignUp" */ "@/views/signup/SignUp"),
 	meta: {
 		description: "报名",
 		weight: 2 // 页面权重
@@ -20,7 +11,7 @@ let levelRouter = [{
 	path: "/signUpAccount",
 	name: "signUpAccount",
 	component: () =>
-		import( /* webpackChunkName: "SignUpAccount" */ "@/views/level/SignUpAccount"),
+		import( /* webpackChunkName: "SignUpAccount" */ "@/views/signup/SignUpAccount"),
 	meta: {
 		description: "报名",
 		weight: 2 // 页面权重
@@ -29,11 +20,47 @@ let levelRouter = [{
 	path: "/signUpBaseInfo",
 	name: "signUpBaseInfo",
 	component: () =>
-		import( /* webpackChunkName: "SignUpBaseInfo" */ "@/views/level/SignUpBaseInfo"),
+		import( /* webpackChunkName: "SignUpBaseInfo" */ "@/views/signup/SignUpBaseInfo"),
 	meta: {
 		description: "报名",
 		weight: 3 // 页面权重
 	}
+}, {
+	path: "/signUpLevel",
+	name: "signUpLevel",
+	component: () =>
+		import( /* webpackChunkName: "SignUpLevel" */ "@/views/signup/SignUpLevel"),
+	meta: {
+		description: "报名",
+		weight: 4 // 页面权重
+	}
+}, {
+	path: "/signUpPayment",
+	name: "signUpPayment",
+	component: () =>
+		import( /* webpackChunkName: "SignUpPayment" */ "@/views/signup/SignUpPayment"),
+	meta: {
+		description: "报名",
+		weight: 5 // 页面权重
+	}
+}, {
+	path: "/signUpCertificate",
+	name: "signUpCertificate",
+	component: () =>
+		import( /* webpackChunkName: "SignUpCertificate" */ "@/views/signup/SignUpCertificate"),
+	meta: {
+		description: "报名",
+		weight: 6 // 页面权重
+	}
+}, {
+	path: "/signUpCard",
+	name: "signUpCard",
+	component: () =>
+		import( /* webpackChunkName: "SignUpCard" */ "@/views/signup/SignUpCard"),
+	meta: {
+		description: "报名",
+		weight: 7 // 页面权重
+	}
 }]
 
 export default levelRouter

src/views/level/LevelMusic.vue → src/views/LevelMusic.vue

@@ -2,7 +2,7 @@
     <div class="level-music">
         <m-header />
 		<div class="level-banner">
-			<img src="../../assets/images/level/banner@2x.png" alt="">
+			<img src="../assets/images/level/banner@2x.png" alt="">
 		</div>
 
 		<div class="level-section">
@@ -10,10 +10,10 @@
 				<h3>报名入口</h3>
 				<p>快捷报名入口<van-icon name="arrow" /></p>
 			</router-link>
-			<div class="section two">
+			<router-link :to="{ path: '/applyNeed' }" class="section two">
 				<h3>待考区</h3>
 				<p>您即将进行的考试<van-icon name="arrow" /></p>
-			</div>
+			</router-link>
 		</div>
     </div>
 </template>
@@ -40,7 +40,7 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-@import url("../../assets/commonLess/variable.less");
+@import url("../assets/commonLess/variable.less");
 
 .level-music {
     height: 100vh;
@@ -59,7 +59,7 @@ export default {
 .level-section {
 	padding: 0 .16rem;
 	.section {
-		background: url('../../assets/images/level/entry_bg.png');
+		background: url('../assets/images/level/entry_bg.png');
 		height: 1.12rem;
 		background-size: contain;
 		margin-bottom: .12rem;
@@ -68,7 +68,7 @@ export default {
 		flex-direction: column;
 		justify-content: center;
 		&.two {
-			background: url('../../assets/images/level/area_bg.png');
+			background: url('../assets/images/level/area_bg.png');
 			background-size: contain;
 		}
 

src/views/apply/ApplyCertificate.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="applyCertificate">
+        <m-header />
+
+        <div class="container">
+            <div class="card-img">
+                <img src="../../assets/images/level/uploadBg.png" alt="">
+            </div>
+            <van-cell-group :border="false">
+                <van-cell title="准考证号：" :border="false">
+                    <template #default>1058720005575</template>
+                </van-cell>
+                <van-cell title="考生名字：" :border="false">
+                    <template #default>白鸽</template>
+                </van-cell>
+                <van-cell title="考生性别：" :border="false">
+                    <template #default>女</template>
+                </van-cell>
+                <van-cell title="报考专业：" :border="false">
+                    <template #default>钢琴</template>
+                </van-cell>
+                <van-cell title="报考级别：" :border="false">
+                    <template #default>拾级</template>
+                </van-cell>
+                <van-cell title="考试时间：" :border="false">
+                    <template #default>2020-04-23</template>
+                </van-cell>
+                <van-cell title="考试地点：" :border="false">
+                    <template #default>姜杰城航天桥分部</template>
+                </van-cell>
+            </van-cell-group>
+        </div>
+
+    </div>
+</template>
+<script>
+import MHeader from '@/components/MHeader'
+// import { browser } from '@/common/common'
+export default {
+    name: 'applyCertificate',
+	components: { MHeader },
+    data () {
+        return {
+        }
+    },
+    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)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url("../../assets/commonLess/variable.less");
+
+.applyCertificate {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    /deep/.van-cell {
+        padding: .04rem 0;
+        font-size: .14rem;
+        color: #1A1A1A;
+    }
+    /deep/.van-cell__title {
+        width: .7rem;
+        flex: none;
+    }
+    /deep/.van-cell__value {
+        color: #1A1A1A;
+        text-align: left;
+        p {
+            padding-bottom: .15rem;
+            &:last-child{
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    /deep/.van-cell-group {
+        margin-top: .15rem;
+    }
+
+    .container {
+        position: relative;
+        margin: .3rem .52rem 0;
+        padding: .3rem;
+        border-radius: .04rem;
+        background: #ffffff;
+        .card-img {
+            margin: 0 auto;
+            width: 1rem;
+            height: 1.3rem;
+            img {
+                width: 1rem;
+                height: 1.3rem;
+            }
+        }
+
+        &::after {
+            position: absolute;
+            left: 2%;
+            top: 2%;
+            content: ' ';
+            width: 96%;
+            border-radius: .04rem;
+            border: 1px solid #2DC7AA;
+            height: 96%;
+        }
+    }
+}
+
+
+</style>

src/views/apply/ApplyList.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="applyList">
+        <m-header />
+
+        <van-form >
+            <van-field readonly name="code" label="准考证号" value="1058720005575">
+                <template #button>
+                    <span class="codeText" @click="onLookCertificate">查看准考证</span>
+                </template>
+            </van-field>
+            <van-field readonly clickable label="专业,级别,成绩" value="钢琴,十级,通过" />
+            <van-field readonly clickable label="考点" value="姜杰城航天桥分部" />
+            <van-field readonly label="缴费状态" value="已缴费" />
+            <van-field readonly label="考试日期" value="具体考试时间未公布" />
+            <m-button class="stepBtn" text="查看资料" />
+        </van-form>
+
+    </div>
+</template>
+<script>
+import MHeader from '@/components/MHeader'
+import MButton from '@/components/MButton'
+// import { browser } from '@/common/common'
+export default {
+    name: 'applyList',
+	components: { MHeader, MButton },
+    data () {
+        return {
+        }
+    },
+    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)
+        },
+        onLookCertificate() {
+            this.$router.push('/applyCertificate')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url("../../assets/commonLess/variable.less");
+
+.applyList {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    /deep/.van-form {
+        padding-top: .15rem;
+    }
+    /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;
+    }
+    /deep/.van-field__control {
+        color: #999999;
+    }
+
+    .codeText {
+        font-size: .16rem;
+        color: #2DC7AA;
+    }
+}
+
+</style>

src/views/apply/ApplyNeed.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="signupPayment">
+        <m-header />
+
+        <van-cell-group>
+            <van-cell title="日期：" :border="false">
+                <template #default>2020-04-23</template>
+            </van-cell>
+            <van-cell title="考试名字：" :border="false">
+                <template #default>钢琴</template>
+            </van-cell>
+            <van-cell title="预计考试时间：" :border="false">
+                <template #default>9:00-12:00</template>
+            </van-cell>
+            <van-cell title="当前需等待：" :border="false">
+                <template #default>12 位考生</template>
+            </van-cell>
+        </van-cell-group>
+
+        <div class="btn-group">
+            <van-button color="#2DC7AA" size="large" plain block round>查看引导</van-button>
+            <van-button color="#2DC7AA" size="large" block round>进入教室</van-button>
+        </div>
+    </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: 'signupPayment',
+	components: { MHeader },
+    data () {
+        return {
+            patternPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
+            patternPwd: /^[0-9A-Za-z]{6,16}$/,
+            birthdayStatus: false,
+            songStatus: 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)
+        },
+        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");
+
+.signupPayment {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    .title {
+        font-size: .16rem;
+        color: #999999;
+        padding: .12rem .16rem;
+    }
+    /deep/.van-cell {
+        padding: .1rem .16rem;
+        font-size: .15rem;
+        color: #333333;
+    }
+    /deep/.van-cell__title {
+        color: #1A1A1A;
+        width: 1.1rem;
+        flex: none;
+    }
+    /deep/.van-cell__value {
+        text-align: left;
+        p {
+            padding-bottom: .15rem;
+            &:last-child{
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    /deep/.van-cell-group {
+        padding: .1rem 0 .15rem;
+        margin-top: .15rem;
+        border-radius: .1rem;
+        overflow: hidden;
+    }
+
+}
+.btn-group {
+    padding: .18rem .16rem .3rem;
+    /deep/.van-button {
+        margin-bottom: .12rem;
+        height: .5rem;
+        line-height: .48rem;
+        font-size: .18rem;
+    }
+    /deep/.van-button--plain {
+        background-color: transparent;
+    }
+}
+</style>

src/views/level/SignUp.vue → src/views/signup/SignUp.vue

@@ -6,9 +6,7 @@
 				<h2>6月春考</h2>
 				<p>报名时间:2020.6.5-6.20</p>
 			</div>
-
-			<van-button type="primary" @click="onSubmit" round block>我要报名</van-button>
-			<m-button class="signBtn" @click="onSubmit" text="我要报名" />
+			<m-button class="sign-btn" @click="onSubmit" text="我要报名" />
 		</div>
     </div>
 </template>
@@ -59,7 +57,7 @@ export default {
 		}
 	}
 
-	.signBtn {
+	.sign-btn {
 		position: absolute;
 		bottom: .5rem;
 		width: 100%;

src/views/level/SignUpAccount.vue → src/views/signup/SignUpAccount.vue

@@ -95,7 +95,4 @@ export default {
     }
 }
 
-.stepBtn {
-    margin-top: .35rem;
-}
 </style>

src/views/level/SignUpBaseInfo.vue → src/views/signup/SignUpBaseInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="signupAccount">
+    <div class="signupBaseInfo">
         <m-header />
         <m-step :number="2" style="margin-top: .12rem" />
 
@@ -12,8 +12,8 @@
             <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 checked-color="#2DC7AA" :name="1">男</van-radio>
+                        <van-radio checked-color="#2DC7AA" :name="0">女</van-radio>
                     </van-radio-group>
                 </template>
             </van-field>
@@ -21,8 +21,20 @@
             <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" />
+
+            <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" text="下一步" native-type="submit" />
         </van-form>
 
         <van-popup v-model="birthdayStatus" position="bottom">
@@ -39,7 +51,7 @@ import MStep from '@/components/MStep'
 import MButton from '@/components/MButton'
 // import { browser } from '@/common/common'
 export default {
-    name: 'signupAccount',
+    name: 'signupBaseInfo',
 	components: { MHeader, MStep, MButton },
     data () {
         return {
@@ -52,6 +64,7 @@ export default {
                 birthday: null,
                 nation: null
             },
+            fileList: [],
         }
     },
     mounted() {
@@ -77,7 +90,7 @@ export default {
 <style lang="less" scoped>
 @import url("../../assets/commonLess/variable.less");
 
-.signupAccount {
+.signupBaseInfo {
     height: 100vh;
     overflow-y: auto;
     overflow-x: hidden;
@@ -105,7 +118,44 @@ export default {
     }
 }
 
-.stepBtn {
-    margin-top: .35rem;
+.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: #999999;
+    }
+    .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: #2DC7AA;
+    }
 }
+/deep/.van-uploader__preview {
+    margin: 0;
+}
+/deep/.van-uploader__preview-image {
+    width: 1rem;
+    height: 1.4rem;
+}
+
 </style>

src/views/signup/SignUpCard.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="signupCard">
+        <m-header />
+        <m-step :number="6" style="margin-top: .12rem" />
+
+        <div class="container">
+            <div class="card-img">
+                <img src="../../assets/images/level/uploadBg.png" alt="">
+            </div>
+            <van-cell-group :border="false">
+                <van-cell title="准考证号：" :border="false">
+                    <template #default>1058720005575</template>
+                </van-cell>
+                <van-cell title="考生名字：" :border="false">
+                    <template #default>白鸽</template>
+                </van-cell>
+                <van-cell title="考生性别：" :border="false">
+                    <template #default>女</template>
+                </van-cell>
+                <van-cell title="报考专业：" :border="false">
+                    <template #default>钢琴</template>
+                </van-cell>
+                <van-cell title="报考级别：" :border="false">
+                    <template #default>拾级</template>
+                </van-cell>
+                <van-cell title="考试时间：" :border="false">
+                    <template #default>2020-04-23</template>
+                </van-cell>
+                <van-cell title="考试地点：" :border="false">
+                    <template #default>姜杰城航天桥分部</template>
+                </van-cell>
+            </van-cell-group>
+        </div>
+
+        <div class="btn-group">
+            <van-button color="#2DC7AA" size="large" block round>下载APP</van-button>
+        </div>
+    </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: 'signupCard',
+	components: { MHeader, MStep },
+    data () {
+        return {
+        }
+    },
+    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)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url("../../assets/commonLess/variable.less");
+
+.signupCard {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    /deep/.van-cell {
+        padding: .04rem 0;
+        font-size: .14rem;
+        color: #1A1A1A;
+    }
+    /deep/.van-cell__title {
+        width: .7rem;
+        flex: none;
+    }
+    /deep/.van-cell__value {
+        color: #1A1A1A;
+        text-align: left;
+        p {
+            padding-bottom: .15rem;
+            &:last-child{
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    /deep/.van-cell-group {
+        margin-top: .15rem;
+    }
+
+    .container {
+        position: relative;
+        margin: .3rem .52rem 0;
+        padding: .3rem;
+        border-radius: .04rem;
+        background: #ffffff;
+        .card-img {
+            margin: 0 auto;
+            width: 1rem;
+            height: 1.3rem;
+            img {
+                width: 1rem;
+                height: 1.3rem;
+            }
+        }
+
+        &::after {
+            position: absolute;
+            left: 2%;
+            top: 2%;
+            content: ' ';
+            width: 96%;
+            border-radius: .04rem;
+            border: 1px solid #2DC7AA;
+            height: 96%;
+        }
+    }
+}
+
+.btn-group {
+    padding: .18rem .65rem .3rem;
+    /deep/.van-button {
+        height: .5rem;
+        line-height: .48rem;
+        font-size: .18rem;
+    }
+}
+</style>

src/views/signup/SignUpCertificate.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="signupCertificate">
+        <m-header />
+        <m-step :number="5" style="margin-top: .12rem" />
+
+        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
+            <van-field name="radio" label="邮寄证书">
+                <template #input>
+                    <van-radio-group v-model="form.sex" direction="horizontal">
+                        <van-radio checked-color="#2DC7AA" :name="1">是</van-radio>
+                        <van-radio checked-color="#2DC7AA" :name="0">否</van-radio>
+                    </van-radio-group>
+                </template>
+            </van-field>
+            <div class="notice">
+                本校考点考生的考级证书在考试结束30个工作日后（不含寒暑假）统一通过邮寄方式发放，邮费到付。校外各考点考生考级证书在考试结束30个工作日后（不含寒暑假）由考点统一领取并发放。自发证之日起10日内若未收到证书，请及时与考级办联系。如因考生填写通讯地址/联系电话错误导致退件或遗失，责任由考生本人承担。
+            </div>
+            <van-field name="phone" label="手机号" placeholder="请输入手机号" />
+            <van-field name="phone" label="联系人" placeholder="请输入联系人姓名" />
+            <van-field name="phone" label="通讯地址" placeholder="请输入通讯地址" />
+            <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: 'signupCertificate',
+	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,
+            songStatus: 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)
+        },
+        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");
+
+.signupCertificate {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    /deep/.van-form {
+        margin-top: .15rem;
+    }
+    /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
+    }
+    .notice {
+        font-size: .13rem;
+        color: #999999;
+        padding: .1rem .16rem;
+        line-height: .18rem;
+    }
+}
+
+</style>

src/views/signup/SignUpLevel.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="signupLevel">
+        <m-header />
+        <m-step :number="3" style="margin-top: .12rem" />
+
+        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
+            <div class="title">基本信息</div>
+            <van-field readonly clickable name="nation" label="报考专业" placeholder="请选择" is-link />
+            <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
+            <van-field name="phone" label="报考曲目" placeholder="请输入报考曲目" />
+            <van-field clearable name="code" label="练习曲目名称及作者" placeholder="自定义曲目" >
+                <template #button>
+                    <span class="codeText" @click="songStatus = true">曲目上传</span>
+                </template>
+            </van-field>
+            <van-field name="phone" label="乐曲一名称及作者" placeholder="请输入曲目名称及作者" />
+            <van-field name="phone" label="乐曲二名称及作者" placeholder="请输入曲目名称及作者" />
+            <van-field readonly clickable name="nation" label="考点" placeholder="请选择" is-link />
+            <van-field readonly clickable name="nation" label="考试时间" placeholder="请选择" is-link />
+            <van-field readonly clickable name="nation" label="上一次考级" placeholder="发证机构" is-link />
+            <van-field readonly clearable name="code" label="证书" >
+                <template #button>
+                    <span class="codeText">上传证书</span>
+                </template>
+            </van-field>
+            <div class="title">音乐基础知识</div>
+            <van-field readonly clickable name="nation" label="音乐基础知识" placeholder="请选择" is-link />
+            <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
+            <div class="title">指导老师</div>
+            <van-field name="phone" label="老师姓名" placeholder="请输入老师姓名" />
+            <van-field name="phone" label="联系方式" placeholder="请输入联系方式" />
+            <!-- <m-button class="stepBtn" text="下一步" native-type="submit" /> -->
+            <div class="m-btn-group">
+                <van-button round color="#2DC7AA" style="background-color: transparent" plain>上一步</van-button>
+                <van-button round color="#2DC7AA">确认报名</van-button>
+            </div>
+        </van-form>
+
+        <van-popup v-model="birthdayStatus" position="bottom">
+            <van-datetime-picker
+                type="date"
+                @cancel="birthdayStatus = false"/>
+                <!-- @confirm="onConfirm" -->
+        </van-popup>
+
+        <van-popup class="van-popup-song" v-model="songStatus">
+            <div class="song-popup">
+                <div class="title">自定义曲目</div>
+                <div class="song-upload">
+                    <van-uploader multiple :max-count="1" :max-size="3 * 1024 * 1024" >
+                        <div class="upload-container">
+                            <van-icon name="plus" />
+                            <p>点击上传</p>
+                        </div>
+                    </van-uploader>
+                </div>
+                <p class="song-popup-tips">支持格式：pdf，png，jpg，bmp</p>
+
+                <div class="popup-group">
+                    <span @click="songStatus = false">取消</span>
+                    <span class="popup-sure" @click="songStatus = false">确定</span>
+                </div>
+            </div>
+        </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: 'signupLevel',
+	components: { MHeader, MStep },
+    data () {
+        return {
+            patternPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
+            patternPwd: /^[0-9A-Za-z]{6,16}$/,
+            birthdayStatus: false,
+            songStatus: 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)
+        },
+        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");
+
+.signupLevel {
+    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;
+    }
+}
+
+.van-popup-song {
+    width: 80%;
+    border-radius: .08rem;
+}
+.song-popup {
+    text-align: center;
+    .title {
+        font-size: 18px;
+        font-weight: 500;
+        color: #333333;
+        padding: .2rem 0 .24rem;
+    }
+    .song-upload {
+        margin: 0 .5rem;
+        padding: .18rem 0 .1rem;
+        border-radius: .05rem;
+        border: 1px dashed #777777;
+        font-size: .16rem;
+        color: #777;
+    }
+    .song-popup-tips {
+        font-size: .14rem;
+        color: #808080;
+        padding-top: .1rem;
+        padding-bottom: .25rem;
+    }
+    .popup-group {
+        width: 100%;
+        display: flex;
+        color: #2DC7AA;
+        background-color: #F0F0F0;
+        font-size: .18rem;
+        span {
+            padding: .12rem 0;
+            flex: 1;
+        }
+        .popup-sure {
+            color: #ffffff;
+            background-color: #2DC7AA;
+        }
+    }
+}
+
+
+.m-btn-group {
+    margin-top: .35rem;
+    margin-bottom: .25rem;
+    padding: 0 .2rem;
+    display: flex;
+    justify-content: space-between;
+    .van-button {
+        font-size: .18rem;
+        height: .5rem;
+        width: 48%;
+    }
+}
+</style>

src/views/signup/SignUpPayment.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="signupPayment">
+        <m-header />
+        <m-step :number="4" style="margin-top: .12rem" />
+
+        <van-cell-group>
+            <van-cell title="准考证号：" :border="false">
+                <template #default>支付完成后系统生成</template>
+            </van-cell>
+            <van-cell title="考生名字：" :border="false">
+                <template #default>白鸽</template>
+            </van-cell>
+            <van-cell title="报考专业：" :border="false">
+                <template #default>钢琴</template>
+            </van-cell>
+            <van-cell title="报考曲目：" :border="false">
+                <template #default>
+                    <p>钢琴音阶：B大调</p>
+                    <p>钢琴练习曲：音画练习曲 OP.33 No.2</p>
+                    <p>钢琴乐曲一：奏鸣曲第一乐章</p>
+                    <p>钢琴乐曲二：奏鸣曲第二乐章</p>
+                </template>
+            </van-cell>
+            <van-cell title="考试时间：" :border="false">
+                <template #default>2020-04-23</template>
+            </van-cell>
+            <van-cell title="考试地点：" :border="false">
+                <template #default>姜杰城航天桥分部</template>
+            </van-cell>
+            <van-cell title="报名费用：" :border="false">
+                <template #default>¥480.00</template>
+            </van-cell>
+        </van-cell-group>
+
+        <div class="notice">
+            请考生于考试两周前严格按照系统要求进行报名及缴费，确保所填信息准确无误，确认之后所有信息无法更改，如因填写内容有误而造成损失，责任由报考者本人承担；请考生在报名缴费前确认可在考试时间内参加考试，最终以准考证上的考试信息为准，请务必按照要求参加考试，否则视为弃考。考生如无法保证按照准考证信息参加考试请慎重报考，报名费用一旦支付后均不允许更改报考级别或退款。
+        </div>
+
+        <div class="pay-group">
+            <div class="pay-amount">
+                <span>￥</span>480.00
+            </div>
+            <div class="pay-btn">
+                <van-button color="#2DC7AA" round>确认并支付</van-button>
+            </div>
+        </div>
+    </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: 'signupPayment',
+	components: { MHeader, MStep },
+    data () {
+        return {
+            patternPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
+            patternPwd: /^[0-9A-Za-z]{6,16}$/,
+            birthdayStatus: false,
+            songStatus: 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)
+        },
+        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");
+
+.signupPayment {
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #F3F4F8;
+    .title {
+        font-size: .16rem;
+        color: #999999;
+        padding: .12rem .16rem;
+    }
+    /deep/.van-cell {
+        padding: .1rem .16rem;
+        font-size: .15rem;
+        color: #333333;
+    }
+    /deep/.van-cell__title {
+        color: #1A1A1A;
+        width: .9rem;
+        flex: none;
+    }
+    /deep/.van-cell__value {
+        text-align: left;
+        p {
+            padding-bottom: .15rem;
+            &:last-child{
+                padding-bottom: 0;
+            }
+        }
+    }
+
+    /deep/.van-cell-group {
+        padding: .1rem 0 .15rem;
+        margin-top: .15rem;
+        border-radius: .1rem;
+        overflow: hidden;
+    }
+
+    .notice {
+        font-size: .13rem;
+        color: #999999;
+        padding: .2rem .16rem;
+        line-height: .18rem;
+        margin-bottom: .55rem;
+    }
+
+    .pay-group {
+        position: fixed;
+        bottom: 0;
+        width: calc(100% - .32rem);
+        height: .55rem;
+        line-height: .53rem;
+        padding: 0 .16rem;
+        display: flex;
+        justify-content: space-between;
+        align-content: center;
+        background-color: #ffffff;
+    }
+    .pay-amount {
+        color: #FF1818;
+        font-size: .26rem;
+        span {
+            font-size: .16rem;
+        }
+    }
+    /deep/.van-button {
+        font-size: .16rem;
+        padding: 0 .2rem;
+    }
+}
+
+.van-popup-song {
+    width: 80%;
+    border-radius: .08rem;
+}
+.song-popup {
+    text-align: center;
+    .title {
+        font-size: 18px;
+        font-weight: 500;
+        color: #333333;
+        padding: .2rem 0 .24rem;
+    }
+    .song-upload {
+        margin: 0 .5rem;
+        padding: .18rem 0 .1rem;
+        border-radius: .05rem;
+        border: 1px dashed #777777;
+        font-size: .16rem;
+        color: #777;
+    }
+    .song-popup-tips {
+        font-size: .14rem;
+        color: #808080;
+        padding-top: .1rem;
+        padding-bottom: .25rem;
+    }
+    .popup-group {
+        width: 100%;
+        display: flex;
+        color: #2DC7AA;
+        background-color: #F0F0F0;
+        font-size: .18rem;
+        span {
+            padding: .12rem 0;
+            flex: 1;
+        }
+        .popup-sure {
+            color: #ffffff;
+            background-color: #2DC7AA;
+        }
+    }
+}
+</style>