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

src/game_pages/detail/components/SharePopup/index.module.scss

@@ -1,4 +1,32 @@
 .shareContainer {
+  .opacityContainer {
+    height: 140px;
+    width: 100%;
+  }
+  .shareImageContainer {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    width: 220px;
+    height: 180px;
+    padding: 6px;
+    background-color: #fafafa;
+    border-radius: 16px;
+    transform: rotateZ(-5deg) translateX(-50%);
+    box-shadow: 0 3px 32px 0 rgba(0, 0, 0, 0.16);
+
+    .shareImage {
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
+    }
+  }
+  .contentContainer {
+    background-color: #fafafa;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
   .title {
     padding: 20px 20px 16px;
     color: #000;
@@ -12,6 +40,18 @@
     align-items: center;
     justify-content: space-between;
 
+    &.publishTitle {
+      height: 100px;
+
+      .publishText {
+        align-self: flex-end;
+      }
+
+      .closeIconWrap {
+        align-self: flex-start;
+      }
+    }
+
     .publishText {
       color: #2a4d44;
       font-family: "Noto Sans SC";
@@ -62,6 +102,21 @@
     padding-top: 12px;
     padding-bottom: 60px;
 
+    .customBtnWrapper {
+      position: relative;
+    }
+
+    .button {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      z-index: 1;
+    }
+
+    .customButton,
     .button {
       display: flex;
       flex-direction: column;
@@ -76,7 +131,7 @@
       font-weight: 600;
       line-height: normal;
 
-      background-color: #fff;
+      // background-color: #fff;
       border: none;
       padding: 0;
       margin: 0;

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>