diff --git a/src/components/Comments/index.module.scss b/src/components/Comments/index.module.scss index e94914a..62fc1ff 100644 --- a/src/components/Comments/index.module.scss +++ b/src/components/Comments/index.module.scss @@ -176,6 +176,7 @@ & > .input { width: 100%; + height: 36px; } } diff --git a/src/game_pages/detail/index.config.ts b/src/game_pages/detail/index.config.ts index eaeff9d..3275f5e 100644 --- a/src/game_pages/detail/index.config.ts +++ b/src/game_pages/detail/index.config.ts @@ -1,4 +1,5 @@ export default definePageConfig({ navigationBarTitleText: '球局详情', navigationStyle: 'custom', + enableShareAppMessage: true, }) diff --git a/src/game_pages/detail/index.scss b/src/game_pages/detail/index.scss index 1f92417..9cdd85e 100644 --- a/src/game_pages/detail/index.scss +++ b/src/game_pages/detail/index.scss @@ -1066,7 +1066,7 @@ display: flex; align-items: center; height: 52px; - width: 113px; + width: 120px; box-sizing: border-box; padding: 2px 20px; justify-content: center; @@ -1177,33 +1177,3 @@ } } -.share-popup-content { - width: 100%; - height: 100%; - padding: 20px 16px env(safe-area-inset-bottom); - box-sizing: border-box; - // padding-bottom: env(safe-area-inset-bottom); - box-sizing: border-box; - display: flex; - justify-content: space-around; - align-items: center; - - & > view { - width: 100px; - height: 64px; - border-radius: 12px; - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - - & > image { - width: 24px; - height: 24px; - } - - & > text { - color: rgba(0, 0, 0, 0.85); - } - } -} diff --git a/src/game_pages/detail/index.tsx b/src/game_pages/detail/index.tsx index 4fe8c82..a27d604 100644 --- a/src/game_pages/detail/index.tsx +++ b/src/game_pages/detail/index.tsx @@ -5,7 +5,7 @@ import React, { useImperativeHandle, forwardRef, } from "react"; -import { View, Text, Image, Map, ScrollView } from "@tarojs/components"; +import { View, Text, Image, Map, ScrollView, Button } from "@tarojs/components"; // import { Avatar } from "@nutui/nutui-react-taro"; import Taro, { useRouter, @@ -13,7 +13,7 @@ import Taro, { useShareTimeline, useDidShow, } from "@tarojs/taro"; -import classnames from 'classnames' +import classnames from "classnames"; import dayjs from "dayjs"; import "dayjs/locale/zh-cn"; // 导入API服务 @@ -29,19 +29,23 @@ import { SceneType, DisplayConditionType, } from "@/components/NTRPEvaluatePopup"; -import DetailService, { MATCH_STATUS, IsSubstituteSupported } from "@/services/detailService"; +import DetailService, { + MATCH_STATUS, + IsSubstituteSupported, +} from "@/services/detailService"; import * as LoginService from "@/services/loginService"; import OrderService from "@/services/orderService"; import { getCurrentLocation, calculateDistance } from "@/utils/locationUtils"; import { useUserInfo, useUserActions } from "@/store/userStore"; import img from "@/config/images"; +import styles from "./style.module.scss"; import "./index.scss"; dayjs.locale("zh-cn"); // 将·作为连接符插入到标签文本之间 function insertDotInTags(tags: string[]) { - if (!tags) return [] + if (!tags) return []; return tags.join("-·-").split("-"); } @@ -172,14 +176,14 @@ const SharePopup = forwardRef( }, })); - // function handleShareToWechat() { - // useShareAppMessage(() => { - // return { - // title: '分享', - // path: `/game_pages/detail/index?id=${id}&from=share`, - // } - // }) - // } + useShareAppMessage((res) => { + console.log(res, "res"); + return { + title: "分享", + imageUrl: "https://img.yzcdn.cn/vant/cat.jpeg", + path: `/game_pages/detail/index?id=${id}&from=share`, + }; + }); // function handleShareToWechatMoments() { // useShareTimeline(() => { @@ -190,17 +194,19 @@ const SharePopup = forwardRef( // }) // } - // function handleSaveToLocal() { - // Taro.saveImageToPhotosAlbum({ - // filePath: images[0], - // success: () => { - // Taro.showToast({ title: '保存成功', icon: 'success' }) - // }, - // fail: () => { - // Taro.showToast({ title: '保存失败', icon: 'none' }) - // }, - // }) - // } + function handleSaveToLocal() { + Taro.showToast({ title: "not yet", icon: "error" }); + return; + Taro.saveImageToPhotosAlbum({ + filePath: "", + success: () => { + Taro.showToast({ title: "保存成功", icon: "success" }); + }, + fail: () => { + Taro.showToast({ title: "保存失败", icon: "none" }); + }, + }); + } return ( - - 分享卡片 + + + 分享卡片 + + + + + ); @@ -231,26 +253,43 @@ function toast(message) { } function isFull(counts) { - const { max_players, current_players, max_substitute_players, current_substitute_count, is_substitute_supported } = counts + const { + max_players, + current_players, + max_substitute_players, + current_substitute_count, + is_substitute_supported, + } = counts; if (max_players === current_players) { - - return true + return true; + } else if (is_substitute_supported === IsSubstituteSupported.SUPPORT) { + return max_substitute_players === current_substitute_count; } - else if (is_substitute_supported === IsSubstituteSupported.SUPPORT) { - return max_substitute_players === current_substitute_count - } - - return false + return false; } // 底部操作栏 function StickyButton(props) { - const { handleShare, handleJoinGame, detail, onStatusChange, handleAddComment, getCommentCount } = props; - const [commentCount, setCommentCount] = useState(0) + const { + handleShare, + handleJoinGame, + detail, + onStatusChange, + handleAddComment, + getCommentCount, + } = props; + const [commentCount, setCommentCount] = useState(0); const ntrpRef = useRef(null); - const { id, price, user_action_status, match_status, start_time, end_time, is_organizer } = - detail || {}; + const { + id, + price, + user_action_status, + match_status, + start_time, + end_time, + is_organizer, + } = detail || {}; const gameManageRef = useRef(); @@ -261,13 +300,15 @@ function StickyButton(props) { useEffect(() => { getCommentCount?.((count) => { - setCommentCount(count) - }) - }, [getCommentCount]) + setCommentCount(count); + }); + }, [getCommentCount]); function generateTextAndAction( user_action_status: null | { [key: string]: boolean } - ): undefined | { text: string | React.FC; action?: () => void; available?: boolean } { + ): + | undefined + | { text: string | React.FC; action?: () => void; available?: boolean } { if (!user_action_status) { return; } @@ -367,7 +408,11 @@ function StickyButton(props) { return ""; } - const { text, available = true, action = () => { } } = generateTextAndAction(user_action_status)!; + const { + text, + available = true, + action = () => {}, + } = generateTextAndAction(user_action_status)!; let ActionText: React.FC | string = text; @@ -393,17 +438,24 @@ function StickyButton(props) { className="sticky-bottom-bar-comment" onClick={() => { // Taro.showToast({ title: "To be continued", icon: "none" }); - handleAddComment() + handleAddComment(); }} > - {commentCount > 0 ? commentCount : '评论'} + + {commentCount > 0 ? commentCount : "评论"} + - + { }} + onError={() => {}} // hide business msg showLocation theme="dark" @@ -595,7 +647,8 @@ function VenueInfo(props) { function previewImage(current_url) { Taro.previewImage({ current: current_url, - urls: venue_image_list?.length > 0 ? venue_image_list.map((c) => c.url) : [], + urls: + venue_image_list?.length > 0 ? venue_image_list.map((c) => c.url) : [], }); } return ( @@ -644,20 +697,21 @@ function VenueInfo(props) { 预定截图 - {venue_image_list?.length > 0 && venue_image_list.map((item) => { - return ( - - - - ); - })} + {venue_image_list?.length > 0 && + venue_image_list.map((item) => { + return ( + + + + ); + })} @@ -763,8 +817,9 @@ function Participants(props) { {participants.map((participant) => { @@ -873,8 +928,8 @@ function genRecommendGames(games, location, avatar) { skill_level_max !== skill_level_min ? `${skill_level_min || "-"}至${skill_level_max || "-"}` : skill_level_min === "1" - ? "无要求" - : `${skill_level_min}以上`, + ? "无要求" + : `${skill_level_min}以上`, playType: play_type, }; }); @@ -884,7 +939,7 @@ function OrganizerInfo(props) { const { userInfo, currentLocation: location, - onUpdateUserInfo = () => { }, + onUpdateUserInfo = () => {}, handleViewUserInfo, handleAddComment, } = props; @@ -970,7 +1025,10 @@ function OrganizerInfo(props) { )} )} - handleAddComment()}> + handleAddComment()} + > { commentRef.current && commentRef.current.addComment() }} + handleAddComment={() => { + commentRef.current && commentRef.current.addComment(); + }} + /> + - {/* sticky bottom action bar */} { commentRef.current && commentRef.current.addComment() }} - getCommentCount={commentRef.current && commentRef.current.getCommentCount} + handleAddComment={() => { + commentRef.current && commentRef.current.addComment(); + }} + getCommentCount={ + commentRef.current && commentRef.current.getCommentCount + } /> {/* share popup */}