微信登录联调完成

src/api/index.js

@@ -34,6 +34,7 @@ export default {
   checkUserNameOrWorkNumber: `users/users/batchProcessing/checkUserNameOrWorkNumber`,
   updateUserNameOrWorkNumber: `users/users/batchProcessing/updateUserNameOrWorkNumber`,
   loginByUnionid: `users/loginByUnionid`,
+  weChatToken: `users/users/user/weChatToken`,
 
   // 阿里云文件/视频管理
   getPlayAuth: `nakadai/nakadai/oss/getPlayAuth`, // 获取播放凭证

src/pages/account/redirect/index.vue

@@ -6,7 +6,7 @@
       <p class="tips">已为你展示该微信关联的账号</p>
       <ul class="users">
         <li :class="{ isEnable: !user.isEnable }" v-for="(user, i) in users" :key="i" @click="chooseUser(user)">
-          <span>{{ user.typeName }}，{{ user.schoolName }}，{{ user.userName }}，{{ user.workNumber }}{{
+          <span>{{ user.schoolName }}，{{ user.userName }}{{ user.workNumber && '，' + user.workNumber }}{{
             user.isEnable
               ? ''
               : '（已禁用）' }}</span>
@@ -43,11 +43,33 @@
         <el-link :underline="false" type="primary" @click="toLogin">返回账号登录</el-link>
       </div>
     </el-dialog>
+
+    <!-- 实名认证 -->
+    <el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="30%">
+      <div style='padding: 0 13px 20px 13px;'>
+        依据国家政策法规，需绑定手机号进行网络实名才可登录使用本平台
+      </div>
+      <el-form label-width="60px">
+        <el-form-item label="手机号">
+          <el-input style="width: 100%;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <div class="ver-code">
+            <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
+            <el-button style="top: 1px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{ phoneBtnText }}
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="phoneVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="phoneSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { mapActions, mapMutations } from 'vuex'
 import Util from '@/libs/util'
 import Setting from '@/setting'
 import CryptoJS from 'crypto-js'
@@ -56,12 +78,12 @@ export default {
   data: function () {
     return {
       token: this.$route.query.token || '',
-      unionid: this.$route.query.unionid,
+      unionid: this.$route.query.unionid || '',
       curUser: {},
       userVisible: false,
       users: [],
 
-      newVisible: true,
+      newVisible: false,
       addAccount: false,
       form: {
         account: '',
@@ -71,22 +93,73 @@ export default {
         account: [{ required: true, message: "请输入账号", trigger: "blur" }],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
       },
+
+      phoneReg: /^1[3456789]\d{9}$/,
+      phoneVisible: false,
+      phone: '',
+      phoneCode: '',
+      phoneDisabled: false,
+      phoneTimer: null,
+      phoneOpener: '',
+      phoneBtnText: '发送验证码',
     };
   },
   mounted () {
     localStorage.removeItem('opened')
-    // this.setLogin()
+    this.handleLogin()
+    // 页面离开的时候销毁手机和邮箱验证码定时器
+    this.$once("hook:beforeDestroy", function () {
+      clearInterval(this.phoneTimer)
+      this.phoneTimer = null
+    })
   },
   methods: {
-    async setLogin () {
-      const res = await this.$post(this.api.loginByUnionid)
-
-      return
+    async handleLogin () {
+      // 只有一个账号则直接进去
+      if (this.token) {
+        this.setLogin()
+      } else {
+        try {
+          const { data } = await this.$post(`${this.api.loginByUnionid}?unionid=${this.unionid}`)
+          if (data) {
+            // 多个账号则选择账号
+            const list = data.userAccounts
+            if (list) {
+              this.userVisible = true
+              this.users = list
+            }
+          } else {
+            // 新用户
+            this.newVisible = true
+          }
+        } catch (e) {
+          console.log(33, e)
+          this.toLogin()
+        }
+      }
+    },
+    // 处理登录成功
+    setLogin () {
       Util.local.set(Setting.tokenKey, this.token, Setting.tokenExpires)
       this.getOss()
       Util.cookies.remove('serverLogin')
       this.reloadIndex()
       Util.successMsg('登录成功')
+      const { toMatch } = this
+      localStorage.removeItem('toMatch')
+      this.$router.replace(this.courseId ?
+        `/preCourse/details?id=${this.courseId}` :
+        toMatch ?
+          `/touristMatch/details?id=` + toMatch :
+          '/station')
+    },
+    // 选择用户回调
+    chooseUser (user) {
+      this.curUser = user
+      user.isEnable && this.$post(`${this.api.getToken}?id=${user.id}&platform=${Setting.platformId}`).then(({ status, data }) => {
+        this.token = data.token
+        this.setLogin()
+      }).catch(res => { })
     },
     // 刷新官网
     reloadIndex () {
@@ -100,43 +173,88 @@ export default {
     },
     // 绑定账号
     bindSubmit () {
-      this.$refs.form.validate(valid => {
+      this.$refs.form.validate(async (valid) => {
         if (valid) {
-          const form = JSON.parse(JSON.stringify(this.form))
-          if (this.verCodeLogin) form.distinguish = 2
-          this.$post(this.api.logins, form).then(({ status, data, message }) => {
+          const { status, data } = await this.$post(this.api.weChatToken, {
+            ...this.form,
+            unionid: this.unionid,
+            platformId: Setting.platformId,
+          })
           // 未绑定手机号，则弹框去绑定
           if (status == 30001) {
             this.phoneVisible = true
-              this.getVerImg()
-              form.code = ''
           } else if (status == 200) {
-              const accounts = data.userAccounts
-              // 如果返回的是数组，则弹框给用户选择登录哪个用户，否则，直接登录
-              if (accounts instanceof Array) {
-                this.users = accounts
-                this.userVisible = true
-              } else {
             this.token = data.token
-                // 如果是客户，则需要选择登录的端
-                if (data.customer) {
-                  Util.cookies.set('customerName', data.customerName)
-                  this.SET_CUSTOMERNAME(data.customerName)
-                  this.selectVisible = true
-                } else {
-                  data.typeName === '学生端' ? this.setLogin() : this.toMang()
+            this.setLogin()
           }
         }
+      });
+    },
+    // 发送验证码
+    sendPhoneCode () {
+      const { phone } = this
+      if (!this.verifyPhone(phone)) return false
+      this.$post(this.api.sendPhoneOrEmailCode, {
+        platform: Setting.platformId,
+        phone,
+        types: 2
+      }).then(({ message }) => {
+        if (message.opener) {
+          this.phoneCountdown()
+          this.phoneOpener = message.opener
         } else {
-              form.code = ''
           Util.errorMsg(message)
         }
-          }).catch(res => {
-            form.code = ''
-            this.getVerImg()
-          })
+      }).catch(res => { })
+    },
+    // 验证码倒计时
+    phoneCountdown () {
+      let count = 60
+      if (!this.phoneTimer) {
+        this.phoneDisabled = true
+        this.phoneTimer = setInterval(() => {
+          if (count > 0) {
+            count--
+            this.phoneBtnText = `${count}秒后重试`
+          } else {
+            this.phoneDisabled = false
+            clearInterval(this.phoneTimer)
+            this.phoneTimer = null
+            this.phoneBtnText = `发送验证码`
+          }
+        }, 1000)
       }
-      });
+    },
+    // 验证手机号
+    verifyPhone (phone) {
+      if (!phone) {
+        this.$message.error("请输入手机号")
+        return false
+      }
+      if (!this.phoneReg.test(phone)) {
+        this.$message.error("请输入正确的手机号")
+        return false
+      }
+      return true
+    },
+    // 绑定手机号提交
+    async phoneSubmit () {
+      const { phone, phoneCode } = this
+      if (!this.verifyPhone(phone)) return false
+      if (!phoneCode) return Util.warningMsg('请输入验证码')
+      const { token } = await this.$post(this.api.bindPhoneOrEmail, {
+        mark: 1,
+        phone,
+        types: 2,
+        code: phoneCode,
+        opener: this.phoneOpener,
+        platform: Setting.platformId,
+        account: this.form.account,
+        accountId: this.curUser.id || '',
+        unionid: this.unionid,
+      })
+      this.token = token
+      this.setLogin()
     },
     async getOss () {
       const A = (key, encryptedData) => {
@@ -286,4 +404,14 @@ export default {
     border: 0;
   }
 }
+
+.ver-code {
+  position: relative;
+
+  .el-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
 </style>