Browse Source

✨ feat(login): 增强微信登录环境检测功能

- 添加环境检测逻辑,判断是否为微信小程序环境
- 非微信环境下显示友好提示并提供返回账号登录选项
- 优化UI显示,添加环境不支持时的提示图标和说明文本

♻️ refactor(login): 重构微信登录组件导入和样式

- 从components/ui导入Button组件替换原生Button
- 优化页面布局结构,使用条件渲染不同环境内容
- 添加isWechatEnv状态管理登录环境状态

🐛 fix(login): 修复非微信环境下的登录问题

- 非微信环境下禁用登录按钮防止无效点击
- 添加环境检测失败时的模态框提示和自动返回功能
- 优化提示信息展示,增强用户体验
yourname 4 months ago
parent
commit
8bfd7e5963
1 changed files with 47 additions and 4 deletions
  1. 47 4
      mini/src/pages/login/wechat-login.tsx

+ 47 - 4
mini/src/pages/login/wechat-login.tsx

@@ -1,17 +1,39 @@
-import { View, Text, Button } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { cn } from '@/utils/cn'
 import Navbar from '@/components/ui/navbar'
+import { isWeapp } from '@/utils/platform'
+import { Button } from '@/components/ui/button'
 
 export default function WechatLogin() {
   const [loading, setLoading] = useState(false)
+  const [isWechatEnv, setIsWechatEnv] = useState(true)
 
-  // 设置导航栏标题
+  // 设置导航栏标题并检查平台
   useEffect(() => {
     Taro.setNavigationBarTitle({
       title: '微信登录'
     })
+    
+    // 检查是否为微信小程序环境
+    const wechatEnv = isWeapp()
+    setIsWechatEnv(wechatEnv)
+    
+    // 如果不是微信小程序,显示提示并延迟跳转
+    if (!wechatEnv) {
+      Taro.showModal({
+        title: '提示',
+        content: '微信登录功能仅支持在微信小程序中使用',
+        showCancel: false,
+        confirmText: '返回',
+        success: () => {
+          setTimeout(() => {
+            Taro.navigateBack()
+          }, 500)
+        }
+      })
+    }
   }, [])
 
   const handleWechatLogin = async () => {
@@ -119,7 +141,27 @@ export default function WechatLogin() {
         border={false}
       />
       
-      <View className="flex-1 px-6 py-12">
+      {!isWechatEnv ? (
+        <View className="flex-1 flex items-center justify-center px-6">
+          <View className="flex flex-col items-center">
+            <View className="i-heroicons-exclamation-triangle-20-solid w-16 h-16 text-orange-500 mx-auto mb-4" />
+            <Text className="text-lg font-semibold text-gray-900 mb-2">当前环境不支持</Text>
+            <Text className="text-sm text-gray-600 mb-6">
+              微信登录功能仅支持在微信小程序中使用
+            </Text>
+            <Button
+              className="w-full max-w-xs"
+              size="lg"
+              variant="default"
+              onClick={goToAccountLogin}
+            >
+              <View className="i-heroicons-arrow-left-20-solid w-4 h-4 mr-2" />
+              返回账号登录
+            </Button>
+          </View>
+        </View>
+      ) : (
+        <View className="flex-1 px-6 py-12">
         {/* Logo区域 */}
         <View className="flex flex-col items-center mb-10">
           <View className="w-20 h-20 mb-4 rounded-full bg-green-100 flex items-center justify-center">
@@ -164,7 +206,7 @@ export default function WechatLogin() {
             size="lg"
             variant="default"
             onClick={handleWechatLogin}
-            disabled={loading}
+            disabled={loading || !isWechatEnv}
             loading={loading}
           >
             <View className="i-heroicons-chat-bubble-left-right-20-solid w-5 h-5 mr-2" />
@@ -195,6 +237,7 @@ export default function WechatLogin() {
           </Text>
         </View>
       </View>
+      )}
     </View>
   )
 }