flkex

src/pages/signup.vue

@@ -15,11 +15,25 @@
       </div>
       <div class="formItem">
         <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
-        <input class="duiqi" type="text" :class="{placeHodler: userName}" v-model="formData.userName" @focus="nameFocus" @blur="nameBlur"/>
+        <input
+          class="duiqi"
+          type="text"
+          :class="{placeHodler: userName}"
+          v-model="formData.userName"
+          @focus="nameFocus"
+          @blur="nameBlur"
+        />
       </div>
       <div class="formItem">
         <label>手&nbsp;机&nbsp;号</label>
-        <input class="duiqi" type="text" :class="{placeHodler: phone}" v-model="formData.phone" @focus="phoneFocus" @blur="phoneBlur"/>
+        <input
+          class="duiqi"
+          type="text"
+          :class="{placeHodler: phone}"
+          v-model="formData.phone"
+          @focus="phoneFocus"
+          @blur="phoneBlur"
+        />
       </div>
       <div class="formItem" @click="showPicker = true">
         <label>意向产品</label>
@@ -31,10 +45,7 @@
       </div>
       <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
     </div>
-    <van-popup
-      v-model="showPicker"
-      position="bottom"
-    >
+    <van-popup v-model="showPicker" position="bottom">
       <van-picker
         title="意向产品"
         show-toolbar
@@ -43,11 +54,10 @@
         @cancel="onCancel"
       />
     </van-popup>
-    <area-picker :show.sync="showArea" @change="handleArea" @cancel='showArea=false'></area-picker>
+    <area-picker :show.sync="showArea" @change="handleArea" @cancel="showArea=false"></area-picker>
   </div>
 </template>
 <script>
-
 import { setRegister, getCity } from '../utils/api'
 export default {
   components: {
@@ -67,12 +77,18 @@ export default {
         intendedProduct: undefined,
         address: undefined
       },
-      productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
+      productList: [
+        'COLMO子母太空舱',
+        'COLMO星图干洗护理套装',
+        'COLMO星辰干洗护理套装',
+        'COLMO星际干洗护理套装',
+        'COLMO TURING套系智慧干洗护理空间站'
+      ],
       pickerVisibleProduct: false,
       intendedProduct: undefined,
       address: undefined,
-      phone:true,
-      userName:true
+      phone: true,
+      userName: true
     }
   },
 
@@ -111,10 +127,16 @@ export default {
         this.formData.address[2].name
     },
     verification() {
-      if (!this.formData.userName || this.formData.userName==='请输入您的姓名') {
+      if (
+        !this.formData.userName ||
+        this.formData.userName === '请输入您的姓名'
+      ) {
         alert('请输入您的姓名')
         return false
-      } else if (!this.formData.phone || this.formData.phone==='请输入手机号') {
+      } else if (
+        !this.formData.phone ||
+        this.formData.phone === '请输入手机号'
+      ) {
         alert('请输入您的手机号')
         return false
       } else if (!this.formData.intendedProduct) {
@@ -169,19 +191,20 @@ export default {
           personType: role,
           phone: phone,
           interestTo: intendedProduct
-        }).then((e) => {
-          this.$router.replace('/resultPage')
-          console.log(e)
-        }).catch(e => {
-          alert(e.message)
         })
+          .then((e) => {
+            this.$router.replace('/resultPage')
+            console.log(e)
+          })
+          .catch((e) => {
+            alert(e.message)
+          })
       }
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-
 .signup-box {
   overflow: hidden;
   height: 100%;
@@ -194,11 +217,10 @@ export default {
 .form {
   position: relative;
   color: #a6b1ab;
-  margin-top: 80px;
+  margin-top: 110px;
   padding: 0 8vw;
   box-sizing: border-box;
 
-
   .formItem {
     width: 100%;
     font-size: 16px;
@@ -216,7 +238,7 @@ export default {
       display: inline-block;
       width: 4.5em;
     }
-    
+
     .duiqi {
       display: inline-block;
       background-color: transparent;
@@ -253,7 +275,7 @@ export default {
 
   .submit {
     display: block;
-    margin-top: 2em;
+    margin-top: 2.7em;
     margin-left: auto;
     margin-right: auto;
   }