feat: 球局详情管理 未完

src/components/GameManagePopup/index.module.scss

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 40px;
+
+  .button {
+    width: 100%;
+    padding: 20px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #000;
+    text-align: center;
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+
+    &:last-child {
+      border-top: 8px solid #f5f5f5;
+    }
+  }
+}

src/components/GameManagePopup/index.tsx

@@ -0,0 +1,145 @@
+import React, {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import CommonPopup from "../CommonPopup";
+import styles from "./index.module.scss";
+import detailService from "@/services/detailService";
+import { useUserInfo } from "@/store/userStore";
+
+const CancelPopup = forwardRef((props, ref) => {
+  const [visible, setVisible] = useState(false);
+  const onFinish = useRef(null);
+
+  useImperativeHandle(ref, () => ({
+    show: (onAct) => {
+      onFinish.current = onAct;
+      setVisible(true);
+    },
+  }));
+
+  function onClose() {
+    setVisible(false);
+  }
+  return (
+    <>
+      <CommonPopup
+        visible={visible}
+        showHeader={false}
+        hideFooter
+        zIndex={1001}
+        enableDragToClose={false}
+        onClose={onClose}
+      >
+        <View className={styles.container}></View>
+      </CommonPopup>
+    </>
+  );
+});
+
+export default forwardRef(function GameManagePopup(props, ref) {
+  const [visible, setVisible] = useState(false);
+  const [detail, setDetail] = useState({});
+  const onStatusChange = useRef(null);
+  const cancelRef = useRef(null);
+  const userInfo = useUserInfo();
+
+  useImperativeHandle(ref, () => ({
+    show: (gameDetail, onChange) => {
+      onStatusChange.current = onChange;
+      setDetail(gameDetail);
+      setVisible(true);
+    },
+  }));
+
+  function handleEditGame() {
+    Taro.navigateTo({
+      url: `/publish_pages/publishBall/index?gameId=${detail.id}`,
+    });
+    onClose()
+  }
+
+  const handleRepubGame = handleEditGame;
+
+  async function handleCancelGame() {
+    cancelRef.current.show(async (result) => {
+      if (result) {
+        try {
+          const res = await detailService.disbandGame({
+            game_id: detail.id,
+            settle_reason: result,
+          });
+          if (res.code === 0) {
+            Taro.showToast({ title: "活动取消成功" });
+            onStatusChange.current?.(true);
+          }
+        } catch (e) {
+          Taro.showToast({ title: e.message, icon: "error" });
+        } finally {
+          onClose();
+        }
+      }
+    });
+  }
+
+  async function handleQuitGame() {
+    try {
+      const res = await detailService.organizerQuit({
+        game_id: detail.id,
+        quit_reason: "组织者主动退出",
+      });
+      if (res.code === 0) {
+        Taro.showToast({ title: "活动退出成功" });
+        onStatusChange.current?.(true);
+      }
+    } catch (e) {
+      Taro.showToast({ title: e.message, icon: "error" });
+    } finally {
+      onClose();
+    }
+  }
+
+  function onClose() {
+    setVisible(false);
+  }
+
+  const hasJoin = (detail.participants || []).some(item => item.user.id === userInfo.id)
+
+  return (
+    <>
+      <CommonPopup
+        visible={visible}
+        showHeader={false}
+        hideFooter
+        zIndex={1001}
+        enableDragToClose={false}
+        onClose={onClose}
+      >
+        <View className={styles.container}>
+          <View className={styles.button} onClick={handleEditGame}>
+            编辑活动
+          </View>
+          <View className={styles.button} onClick={handleRepubGame}>
+            重新发布
+          </View>
+          <View className={styles.button} onClick={handleCancelGame}>
+            取消活动
+          </View>
+          {!hasJoin && (
+            <View className={styles.button} onClick={handleQuitGame}>
+              退出活动
+            </View>
+          )}
+          <View className={styles.button} onClick={onClose}>
+            取消
+          </View>
+        </View>
+      </CommonPopup>
+      <CancelPopup ref={cancelRef} />
+    </>
+  );
+});

src/components/NTRPEvaluatePopup/index.tsx

@@ -91,7 +91,7 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
           <Button onClick={handleEvaluate}>开始评估</Button>
         </View>
       </CommonPopup>
-      {showEntry && props.children}
+      {showEntry ? props.children : ''}
     </>
   );
 };

src/components/UploadCover/upload-source-popup.scss

@@ -31,7 +31,8 @@
   }
 
   .upload-popup-scroll-view {
-    max-height: calc(100vh - 260px);
+    // max-height: calc(100vh - 260px);
+    height: 440px;
     overflow-y: auto;
 
     .upload-popup-image-list {
@@ -124,7 +125,7 @@
     display: flex;
     width: 100%;
     height: 62px;
-    padding: 8px 10px 10px 10px;
+    padding: 8px 10px 50px 10px;
     box-sizing: border-box;
     justify-content: center;
     align-items: flex-start;

src/components/UploadCover/upload-source-popup.tsx

@@ -121,6 +121,7 @@ export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
           <ScrollView
             scrollY
             className="upload-popup-scroll-view"
+            // style={{ height: images.length / 3 *  }}
           >
             {images.length > 0 ? (
             <View className="upload-popup-image-list">

src/components/index.ts

@@ -17,6 +17,7 @@ import withAuth from "./Auth";
 import { CustomPicker, PopupPicker } from "./Picker";
 import NTRPEvaluatePopup from "./NTRPEvaluatePopup";
 import RefundPopup from "./refundPopup";
+import GameManagePopup from './GameManagePopup'
 
 export {
   ActivityTypeSwitch,
@@ -39,4 +40,5 @@ export {
   PopupPicker,
   NTRPEvaluatePopup,
   RefundPopup,
+  GameManagePopup,
 };

src/game_pages/detail/index.scss

@@ -807,7 +807,7 @@
     }
 
     &-organizer-recommend-games {
-      padding: 24px 15px 0;
+      padding: 24px 15px 10px;
 
       .organizer-title {
         overflow: hidden;
@@ -1122,27 +1122,47 @@
         }
       }
 
-      &-join-game {
+      .detail-main-action {
         display: flex;
         align-items: center;
         height: 52px;
         width: auto;
-        padding: 2px 6px;
+        // padding: 2px 6px;
         box-sizing: border-box;
         justify-content: center;
         gap: 12px;
         flex: 1 0 0;
         border-radius: 16px;
-        border: 1px solid rgba(0, 0, 0, 0.06);
+        // border: 1px solid rgba(0, 0, 0, 0.06);
         background: #fff;
+        overflow: hidden;
 
-        &-price {
+        .sticky-bottom-bar-join-game {
-          font-family: "PoetsenOne";
+          margin-left: auto;
-          font-size: 28px;
+          width: 151px;
-          font-weight: 400;
+          display: flex;
-          line-height: 24px; /* 114.286% */
+          align-items: center;
-          letter-spacing: -0.56px;
+          justify-content: center;
-          color: #000;
+
+          &-price {
+            font-family: "PoetsenOne";
+            font-size: 28px;
+            font-weight: 400;
+            line-height: 24px; /* 114.286% */
+            letter-spacing: -0.56px;
+            color: #000;
+          }
+        }
+
+        .game_manage {
+          width: 100px;
+          margin-left: auto;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #000;
+          color: #fff;
         }
       }
     }

src/game_pages/detail/index.tsx

@@ -16,7 +16,12 @@ import Taro, {
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 // 导入API服务
-import { CommonPopup, withAuth, NTRPEvaluatePopup } from "@/components";
+import {
+  CommonPopup,
+  withAuth,
+  NTRPEvaluatePopup,
+  GameManagePopup,
+} from "@/components";
 import {
   EvaluateType,
   SceneType,
@@ -210,7 +215,7 @@ const SharePopup = forwardRef(
         </View>
       </CommonPopup>
     );
-  },
+  }
 );
 
 function navto(url) {
@@ -219,20 +224,18 @@ function navto(url) {
   });
 }
 
+function toast(message) {
+  Taro.showToast({ title: message, icon: "none" });
+}
+
 // 底部操作栏
 function StickyButton(props) {
-  const { handleShare, handleJoinGame, detail } = props;
+  const { handleShare, handleJoinGame, detail, onStatusChange } = props;
   const ntrpRef = useRef(null);
-  // const userInfo = useUserInfo();
+  const { id, price, user_action_status, end_time, is_organizer } =
-  // const { id } = userInfo;
+    detail || {};
-  const {
+
-    id,
+  const gameManageRef = useRef();
-    publisher_id,
-    match_status,
-    price,
-    user_action_status,
-    end_time,
-  } = detail || {};
 
   function handleSelfEvaluate() {
     // TODO: 打开自评弹窗
@@ -240,13 +243,14 @@ function StickyButton(props) {
   }
 
   function generateTextAndAction(
-    user_action_status: null | { [key: string]: boolean },
+    user_action_status: null | { [key: string]: boolean }
   ): undefined | { text: string | React.FC; action: () => void } {
     if (!user_action_status) {
       return;
     }
+    const displayPrice = is_organizer ? 0 : price;
     // user_action_status.can_assess = true;
-    user_action_status.can_join = true;
+    // user_action_status.can_join = true;
     const {
       can_assess,
       can_join,
@@ -260,27 +264,27 @@ function StickyButton(props) {
       dayjs(end_time).isBefore(dayjs())
     ) {
       return {
-        text: "球局已结束，查看其他球局",
+        text: "活动已结束",
-        action: navto.bind(null, "/game_pages/list/index"),
+        action: () => toast("活动已结束"),
       };
     }
     if (waiting_start) {
       return {
-        text: "等待开始, 查看更多球局",
+        text: () => <Text>¥{displayPrice} 已加入</Text>,
-        action: navto.bind(null, "/game_pages/list/index"),
+        action: () => toast("已加入"),
       };
     } else if (is_substituting) {
       return {
-        text: "候补中，查看其他球局",
+        text: () => <Text>¥{displayPrice} 已加入候补</Text>,
-        action: navto.bind(null, "/game_pages/list/index"),
+        action: () => toast("已加入候补"),
       };
     } else if (can_pay) {
       return {
-        text: "继续支付",
+        text: () => <Text>¥{price} 继续支付</Text>,
         action: async () => {
           const res = await OrderService.getUnpaidOrder(id);
           if (res.code === 0) {
-            Taro.navigateTo({
+            navto({
               url: `/order_pages/orderDetail/index?id=${res.data.order_info.order_id}`,
             });
           }
@@ -288,21 +292,13 @@ function StickyButton(props) {
       };
     } else if (can_substitute) {
       return {
-        text: "立即候补",
+        text: () => <Text>¥{displayPrice} 我要候补</Text>,
         action: handleJoinGame,
       };
     } else if (can_join) {
       return {
         text: () => {
-          return (
+          return <Text>¥{displayPrice} 立即加入</Text>;
-            <>
-              <Text>🎾</Text>
-              <Text>立即加入</Text>
-              <View className="game-price">
-                <Text>¥ {price}</Text>
-              </View>
-            </>
-          );
         },
         action: handleJoinGame,
       };
@@ -315,7 +311,7 @@ function StickyButton(props) {
             scene={SceneType.DETAIL}
             displayCondition={DisplayConditionType.AUTO}
           >
-            <Text>NTRP自评</Text>
+            <Text>¥{displayPrice} 立即加入</Text>
           </NTRPEvaluatePopup>
         ),
         action: handleSelfEvaluate,
@@ -341,36 +337,49 @@ function StickyButton(props) {
     };
   }
 
-  // const role = Number(publisher_id) === id ? "ownner" : "visitor";
-
   return (
-    <View className="sticky-bottom-bar">
+    <>
-      <View className="sticky-bottom-bar-share-and-comment">
+      <View className="sticky-bottom-bar">
-        <View className="sticky-bottom-bar-share" onClick={handleShare}>
+        <View className="sticky-bottom-bar-share-and-comment">
-          <Image
+          <View className="sticky-bottom-bar-share" onClick={handleShare}>
-            className="sticky-bottom-bar-share-icon"
+            <Image
-            src={img.ICON_DETAIL_SHARE}
+              className="sticky-bottom-bar-share-icon"
-          />
+              src={img.ICON_DETAIL_SHARE}
-          <Text className="sticky-bottom-bar-share-text">分享</Text>
+            />
+            <Text className="sticky-bottom-bar-share-text">分享</Text>
+          </View>
+          <View className="sticky-bottom-bar-share-and-comment-separator" />
+          <View
+            className="sticky-bottom-bar-comment"
+            onClick={() => {
+              Taro.showToast({ title: "To be continued", icon: "none" });
+            }}
+          >
+            <Image
+              className="sticky-bottom-bar-comment-icon"
+              src={img.ICON_DETAIL_COMMENT_DARK}
+            />
+            <Text className="sticky-bottom-bar-comment-text">32</Text>
+          </View>
         </View>
-        <View className="sticky-bottom-bar-share-and-comment-separator" />
+        <View className="detail-main-action">
-        <View
+          <View className="sticky-bottom-bar-join-game" onClick={action}>
-          className="sticky-bottom-bar-comment"
+            <ActionText />
-          onClick={() => {
+          </View>
-            Taro.showToast({ title: "To be continued", icon: "none" });
+          {is_organizer && (
-          }}
+            <View
-        >
+              className="game_manage"
-          <Image
+              onClick={() => {
-            className="sticky-bottom-bar-comment-icon"
+                gameManageRef.current.show(detail, onStatusChange);
-            src={img.ICON_DETAIL_COMMENT_DARK}
+              }}
-          />
+            >
-          <Text className="sticky-bottom-bar-comment-text">32</Text>
+              管理
+            </View>
+          )}
         </View>
       </View>
-      <View className="sticky-bottom-bar-join-game" onClick={action}>
+      <GameManagePopup ref={gameManageRef} />
-        <ActionText />
+    </>
-      </View>
-    </View>
   );
 }
 
@@ -612,10 +621,11 @@ function VenueInfo(props) {
 }
 
 function genNTRPRequirementText(min, max) {
+  console.log(min, max, "ntrp");
   if (min && max && min !== max) {
     return `${min} - ${max} 之间`;
-  } else if (max === 1) {
+  } else if (max === "1") {
-    return "没有要求";
+    return "无要求";
   } else if (max) {
     return `${max} 以上`;
   }
@@ -675,10 +685,9 @@ function Participants(props) {
     user_action_status;
   const showApplicationEntry =
     [can_pay, can_substitute, is_substituting, waiting_start].every(
-      (item) => !item,
+      (item) => !item
     ) && can_join;
   const leftCount = max_participants - participant_count;
-  const organizer_id = Number(detail.publisher_id);
   return (
     <View className="detail-page-content-participants">
       <View className="participants-title">
@@ -694,7 +703,6 @@ function Participants(props) {
               className="participants-list-application"
               onClick={() => {
                 handleJoinGame();
-                // Taro.showToast({ title: "To be continued", icon: "none" });
               }}
             >
               <Image
@@ -711,11 +719,14 @@ function Participants(props) {
             <View
               className="participants-list-scroll-content"
               style={{
-                width: `${participants.length * 103 + (participants.length - 1) * 8}px`,
+                width: `${
+                  participants.length * 103 + (participants.length - 1) * 8
+                }px`,
               }}
             >
               {participants.map((participant) => {
                 const {
+                  is_organizer,
                   user: {
                     avatar_url,
                     nickname,
@@ -723,15 +734,17 @@ function Participants(props) {
                     id: participant_user_id,
                   },
                 } = participant;
-                const role =
+                const role = is_organizer ? "组织者" : "参与者";
-                  participant_user_id === organizer_id ? "组织者" : "参与者";
                 return (
                   <View key={participant.id} className="participants-list-item">
                     <Image
                       className="participants-list-item-avatar"
                       mode="aspectFill"
                       src={avatar_url}
-                      onClick={handleViewUserInfo.bind(null, participant_user_id)}
+                      onClick={handleViewUserInfo.bind(
+                        null,
+                        participant_user_id
+                      )}
                     />
                     <Text className="participants-list-item-name">
                       {nickname || "未知"}
@@ -813,7 +826,12 @@ function genRecommendGames(games, location, avatar) {
       avatar,
       applications: max_players,
       checkedApplications: current_players,
-      levelRequirements: skill_level_max !== skill_level_min ? `${skill_level_min || '-'}至${skill_level_max || '-'}` : skill_level_min === 1 ? '无要求' : `${skill_level_min}以上`,
+      levelRequirements:
+        skill_level_max !== skill_level_min
+          ? `${skill_level_min || "-"}至${skill_level_max || "-"}`
+          : skill_level_min === "1"
+          ? "无要求"
+          : `${skill_level_min}以上`,
       playType: play_type,
     };
   });
@@ -862,9 +880,9 @@ function OrganizerInfo(props) {
   };
 
   function handleViewGame(gameId) {
-    Taro.navigateTo({
+    navto({
-      url: `/game_pages/detail/index?id=${gameId}&from=current`
+      url: `/game_pages/detail/index?id=${gameId}&from=current`,
-    })
+    });
   }
 
   return (
@@ -875,7 +893,12 @@ function OrganizerInfo(props) {
       </View>
       {/* organizer avatar and name */}
       <View className="organizer-avatar-name">
-        <Image className="organizer-avatar-name-avatar" src={avatar_url} mode="aspectFill" onClick={handleViewUserInfo.bind(null, id)} />
+        <Image
+          className="organizer-avatar-name-avatar"
+          src={avatar_url}
+          mode="aspectFill"
+          onClick={handleViewUserInfo.bind(null, id)}
+        />
         <View className="organizer-avatar-name-message">
           <Text className="organizer-avatar-name-message-name">{nickname}</Text>
           <View className="organizer-avatar-name-message-stats">
@@ -914,66 +937,79 @@ function OrganizerInfo(props) {
         </View>
       </View>
       {/* recommend games by organizer */}
-      <View className="organizer-recommend-games">
+      {recommendGames.length > 0 && (
-        <View className="organizer-recommend-games-title" onClick={handleViewUserInfo.bind(null, id)}>
+        <View className="organizer-recommend-games">
-          <Text>TA的更多活动</Text>
+          <View
-          <Image
+            className="organizer-recommend-games-title"
-            className="organizer-recommend-games-title-arrow"
+            onClick={handleViewUserInfo.bind(null, id)}
-            src={img.ICON_DETAIL_ARROW_RIGHT}
+          >
-          />
+            <Text>TA的更多活动</Text>
-        </View>
+            <Image
-        <ScrollView className="recommend-games-list" scrollX>
+              className="organizer-recommend-games-title-arrow"
-          <View className="recommend-games-list-content">
+              src={img.ICON_DETAIL_ARROW_RIGHT}
-            {recommendGames.map((game, index) => (
+            />
-              <View key={index} className="recommend-games-list-item" onClick={handleViewGame.bind(null, game.id)}>
+          </View>
-                {/* game title */}
+          <ScrollView className="recommend-games-list" scrollX>
-                <View className="recommend-games-list-item-title">
+            <View className="recommend-games-list-content">
-                  <Text>{game.title}</Text>
+              {recommendGames.map((game, index) => (
-                  <Image
+                <View
-                    className="recommend-games-list-item-title-arrow"
+                  key={index}
-                    src={img.ICON_DETAIL_ARROW_RIGHT}
+                  className="recommend-games-list-item"
-                  />
+                  onClick={handleViewGame.bind(null, game.id)}
-                </View>
+                >
-                {/* game time and range */}
+                  {/* game title */}
-                <View className="recommend-games-list-item-time-range">
+                  <View className="recommend-games-list-item-title">
-                  <Text>{game.time}</Text>
+                    <Text>{game.title}</Text>
-                  <Text>{game.timeLength}</Text>
+                    <Image
-                </View>
+                      className="recommend-games-list-item-title-arrow"
-                {/* game location、vunue、distance */}
+                      src={img.ICON_DETAIL_ARROW_RIGHT}
-                <View className="recommend-games-list-item-location-venue-distance">
+                    />
-                  <Text>{game.venue}</Text>
+                  </View>
-                  <Text>·</Text>
+                  {/* game time and range */}
-                  <Text>{game.venueType}</Text>
+                  <View className="recommend-games-list-item-time-range">
-                  <Text>·</Text>
+                    <Text>{game.time}</Text>
-                  <Text>{game.distance}</Text>
+                    <Text>{game.timeLength}</Text>
-                </View>
+                  </View>
-                {/* organizer avatar、applications、level requirements、play type */}
+                  {/* game location、vunue、distance */}
-                <View className="recommend-games-list-item-addon">
+                  <View className="recommend-games-list-item-location-venue-distance">
-                  <Image
+                    <Text>{game.venue}</Text>
-                    className="recommend-games-list-item-addon-avatar"
+                    <Text>·</Text>
-                    mode="aspectFill"
+                    <Text>{game.venueType}</Text>
-                    src={game.avatar}
+                    <Text>·</Text>
-                    onClick={(e) => { e.stopPropagation(); handleViewUserInfo(id) }}
+                    <Text>{game.distance}</Text>
-                  />
+                  </View>
-                  <View className="recommend-games-list-item-addon-message">
+                  {/* organizer avatar、applications、level requirements、play type */}
-                    <View className="recommend-games-list-item-addon-message-applications">
+                  <View className="recommend-games-list-item-addon">
-                      <Text>
+                    <Image
-                        报名人数 {game.checkedApplications}/{game.applications}
+                      className="recommend-games-list-item-addon-avatar"
-                      </Text>
+                      mode="aspectFill"
-                    </View>
+                      src={game.avatar}
-                    <View className="recommend-games-list-item-addon-message-level-requirements">
+                      onClick={(e) => {
-                      <Text>{game.levelRequirements}</Text>
+                        e.stopPropagation();
-                    </View>
+                        handleViewUserInfo(id);
-                    <View className="recommend-games-list-item-addon-message-play-type">
+                      }}
-                      <Text>{game.playType}</Text>
+                    />
+                    <View className="recommend-games-list-item-addon-message">
+                      <View className="recommend-games-list-item-addon-message-applications">
+                        <Text>
+                          报名人数 {game.checkedApplications}/
+                          {game.applications}
+                        </Text>
+                      </View>
+                      <View className="recommend-games-list-item-addon-message-level-requirements">
+                        <Text>{game.levelRequirements}</Text>
+                      </View>
+                      <View className="recommend-games-list-item-addon-message-play-type">
+                        <Text>{game.playType}</Text>
+                      </View>
                     </View>
                   </View>
                 </View>
-              </View>
+              ))}
-            ))}
+            </View>
-          </View>
+          </ScrollView>
-        </ScrollView>
+        </View>
-      </View>
+      )}
     </View>
   );
 }
@@ -987,6 +1023,9 @@ function Index() {
   const { id, from } = params;
   const [userInfo, setUserInfo] = useState({}); // 组织者的userInfo
   const { fetchUserInfo } = useUserActions(); // 获取登录用户的userInfo
+  const myInfo = useUserInfo();
+
+  const isMyOwn = userInfo.id === myInfo.id;
 
   const sharePopupRef = useRef<any>(null);
 
@@ -1031,7 +1070,6 @@ function Index() {
   async function fetchUserInfoById(user_id) {
     const userDetailInfo = await LoginService.getUserInfoById(user_id);
     if (userDetailInfo.code === 0) {
-      // console.log(userDetailInfo.data);
       setUserInfo(userDetailInfo.data);
     }
   }
@@ -1040,12 +1078,26 @@ function Index() {
     sharePopupRef.current.show();
   }
 
-  const handleJoinGame = () => {
+  const handleJoinGame = async () => {
-    Taro.navigateTo({
+    if (isMyOwn) {
+      const res = await DetailService.organizerJoin(Number(id));
+      if (res.code === 0) {
+        toast("加入成功");
+        fetchDetail();
+      }
+      return;
+    }
+    navto({
       url: `/order_pages/orderDetail/index?gameId=${id}`,
     });
   };
 
+  function onStatusChange(result) {
+    if (result) {
+      fetchDetail();
+    }
+  }
+
   function handleBack() {
     const pages = Taro.getCurrentPages();
     if (pages.length <= 1) {
@@ -1058,9 +1110,9 @@ function Index() {
   }
 
   function handleViewUserInfo(userId) {
-    Taro.navigateTo({
+    navto({
-       url: `/user_pages/other/index?userid=${userId}`
+      url: `/user_pages/other/index?userid=${userId}`,
-    })
+    });
   }
 
   console.log("detail", detail);
@@ -1093,7 +1145,11 @@ function Index() {
       {/* content */}
       <View className="detail-page-content">
         {/* avatar and tags */}
-        <GameTags detail={detail} userInfo={userInfo} handleViewUserInfo={handleViewUserInfo} />
+        <GameTags
+          detail={detail}
+          userInfo={userInfo}
+          handleViewUserInfo={handleViewUserInfo}
+        />
         {/* title */}
         <View className="detail-page-content-title">
           <Text className="detail-page-content-title-text">{detail.title}</Text>
@@ -1105,7 +1161,11 @@ function Index() {
         {/* gameplay requirements */}
         <GamePlayAndRequirement detail={detail} />
         {/* participants */}
-        <Participants detail={detail} handleJoinGame={handleJoinGame} handleViewUserInfo={handleViewUserInfo} />
+        <Participants
+          detail={detail}
+          handleJoinGame={handleJoinGame}
+          handleViewUserInfo={handleViewUserInfo}
+        />
         {/* supplemental notes */}
         <SupplementalNotes detail={detail} />
         {/* organizer and recommend games by organizer */}
@@ -1121,6 +1181,7 @@ function Index() {
           handleShare={handleShare}
           handleJoinGame={handleJoinGame}
           detail={detail}
+          onStatusChange={onStatusChange}
         />
         {/* share popup */}
         <SharePopup

src/order_pages/orderList/index.tsx

@@ -50,7 +50,7 @@ function generateTimeMsg(game_info) {
           : startTime.format("YYYY-MM-DD")}
       </Text>
       <Text>({DayOfWeekMap.get(dayofWeek)})</Text>
-      <Text>{startTime.format('ah')}点</Text>
+      <Text>{startTime.format("ah")}点</Text>
       <Text>{gameLength}</Text>
     </>
   );
@@ -59,7 +59,7 @@ function generateTimeMsg(game_info) {
 const OrderList = () => {
   const [list, setList] = useState<any[][]>([]);
   const [total, setTotal] = useState(0);
-  const refundRef = useRef(null)
+  const refundRef = useRef(null);
 
   const end = list.length * PAGESIZE >= total;
 
@@ -78,7 +78,7 @@ const OrderList = () => {
       setTotal(res.data.count);
       setList((prev) => {
         const newList = [...prev];
-        const index = page - 1
+        const index = page - 1;
         newList.splice(
           index,
           clear ? newList.length - index : 1,
@@ -121,53 +121,49 @@ const OrderList = () => {
   }
 
   async function handleDeleteOrder(item) {
-    const { id: order_id } = item
+    const { id: order_id } = item;
     // TODO：删除订单,刷新这一页，然后后面的全清除掉
     const onCancel = () => {
-        Dialog.close("cancelOrder");
+      Dialog.close("cancelOrder");
-      };
+    };
-      const onConfirm = async () => {
+    const onConfirm = async () => {
-        try {
+      try {
-          const deleteRes = await orderService.deleteOrder({
+        const deleteRes = await orderService.deleteOrder({
-            order_id,
+          order_id,
-          });
+        });
-          if (deleteRes.code !== 0) {
+        if (deleteRes.code !== 0) {
-            throw new Error(deleteRes.message);
+          throw new Error(deleteRes.message);
-          }
-          getOrders(item.page);
-          Taro.showToast({
-            title: "删除成功",
-            icon: "none",
-          })
-        } catch (e) {
-          Taro.showToast({
-            title: e.message,
-            icon: "error",
-          });
-        } finally {
-          Dialog.close("cancelOrder");
         }
-      };
+        getOrders(item.page);
+        Taro.showToast({
+          title: "删除成功",
+          icon: "none",
+        });
+      } catch (e) {
+        Taro.showToast({
+          title: e.message,
+          icon: "error",
+        });
+      } finally {
+        Dialog.close("cancelOrder");
+      }
+    };
     Dialog.open("cancelOrder", {
       title: "确定删除订单吗？",
       content: "删除订单后，您将无法恢复订单。请确认是否继续取消？",
-        footer: (
+      footer: (
-          <View className={styles.dialogFooter}>
+        <View className={styles.dialogFooter}>
-            <Button className={styles.cancel} onClick={onCancel}>
+          <Button className={styles.cancel} onClick={onCancel}>
-              取消
+            取消
-            </Button>
+          </Button>
-            <Button
+          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
-              className={styles.confirm}
+            确认
-              type="primary"
+          </Button>
-              onClick={onConfirm}
+        </View>
-            >
+      ),
-              确认
+      onConfirm,
-            </Button>
+      onCancel,
-          </View>
+    });
-        ),
-        onConfirm,
-        onCancel,
-    })
   }
 
   async function handleCancelOrder(item) {
@@ -188,7 +184,7 @@ const OrderList = () => {
         Taro.showToast({
           title: "取消成功",
           icon: "none",
-        })
+        });
       } catch (e) {
         Taro.showToast({
           title: e.message,
@@ -206,11 +202,7 @@ const OrderList = () => {
           <Button className={styles.cancel} onClick={onCancel}>
             取消
           </Button>
-          <Button
+          <Button className={styles.confirm} type="primary" onClick={onConfirm}>
-            className={styles.confirm}
-            type="primary"
-            onClick={onConfirm}
-          >
             确认
           </Button>
         </View>
@@ -220,13 +212,13 @@ const OrderList = () => {
     });
   }
 
-  function handleQuit (item) {
+  function handleQuit(item) {
     if (refundRef.current) {
       refundRef.current.show(item, (result) => {
         if (result) {
-          getOrders(item.page)
+          getOrders(item.page);
         }
-      })
+      });
     }
   }
 
@@ -249,7 +241,9 @@ const OrderList = () => {
       >
         {/* <View className={styles.bg} /> */}
         {list.flat().map((item) => {
-          const unPay = item.order_status === OrderStatus.PENDING && item.cancel_type === CancelType.NONE;
+          const unPay =
+            item.order_status === OrderStatus.PENDING &&
+            item.cancel_type === CancelType.NONE;
 
           const {
             game_info: {

src/services/detailService.ts

@@ -92,10 +92,8 @@ export interface UpdateLocationRes {
   city: string;
   district: string;
 }
-
-// 发布球局类
 class GameDetailService {
-  // 用户登录
+  // 查询球局详情
   async getDetail(id: number): Promise<ApiResponse<GameData>> {
     return httpService.post(
       "/games/detail",
@@ -114,6 +112,27 @@ class GameDetailService {
       showLoading: true,
     });
   }
+
+  // 组织者加入球局
+  async organizerJoin(game_id: number): Promise<ApiResponse<any>> {
+    return httpService.post("/games/organizer_join", { game_id }, {
+      showLoading: true,
+    });
+  }
+
+  // 组织者退出球局
+  async organizerQuit(req: { game_id: number, quit_reason: string }): Promise<ApiResponse<any>> {
+    return httpService.post("/games/organizer_quit", req, {
+      showLoading: true,
+    });
+  }
+
+  // 组织者解散球局
+  async disbandGame(req: { game_id: number, settle_reason: string }): Promise<ApiResponse<any>> {
+    return httpService.post("/games/settle_game", req, {
+      showLoading: true,
+    });
+  }
 }
 
 // 导出认证服务实例