feat: 球局状态操作done

src/components/GameManagePopup/index.module.scss

@@ -24,4 +24,89 @@
       border-top: 8px solid #f5f5f5;
     }
   }
+}
+
+.centerContainer {
+  overflow: hidden;
+  .title {
+    padding-top: 24px;
+    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;
+  }
+
+  .content {
+    padding: 24px 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .tips {
+      color: rgba(60, 60, 67, 0.60);
+      font-feature-settings: 'liga' off, 'clig' off;
+      font-family: "PingFang SC";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    }
+
+    .cancelReason {
+      width: 100%;
+      margin-top: 8px;
+      padding: 8px;
+      border-radius: 4px;
+      background: #F0F0F0;
+
+      .input {
+        width: 100%;
+        &:placeholder-shown {
+          color: rgba(60, 60, 67, 0.30);
+          font-feature-settings: 'liga' off, 'clig' off;
+          font-family: "PingFang SC";
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 44px;
+    border-top: 0.5px solid #CECECE;
+    background: #FFF;
+    margin-top: 2px;
+
+    .confirm, .cancel {
+      width: 50%;
+      height: 44px;
+      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;
+
+      &.cancel {
+        background-color: #000;
+        color: #fff;
+      }
+    }
+  }
 }

src/components/GameManagePopup/index.tsx

@@ -5,26 +5,56 @@ import React, {
   useRef,
 } from "react";
 import Taro from "@tarojs/taro";
-import { View } from "@tarojs/components";
+import { View, Text, Input } from "@tarojs/components";
 import CommonPopup from "../CommonPopup";
 import styles from "./index.module.scss";
-import detailService from "@/services/detailService";
+import detailService, { MATCH_STATUS } from "@/services/detailService";
 import { useUserInfo } from "@/store/userStore";
 
 const CancelPopup = forwardRef((props, ref) => {
+  const { detail } = props;
   const [visible, setVisible] = useState(false);
+  const [cancelReason, setCancelReason] = useState("");
   const onFinish = useRef(null);
+  const inputRef = useRef(null);
+
+  const { current_players, participants = [], publisher_id } = detail;
+  const realParticipants = participants
+    .filter((item) => item.status === "joined")
+    .map((item) => item.user.id);
+  const hasOtherJoin =
+    current_players > 1 ||
+    realParticipants.some((id) => id !== Number(publisher_id));
+  // const hasOtherJoin = true;
 
   useImperativeHandle(ref, () => ({
     show: (onAct) => {
       onFinish.current = onAct;
       setVisible(true);
+      setTimeout(() => {
+        inputRef.current.focus();
+      }, 0);
     },
   }));
 
   function onClose() {
     setVisible(false);
+    setCancelReason("");
   }
+
+  async function handleConfirm() {
+    if (!cancelReason) {
+      Taro.showToast({ title: "请输入取消原因", icon: "none" });
+      return;
+    }
+    try {
+      await onFinish.current(cancelReason);
+      onClose();
+    } catch (e) {
+      console.log(e, 1221);
+    }
+  }
+
   return (
     <>
       <CommonPopup
@@ -34,8 +64,42 @@ const CancelPopup = forwardRef((props, ref) => {
         zIndex={1002}
         enableDragToClose={false}
         onClose={onClose}
+        position="center"
+        style={{
+          width: hasOtherJoin ? "360px" : "300px",
+          borderRadius: "16px",
+        }}
       >
-        <View className={styles.container}></View>
+        <View className={styles.centerContainer}>
+          <View className={styles.title}>确定要取消活动吗？</View>
+          <View className={styles.content}>
+            <Text className={styles.tips}>
+              {hasOtherJoin
+                ? "已有球友报名，取消后将为他们自动退款"
+                : "有100+球友正在浏览您的球局哦～"}
+            </Text>
+            {hasOtherJoin && (
+              <View className={styles.cancelReason}>
+                <Input
+                  ref={inputRef}
+                  className={styles.input}
+                  placeholder="请输入取消理由"
+                  focus
+                  value={cancelReason}
+                  onInput={(e) => setCancelReason(e.detail.value)}
+                />
+              </View>
+            )}
+          </View>
+          <View className={styles.actions}>
+            <View className={styles.confirm} onClick={handleConfirm}>
+              确认取消
+            </View>
+            <View className={styles.cancel} onClick={onClose}>
+              再想想
+            </View>
+          </View>
+        </View>
       </CommonPopup>
     </>
   );
@@ -60,7 +124,7 @@ export default forwardRef(function GameManagePopup(props, ref) {
     Taro.navigateTo({
       url: `/publish_pages/publishBall/index?gameId=${detail.id}`,
     });
-    onClose()
+    onClose();
   }
 
   const handleRepubGame = handleEditGame;
@@ -79,11 +143,11 @@ export default forwardRef(function GameManagePopup(props, ref) {
           }
         } catch (e) {
           Taro.showToast({ title: e.message, icon: "error" });
-        } finally {
-          onClose();
+          return e;
         }
       }
     });
+    onClose();
   }
 
   async function handleQuitGame() {
@@ -107,7 +171,13 @@ export default forwardRef(function GameManagePopup(props, ref) {
     setVisible(false);
   }
 
-  const hasJoin = (detail.participants || []).some(item => item.user.id === userInfo.id)
+  const hasJoin = (detail.participants || [])
+    .filter((item) => item.status === "joined")
+    .some((item) => item.user.id === userInfo.id);
+
+  const finished = [MATCH_STATUS.FINISHED, MATCH_STATUS.CANCELED].includes(
+    detail.match_status
+  );
 
   return (
     <>
@@ -126,9 +196,11 @@ export default forwardRef(function GameManagePopup(props, ref) {
           <View className={styles.button} onClick={handleRepubGame}>
             重新发布
           </View>
-          <View className={styles.button} onClick={handleCancelGame}>
-            取消活动
-          </View>
+          {!finished && (
+            <View className={styles.button} onClick={handleCancelGame}>
+              取消活动
+            </View>
+          )}
           {hasJoin && (
             <View className={styles.button} onClick={handleQuitGame}>
               退出活动
@@ -139,7 +211,7 @@ export default forwardRef(function GameManagePopup(props, ref) {
           </View>
         </View>
       </CommonPopup>
-      <CancelPopup ref={cancelRef} />
+      <CancelPopup ref={cancelRef} detail={detail} />
     </>
   );
 });