feat:(login): 验证码登录/注册

src/api/login.js

@@ -56,8 +56,11 @@ export function getSmsCodeByPhone(phoneNumber) {
  */
 export function loginByPhoneAndSmsCode(data) {
   return request({
-    url: '/uc/login/captcha',
+    url: '/uc/oauth/token',
     method: 'post',
     data: data,
+    header: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
   });
 }

src/pages/login/phoneLogin.vue

@@ -16,14 +16,22 @@
         <u-form-item prop="captcha" borderBottom>
           <u-input v-model="loginForm.captcha" maxlength="6" border="none" placeholder="请输入短信验证码">
             <template slot="suffix">
-              <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
-              <u--text text="获取验证码" @tap="getCode" type="primary"></u--text>
+              <u-code
+                ref="uCode"
+                :seconds="seconds"
+                changeText="X秒后重新获取"
+                end-text="重新获取"
+                start-text="获取验证码"
+                @change="codeChange"
+                :keep-running="true"
+              ></u-code>
+              <u--text :text="tips" @tap="getCode" type="primary"></u--text>
             </template>
           </u-input>
         </u-form-item>
         <view class="phone-question">手机号无法使用</view>
         <u-form-item>
-          <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle">登录</u-button>
+          <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle" @tap="login">登录</u-button>
         </u-form-item>
       </u--form>
       <view class="user-agreement">
@@ -42,6 +50,8 @@
 </template>
 
 <script>
+import { getSmsCodeByPhone, loginByPhoneAndSmsCode } from '@/api/login';
+
 export default {
   data() {
     return {
@@ -76,6 +86,8 @@ export default {
           },
         ],
       },
+      seconds: 120,
+      tips: '',
       isChecked: false,
       loading: false,
     };
@@ -92,9 +104,43 @@ export default {
     getCode() {
       if (!this.loginForm.mobile) return uni.$u.toast('请输入您的手机号!');
       if (!uni.$u.test.mobile(this.loginForm.mobile)) return uni.$u.toast('手机号码格式不正确!');
-      // TODO： 获取手机号验证码
+      // TODO： 处理验证码倒计时
+      if (this.$refs.uCode.canGetCode) {
+        getSmsCodeByPhone(this.loginForm.mobile)
+          .then(res => {
+            if (res.code === 200) {
+              uni.$u.toast('验证码已发送');
+              this.loginForm.token = res.data.token;
+              this.$refs.uCode.start();
+            }
+          })
+          .catch(err => {
+            uni.$u.toast('无法发送验证码');
+            this.$refs.uCode.start();
+          });
+      }
+    },
+    async login() {
+      if (!this.isChecked) return uni.$u.toast('请同意并勾选协议');
+      this.loading = true;
+      loginByPhoneAndSmsCode(this.loginForm)
+        .then(res => {
+          this.loading = false;
+          if (res.access_token) {
+            uni.$u.toast('登录成功');
+            this.$store.commit('SET_ACCESS_TOKEN', res.access_token);
+            this.$store.commit('SET_REFRESH_TOKEN', res.refresh_token);
+            this.$Router.pushTab('/pages/home/index');
+          }
+        })
+        .catch(err => {
+          this.loading = false;
+          uni.$u.toast('登录失败-' + err.data.error_description);
+        });
+    },
+    codeChange(text) {
+      this.tips = text;
     },
-    codeChange() {},
     checkboxChange(v) {
       this.isChecked = v;
     },