feat: 生成分享图

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

@@ -0,0 +1,165 @@
+import { forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import { View, Button, Image, Text } from "@tarojs/components";
+import Taro, { useShareAppMessage } from "@tarojs/taro";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import classnames from "classnames";
+import { generateShareImage } from "@/utils";
+import DetailService from "@/services/detailService";
+import { CommonPopup } from "@/components";
+import DownloadIcon from "@/static/detail/download_icon.svg";
+import WechatLogo from "@/static/detail/wechat_icon.svg";
+// import WechatTimeline from "@/static/detail/wechat_timeline.svg";
+import LinkIcon from "@/static/detail/link.svg";
+import CrossIcon from "@/static/detail/cross.svg";
+import { genNTRPRequirementText, navto } from "../../utils/helper";
+import { DayOfWeekMap } from "../../config";
+import styles from "./index.module.scss";
+
+dayjs.locale("zh-cn");
+
+// 分享弹窗
+export default 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) {
+      changeMessageType();
+    }
+  }, [id]);
+
+  async function changeMessageType() {
+    try {
+      const res = await DetailService.getActivityId({
+        business_id: id,
+        business_type: "game",
+        is_private: false,
+      });
+      if (res.code === 0) {
+        Taro.updateShareMenu({
+          withShareTicket: false, // 是否需要返回 shareTicket
+          isUpdatableMessage: true, // 是否是动态消息（需要服务端配置过模版）
+          activityId: res.data.activity_id, // 动态消息的活动 id
+        });
+      }
+    } catch (e) {
+      Taro.showToast({ title: e.message, icon: "none" });
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    show: (publish_flag = false) => {
+      setPublishFlag(publish_flag);
+      setVisible(true);
+    },
+  }));
+
+  useShareAppMessage(async (res) => {
+    const {
+      play_type,
+      skill_level_max,
+      skill_level_min,
+      start_time,
+      end_time,
+      location_name,
+      venue_image_list,
+    } = detail || {};
+    const startTime = dayjs(start_time);
+    const endTime = dayjs(end_time);
+    const dayofWeek = DayOfWeekMap.get(startTime.day());
+    const gameLength = `${endTime.diff(startTime, "hour")}小时`;
+    const url = await generateShareImage({
+      userAvatar: userInfo.avatar_url,
+      userNickname: userInfo.nickname,
+      gameType: play_type,
+      skillLevel: `NTRP ${genNTRPRequirementText(
+        skill_level_min,
+        skill_level_max
+      )}`,
+      gameDate: `${startTime.format("M月D日")} (${dayofWeek})`,
+      gameTime: `${startTime.format("ah")}点 ${gameLength}`,
+      venueName: location_name,
+      venueImages: venue_image_list ? venue_image_list.map((c) => c.url) : [],
+    });
+    // console.log(res, "res");
+    return {
+      title: detail.title,
+      imageUrl: url || "https://img.yzcdn.cn/vant/cat.jpeg",
+      path: `/game_pages/detail/index?id=${id}&from=share`,
+    };
+  });
+
+  async function handlePost() {
+    navto(`/game_pages/sharePoster/index?id=${detail.id}`);
+    setVisible(false);
+  }
+
+  function onClose() {
+    setVisible(false);
+    setPublishFlag(false);
+  }
+
+  return (
+    <>
+      <CommonPopup
+        title="分享至"
+        visible={visible}
+        onClose={onClose}
+        showHeader={false}
+        hideFooter
+        enableDragToClose={false}
+        style={{ minHeight: "100px" }}
+        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.shareItems}>
+            <Button className={styles.button} openType="share">
+              <View className={classnames(styles.icon, styles.wechatIcon)}>
+                <Image className={styles.wechat} src={WechatLogo} />
+              </View>
+              <Text>微信好友</Text>
+            </Button>
+            <Button className={styles.button} onClick={handlePost}>
+              <View className={styles.icon}>
+                <Image className={styles.download} src={DownloadIcon} />
+              </View>
+              <Text>生成分享图</Text>
+            </Button>
+            <Button className={styles.button}>
+              <View className={styles.icon}>
+                <Image className={styles.linkIcon} src={LinkIcon} />
+              </View>
+              <Text>复制链接</Text>
+            </Button>
+          </View>
+        </View>
+      </CommonPopup>
+      {/* <PosterPopup ref={posterRef} id={detail.id} /> */}
+    </>
+  );
+});