yingsa/miniprogram/pages/match/challenge-detail/index.wxml

<!--挑战赛详情页面-->
<view class="page-container" catchtap="stopPropagation">
  <!-- 加载中 -->
  <view class="loading-container" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>

  <!-- 比赛信息 -->
  <view class="match-info" wx:if="{{!loading && matchInfo}}">
    <!-- 比赛标题 -->
    <view class="match-header">
      <text class="match-title">{{matchInfo.name}}</text>
      <view class="match-status status-{{matchInfo.status}}">
        <text wx:if="{{matchInfo.status === 0}}">待接受</text>
        <text wx:elif="{{matchInfo.status === 1}}">进行中</text>
        <text wx:elif="{{matchInfo.status === 2}}">已结束</text>
        <text wx:elif="{{matchInfo.status === 3}}">已取消</text>
      </view>
    </view>

    <!-- 对手信息 -->
    <view class="opponent-section">
      <view class="opponent-card" wx:if="{{matchInfo.challenger}}">
        <view class="opponent-label">挑战者</view>
        <view class="opponent-info">
          <image
            class="opponent-avatar"
            src="{{challengerAvatarSrc}}"
            mode="aspectFill"
            binderror="onAvatarError"
            data-role="challenger"
          ></image>
          <view class="opponent-details">
            <text class="opponent-name">{{matchInfo.challenger.realName}}</text>
            <view class="opponent-meta">
              <text class="meta-tag meta-level">Lv{{matchInfo.challenger.level}}</text>
              <text class="meta-tag meta-power">战力 {{matchInfo.challenger.powerScore}}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="vs-divider">
        <text>VS</text>
      </view>

      <view class="opponent-card" wx:if="{{matchInfo.defender}}">
        <view class="opponent-label">被挑战者</view>
        <view class="opponent-info">
          <image
            class="opponent-avatar"
            src="{{defenderAvatarSrc}}"
            mode="aspectFill"
            binderror="onAvatarError"
            data-role="defender"
          ></image>
          <view class="opponent-details">
            <text class="opponent-name">{{matchInfo.defender.realName}}</text>
            <view class="opponent-meta">
              <text class="meta-tag meta-level">Lv{{matchInfo.defender.level}}</text>
              <text class="meta-tag meta-power">战力 {{matchInfo.defender.powerScore}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 比赛进度 -->
    <view class="match-progress" wx:if="{{matchInfo.games && matchInfo.games.length > 0}}">
      <view class="progress-title">比赛进度</view>
      <view class="game-item" wx:for="{{matchInfo.games}}" wx:key="id">
        <view class="game-score">
          <text class="score-label">比分：</text>
          <text class="score-value">{{item.player1Score !== null && item.player1Score !== undefined ? item.player1Score : 0}} : {{item.player2Score !== null && item.player2Score !== undefined ? item.player2Score : 0}}</text>
        </view>
        <view class="game-status">
          <text wx:if="{{item.status === 0}}">未开始</text>
          <text wx:elif="{{item.status === 1}}">进行中</text>
          <text wx:elif="{{item.status === 2 && item.confirmStatus === 0}}">等待确认</text>
          <text wx:elif="{{item.status === 2 && item.confirmStatus === 1}}">已确认</text>
          <text wx:elif="{{item.status === 2 && item.confirmStatus === 2}}">有争议</text>
        </view>
        <!-- 等待确认时显示提示信息 -->
        <view class="confirm-tip" wx:if="{{item.status === 2 && item.confirmStatus === 0 && canConfirmScore}}">
          <text class="tip-text">对方已提交比分，请确认</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" wx:if="{{canAccept || canReject || canSubmitScore || canConfirmScore}}">
      <!-- 待接受状态：显示接受/拒绝按钮 -->
      <block wx:if="{{canAccept || canReject}}">
        <button class="action-btn accept-btn" wx:if="{{canAccept}}" bindtap="acceptChallenge">接受挑战</button>
        <button class="action-btn reject-btn" wx:if="{{canReject}}" bindtap="rejectChallenge">拒绝挑战</button>
      </block>

      <!-- 进行中状态：显示填写比分按钮 -->
      <button class="action-btn submit-btn" wx:if="{{canSubmitScore}}" bindtap="openScoreModal">填写比分</button>

      <!-- 等待确认状态：显示确认比分按钮 -->
      <button class="action-btn confirm-btn" wx:if="{{canConfirmScore}}" bindtap="confirmScoreBtn">确认比分</button>
    </view>

    <!-- 无操作权限提示 -->
    <view class="no-action-tip" wx:if="{{!canAccept && !canReject && !canSubmitScore && !canConfirmScore && matchInfo.status === 0 && myRole === 'challenger'}}">
      <text class="tip-text">等待对方接受挑战...</text>
    </view>

    <!-- 被挑战者但无按钮时的提示 -->
    <view class="no-action-tip" wx:if="{{!canAccept && !canReject && !canSubmitScore && !canConfirmScore && matchInfo.status === 0 && myRole === 'defender'}}">
      <text class="tip-text">无法操作，请联系管理员</text>
    </view>
  </view>
</view>

<!-- 填写比分弹框 -->
<view class="score-modal" wx:if="{{showScoreModal}}" bindtap="closeScoreModal">
  <view class="score-modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">填写比分</text>
      <text class="modal-close" bindtap="closeScoreModal">×</text>
    </view>
    <view class="modal-body">
      <view class="score-input-group">
        <text class="input-label">我的比分</text>
        <input class="score-input" type="number" placeholder="请输入比分" value="{{myScore}}" bindinput="onMyScoreInput" />
      </view>
      <view class="score-input-group">
        <text class="input-label">对手比分</text>
        <input class="score-input" type="number" placeholder="请输入比分" value="{{opponentScore}}" bindinput="onOpponentScoreInput" />
      </view>
    </view>
    <view class="modal-footer">
      <button class="modal-btn cancel-btn" bindtap="closeScoreModal">取消</button>
      <button class="modal-btn submit-btn" bindtap="submitScore">提交</button>
    </view>
  </view>
</view>