dapaijizhang3/pages/game/detail/detail.wxml

<!--牌局详情页-->
<custom-navbar title="{{navTitle}}" />

<!-- 跑马灯公告条 -->
<view class="marquee-container" style="margin-top: {{navbarHeight}}px;">
  <view class="marquee-icon">📢</view>
  <view class="marquee-content">
    <view class="marquee-text" animation="{{marqueeAnimation}}">
      {{announcement || '欢迎来到打牌记账，祝大家游戏愉快！'}}
    </view>
  </view>
</view>

<view class="container">
 

  <!-- 玩家卡片区域 -->
  <view class="players-section">
    <view class="section-header">
      <text class="section-title">玩家 ({{players.length}}人)</text>
      <text class="total-rounds" wx:if="{{totalRounds > 0}}">已进行 {{totalRounds}} 局</text>
    </view>

    <scroll-view class="players-scroll" scroll-x>
      <!-- 当前用户卡片（如果已加入） -->
      <block wx:for="{{players}}" wx:key="id">
        <view class="player-card my-card" wx:if="{{item.player_id === userInfo.id}}"
            bindtap="onPlayerTap" data-player="{{item}}">
          <image class="player-card-avatar" src="{{item.avatar_url || '/images/default-avatar.png'}}" mode="aspectFill" />
          <text class="player-card-nickname">{{item.nickname}}</text>
          <view class="player-card-score {{item.total_win_loss > 0 ? 'win' : item.total_win_loss < 0 ? 'lose' : ''}}">
            {{item.total_win_loss > 0 ? '+' : ''}}{{item.formatted_score}}
          </view>
          <text class="player-card-tag me-tag">我</text>
      </view>
      <view class="player-card {{item.is_host ? 'host-card' : ''}}"
            bindtap="onPlayerTap" data-player="{{item}}" wx:else>
        <image class="player-card-avatar" src="{{item.avatar_url || '/images/default-avatar.png'}}" mode="aspectFill" />
        <text class="player-card-nickname">{{item.nickname}}</text>
        <view class="player-card-score {{item.total_win_loss > 0 ? 'win' : item.total_win_loss < 0 ? 'lose' : ''}}">
          {{item.total_win_loss > 0 ? '+' : ''}}{{item.formatted_score}}
        </view>
        <text class="player-card-tag host-tag" wx:if="{{item.is_host}}">房主</text>
      </view>
      </block>
      

      <!-- 其他玩家卡片 -->
      

      <!-- 邀请按钮 -->
      <view class="player-card invite-card" wx:if="{{isInSession}}"
            bindtap="shareSession">
        <view class="invite-icon">+</view>
        <text class="invite-text">邀请</text>
      </view>
    </scroll-view>
  </view>

  <!-- 操作日志 -->
  <view class="logs-section">
    <view class="section-header">
      <text class="section-title">记分记录</text>
      <text class="log-count">共{{logs.length}}条</text>
    </view>

    <view class="logs-card card">
      <scroll-view class="logs-scroll" scroll-y scroll-top="{{logsScrollTop}}">
        <view class="log-item" wx:for="{{logs}}" wx:key="id">
          <view class="log-time">{{item.timeText}}</view>
          <!-- 记分事件 -->
          <view wx:if="{{item.type === 'transfer'}}" class="log-text">
            <text class="log-player-name {{item.from_nickname === userInfo.nickname ? 'self' : ''}}">{{item.from_nickname}}</text>
            <text class="log-action"> 付给 </text>
            <text class="log-player-name {{item.to_nickname === userInfo.nickname ? 'self' : ''}}">{{item.to_nickname}}</text>
            <text class="log-amount"> ￥{{item.amount}}</text>
          </view>
          <!-- 进入事件 -->
          <view wx:elif="{{item.type === 'join'}}" class="log-text">
            <text class="log-player-name {{item.player_nickname === userInfo.nickname ? 'self' : ''}}">{{item.player_nickname}}</text>
            <text class="log-action"> 进入了房间</text>
          </view>
          <!-- 退出事件 -->
          <view wx:elif="{{item.type === 'leave'}}" class="log-text">
            <text class="log-player-name {{item.player_nickname === userInfo.nickname ? 'self' : ''}}">{{item.player_nickname}}</text>
            <text class="log-action"> 退出了房间</text>
          </view>
          <!-- 设置桌位费事件 -->
          <view wx:elif="{{item.type === 'table_fee'}}" class="log-text">
            <text class="log-player-name {{item.player_nickname === userInfo.nickname ? 'self' : ''}}">{{item.player_nickname}}</text>
            <text class="log-action"> 设置了桌位费 </text>
            <text class="log-amount">￥{{item.amount}}</text>
          </view>
        </view>

        <view class="logs-empty" wx:if="{{logs.length === 0}}">
          <text class="empty-text">暂无操作记录</text>
        </view>

        <view class="logs-loadmore" wx:if="{{hasMoreLogs}}" bindtap="loadMoreLogs">
          <text>加载更多</text>
        </view>
      </scroll-view>
    </view>
  </view>
  <jdwx-ad type="banner"></jdwx-ad>
</view>

<!-- 底部固定操作按钮 -->
<view class="bottom-bar" wx:if="{{isInSession}}">
  <view class="bottom-actions">
    <view class="action-group">
      <view class="action-btn" bindtap="showExpenseModal">
        <text class="action-icon">💰</text>
        <text class="action-label">支出</text>
      </view>
      <view class="action-btn" bindtap="showSettingsModal">
        <text class="action-icon">⚙️</text>
        <text class="action-label">设置</text>
      </view>
    </view>
    <button class="settle-btn" bindtap="goToPlay">去结算</button>
  </view>
</view>

<!-- 玩家操作弹窗 -->
<view class="player-modal" wx:if="{{showPlayerModal}}">
  <view class="modal-mask" bindtap="closePlayerModal"></view>
  <view class="modal-content player-modal-content">
    <view class="modal-header">
      <view class="modal-title">玩家信息</view>
      <view class="close-btn" bindtap="closePlayerModal">×</view>
    </view>

    <view class="modal-body">
      <!-- 玩家信息展示 -->
      <view class="player-modal-info">
        <image class="modal-avatar" src="{{selectedPlayer.avatar_url || '/images/default-avatar.png'}}" mode="aspectFill" />
        <view class="modal-nickname">{{selectedPlayer.nickname}}</view>
        <view class="modal-score {{selectedPlayer.total_win_loss > 0 ? 'win' : selectedPlayer.total_win_loss < 0 ? 'lose' : ''}}">
          当前积分: {{selectedPlayer.total_win_loss > 0 ? '+' : ''}}{{selectedPlayer.total_win_loss || 0}}
        </view>
      </view>

      <!-- 自己的操作：返回 -->
      <view wx:if="{{selectedPlayer.player_id === userInfo.id}}" class="modal-actions">
        <button class="btn-secondary" bindtap="confirmLeaveSession">返回</button>
      </view>

      <!-- 其他玩家的操作：分数输入 -->
      <view wx:else class="modal-actions">
        <view class="score-input-section">
          <text class="input-label">记分：</text>
          <input class="score-input" type="digit" placeholder="输入分数" value="{{scoreInput}}" bindinput="onScoreInput" />

          <!-- 快捷输入按钮 -->
          <view class="quick-inputs">
            <view class="quick-btn" wx:for="{{quickInputs}}" wx:key="index" bindtap="quickInput" data-value="{{item}}">+{{item}}</view>
          </view>

          <button class="btn-primary" bindtap="submitScore">确认提交</button>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 支出弹窗 -->
<view class="expense-modal" wx:if="{{showExpenseModal}}">
  <view class="modal-mask" bindtap="closeExpenseModal"></view>
  <view class="modal-content">
    <view class="modal-header">
      <text class="modal-title">记录支出</text>
      <text class="close-btn" bindtap="closeExpenseModal">×</text>
    </view>

    <view class="modal-body">
      <view class="expense-list">
        <view class="expense-item" wx:for="{{otherPlayers}}" wx:key="id">
          <view class="expense-player">
            <image class="expense-avatar" src="{{item.avatar_url || '/images/default-avatar.png'}}" mode="aspectFill" />
            <text class="expense-nickname">{{item.nickname}}</text>
          </view>
          <input class="expense-input" type="digit" placeholder="金额"
                 data-index="{{index}}" bindinput="onExpenseInput" />
        </view>
      </view>

      <button class="btn-primary" bindtap="submitExpense">确认提交</button>
    </view>
  </view>
</view>

<!-- 设置弹窗 -->
<view class="settings-modal" wx:if="{{showSettingsModal}}">
  <view class="modal-mask" bindtap="closeSettingsModal"></view>
  <view class="modal-content">
    <view class="modal-header">
      <text class="modal-title">设置</text>
      <text class="close-btn" bindtap="closeSettingsModal">×</text>
    </view>

    <view class="modal-body">
      <!-- 语音播报开关 -->
      <view class="setting-section">
        <view class="setting-row">
          <text class="setting-label">语音播报</text>
          <switch class="setting-switch" checked="{{ttsEnabled}}" bindchange="onTtsToggle" color="#667eea" />
        </view>
      </view>

      <!-- 桌位费设置（仅房主） -->
      <view class="setting-section" wx:if="{{isHost}}">
        <text class="setting-label">桌位费</text>
        <input class="setting-input" type="number" placeholder="默认为0"
               value="{{tableFee}}" bindinput="onTableFeeInput" />
      </view>

      <!-- 快捷输入设置 -->
      <view class="setting-section">
        <view class="label-row-settings">
          <text class="setting-label">快捷输入设置</text>
          <text class="label-hint-settings">（所有玩家使用此设置）</text>
        </view>
        <view class="quick-settings-grid">
          <view class="quick-setting-item" wx:for="{{quickInputs}}" wx:key="index">
            <input class="quick-input-box" type="digit" placeholder="输入数值"
                   value="{{item}}" data-index="{{index}}" bindinput="onQuickInputChange" />
            <view class="remove-btn-settings" bindtap="deleteQuickInput" data-index="{{index}}">×</view>
          </view>
          <view class="add-btn-settings" bindtap="addQuickInput">
            <text class="add-icon-settings">+</text>
            <text class="add-text-settings">添加</text>
          </view>
        </view>
      </view>

      <button class="btn-primary" bindtap="saveSettings">保存设置</button>
    </view>
  </view>
</view>

<!-- 分享弹窗 -->
<view class="share-modal" wx:if="{{showShareModal}}">
  <view class="modal-mask" bindtap="closeShareModal"></view>
  <view class="modal-content">
    <view class="modal-header">
      <text class="modal-title">邀请好友</text>
      <text class="close-btn" bindtap="closeShareModal">×</text>
    </view>

    <view class="modal-body">
      <!-- 二维码区域 -->
      <view class="qrcode-section">
        <image wx:if="{{qrcodeUrl}}" src="{{qrcodeUrl}}" class="qrcode-image" mode="aspectFit"></image>
        <view wx:else class="qrcode-loading">生成中...</view>
      </view>

      <view class="invite-code-box">
        <text class="code-label">邀请码</text>
        <text class="code-value">{{session.invite_code}}</text>
        <button class="copy-btn" bindtap="copyInviteCode">复制</button>
      </view>

      <view class="share-tip">
        <text>扫描二维码或使用邀请码加入牌局</text>
      </view>

      <button class="btn-primary" open-type="share">
        微信分享给好友
      </button>
    </view>
  </view>
</view>