feat: 模卡更新

src/components/partner-intro/index.tsx

@@ -4,28 +4,56 @@ import { Swiper } from '@taroify/core';
 import { GoodJob } from '@taroify/icons';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
+import LoginDialog from '@/components/login-dialog';
 import { PageUrl } from '@/constants/app';
+import useUserInfo from '@/hooks/use-user-info';
 import { EarnType, UserProfitListItem } from '@/types/partner';
 import { openCustomerServiceChat } from '@/utils/common';
-import { formatMoney, formatTimestamp, formatUserId, getLastProfitList } from '@/utils/partner';
+import { becomePartner, formatMoney, formatTimestamp, formatUserId, getLastProfitList } from '@/utils/partner';
 import { navigateTo } from '@/utils/route';
+import { isNeedPhone, requestUserInfo } from '@/utils/user';
 
 import './index.less';
 
 const PREFIX = 'partner-intro';
 
 export default function PartnerIntro() {
-  const handleConfirm = useCallback(() => {
-    navigateTo(PageUrl.GroupOwnerCertificate);
-  }, []);
+  const userInfo = useUserInfo();
+  const needPhone = isNeedPhone(userInfo);
+  const [loginVisible, setLoginVisible] = useState(false);
 
   const handleOpenService = useCallback(() => {
     openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
   }, []);
 
-  const handleJump = useCallback(() => {
-    navigateTo(PageUrl.PartnerShareVip);
+  const handleBindSuccess = useCallback(async () => {
+    await becomePartner();
+    await requestUserInfo();
+    setLoginVisible(false);
   }, []);
+  const handleBecomePartner = useCallback(() => {
+    if (needPhone) {
+      setLoginVisible(true);
+      return false;
+    } else {
+      handleBindSuccess();
+      return true;
+    }
+  }, [handleBindSuccess, needPhone]);
+
+  const handleConfirm = useCallback(() => {
+    if (!userInfo.isPartner && !handleBecomePartner()) {
+      return;
+    }
+    navigateTo(PageUrl.GroupOwnerCertificate);
+  }, [handleBecomePartner, userInfo.isPartner]);
+
+  const handleJump = useCallback(() => {
+    if (!userInfo.isPartner && !handleBecomePartner()) {
+      return;
+    }
+    navigateTo(PageUrl.PartnerShareVip);
+  }, [handleBecomePartner, userInfo.isPartner]);
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [bannerList, setBannerList] = useState<UserProfitListItem[]>([]);
@@ -57,6 +85,19 @@ export default function PartnerIntro() {
       }
     };
   }, [getBannerList]);
+
+  const showedRef = useRef(false);
+
+  useEffect(() => {
+    if (showedRef.current || !userInfo.userId) {
+      return;
+    }
+    showedRef.current = true;
+    if (!userInfo.isPartner) {
+      handleBecomePartner();
+    }
+  }, [userInfo]);
+
   return (
     <div className={PREFIX}>
       <Image
@@ -80,17 +121,24 @@ export default function PartnerIntro() {
           <Swiper className={`${PREFIX}__swiper`} autoplay={3000} touchable={false}>
             {bannerList.map((item, index) => (
               <Swiper.Item className={`${PREFIX}__swiper-item`} key={`${item.userId}-${index}`}>
-                <div className={`${PREFIX}__swiper-item-time`}>{formatTimestamp(item.updatedAt)}</div>
+                <div className={`${PREFIX}__swiper-item-top-line`}>
+                  <div className={`${PREFIX}__swiper-item-time`}>{formatTimestamp(item.updatedAt)}</div>
+                  <div className={`${PREFIX}__swiper-item-id`}>
+                    用户 <div className="id">{formatUserId(item.userId)}</div>
+                  </div>
+                </div>
                 <div className={`${PREFIX}__swiper-item-details`}>
-                  <div className={`${PREFIX}__swiper-item-id`}>{formatUserId(item.userId)}</div>
-                  <div className={`${PREFIX}__swiper-item-info`}>
-                    {[EarnType.CHAT_ACTIVITY_SHARE_L1, EarnType.CHAT_ACTIVITY_SHARE_L2].includes(item.earnType)
-                      ? '主播被开聊'
-                      : '会员支付'}
-                    <div className="money">+{formatMoney(item.amount, 1)}</div>
+                  <div>
+                    <div className={`${PREFIX}__swiper-item-tag`}>分成收入</div>
+                    <div className={`${PREFIX}__swiper-item-info`}>
+                      {[EarnType.CHAT_ACTIVITY_SHARE_L1, EarnType.CHAT_ACTIVITY_SHARE_L2].includes(item.earnType)
+                        ? '主播被开聊'
+                        : '会员支付'}
+                      <div className="money">+{formatMoney(item.amount)}</div>
+                    </div>
                   </div>
                   <div className={`${PREFIX}__swiper-item-info`}>
-                    累计<div className="money">{formatMoney(item.total, 1)}</div>
+                    累计<div className="money">{formatMoney(item.total)}</div>
                   </div>
                 </div>
               </Swiper.Item>
@@ -163,6 +211,10 @@ export default function PartnerIntro() {
           赠送会员给好友
         </Button>
       </div>
+
+      {loginVisible && (
+        <LoginDialog onCancel={() => setLoginVisible(false)} onSuccess={handleBindSuccess} needPhone={needPhone} />
+      )}
     </div>
   );
 }