1

src/game_pages/detail/components/Participants/index.tsx

@@ -73,6 +73,7 @@ export default function Participants(props) {
   }>({ show: () => {} });
   const userInfo = useUserInfo();
   const participants = detail.participants || [];
+  const substitute_members = detail.substitute_members || [];
   // const participants = Array(10)
   //   .fill(0)
   //   .map((_, index) => ({
@@ -92,6 +93,8 @@ export default function Participants(props) {
   const {
     participant_count,
     max_participants,
+    substitute_count,
+    max_substitute_players,
     user_action_status = {},
     start_time,
     price,
@@ -293,6 +296,13 @@ export default function Participants(props) {
   const { action = () => {} } = generateTextAndAction(user_action_status)!;
 
   const leftCount = max_participants - participant_count;
+  const leftSubstituteCount = (max_substitute_players || 0) - (substitute_count || 0);
+  const showSubstituteApplicationEntry =
+    [can_pay, can_join, is_substituting, waiting_start].every(
+      (item) => !item
+    ) &&
+    can_substitute &&
+    dayjs(start_time).isAfter(dayjs());
 
   return (
     <>
@@ -389,6 +399,98 @@ export default function Participants(props) {
           ""
         )}
       </View>
+      {/* 候补区域 */}
+      {max_substitute_players > 0 && (substitute_count > 0 || showSubstituteApplicationEntry) && (
+        <View className={styles["detail-page-content-participants"]}>
+          <View className={styles["participants-title"]}>
+            <Text>候补</Text>
+            <Text>·</Text>
+            <Text>{leftSubstituteCount > 0 ? `剩余空位 ${leftSubstituteCount}` : "已满员"}</Text>
+          </View>
+          <View className={styles["participants-list"]}>
+            {/* 候补申请入口 */}
+            {showSubstituteApplicationEntry && (
+              <View
+                className={styles["participants-list-application"]}
+                onClick={() => {
+                  action?.();
+                }}
+              >
+                <Image
+                  className={styles["participants-list-application-icon"]}
+                  src={img.ICON_DETAIL_APPLICATION_ADD}
+                />
+                <Text className={styles["participants-list-application-text"]}>
+                  申请候补
+                </Text>
+              </View>
+            )}
+            {/* 候补成员列表 */}
+            <ScrollView
+              refresherBackground="#FAFAFA"
+              className={classnames(
+                styles["participants-list-scroll"],
+                showSubstituteApplicationEntry ? styles.withApplication : ""
+              )}
+              scrollX
+            >
+              <View
+                className={styles["participants-list-scroll-content"]}
+                style={{
+                  width: `${
+                    Math.max(substitute_members.length, 1) * 103 + (Math.max(substitute_members.length, 1) - 1) * 8
+                  }px`,
+                }}
+              >
+                {substitute_members.map((substitute) => {
+                  const {
+                    is_organizer,
+                    user: {
+                      avatar_url,
+                      nickname,
+                      level,
+                      ntrp_level,
+                      id: substitute_user_id,
+                    },
+                  } = substitute;
+                  const role = is_organizer ? "组织者" : "参与者";
+                  // 优先使用 ntrp_level，如果没有则使用 level
+                  const ntrpValue = ntrp_level || level;
+                  // 格式化显示 NTRP，如果没有值则显示"初学者"
+                  const displayNtrp = ntrpValue
+                    ? formatNtrpDisplay(ntrpValue)
+                    : "初学者";
+                  return (
+                    <View
+                      key={substitute.id}
+                      className={styles["participants-list-item"]}
+                    >
+                      <Image
+                        className={styles["participants-list-item-avatar"]}
+                        mode="aspectFill"
+                        src={avatar_url}
+                        onClick={handleViewUserInfo.bind(
+                          null,
+                          substitute_user_id
+                        )}
+                      />
+                      <Text className={styles["participants-list-item-name"]}>
+                        {nickname || "未知"}
+                      </Text>
+                      <Text className={styles["participants-list-item-level"]}>
+                        {displayNtrp}
+                      </Text>
+                      <Text className={styles["participants-list-item-role"]}>
+                        {role}
+                      </Text>
+                    </View>
+                  );
+                })}
+              </View>
+            </ScrollView>
+          </View>
+        </View>
+      )}
       <NTRPEvaluatePopup type={EvaluateScene.detail} ref={ntrpRef} showGuide />
     </>
   );