开发ing

src/views/login/index.vue

@@ -26,8 +26,12 @@ export default Vue.extend({
       timer: null,
       count: 0,
       pre_register_key: '',
+
       third_login: '',
+      third_token: '',
+      need_bind: false,
       is_back: false,
+
       env: process.env.NODE_ENV
     }
   },
@@ -38,6 +42,15 @@ export default Vue.extend({
   methods: {
     parseQuery() {
       const url = new URL(window.location.href.replace('#', '?'))
+      function showError() {
+        this.$notify({
+          title: '登录失败',
+          message: '登录失败，请稍后重试。',
+          type: 'error'
+        })
+        this.third_login = ''
+        this.is_back = false
+      }
       if (url.searchParams.get('code')) {
         this.is_back = true
         this.third_login = 'linkin'
@@ -45,15 +58,16 @@ export default Vue.extend({
           url.searchParams.get('state'),
           url.searchParams.get('code')
         ).then(res => {
-          this.tokenLogin(res.data.api_token)
+          if (res.data.api_token) {
+            this.tokenLogin(res.data.api_token)
+          } else if (res.data.third_token) {
+            this.third_token = res.data.third_token
+            this.need_bind = true
+          } else {
+            showError()
+          }
         }).catch(err => {
-          this.$notify({
-            title: '登录失败',
-            message: '登录失败，请稍后重试。',
-            type: 'error'
-          })
-          this.third_login = ''
-          this.is_back = false
+          showError()
         })
       }
       if (url.searchParams.get('access_token')) {
@@ -63,21 +77,29 @@ export default Vue.extend({
           url.searchParams.get('state'),
           url.searchParams.get('access_token')
         ).then(res => {
-          this.tokenLogin(res.data.api_token)
+          if (res.data.api_token) {
+            this.tokenLogin(res.data.api_token)
+          } else if (res.data.third_token) {
+            this.third_token = res.data.third_token
+            this.need_bind = true
+          } else {
+            showError()
+          }
         }).catch(err => {
-          this.$notify({
-            title: '登录失败',
-            message: '登录失败，请稍后重试。',
-            type: 'error'
-          })
-          this.third_login = ''
-          this.is_back = false
+          showError()
         })
       }
     },
     openThirdLogin(type) {
+      this.is_back = false
       this.third_login = type
     },
+    closeThirdLogin() {
+      this.is_back = false
+      this.need_bind = false
+      this.third_login = ''
+      this.third_token = ''
+    },
     sentSMSCode() {
       if (this.loading || this.timer) {
         return
@@ -303,12 +325,14 @@ export default Vue.extend({
         <div :class="['third-window',third_login?'active':'']">
           <div class="third-head">
             <span class="third-title">第三方登录</span>
-            <span class="el-icon-close" @click="openThirdLogin('')" />
+            <span class="el-icon-close" @click="closeThirdLogin()" />
           </div>
           <div class="third-body">
             <third-login
               v-if="third_login"
               :is_back="is_back"
+              :need_bind.sync="need_bind"
+              :third_token.sync="third_token"
               :login_type="third_login"
               @tokenLogin="tokenLogin"
             />

src/views/login/third-login.vue

@@ -1,7 +1,8 @@
 <script>
 import Vue from 'vue'
 import VueQr from 'vue-qr'
-import { getWechatLogin, getWechatStatus, getGoogleLogin, getLinkedinLogin, bindPhone} from '@/api/user'
+import countryCode from '@/lib/countryCode.json'
+import { getWechatLogin, getWechatStatus, getGoogleLogin, getLinkedinLogin, bindPhone, sendSmsCode } from '@/api/user'
 export default Vue.extend({
   name: 'ThirdLogin',
   components: {
@@ -12,13 +13,29 @@ export default Vue.extend({
       type: String,
       default: ''
     },
+    third_token: {
+      type: String,
+      default: ''
+    },
     is_back: {
       type: Boolean,
       default: false
+    },
+    need_bind: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
+      countryCode,
+      country_code: '86',
+      phone: '',
+      code: '',
+      code_timer: null,
+      count: 0,
+      loading: false,
+
       timer: null,
       wechat_info: ''
     }
@@ -27,6 +44,7 @@ export default Vue.extend({
     this.init()
   },
   beforeDestroy() {
+    clearInterval(this.code_timer)
     clearInterval(this.timer)
   },
   methods: {
@@ -43,6 +61,66 @@ export default Vue.extend({
         }
       }
     },
+    bind() {
+      if (this.loading) {
+        return
+      }
+      bindPhone(this.phone, this.code, this.country_code, 1, this.third_token).then(res => {
+        if (res.data.api_token) {
+          this.$emit('tokenLogin', res.data.api_token)
+          this.$notify({
+            title: '提示',
+            message: '绑定成功',
+            type: 'success'
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: '令牌获取失败',
+            type: 'warning'
+          })
+        }
+      }).catch(err => {
+        this.$notify({
+          title: '提示',
+          message: '绑定失败',
+          type: 'warning'
+        })
+      })
+    },
+    sentSMSCode() {
+      if (this.loading || this.code_timer) {
+        return
+      }
+      if (!this.phone) {
+        this.$notify({
+          title: '提示',
+          message: '请填写手机号码',
+          type: 'warning'
+        })
+        return
+      }
+      this.loading = true
+      sendSmsCode(this.phone, this.country_code).then(res => {
+        this.$notify({
+          title: '发送成功',
+          message: '短信验证码已发送，请注意查收',
+          type: 'success'
+        })
+        this.count = 60
+        this.code_timer = setInterval(() => {
+          if (this.count > 0) {
+            this.count--
+          } else {
+            clearInterval(this.code_timer)
+            this.code_timer = null
+          }
+        }, 1000)
+        this.loading = false
+      }).catch(err => {
+        this.loading = false
+      })
+    },
     initGoogleLogin() {
       getGoogleLogin().then(res => {
         const google_info = res.data
@@ -68,7 +146,11 @@ export default Vue.extend({
             if (status.data.api_token) {
               clearInterval(this.timer)
               this.$emit('tokenLogin', status.data.api_token)
-            }
+            } else if (status.data.third_token) {
+              clearInterval(this.timer)
+              this.$emit('update:need_bind', true)
+              this.$emit('update:third_token', status.data.third_token)
+            } else {}
           })
         }, 3000)
       })
@@ -79,30 +161,60 @@ export default Vue.extend({
 
 <template>
   <div class="root">
-    <div v-if="login_type === 'wechat'" class="wechat-login">
+    <div v-if="need_bind" class="bind-box wechat-login">
       <div class="title">
-        <img class="icon" src="/static/image/icon/wechat.png">
-        <span class="text">微信扫码登录</span>
+        <span class="text">绑定至会邦账号</span>
       </div>
-      <div class="qr-code">
-        <vue-qr v-show="wechat_info.url" class="vue-qr" :margin="0" :text="wechat_info.url" />
+      <div class="two-logo">
+        <div class="mini-logo">
+          <img v-if="login_type === 'wechat'" src="/static/image/icon/wechat.png">
+          <img v-if="login_type === 'google'" src="/static/image/icon/google.png">
+          <img v-if="login_type === 'linkin'" src="/static/image/icon/linkin.png">
+        </div>
+        <div class="el-icon-link icon" />
+        <div class="mini-logo maychexpo">
+          <img src="/static/image/icon/matchexpo.png">
+        </div>
       </div>
-      <div class="tips">打开微信扫一扫，关注公众号自动登录</div>
-    </div>
-    <div v-if="login_type === 'google'" class="wechat-login">
-      <div class="title">
-        <span class="text">Google登录</span>
+      <div class="bind-form">
+        <el-select v-model="country_code" placeholder="请选择国家">
+          <el-option v-for="(item,index) in countryCode" :key="item.country_code+index" :label="'+'+item.phone_code+'('+item.chinese_name+')'" :value="item.phone_code" />
+        </el-select>
+        <el-input v-model="phone" prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" class="input" />
+        <el-input v-model="code" prefix-icon="el-icon-key" placeholder="请输入验证码" class="input">
+          <el-button slot="append" :disabled="!!code_timer" :loading="loading" @click="sentSMSCode()">{{ code_timer?count+'s':'发送验证码' }}</el-button>
+        </el-input>
+        <el-button :loading="loading" type="primary" class="button" @click="bind()">
+          <span>绑 定</span>
+        </el-button>
       </div>
-      <img class="icon" src="/static/image/icon/google.png">
-      <div class="tips">正在准备登录信息...</div>
     </div>
-    <div v-if="login_type === 'linkin'" class="wechat-login">
-      <div class="title">
-        <span class="text">LinkedIn登录</span>
+    <template v-else>
+      <div v-if="login_type === 'wechat'" class="wechat-login">
+        <div class="title">
+          <img class="icon" src="/static/image/icon/wechat.png">
+          <span class="text">微信扫码登录</span>
+        </div>
+        <div class="qr-code">
+          <vue-qr v-show="wechat_info.url" class="vue-qr" :margin="0" :text="wechat_info.url" />
+        </div>
+        <div class="tips">打开微信扫一扫，关注公众号自动登录</div>
       </div>
-      <img class="icon" src="/static/image/icon/linkin.png">
-      <div class="tips">正在准备登录信息...</div>
-    </div>
+      <div v-if="login_type === 'google'" class="wechat-login">
+        <div class="title">
+          <span class="text">Google登录</span>
+        </div>
+        <img class="icon" src="/static/image/icon/google.png">
+        <div class="tips">正在准备登录信息...</div>
+      </div>
+      <div v-if="login_type === 'linkin'" class="wechat-login">
+        <div class="title">
+          <span class="text">LinkedIn登录</span>
+        </div>
+        <img class="icon" src="/static/image/icon/linkin.png">
+        <div class="tips">正在准备登录信息...</div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -119,6 +231,44 @@ export default Vue.extend({
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    .bind-form{
+      gap: 8px;
+      flex-direction: column;
+      display: flex;
+      padding: 36px;
+      width: 100%;
+      .button{
+        margin-top: 36px;
+      }
+    }
+    .two-logo{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      .icon{
+        rotate: 45deg;
+        color: grey;
+        font-size: 36px;
+      }
+      .mini-logo{
+        border-radius: 20%;
+        background-color: #EEEEEE;
+        width: 80px;
+        height: 80px;
+        aspect-ratio: 1;
+        padding: 16px;
+        &.maychexpo{
+          padding: 12px;
+        }
+        img{
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
     .icon{
       width: 30%;
       aspect-ratio: 1;
@@ -152,4 +302,7 @@ export default Vue.extend({
       color: grey;
     }
   }
+  .bind-box{
+
+  }
 </style>