style: fix style

src/components/Comments/index.module.scss

@@ -176,6 +176,7 @@
 
     & > .input {
       width: 100%;
+      height: 36px;
     }
   }
 

src/game_pages/detail/index.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '球局详情',
   navigationStyle: 'custom',
+  enableShareAppMessage: true,
 })

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);
-    }
-  }
-}

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((res) => {
-    //   useShareAppMessage(() => {
+      console.log(res, "res");
-    //     return {
+      return {
-    //       title: '分享',
+        title: "分享",
-    //       path: `/game_pages/detail/index?id=${id}&from=share`,
+        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() {
+    function handleSaveToLocal() {
-    //   Taro.saveImageToPhotosAlbum({
+      Taro.showToast({ title: "not yet", icon: "error" });
-    //     filePath: images[0],
+      return;
-    //     success: () => {
+      Taro.saveImageToPhotosAlbum({
-    //       Taro.showToast({ title: '保存成功', icon: 'success' })
+        filePath: "",
-    //     },
+        success: () => {
-    //     fail: () => {
+          Taro.showToast({ title: "保存成功", icon: "success" });
-    //       Taro.showToast({ title: '保存失败', icon: 'none' })
+        },
-    //     },
+        fail: () => {
-    //   })
+          Taro.showToast({ title: "保存失败", icon: "none" });
-    // }
+        },
+      });
+    }
 
     return (
       <CommonPopup
@@ -212,8 +218,24 @@ const SharePopup = forwardRef(
         hideFooter
         style={{ minHeight: "100px" }}
       >
-        <View catchMove className="share-popup-content">
+        <View className={styles.shareContainer}>
-          分享卡片
+          <View catchMove className={styles.title}>
+            分享卡片
+          </View>
+          <View className={styles.shareItems}>
+            <Button
+              className={classnames(styles.button, styles.share)}
+              openType="share"
+            >
+              分享到聊天
+            </Button>
+            <Button
+              className={classnames(styles.button, styles.save)}
+              onClick={handleSaveToLocal}
+            >
+              保存到本地
+            </Button>
+          </View>
         </View>
       </CommonPopup>
     );
@@ -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 false;
-    return max_substitute_players === current_substitute_count
-  }
-
-  return false
 }
 
 // 底部操作栏
 function StickyButton(props) {
-  const { handleShare, handleJoinGame, detail, onStatusChange, handleAddComment, getCommentCount } = props;
+  const {
-  const [commentCount, setCommentCount] = useState(0)
+    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 } =
+  const {
-    detail || {};
+    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)
+      setCommentCount(count);
-    })
+    });
-  }, [getCommentCount])
+  }, [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();
             }}
           >
             <Image
               className="sticky-bottom-bar-comment-icon"
               src={img.ICON_DETAIL_COMMENT_DARK}
             />
-            <Text className="sticky-bottom-bar-comment-text">{commentCount > 0 ? commentCount : '评论'}</Text>
+            <Text className="sticky-bottom-bar-comment-text">
+              {commentCount > 0 ? commentCount : "评论"}
+            </Text>
           </View>
         </View>
-        <View className={classnames("detail-main-action", available ? '' : 'disabled')}>
+        <View
+          className={classnames(
+            "detail-main-action",
+            available ? "" : "disabled"
+          )}
+        >
           <View
             style={is_organizer ? {} : { margin: "auto" }}
             className="sticky-bottom-bar-join-game"
@@ -563,7 +615,7 @@ function GameInfo(props) {
                 { latitude: c_latitude, longitude: c_longitude },
               ]}
               includePadding={{ left: 50, right: 50, top: 50, bottom: 50 }}
-              onError={() => { }}
+              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) {
         <View className="venue-screenshot-title">预定截图</View>
         <ScrollView scrollY className="venue-screenshot-scroll-view">
           <View className="venue-screenshot-image-list">
-            {venue_image_list?.length > 0 && venue_image_list.map((item) => {
+            {venue_image_list?.length > 0 &&
-              return (
+              venue_image_list.map((item) => {
-                <View
+                return (
-                  className="venue-screenshot-image-item"
+                  <View
-                  onClick={previewImage.bind(null, item.url)}
+                    className="venue-screenshot-image-item"
-                >
+                    onClick={previewImage.bind(null, item.url)}
-                  <Image
+                  >
-                    className="venue-screenshot-image-item-image"
+                    <Image
-                    mode="aspectFill"
+                      className="venue-screenshot-image-item-image"
-                    src={item.url}
+                      mode="aspectFill"
-                  />
+                      src={item.url}
-                </View>
+                    />
-              );
+                  </View>
-            })}
+                );
+              })}
           </View>
         </ScrollView>
       </CommonPopup>
@@ -763,8 +817,9 @@ function Participants(props) {
             <View
               className="participants-list-scroll-content"
               style={{
-                width: `${participants.length * 103 + (participants.length - 1) * 8
+                width: `${
-                  }px`,
+                  participants.length * 103 + (participants.length - 1) * 8
+                }px`,
               }}
             >
               {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) {
               )}
             </View>
           )}
-          <View className="organizer-actions-comment" onClick={() => handleAddComment()}>
+          <View
+            className="organizer-actions-comment"
+            onClick={() => handleAddComment()}
+          >
             <Image
               className="organizer-actions-comment-icon"
               src={img.ICON_DETAIL_COMMENT}
@@ -1106,8 +1164,8 @@ function Index() {
         fetchUserInfoById(res.data.publisher_id);
       }
     } catch (e) {
-      if (e.message === '球局不存在') {
+      if (e.message === "球局不存在") {
-        handleBack()
+        handleBack();
       }
     }
   };
@@ -1219,17 +1277,27 @@ function Index() {
           currentLocation={currentLocation}
           onUpdateUserInfo={onUpdateUserInfo}
           handleViewUserInfo={handleViewUserInfo}
-          handleAddComment={() => { commentRef.current && commentRef.current.addComment() }}
+          handleAddComment={() => {
+            commentRef.current && commentRef.current.addComment();
+          }}
+        />
+        <Comments
+          ref={commentRef}
+          game_id={Number(id)}
+          publisher_id={Number(detail.publisher_id)}
         />
-        <Comments ref={commentRef} game_id={Number(id)} publisher_id={Number(detail.publisher_id)} />
         {/* sticky bottom action bar */}
         <StickyButton
           handleShare={handleShare}
           handleJoinGame={handleJoinGame}
           detail={detail}
           onStatusChange={onStatusChange}
-          handleAddComment={() => { commentRef.current && commentRef.current.addComment() }}
+          handleAddComment={() => {
-          getCommentCount={commentRef.current && commentRef.current.getCommentCount}
+            commentRef.current && commentRef.current.addComment();
+          }}
+          getCommentCount={
+            commentRef.current && commentRef.current.getCommentCount
+          }
         />
         {/* share popup */}
         <SharePopup

src/game_pages/detail/style.module.scss

@@ -0,0 +1,24 @@
+.shareContainer {
+  .title {
+    padding: 20px;
+    color: #000;
+    text-align: center;
+    font-family: "PingFang SC";
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+  }
+
+  .shareItems {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 60px;
+
+    .button {
+      width: 140px;
+      height: 40px;
+    }
+  }
+}