feat: 邀请运营

2025-12-24 00:41:36 +08:00
parent ec96058d5d
commit e38114d32b
8 changed files with 311 additions and 20 deletions
--- a/src/pages/invite-operations/index.tsx
+++ b/src/pages/invite-operations/index.tsx
@ -0,0 +1,117 @@
+import { Button, Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+import { Arrow } from '@taroify/icons';
+import { Fragment, useCallback, useEffect, useState } from 'react';
+
+import { EventName, OpenSource, PageUrl } from '@/constants/app';
+import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
+import useLocation from '@/hooks/use-location';
+import useUserInfo from '@/hooks/use-user-info';
+import { StaffInfo } from '@/types/partner';
+import { copy } from '@/utils/common';
+import { getStaffInfo } from '@/utils/partner';
+import { navigateTo } from '@/utils/route';
+import './index.less';
+
+const PREFIX = 'invite-operations';
+
+export default function InviteOperations() {
+  const location = useLocation();
+  const userInfo = useUserInfo();
+  const [cityCode, setCityCode] = useState<string>(location.cityCode);
+  const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);
+
+  const handleClickCityMenu = useCallback(() => {
+    navigateTo(PageUrl.CitySearch, { city: cityCode || location.cityCode, source: OpenSource.InviteOperations });
+  }, [cityCode, location.cityCode]);
+
+  const handleCityChange = useCallback(data => {
+    console.log('handleCityChange', data);
+    const { openSource, cityCode: cCode } = data;
+    if (openSource !== OpenSource.InviteOperations) {
+      return;
+    }
+    setCityCode(cCode);
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    copy(`我的ID是：${userInfo.userId}，邀你进主播群`);
+  }, [userInfo.userId]);
+
+  useEffect(() => {
+    Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
+    return () => {
+      Taro.eventCenter.off(EventName.SELECT_CITY, handleCityChange);
+    };
+  }, [handleCityChange]);
+
+  useEffect(() => {
+    if (!cityCode) return;
+
+    getStaffInfo(cityCode)
+      .then(data => {
+        setStaffInfo(data);
+      })
+      .catch(() => {
+        setStaffInfo(null);
+      });
+  }, [cityCode]);
+
+  return (
+    <div className={PREFIX}>
+      <div className={`${PREFIX}__main`}>
+        <div className={`${PREFIX}__block`}>
+          <div className={`${PREFIX}__lined-wrapper`}>
+            <div className={`${PREFIX}__lined-title ${PREFIX}__title`}>活动说明</div>
+          </div>
+          <div className={`${PREFIX}__card`}>
+            <div className={`${PREFIX}__h1 center`}>邀请播络运营进带货主播群</div>
+            <div className={`${PREFIX}__h1 center`} style={{ paddingBottom: `48rpx` }}>
+              每邀请进一个群送一个日会员
+            </div>
+            <div className={`${PREFIX}__edging`}>注：只能邀请带货主播群，请勿邀请其他群</div>
+          </div>
+        </div>
+        <div className={`${PREFIX}__block`}>
+          <div className={`${PREFIX}__lined-wrapper`}>
+            <div className={`${PREFIX}__lined-title ${PREFIX}__title`}>邀请方法</div>
+          </div>
+          <div className={`${PREFIX}__card`}>
+            <div className={`${PREFIX}__body`}>
+              <div className={`${PREFIX}__h1`}>
+                加运营为好友并将以下信息 <div className="highlight">粘贴发送给运营</div>
+              </div>
+              <div className={`${PREFIX}__action-block`}>
+                <div>我的ID是：{userInfo.userId}，邀你进主播群</div>
+                <Button className={`${PREFIX}__copy`} onClick={handleCopy}>
+                  复制
+                </Button>
+              </div>
+              <div className={`${PREFIX}__lined-wrapper`}>
+                <div className={`${PREFIX}__lined-title`}>选择城市，添加运营</div>
+              </div>
+              <div className={`${PREFIX}__city-select`} onClick={handleClickCityMenu}>
+                {cityCode ? CITY_CODE_TO_NAME_MAP.get(cityCode) : '请选择城市'}
+                <Arrow size={16} />
+              </div>
+              {staffInfo && (
+                <Fragment>
+                  <div className={`${PREFIX}__lined-wrapper`}>
+                    <div className={`${PREFIX}__lined-title`}>长按并识别二维码添加运营</div>
+                  </div>
+                  <Image
+                    className={`${PREFIX}__qrcode`}
+                    src={staffInfo.staffQrCode}
+                    showMenuByLongpress
+                    mode="aspectFill"
+                  />
+                </Fragment>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}