style: fix style

2025-09-25 11:06:45 +08:00
parent cabba5d619
commit 16c7be700b
5 changed files with 168 additions and 104 deletions
--- a/src/components/Comments/index.module.scss
+++ b/src/components/Comments/index.module.scss
@@ -176,6 +176,7 @@

    & > .input {
      width: 100%;
+      height: 36px;
    }
  }

--- 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,
 })
--- 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);
-    }
-  }
-}
--- 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 (
      <CommonPopup
@@ -212,9 +218,25 @@ 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 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();
            }}
          >
            <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"
@@ -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,7 +697,8 @@ 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 &&
+              venue_image_list.map((item) => {
                return (
                  <View
                    className="venue-screenshot-image-item"
@@ -763,7 +817,8 @@ function Participants(props) {
            <View
              className="participants-list-scroll-content"
              style={{
-                width: `${participants.length * 103 + (participants.length - 1) * 8
+                width: `${
+                  participants.length * 103 + (participants.length - 1) * 8
                }px`,
              }}
            >
@@ -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 === '球局不存在') {
-        handleBack()
+      if (e.message === "球局不存在") {
+        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() }}
-          getCommentCount={commentRef.current && commentRef.current.getCommentCount}
+          handleAddComment={() => {
+            commentRef.current && commentRef.current.addComment();
+          }}
+          getCommentCount={
+            commentRef.current && commentRef.current.getCommentCount
+          }
        />
        {/* share popup */}
        <SharePopup
--- a/src/game_pages/detail/style.module.scss
+++ b/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;
+    }
+  }
+}