feat: 发布后分享弹窗自动弹出

src/game_pages/detail/index.tsx

@@ -333,7 +333,9 @@ function Coursel(props) {
 // 分享弹窗
 const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
   const [visible, setVisible] = useState(false);
+  const [publishFlag, setPublishFlag] = useState(false);
   // const posterRef = useRef();
+  const { max_participants, participant_count } = detail || {};
 
   useEffect(() => {
     if (id) {
@@ -361,7 +363,8 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
   }
 
   useImperativeHandle(ref, () => ({
-    show: () => {
+    show: (publish_flag = false) => {
+      setPublishFlag(publish_flag);
       setVisible(true);
     },
   }));
@@ -451,6 +454,7 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
 
   function onClose() {
     setVisible(false);
+    setPublishFlag(false);
   }
 
   return (
@@ -467,11 +471,27 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
       >
         <View className={styles.shareContainer}>
           <View catchMove className={styles.title}>
-            <Text>分享至</Text>
+            {publishFlag ? (
+              <Text className={styles.publishText}>球局发布成功 🎉</Text>
+            ) : (
+              <Text>分享至</Text>
+            )}
             <View className={styles.closeIconWrap} onClick={onClose}>
               <Image className={styles.closeIcon} src={CrossIcon} />
             </View>
           </View>
+          {publishFlag && (
+            <View className={styles.shareTip}>
+              <Text>
+                还剩
+                <Text className={styles.specialCount}>
+                  {" "}
+                  {max_participants - participant_count}{" "}
+                </Text>
+                人加入完成组局， 去邀请好友加入吧～
+              </Text>
+            </View>
+          )}
           <View className={styles.shareItems}>
             <Button className={styles.button} openType="share">
               <View className={classnames(styles.icon, styles.wechatIcon)}>
@@ -690,7 +710,10 @@ function StickyButton(props) {
     <>
       <View className="sticky-bottom-bar">
         <View className="sticky-bottom-bar-share-and-comment">
-          <View className="sticky-bottom-bar-share" onClick={handleShare}>
+          <View
+            className="sticky-bottom-bar-share"
+            onClick={() => handleShare()}
+          >
             <Image
               className="sticky-bottom-bar-share-icon"
               src={img.ICON_DETAIL_SHARE}
@@ -1403,6 +1426,9 @@ function Index() {
   useEffect(() => {
     updateLocation();
     fetchUserInfo();
+    if (from === "publish") {
+      handleShare(true);
+    }
   }, []);
 
   useDidShow(async () => {
@@ -1458,8 +1484,8 @@ function Index() {
     }
   }
 
-  function handleShare() {
-    sharePopupRef.current.show();
+  function handleShare(flag = false) {
+    sharePopupRef.current.show(flag);
   }
 
   const handleJoinGame = async () => {

src/game_pages/detail/style.module.scss

@@ -1,6 +1,6 @@
 .shareContainer {
   .title {
-    padding: 20px;
+    padding: 20px 20px 16px;
     color: #000;
     // text-align: center;
     font-family: "PingFang SC";
@@ -12,6 +12,15 @@
     align-items: center;
     justify-content: space-between;
 
+    .publishText {
+      color: #2a4d44;
+      font-family: "Noto Sans SC";
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 900;
+      line-height: 28px;
+    }
+
     .closeIconWrap {
       display: flex;
       width: 40px;
@@ -32,10 +41,25 @@
     }
   }
 
+  .shareTip {
+    padding: 0 24px 24px;
+    color: #2a4d44;
+    font-family: "Noto Sans SC";
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 40px;
+
+    .specialCount {
+      color: #00e5ad;
+    }
+  }
+
   .shareItems {
     display: flex;
     align-items: center;
     justify-content: space-around;
+    padding-top: 12px;
     padding-bottom: 60px;
 
     .button {