小程序修改

apps/mini-user/src/pages/mine/index.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
 import { View, Text, Image } from '@tarojs/components';
 import Taro, { useDidShow } from '@tarojs/taro';
+import { isWxAuthorizeEnabled, type ClientRuntimeConfig } from '@dukang/shared-types';
 import PageShell from '../../components/PageShell';
 import TabMainHeader from '../../components/TabMainHeader';
 import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
+import { BRAND_LOGO_MARK_URL } from '@dukang/shared-types';
 import { goLogin } from '../../lib/auth-nav';
+import { bindWechatForUser } from '../../lib/wechat-auth';
 import { isLoggedIn, logout, request, toast, type UserProfile } from '../../lib/api';
 
 const ORDER_SHORTCUTS = [
@@ -29,12 +32,17 @@ export default function MinePage() {
   const [profile, setProfile] = useState<UserProfile | null>(null);
   const [benefitBalance, setBenefitBalance] = useState(0);
   const [orderCounts, setOrderCounts] = useState<Record<string, number>>({});
+  const [wxAuthorize, setWxAuthorize] = useState(true);
+  const [bindingWx, setBindingWx] = useState(false);
 
   useDidShow(() => {
     syncTabBarSelected(3);
+    if (isLoggedIn()) {
+      loadProfile();
+    }
   });
 
-  useEffect(() => {
+  function loadProfile() {
     if (!loggedIn) return;
     Promise.all([
       request<UserProfile>('/auth/me'),
@@ -57,8 +65,42 @@ export default function MinePage() {
         setOrderCounts(counts);
       })
       .catch(() => {});
+  }
+
+  useEffect(() => {
+    request<ClientRuntimeConfig>('/common/client-config')
+      .then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
+      .catch(() => setWxAuthorize(true));
+  }, []);
+
+  useEffect(() => {
+    loadProfile();
   }, [loggedIn]);
 
+  async function handleAvatarTap() {
+    if (!loggedIn) {
+      goLogin('/pages/mine/index');
+      return;
+    }
+    if (profile?.hasWechat || !wxAuthorize || process.env.TARO_ENV !== 'weapp') return;
+    setBindingWx(true);
+    try {
+      const result = await bindWechatForUser();
+      if (!result.ok && result.needBindPhone) {
+        goLogin('/pages/mine/index', { bindMode: '1', wxSessionKey: result.wxSessionKey });
+        return;
+      }
+      if (result.ok) {
+        loadProfile();
+        toast('微信授权成功', 'success');
+      }
+    } catch (e) {
+      toast(e instanceof Error ? e.message : '微信授权失败');
+    } finally {
+      setBindingWx(false);
+    }
+  }
+
   function handleService(item: (typeof SERVICES)[number]) {
     if ('url' in item && item.url) {
       Taro.navigateTo({ url: item.url });
@@ -73,6 +115,13 @@ export default function MinePage() {
     }
   }
 
+  function renderAvatarContent(profile: UserProfile | null) {
+    if (profile?.avatarUrl) {
+      return <Image className="mine-avatar-img" src={profile.avatarUrl} mode="aspectFill" />;
+    }
+    return <Image className="mine-avatar-img" src={BRAND_LOGO_MARK_URL} mode="aspectFit" />;
+  }
+
   if (!loggedIn) {
     return (
       <PageShell variant="tab" className="mine-page">
@@ -81,7 +130,7 @@ export default function MinePage() {
           <View className="mine-header-texture" />
           <View className="mine-profile">
             <View className="mine-avatar">
-              <Text>客</Text>
+              <Image className="mine-avatar-img" src={BRAND_LOGO_MARK_URL} mode="aspectFit" />
             </View>
             <View>
               <Text className="mine-profile-name">未登录</Text>
@@ -104,7 +153,8 @@ export default function MinePage() {
   }
 
   const nickname = profile?.nickname || '用户';
-  const avatarUrl = profile?.avatarUrl;
+  const hasWechat = !!profile?.hasWechat;
+  const memberLabel = hasWechat ? '微信会员' : '未授权微信';
 
   return (
     <PageShell variant="tab" className="mine-page">
@@ -112,16 +162,22 @@ export default function MinePage() {
       <View className="mine-header">
         <View className="mine-header-texture" />
         <View className="mine-profile">
-          <View className="mine-avatar">
-            {avatarUrl ? (
-              <Image className="mine-avatar-img" src={avatarUrl} mode="aspectFill" />
-            ) : (
-              <Text>{nickname.slice(0, 1)}</Text>
-            )}
+          <View className="mine-avatar-wrap" onClick={() => void handleAvatarTap()}>
+            <View className="mine-avatar">
+              {renderAvatarContent(profile)}
+            </View>
+            {!hasWechat && wxAuthorize && process.env.TARO_ENV === 'weapp' ? (
+              <Text className="mine-avatar-badge">{bindingWx ? '授权中' : '授权'}</Text>
+            ) : null}
           </View>
           <View>
             <Text className="mine-profile-name">{nickname}</Text>
-            <Text className="mine-member-tag">{profile?.phone || '好客会员'}</Text>
+            <Text className={`mine-member-tag${hasWechat ? ' mine-member-tag--wechat' : ''}`}>
+              {memberLabel}
+            </Text>
+            {!hasWechat && wxAuthorize && process.env.TARO_ENV === 'weapp' ? (
+              <Text className="mine-wechat-hint">点击头像完成微信授权</Text>
+            ) : null}
           </View>
         </View>
       </View>
@@ -209,7 +265,7 @@ export default function MinePage() {
         </View>
 
         <View className="mine-footer">
-          <Text className="mine-version">杜康好客 mini-user v0.1.0</Text>
+          <Text className="mine-version">杜康好客</Text>
           <Text className="mine-logout" onClick={() => logout()}>
             退出登录
           </Text>