视频连线

frontend/src/pages/auth/login.vue

@@ -73,6 +73,18 @@
         <text class="btn-label">{{ loading ? '登录中…' : '登录' }}</text>
       </button>
 
+      <view class="oauth-section">
+        <view class="oauth-divider">
+          <view class="oauth-line"></view>
+          <text class="oauth-text">其他登录方式</text>
+          <view class="oauth-line"></view>
+        </view>
+        <view class="oauth-buttons">
+          <button class="oauth-btn oauth-wechat" :disabled="oauthLoading" @tap="oauthLogin('wechat')">微信登录</button>
+          <button class="oauth-btn oauth-qq" :disabled="oauthLoading" @tap="oauthLogin('qq')">QQ登录</button>
+        </view>
+      </view>
+
       <!-- 底部链接 -->
       <view class="link-row">
         <text class="link-hint">还没有账号？</text>
@@ -94,6 +106,7 @@ import { useWebSocketStore } from '@/store/websocket'
 import { useChatStore } from '@/store/chat'
 import { useContactStore } from '@/store/contact'
 import { useNotifyStore } from '@/store/notify'
+import authApi from '@/api/auth'
 
 function readSsoQueryFromLocation() {
   try {
@@ -125,6 +138,7 @@ export default {
       form: { account: '', password: '' },
       passwordVisible: false,
       loading: false,
+      oauthLoading: false,
       focusState: { account: false, password: false },
       errors: { account: '', password: '' }
     }
@@ -200,6 +214,29 @@ export default {
 
     goRegister() {
       uni.navigateTo({ url: '/pages/auth/register' })
+    },
+
+    async oauthLogin(provider) {
+      if (this.oauthLoading) return
+      this.oauthLoading = true
+      try {
+        const res = await authApi.getOAuthAuthorizeUrl(provider)
+        const url = res && res.data && res.data.url
+        if (!url) {
+          uni.showToast({ title: '第三方登录未配置', icon: 'none' })
+          return
+        }
+        // #ifdef H5
+        window.location.href = url
+        // #endif
+        // #ifndef H5
+        uni.showToast({ title: '当前端暂不支持第三方登录', icon: 'none' })
+        // #endif
+      } catch (e) {
+        console.error('第三方登录失败:', e)
+      } finally {
+        this.oauthLoading = false
+      }
     }
   }
 }
@@ -362,6 +399,54 @@ export default {
   letter-spacing: 2rpx;
 }
 
+.oauth-section {
+  margin-top: 40rpx;
+}
+
+.oauth-divider {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.oauth-line {
+  flex: 1;
+  height: 2rpx;
+  background-color: #E2E8F0;
+}
+
+.oauth-text {
+  font-size: 24rpx;
+  color: #94A3B8;
+}
+
+.oauth-buttons {
+  display: flex;
+  gap: 24rpx;
+  margin-top: 28rpx;
+}
+
+.oauth-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: #FFFFFF;
+  border: none;
+}
+
+.oauth-btn::after {
+  border: none;
+}
+
+.oauth-wechat {
+  background-color: #07C160;
+}
+
+.oauth-qq {
+  background-color: #12B7F5;
+}
+
 /* ---- 底部链接 ---- */
 .link-row {
   display: flex;