1.引入验证码登入, 帐号不存在时自动创建帐号

2.更新修改帐号头像接口

src/api/account.js

@@ -12,13 +12,13 @@ const accountApi = {
   loginApi: '/api/auth/signin',
   logoutApi: '/api/auth/signout',
   resetPasswordApi: '/api/account/user/reset',
-  updateAvatarApi: '/api/account/profile/avatar',
   accountMyVipApi: '/api/user/vip/my',
   accountVipPlanApi: '/api/user/vip/plan',
   accountVipApi: '/api/user/vip/buy',
   oauthAppApi: '/api/account/oauth/create',
   loginRecordApi: '/api/account/record/list',
-  signOutApi: '/api/account/deactivate'
+  signOutApi: '/api/account/deactivate',
+  updateAvatarApi: '/api/file/avatar/update'
 }
 
 export function isUsernameExist(username) {

src/assets/js/mixin.js

@@ -96,7 +96,7 @@ export const userMixin = {
 
       this.verifyCodeForm.channel = 1
       this.verifyCodeForm.receiver = this.userRegistry.principal
-      this.getVerifyCode(this.verifyCodeForm)
+      this.getVerifyCodeWrapper(this.verifyCodeForm)
     },
     loginVerifyCode() {
       if (this.userLogin.principal === null || this.userLogin.principal === '') {
@@ -105,8 +105,8 @@ export const userMixin = {
       }
 
       this.verifyCodeForm.channel = 2
-      this.verifyCodeForm.receiver = this.userRegistry.principal
-      getVerifyCode(this.verifyCodeForm)
+      this.verifyCodeForm.receiver = this.userLogin.principal
+      this.getVerifyCodeWrapper(this.verifyCodeForm)
     },
     forgotVerifyCode() {
       if (this.userForgot.principal === null || this.userForgot.principal === '') {
@@ -116,9 +116,9 @@ export const userMixin = {
 
       this.verifyCodeForm.channel = 3
       this.verifyCodeForm.receiver = this.userRegistry.principal
-      this.getVerifyCode(this.verifyCodeForm)
+      this.getVerifyCodeWrapper(this.verifyCodeForm)
     },
-    getVerifyCode(verifyCodeForm) {
+    getVerifyCodeWrapper(verifyCodeForm) {
       this.isBtn = true
       let time = 60
       const timeout = setInterval(() => {
@@ -131,7 +131,6 @@ export const userMixin = {
           clearTimeout(timeout)
         }
       }, 1000)
-
       getVerifyCode(verifyCodeForm).then(resp => {
         if (resp.code === 0) {
           this.$message.success('验证码已发送, 请注意查收')
@@ -154,6 +153,10 @@ export const userMixin = {
         this.$message.warning('电话号码格式有误')
       }
     },
+    loginByVerifyCode() {
+      this.userLogin.loginType = 1
+      this.loginBtn()
+    },
     loginBtn() {
       if (this.userLogin.principal === '' || this.userLogin.principal === null) {
         this.$message.warning('手机号不能为空')

src/views/Login.vue

@@ -9,48 +9,85 @@
         <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
             <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span>用户登录</span>
-              </div>
-              <div class="text item">
-                <el-form ref="form" :model="userLogin" label-width="80px">
-                  <el-form-item label="帐号">
-                    <el-input
-                      v-model="userLogin.principal"
-                      placeholder="请输入手机号或邮箱"
-                      style="padding-right: 1px"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item label="密码">
-                    <el-input
-                      v-model="userLogin.credential"
-                      type="password"
-                      placeholder="请输入密码"
-                      style="padding-right: 1px"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item label="图形验证码" label-width="90px">
-                    <el-image :src="captchaCode" @click="getCaptcha" />
-                    <el-input
-                      v-model="userLogin.captchaCode"
-                      placeholder="请输入图形验证码"
-                      style="width: 50%; padding-right: 1px"
-                      clearable
-                    />
-                  </el-form-item>
-                  <el-form-item>
-                    <el-button
-                      type="primary"
-                      :loading="isLoading"
-                      @click.native="loginBtn"
-                    >登 录</el-button>
-                    <el-button type="plain" @click="register">注册帐号</el-button>
-                    <el-button type="plain" @click="forgot">忘记密码</el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
+              <el-tabs v-model="activeName" @tab-click="tabClick">
+                <el-tab-pane name="login1">
+                  <span slot="label">密码登录</span>
+                  <div class="text item">
+                    <el-form ref="form" :model="userLogin" label-width="80px">
+                      <el-form-item label="帐号">
+                        <el-input
+                          v-model="userLogin.principal"
+                          placeholder="请输入手机号或邮箱"
+                          style="padding-right: 1px"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item label="密码">
+                        <el-input
+                          v-model="userLogin.credential"
+                          type="password"
+                          placeholder="请输入密码"
+                          style="padding-right: 1px"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item label="图形验证码" label-width="90px">
+                        <el-image :src="captchaCode" @click="getCaptcha" />
+                        <el-input
+                          v-model="userLogin.captchaCode"
+                          placeholder="请输入图形验证码"
+                          style="width: 50%; padding-right: 1px"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item>
+                        <el-button type="primary" size="mini" :loading="isLoading" @click.native="loginBtn">登 录</el-button>
+                        <el-button type="plain" size="mini" @click="register">注册帐号</el-button>
+                        <el-button type="plain" size="mini" @click="forgot">忘记密码</el-button>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane name="login2">
+                  <span slot="label">验证码登录</span>
+                  <div class="text item">
+                    <el-form ref="form" :model="userLogin" label-width="80px">
+                      <el-input v-model="userLogin.loginType" type="hidden" value="1" />
+                      <el-form-item label="帐号">
+                        <el-input
+                          v-model="userLogin.principal"
+                          placeholder="请输入手机号或邮箱"
+                          style="padding-right: 1px"
+                          clearable
+                        />
+                        <el-button :disabled="isBtn" @click="loginVerifyCode">{{ code }}</el-button>
+                      </el-form-item>
+                      <el-form-item label="验证码">
+                        <el-input
+                          v-model="userLogin.credential"
+                          placeholder="请输入验证码"
+                          style="padding-right: 1px"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item label="图形验证码" label-width="90px">
+                        <el-image :src="captchaCode" @click="getCaptcha" />
+                        <el-input
+                          v-model="userLogin.captchaCode"
+                          placeholder="请输入图形验证码"
+                          style="width: 50%; padding-right: 1px"
+                          clearable
+                        />
+                      </el-form-item>
+                      <el-form-item>
+                        <el-button type="primary" size="mini" :loading="isLoading" @click.native="loginByVerifyCode">登 录</el-button>
+                        <el-button type="plain" size="mini" @click="register">注册帐号</el-button>
+                        <el-button type="plain" size="mini" @click="forgot">忘记密码</el-button>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
             </el-card>
           </el-row>
         </el-col>
@@ -69,6 +106,11 @@ export default {
     LoginBar
   },
   mixins: [userMixin],
+  data() {
+    return {
+      activeName: 'login1'
+    }
+  },
   watch: {
     $route() {
       this.$router.go()
@@ -78,11 +120,10 @@ export default {
     document.title = '用户登录'
     this.fetchPubkey(1)
   },
-  data() {
-    return {
-    }
-  },
   methods: {
+    tabClick(tab) {
+      this.activeName = tab.name
+    },
     register() {
       this.$router.push('/register')
     },