feat: 生成分享图
This commit is contained in:
121
src/game_pages/detail/components/SharePopup/index.module.scss
Normal file
121
src/game_pages/detail/components/SharePopup/index.module.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
.shareContainer {
|
||||
.title {
|
||||
padding: 20px 20px 16px;
|
||||
color: #000;
|
||||
// text-align: center;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
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;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.06);
|
||||
|
||||
.closeIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-feature-settings: "liga" off, "clig" off;
|
||||
font-family: "PingFang SC";
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.wechatIcon {
|
||||
background-color: #07c160;
|
||||
}
|
||||
.download {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.wechat {
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
}
|
||||
.linkIcon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
165
src/game_pages/detail/components/SharePopup/index.tsx
Normal file
165
src/game_pages/detail/components/SharePopup/index.tsx
Normal file
@@ -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} /> */}
|
||||
</>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user