手机注册接口通了

components/input/area.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="input-area">
-    <el-select v-model="select" slot="prepend" placeholder="请选择">
-      <el-option label="+86" value="0"></el-option>
-      <el-option label="+0" value="1"></el-option>
-      <el-option label="+2" value="2"></el-option>
+    <el-select v-model="code" @change="change" slot="prepend" placeholder="请选择">
+      <el-option label="+86" value="+86"></el-option>
+      <el-option label="+0" value="+0"></el-option>
+      <el-option label="+2" value="+2"></el-option>
     </el-select>
-    <el-input placeholder="请输入手机号"></el-input>
+    <el-input v-model="mobile" @change="change" placeholder="请输入手机号"></el-input>
   </div>
 </template>
 
@@ -13,8 +13,19 @@
 export default {
   data() {
     return {
-      select: '0',
+      code: '+86',
+      mobile: '',
     }
+  },
+  computed: {
+    fullMobile() {
+      return `${this.code}-${this.mobile}`
+    }
+  },
+  methods: {
+    change() {
+      this.$emit('change', this.fullMobile)
+    },
   }
 }
 </script>

components/input/ver.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="input-ver">
-    <el-input placeholder="请输入验证码"></el-input>
+    <el-input v-model="code" @change="$emit('change', code)" placeholder="请输入验证码"></el-input>
     <el-button type="text" @click="run">{{text}}</el-button>
   </div>
 </template>
@@ -14,6 +14,8 @@ let interval
 export default {
   data() {
     return {
+      // 验证码
+      code: '',
       time: time + 1,
     }
   },

components/input/ver_img.vue

@@ -1,7 +1,7 @@
 
 <template>
   <div class="input-ver">
-    <el-input placeholder="请输入验证码"></el-input>
+    <el-input v-model="code" @change="$emit('change', code)" placeholder="请输入验证码"></el-input>
     <el-button type="text" @click="run">{{text}}</el-button>
   </div>
 </template>
@@ -15,6 +15,7 @@ let interval
 export default {
   data() {
     return {
+      code: '',
       time: time + 1,
     }
   },

pages/user/register.vue

@@ -35,8 +35,8 @@
       label-position="top"
       :hide-required-asterisk="false"
     >
-      <el-form-item label="邮箱" prop="mobile">
-        <el-input v-model="ruleFormEmail.mobile"></el-input>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="ruleFormEmail.email"></el-input>
       </el-form-item>
       <el-form-item label="验证码" prop="ver">
         <input-ver-img @change="chengeVerEmail"></input-ver-img>
@@ -52,7 +52,7 @@
       点击注册表示你已阅读并同意
       <a href="#" @click="agreeShow = true">《程序员客栈服务协议》</a>
     </p>
-    <el-button type="primary">注册</el-button>
+    <el-button type="primary" @click="doRegist">注册</el-button>
     <div class="checks">
       <span @click="usePhone = !usePhone">邮箱注册</span>
       <span>直接登录</span>
@@ -92,6 +92,7 @@ export default {
       rulesPhone: {
         mobile: [
           { required: true, message: '请输入手机号', trigger: 'blur' },
+           { min: 14, max: 15, message: '请输入11位手机号', trigger: 'blur' }
         ],
         ver: [
           { required: true, message: '请输入验证码', trigger: 'blur' },
@@ -104,13 +105,13 @@ export default {
         ],
       },
       ruleFormEmail: {
-        mobile: '',
+        email: '',
         ver: '',
         nickname: '',
         pwd: '',
       },
       rulesEmail: {
-        mobile: [
+        email: [
           { required: true, message: '请输入手机号', trigger: 'blur' },
         ],
         ver: [
@@ -127,13 +128,29 @@ export default {
   },
   methods: {
     chengeVerMobile(val) {
-
+      this.ruleFormPhone.ver = val
     },
     chengeVerEmail(val) {
-
+      this.ruleFormEmail.ver = val
     },
     chengeMobile(val) {
-
+      this.ruleFormPhone.mobile = val
+    },
+    /**
+     * 点击注册
+     */
+    async doRegist() {
+      let mobile = this.ruleFormPhone.mobile
+      let res = await this.$post('/api/passport/register', {
+        auth_code: this.ruleFormPhone.ver,
+        login_name: mobile,
+        mobile,
+        nickname: this.ruleFormPhone.nickname,
+        password: this.ruleFormPhone.pwd,
+      })
+      if(res) {
+        console.log(res)
+      }
     },
   }
 }
@@ -179,5 +196,6 @@ export default {
 .logos img {
   width: 34px;
   height: 34px;
+  cursor: pointer;
 }
 </style>