feat: 发布分享弹窗样式修改，增加预览消息卡片

src/game_pages/detail/components/SharePopup/index.tsx

@@ -26,6 +26,7 @@ dayjs.locale("zh-cn");
 export default forwardRef(({ id, from, detail, userInfo }, ref) => {
   const [visible, setVisible] = useState(false);
   const [publishFlag, setPublishFlag] = useState(false);
+  const [shareImageUrl, setShareImageUrl] = useState("");
   const { fetchUserInfo } = useUserActions();
   // const posterRef = useRef();
   const { max_participants, participant_count } = detail || {};
@@ -56,13 +57,17 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
   }
 
   useImperativeHandle(ref, () => ({
-    show: (publish_flag = false) => {
+    show: async (publish_flag = false) => {
       setPublishFlag(publish_flag);
+      if (publish_flag) {
+        const url = await generateShareImageUrl();
+        setShareImageUrl(url);
+      }
       setVisible(true);
     },
   }));
 
-  useShareAppMessage(async (res) => {
+  async function generateShareImageUrl() {
     const {
       play_type,
       skill_level_max,
@@ -76,7 +81,6 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
     const endTime = dayjs(end_time);
     const dayofWeek = DayOfWeekMap.get(startTime.day());
     const gameLength = `${endTime.diff(startTime, "hour")}小时`;
-    await changeMessageType();
     const url = await generateShareImage({
       userAvatar: userInfo.avatar_url,
       userNickname: userInfo.nickname,
@@ -90,6 +94,12 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
       venueName: location_name,
       venueImages: image_list ? image_list : [],
     });
+    return url;
+  }
+
+  useShareAppMessage(async (res) => {
+    await changeMessageType();
+    const url = await generateShareImageUrl();
     // console.log(res, "res");
     return {
       title: detail.title,
@@ -168,51 +178,96 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
         showHeader={false}
         hideFooter
         enableDragToClose={false}
-        style={{ minHeight: "100px" }}
+        style={{ minHeight: "100px", background: "unset" }}
         zIndex={1000}
       >
         <View className={styles.shareContainer}>
-          <View catchMove className={styles.title}>
-            {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.opacityContainer} />
+              <View className={styles.shareImageContainer}>
+                <Image className={styles.shareImage} src={shareImageUrl} />
+              </View>
+            </>
           )}
-          <View className={styles.shareItems}>
-            <Button className={styles.button} openType="share">
-              <View className={classnames(styles.icon, styles.wechatIcon)}>
-                <Image className={styles.wechat} src={WechatLogo} />
+          <View
+            className={styles.contentContainer}
+            style={{
+              backgroundImage: `url(${OSS_BASE_URL}/images/215f1ce1-be52-4a92-8250-5a4a69e7f2b3.png)`,
+            }}
+          >
+            <View
+              catchMove
+              className={classnames(
+                styles.title,
+                publishFlag ? styles.publishTitle : ""
+              )}
+            >
+              {publishFlag ? (
+                <Text className={styles.publishText}>球局发布成功 🎉</Text>
+              ) : (
+                <Text>分享至</Text>
+              )}
+              <View className={styles.closeIconWrap} onClick={onClose}>
+                <Image className={styles.closeIcon} src={CrossIcon} />
               </View>
-              <Text>微信好友</Text>
-            </Button>
-            <Button className={styles.button} onClick={handlePost}>
-              <View className={styles.icon}>
-                <Image className={styles.download} src={DownloadIcon} />
+            </View>
+            {publishFlag && (
+              <View className={styles.shareTip}>
+                <Text>
+                  还剩
+                  <Text className={styles.specialCount}>
+                    {" "}
+                    {max_participants - participant_count}{" "}
+                  </Text>
+                  人加入完成组局， 去邀请好友加入吧～
+                </Text>
               </View>
-              <Text>生成分享图</Text>
-            </Button>
-            <Button className={styles.button}>
-              <View className={styles.icon}>
-                <Image className={styles.linkIcon} src={LinkIcon} />
+            )}
+            <View className={styles.shareItems}>
+              <View className={styles.customBtnWrapper}>
+                <Button className={styles.button} openType="share">
+                  <View className={classnames(styles.icon, styles.wechatIcon)}>
+                    <Image className={styles.wechat} src={WechatLogo} />
+                  </View>
+                  <Text>微信好友</Text>
+                </Button>
+                <View className={styles.customButton}>
+                  <View className={classnames(styles.icon, styles.wechatIcon)}>
+                    <Image className={styles.wechat} src={WechatLogo} />
+                  </View>
+                  <Text>微信好友</Text>
+                </View>
               </View>
-              <Text>复制链接</Text>
-            </Button>
+              <View className={styles.customBtnWrapper}>
+                <Button className={styles.button} onClick={handlePost}>
+                  <View className={styles.icon}>
+                    <Image className={styles.download} src={DownloadIcon} />
+                  </View>
+                  <Text>生成分享图</Text>
+                </Button>
+                <View className={styles.customButton}>
+                  <View className={styles.icon}>
+                    <Image className={styles.download} src={DownloadIcon} />
+                  </View>
+                  <Text>生成分享图</Text>
+                </View>
+              </View>
+              <View className={styles.customBtnWrapper}>
+                <Button className={styles.button}>
+                  <View className={styles.icon}>
+                    <Image className={styles.linkIcon} src={LinkIcon} />
+                  </View>
+                  <Text>复制链接</Text>
+                </Button>
+                <View className={styles.customButton}>
+                  <View className={styles.icon}>
+                    <Image className={styles.linkIcon} src={LinkIcon} />
+                  </View>
+                  <Text>复制链接</Text>
+                </View>
+              </View>
+            </View>
           </View>
         </View>
       </CommonPopup>