门店端增加绑定微信按钮

apps/h5-shop/src/pages/MinePage.tsx

@@ -1,21 +1,95 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { isWxAuthorizeEnabled } from '@dukang/shared-types';
+import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';
 import { useStoreSession } from '../contexts/StoreSessionContext';
 import { getStoreProfile, request } from '../lib/api';
+import {
+  authorizeShopWechat,
+  fetchClientConfig,
+  fetchShopAccount,
+  handleShopWechatCallback,
+  handleShopWechatLoginResult,
+} from '../lib/wechat-auth';
+import { isWechatEnv } from '../lib/weixin';
 
 export default function MinePage() {
   const navigate = useNavigate();
-  const { resetSession, store: sessionStore } = useStoreSession();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { resetSession, store: sessionStore, applySession } = useStoreSession();
   const profile = sessionStore ?? getStoreProfile();
   const [store, setStore] = useState<Record<string, unknown> | null>(null);
+  const [hasWechat, setHasWechat] = useState<boolean | null>(null);
+  const [wxAuthorize, setWxAuthorize] = useState(false);
+  const [binding, setBinding] = useState(false);
+  const [bindMsg, setBindMsg] = useState('');
 
   useEffect(() => {
     request('SHOP_H5', '/shop/store').then(setStore).catch(() => setStore(null));
   }, []);
 
+  useEffect(() => {
+    fetchClientConfig()
+      .then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
+      .catch(() => setWxAuthorize(false));
+  }, []);
+
+  useEffect(() => {
+    fetchShopAccount()
+      .then((me) => setHasWechat(!!(me.hasWechat || me.wxOpenId)))
+      .catch(() => setHasWechat(null));
+  }, []);
+
+  useEffect(() => {
+    if (!isWechatEnv() || !wxAuthorize || !searchParams.get('code')) return;
+    void handleShopWechatCallback()
+      .then((result) => {
+        if (!result) return;
+        const session = handleShopWechatLoginResult(result);
+        if (session) {
+          applySession(session);
+          setHasWechat(true);
+          setBindMsg('微信绑定成功');
+        }
+        stripOAuthParamsFromLocation();
+        setSearchParams({}, { replace: true });
+      })
+      .catch((e) => setBindMsg(e instanceof Error ? e.message : '微信绑定失败'));
+  }, [applySession, searchParams, setSearchParams, wxAuthorize]);
+
   const openTime = String(store?.openTime || '09:30');
   const closeTime = String(store?.closeTime || '22:00');
   const multiStore = (profile?.stores?.length ?? 0) > 1;
+  const showBindWechat = wxAuthorize && hasWechat === false;
+
+  async function bindWechat() {
+    if (binding) return;
+    setBindMsg('');
+    if (!isWechatEnv()) {
+      setBindMsg('请在微信内打开门店端以绑定微信');
+      return;
+    }
+    setBinding(true);
+    try {
+      const result = await authorizeShopWechat();
+      if (!result) {
+        // 跳转公众号 OAuth，回跳后由上面 useEffect 处理
+        return;
+      }
+      const session = handleShopWechatLoginResult(result);
+      if (session) {
+        applySession(session);
+        setHasWechat(true);
+        setBindMsg('微信绑定成功');
+      } else {
+        setBindMsg('绑定未完成，请重试');
+      }
+    } catch (e) {
+      setBindMsg(e instanceof Error ? e.message : '微信绑定失败');
+    } finally {
+      setBinding(false);
+    }
+  }
 
   return (
     <div className="shop-mine-page">
@@ -77,6 +151,20 @@ export default function MinePage() {
           <p>如需修改信息请联系城市合伙人</p>
         </div>
 
+        {bindMsg ? <p className="shop-mine-bind-msg">{bindMsg}</p> : null}
+
+        {showBindWechat ? (
+          <button
+            type="button"
+            className="shop-mine-bind-wechat"
+            disabled={binding}
+            onClick={() => void bindWechat()}
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: 20 }}>chat</span>
+            {binding ? '绑定中…' : '绑定微信'}
+          </button>
+        ) : null}
+
         <button
           type="button"
           className="shop-mine-logout"