1

package-lock.json

@@ -11231,7 +11231,7 @@
     },
     "vant": {
       "version": "2.8.4",
-      "resolved": "https://registry.npm.taobao.org/vant/download/vant-2.8.4.tgz?cache=0&sync_timestamp=1590661523911&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvant%2Fdownload%2Fvant-2.8.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/vant/download/vant-2.8.4.tgz?cache=0&sync_timestamp=1590634174359&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvant%2Fdownload%2Fvant-2.8.4.tgz",
       "integrity": "sha1-nkUT6PdQZWJnX23n1INn6g6Hkr0=",
       "requires": {
         "@babel/runtime": "7.x",

package.json

@@ -16,7 +16,7 @@
     "lodash": "^4.17.15",
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
-    "vant": "^2.4.4",
+    "vant": "^2.8.4",
     "vconsole": "^3.3.4",
     "vue": "^2.6.10",
     "vue-awesome-swiper": "^3.1.3",

src/main.js

@@ -5,7 +5,7 @@ import router from './router/index'
 import "@babel/polyfill"
 import Es6Promise from 'es6-promise'
 Es6Promise.polyfill()
-import { Button, Icon, Tag, Popup, Picker, 
+import { Button, Icon, Tag, Popup, Picker, Form,
     Search, PullRefresh, Toast, List, Collapse, CollapseItem,
     Tab, Tabs, Row, Col, Cell, CellGroup, NavBar,
     Field, DatetimePicker, Image, Loading, Overlay,
@@ -13,7 +13,7 @@ import { Button, Icon, Tag, Popup, Picker,
     CountDown, Panel, Dialog, Divider, Rate } 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(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)

src/views/level/LevelMusic.vue

@@ -29,11 +29,11 @@ export default {
     },
     mounted() {
         // 插入token
-        let params = this.$route.query
-        if(params.Authorization) {
-            localStorage.setItem('Authorization', decodeURI(params.Authorization))
-            localStorage.setItem('userInfo', decodeURI(params.Authorization))
-        }
+        // let params = this.$route.query
+        // if(params.Authorization) {
+        //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
+        //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
+        // }
     },
     methods: {
     }

src/views/level/SignUp.vue

@@ -7,16 +7,17 @@
 				<p>报名时间:2020.6.5-6.20</p>
 			</div>
 
-			<van-button type="primary" round block>我要报名</van-button>
+			<!-- <van-button type="primary" round block>我要报名</van-button> -->
+			<m-button class="signBtn" text="我要报名" />
 		</div>
     </div>
 </template>
 <script>
 import MHeader from '@/components/MHeader'
-import _ from 'lodash' // 功能库
+import MButton from '@/components/MButton'
 export default {
     name: 'SignUp',
-	components: { MHeader },
+	components: { MHeader, MButton },
     data () {
         return {
         }
@@ -53,17 +54,10 @@ export default {
 		}
 	}
 
-	.van-button--primary {
+	.signBtn {
 		position: absolute;
 		bottom: .5rem;
-		background-color: #2DC7AA;
-		border: 1px solid #2DC7AA;
-		color: #FFFFFF;
-		font-size: .18rem;
-		height: .5rem;
-		line-height: .52rem;
-		width: 90%;
-		margin-left: 5%;
+		width: 100%;
 	}
 }
 </style>

src/views/level/SignUpAccount.vue

@@ -3,7 +3,22 @@
         <m-header />
         <m-step style="margin-top: .12rem" />
 
-        <m-button text="下一步" />
+        <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: patternPhone, message: '6-16位数字或字母' }]" />
+
+            <van-field v-model="form.rePassword" name="rePassword" label="再次输入密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPhone, message: '6-16位数字或字母' }]" />
+
+            <m-button class="stepBtn" text="下一步" native-type="submit" />
+        </van-form>
     </div>
 </template>
 <script>
@@ -16,6 +31,13 @@ export default {
 	components: { MHeader, MStep, MButton },
     data () {
         return {
+            patternPhone: /1(3|4|5|6|7|8|9)\d{9}/,
+            form: {
+                phone: null,
+                code: null,
+                password: null,
+                rePassword: null
+            },
         }
     },
     mounted() {
@@ -27,6 +49,14 @@ export default {
         // }
     },
     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>
@@ -38,18 +68,30 @@ export default {
     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-button--primary {
-    position: absolute;
-    bottom: .5rem;
-    background-color: #2DC7AA;
-    border: 1px solid #2DC7AA;
-    color: #FFFFFF;
-    font-size: .18rem;
-    height: .5rem;
-    line-height: .52rem;
-    width: 90%;
-    margin-left: 5%;
+.stepBtn {
+    margin-top: .35rem;
 }
 </style>