feat: ntrp逻辑变更 & 替换海报二维码
This commit is contained in:
@@ -24,7 +24,12 @@ import {
|
||||
Comments,
|
||||
Poster,
|
||||
} from "@/components";
|
||||
import { generateShareImage, generatePosterImage } from "@/utils";
|
||||
import {
|
||||
generateShareImage,
|
||||
generatePosterImage,
|
||||
base64ToTempFilePath,
|
||||
delay,
|
||||
} from "@/utils";
|
||||
import DetailService, {
|
||||
MATCH_STATUS,
|
||||
IsSubstituteSupported,
|
||||
@@ -179,130 +184,130 @@ function Coursel(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const PosterPopup = forwardRef((props, ref) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [posterData, setPosterData] = useState();
|
||||
const posterRef = useRef();
|
||||
useImperativeHandle(ref, () => ({
|
||||
show: (detail, user) => {
|
||||
setVisible(true);
|
||||
const {
|
||||
play_type,
|
||||
skill_level_max,
|
||||
skill_level_min,
|
||||
image_list,
|
||||
title,
|
||||
start_time,
|
||||
end_time,
|
||||
location_name,
|
||||
} = detail;
|
||||
const { avatar_url, nickname } = user;
|
||||
const startTime = dayjs(start_time);
|
||||
const endTime = dayjs(end_time);
|
||||
const dayofWeek = DayOfWeekMap.get(startTime.day());
|
||||
const gameLength = `${endTime.diff(startTime, "hour")}小时`;
|
||||
setPosterData({
|
||||
playType: play_type,
|
||||
ntrp: `NTRP ${genNTRPRequirementText(
|
||||
skill_level_min,
|
||||
skill_level_max
|
||||
)}`,
|
||||
mainCoursal:
|
||||
image_list[0] ||
|
||||
"https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/0621b8cf-f7d6-43ad-b852-7dc39f29a782.png",
|
||||
nickname,
|
||||
avatarUrl: avatar_url,
|
||||
title,
|
||||
locationName: location_name,
|
||||
date: `${startTime.format("M月D日")} (${dayofWeek})`,
|
||||
time: `${startTime.format("ah")}点 ${gameLength}`,
|
||||
});
|
||||
},
|
||||
}));
|
||||
// const PosterPopup = forwardRef((props, ref) => {
|
||||
// const [visible, setVisible] = useState(false);
|
||||
// const [posterData, setPosterData] = useState();
|
||||
// const posterRef = useRef();
|
||||
// useImperativeHandle(ref, () => ({
|
||||
// show: (detail, user) => {
|
||||
// setVisible(true);
|
||||
// const {
|
||||
// play_type,
|
||||
// skill_level_max,
|
||||
// skill_level_min,
|
||||
// image_list,
|
||||
// title,
|
||||
// start_time,
|
||||
// end_time,
|
||||
// location_name,
|
||||
// } = detail;
|
||||
// const { avatar_url, nickname } = user;
|
||||
// const startTime = dayjs(start_time);
|
||||
// const endTime = dayjs(end_time);
|
||||
// const dayofWeek = DayOfWeekMap.get(startTime.day());
|
||||
// const gameLength = `${endTime.diff(startTime, "hour")}小时`;
|
||||
// setPosterData({
|
||||
// playType: play_type,
|
||||
// ntrp: `NTRP ${genNTRPRequirementText(
|
||||
// skill_level_min,
|
||||
// skill_level_max
|
||||
// )}`,
|
||||
// mainCoursal:
|
||||
// image_list[0] ||
|
||||
// "https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/0621b8cf-f7d6-43ad-b852-7dc39f29a782.png",
|
||||
// nickname,
|
||||
// avatarUrl: avatar_url,
|
||||
// title,
|
||||
// locationName: location_name,
|
||||
// date: `${startTime.format("M月D日")} (${dayofWeek})`,
|
||||
// time: `${startTime.format("ah")}点 ${gameLength}`,
|
||||
// });
|
||||
// },
|
||||
// }));
|
||||
|
||||
useShareAppMessage(async () => {
|
||||
const tempFilePath = await posterRef.current.generateImage();
|
||||
return {
|
||||
// title: detail.title,
|
||||
imageUrl: tempFilePath,
|
||||
path: `/game_pages/detail/index?id=${props.id}&from=share`,
|
||||
};
|
||||
});
|
||||
// useShareAppMessage(async () => {
|
||||
// const tempFilePath = await posterRef.current.generateImage();
|
||||
// return {
|
||||
// // title: detail.title,
|
||||
// imageUrl: tempFilePath,
|
||||
// path: `/game_pages/detail/index?id=${props.id}&from=share`,
|
||||
// };
|
||||
// });
|
||||
|
||||
useShareTimeline(async () => {
|
||||
const tempFilePath = await posterRef.current.generateImage();
|
||||
return {
|
||||
title: "分享",
|
||||
imageUrl: tempFilePath,
|
||||
path: `/game_pages/detail/index?id=${props.id}&from=share`,
|
||||
};
|
||||
});
|
||||
// useShareTimeline(async () => {
|
||||
// const tempFilePath = await posterRef.current.generateImage();
|
||||
// return {
|
||||
// title: "分享",
|
||||
// imageUrl: tempFilePath,
|
||||
// path: `/game_pages/detail/index?id=${props.id}&from=share`,
|
||||
// };
|
||||
// });
|
||||
|
||||
function onClose() {
|
||||
setVisible(false);
|
||||
setPosterData(undefined);
|
||||
Taro.updateShareMenu({
|
||||
isUpdatableMessage: true, // 是否是动态消息（需要服务端配置过模版）
|
||||
});
|
||||
}
|
||||
// function onClose() {
|
||||
// setVisible(false);
|
||||
// setPosterData(undefined);
|
||||
// Taro.updateShareMenu({
|
||||
// isUpdatableMessage: true, // 是否是动态消息（需要服务端配置过模版）
|
||||
// });
|
||||
// }
|
||||
|
||||
async function handleShare() {
|
||||
const tempFilePath = await posterRef.current.generateImage();
|
||||
Taro.showShareImageMenu({
|
||||
path: tempFilePath,
|
||||
});
|
||||
}
|
||||
return (
|
||||
visible && (
|
||||
<CommonPopup
|
||||
title="分享至"
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
showHeader={false}
|
||||
position="center"
|
||||
hideFooter
|
||||
enableDragToClose={false}
|
||||
style={{ minHeight: "100px" }}
|
||||
zIndex={2001}
|
||||
>
|
||||
<View className={styles.posterContainer}>
|
||||
<View className={styles.posterWrap}>
|
||||
{posterData && <Poster ref={posterRef} data={posterData} />}
|
||||
</View>
|
||||
<View className={styles.sharePoster}>
|
||||
<Button className={styles.shareItem} plain={true}>
|
||||
<View className={styles.icon}>
|
||||
<Image className={styles.download} src={DownloadIcon} />
|
||||
</View>
|
||||
<Text>保存至手机</Text>
|
||||
</Button>
|
||||
<Button
|
||||
className={styles.shareItem}
|
||||
plain={true}
|
||||
onClick={handleShare}
|
||||
>
|
||||
<View className={classnames(styles.icon, styles.wechatIcon)}>
|
||||
<Image className={styles.wechat} src={WechatLogo} />
|
||||
</View>
|
||||
<Text>微信好友</Text>
|
||||
</Button>
|
||||
<Button className={styles.shareItem} plain={true} openType="share">
|
||||
<View className={styles.icon}>
|
||||
<Image className={styles.timeline} src={WechatTimeline} />
|
||||
</View>
|
||||
<Text>朋友圈</Text>
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</CommonPopup>
|
||||
)
|
||||
);
|
||||
});
|
||||
// async function handleShare() {
|
||||
// const tempFilePath = await posterRef.current.generateImage();
|
||||
// Taro.showShareImageMenu({
|
||||
// path: tempFilePath,
|
||||
// });
|
||||
// }
|
||||
// return (
|
||||
// visible && (
|
||||
// <CommonPopup
|
||||
// title="分享至"
|
||||
// visible={visible}
|
||||
// onClose={onClose}
|
||||
// showHeader={false}
|
||||
// position="center"
|
||||
// hideFooter
|
||||
// enableDragToClose={false}
|
||||
// style={{ minHeight: "100px" }}
|
||||
// zIndex={2001}
|
||||
// >
|
||||
// <View className={styles.posterContainer}>
|
||||
// <View className={styles.posterWrap}>
|
||||
// {posterData && <Poster ref={posterRef} data={posterData} />}
|
||||
// </View>
|
||||
// <View className={styles.sharePoster}>
|
||||
// <Button className={styles.shareItem} plain={true}>
|
||||
// <View className={styles.icon}>
|
||||
// <Image className={styles.download} src={DownloadIcon} />
|
||||
// </View>
|
||||
// <Text>保存至手机</Text>
|
||||
// </Button>
|
||||
// <Button
|
||||
// className={styles.shareItem}
|
||||
// plain={true}
|
||||
// onClick={handleShare}
|
||||
// >
|
||||
// <View className={classnames(styles.icon, styles.wechatIcon)}>
|
||||
// <Image className={styles.wechat} src={WechatLogo} />
|
||||
// </View>
|
||||
// <Text>微信好友</Text>
|
||||
// </Button>
|
||||
// <Button className={styles.shareItem} plain={true} openType="share">
|
||||
// <View className={styles.icon}>
|
||||
// <Image className={styles.timeline} src={WechatTimeline} />
|
||||
// </View>
|
||||
// <Text>朋友圈</Text>
|
||||
// </Button>
|
||||
// </View>
|
||||
// </View>
|
||||
// </CommonPopup>
|
||||
// )
|
||||
// );
|
||||
// });
|
||||
|
||||
// 分享弹窗
|
||||
const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const posterRef = useRef();
|
||||
// const posterRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
changeMessageType();
|
||||
@@ -370,6 +375,7 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
|
||||
|
||||
async function handlePost() {
|
||||
const {
|
||||
id,
|
||||
play_type,
|
||||
skill_level_max,
|
||||
skill_level_min,
|
||||
@@ -385,6 +391,15 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
|
||||
const dayofWeek = DayOfWeekMap.get(startTime.day());
|
||||
const gameLength = `${endTime.diff(startTime, "hour")}小时`;
|
||||
Taro.showLoading({ title: "生成中..." });
|
||||
const qrCodeUrlRes = await DetailService.getQrCodeUrl({
|
||||
page: "/game_pages/detail/index",
|
||||
scene: `id=${id}`,
|
||||
});
|
||||
const qrCodeUrl = await base64ToTempFilePath(
|
||||
qrCodeUrlRes.data.qr_code_base64
|
||||
);
|
||||
console.log(qrCodeUrl, "qrCodeUrl");
|
||||
await delay(100);
|
||||
const url = await generatePosterImage({
|
||||
playType: play_type,
|
||||
ntrp: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`,
|
||||
@@ -397,6 +412,7 @@ const SharePopup = forwardRef(({ id, from, detail, userInfo }, ref) => {
|
||||
locationName: location_name,
|
||||
date: `${startTime.format("M月D日")} (${dayofWeek})`,
|
||||
time: `${startTime.format("ah")}点 ${gameLength}`,
|
||||
qrCodeUrl,
|
||||
});
|
||||
Taro.hideLoading();
|
||||
setVisible(false);
|
||||
@@ -1512,8 +1528,8 @@ function Index() {
|
||||
/>
|
||||
<Comments
|
||||
ref={commentRef}
|
||||
game_id={Number(id)}
|
||||
message_id={message_id}
|
||||
game_id={Number(detail.id)}
|
||||
message_id={message_id ? Number(message_id) : undefined}
|
||||
publisher_id={Number(detail.publisher_id)}
|
||||
/>
|
||||
{/* sticky bottom action bar */}
|
||||
|
||||
Reference in New Issue
Block a user