微信快捷登录

src/stores/userInfo.ts

@@ -6,6 +6,7 @@ export default defineStore('userInfo', {
     id: '',
     username: '',
     password: '',
+    wxBound: false,
     roleId: '',
     realname: '',
     headPic: ''

src/utils/api.ts

@@ -25,6 +25,24 @@ export function sysLogin(data: object) {
   })
 }
 
+// 公众号快捷登录（通过OAuth code）
+export function wxH5QuickLogin(params: { code: string }) {
+  return http.request({
+    url: '/wx/h5/quickLogin',
+    method: 'get',
+    params
+  })
+}
+
+// 当前登录用户绑定微信（通过OAuth code）
+export function sysWxBindByCode(params: { code: string }) {
+  return http.request({
+    url: '/sys/wx/bind',
+    method: 'post',
+    params
+  })
+}
+
 export function sysMenuNav() {
   return http.request({
     url: '/sys/menu/nav',

src/views/common/login.vue

@@ -18,6 +18,9 @@
             <van-button round block type="primary" :disabled="submitFlag" native-type="submit">
               确定
             </van-button>
+            <van-button round block plain type="primary" class="mt-12" @click="toWxQuickLogin">
+              微信快捷登录
+            </van-button>
           </div>
         </van-form>
       </div>
@@ -34,17 +37,76 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { showConfirmDialog, showToast } from 'vant'
 import userInfoStore from '@/stores/userInfo'
 const userInfo = userInfoStore()
 const router = useRouter()
 const route = useRoute()
+const WX_APP_ID = 'wx1d52f91f259a691f'
 let username = ref(userInfo.username || '')
 let password = ref(userInfo.password || '')
 let submitFlag = ref(false)
 import { encrypt } from '@/utils/index'
-import { sysLogin, sysUserInfo, sysMenuNav } from '@/utils/api'
+import { sysLogin, sysUserInfo, sysMenuNav, wxH5QuickLogin, sysWxBindByCode } from '@/utils/api'
+
+onMounted(() => {
+  handleWxCallback()
+})
+
+const toWxQuickLogin = () => {
+  startWxOAuth('quick')
+}
+
+const startWxOAuth = (action: 'quick' | 'bind') => {
+  const redirectUri = encodeURIComponent(`${window.location.origin}/login?wxAction=${action}`)
+  window.location.href =
+    `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WX_APP_ID}&redirect_uri=${redirectUri}` +
+    '&response_type=code&scope=snsapi_base&state=stockh5#wechat_redirect'
+}
+
+const handleWxCallback = async () => {
+  const code = route.query.code
+  const action = route.query.wxAction
+  if (typeof code !== 'string' || typeof action !== 'string') {
+    return
+  }
+  if (action === 'quick') {
+    await doWxQuickLogin(code)
+  } else if (action === 'bind') {
+    await doWxBind(code)
+  }
+}
+
+const doWxQuickLogin = async (code: string) => {
+  const data: any = await wxH5QuickLogin({ code })
+  if (data && data.code === 0 && data.token) {
+    userInfo.token = data.token
+    userInfo.wxBound = true
+    await getUserInfo()
+    await getsysMenuNav()
+    return
+  }
+  showToast(data?.msg || '微信快捷登录失败，请先账号登录并绑定微信')
+  router.replace({ name: 'login' })
+}
+
+const doWxBind = async (code: string) => {
+  if (!userInfo.token) {
+    showToast('请先账号密码登录')
+    router.replace({ name: 'login' })
+    return
+  }
+  const data: any = await sysWxBindByCode({ code })
+  if (data && data.code === 0) {
+    userInfo.wxBound = true
+    showToast('微信绑定成功')
+  } else {
+    showToast(data?.msg || '微信绑定失败')
+  }
+  await getsysMenuNav()
+}
 const onSubmit = async () => {
   submitFlag.value = true
   const data: any = await sysLogin(
@@ -57,10 +119,25 @@ const onSubmit = async () => {
     userInfo.username = username.value
     userInfo.password = password.value
     userInfo.token = data.token
-    getUserInfo()
+    userInfo.wxBound = !!data.wxBound
+    await getUserInfo()
+    if (!userInfo.wxBound) {
+      await showConfirmDialog({
+        title: '绑定微信',
+        message: '是否绑定微信用于下次快捷登录？',
+        confirmButtonText: '去绑定',
+        cancelButtonText: '暂不绑定'
+      }).then(() => {
+        startWxOAuth('bind')
+      }).catch(async () => {
+        await getsysMenuNav()
+      })
+    } else {
+      await getsysMenuNav()
+    }
   } else {
     submitFlag.value = false
-    showToast('账号密码错误')
+    showToast(data?.msg || '账号密码错误')
   }
 }
 
@@ -70,7 +147,7 @@ const getUserInfo = async () => {
   userInfo.realname = data.user.realname
   userInfo.headPic = data.user.headPic
   userInfo.roleId = data.user.roleId + ''
-  getsysMenuNav()
+  userInfo.wxBound = !!data.user.wxOpenid
 }
 
 const getsysMenuNav = async () => {
@@ -148,6 +225,10 @@ const getsysMenuNav = async () => {
       .opr-area {
         padding: 16px 0;
 
+        .mt-12 {
+          margin-top: 12px;
+        }
+
         .van-button {
           height: 32px;
           line-height: 32px;