hx123666/scoring/pages/settle/index.vue

<template>
  <view class="settle-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-home" @click="goHome">
        <uni-icons type="home" size="24" color="#fff"></uni-icons>
      </view>
      <view class="nav-title">计分器</view>
      <view class="nav-actions">
        <uni-icons type="more" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 结算结果表格 -->
    <view class="result-table">
      <view class="table-header">
        <text>玩家</text>
        <text>胜负</text>
        <text>得分</text>
        <text>倍率分</text>
      </view>
      
      <!-- 动态渲染每个玩家的结算结果 -->
      <view class="table-row" v-for="player in players" :key="player.id">
        <view class="player-info">
          <!-- 修改头像容器，添加统一的大头像样式 -->
          <view class="avatar-container">
            <image class="player-avatar" :src="player.avatar" mode="aspectFill"></image>
            <!-- 如果是玩家自己，添加标识 -->
            <view v-if="player.isSelf" class="self-indicator"></view>
          </view>
          <text class="player-name">{{ player.name }}</text>
          <view v-if="player.isSelf" class="self-tag">自己</view>
        </view>
        <view class="win-lose">
          <view class="win-tag" v-if="player.totalScore > 0">胜利!</view>
          <view class="lose-tag" v-else-if="player.totalScore < 0">加油!</view>
          <view class="draw-tag" v-else>平局</view>
        </view>
        <text class="score">{{ formatScore(player.totalScore) }}</text>
        <text class="score">{{ formatScore(player.rateScore) }}</text>
      </view>
    </view>

    <!-- 对局详情链接 - 修改为可点击 -->
    <view class="detail-link" @click="goToGameDetail">
      <text>对局详情</text>
    </view>

    <!-- 分享按钮 -->
    <button class="share-btn" @click="shareResult">分享给好友结算信息</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const players = ref([])
const rate = ref(1)

// 格式化分数显示
const formatScore = (score) => {
  if (score === 0) return '0'
  return score > 0 ? `+${score}` : `${score}`
}

// 页面加载时接收数据
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}
  
  // 获取倍率
  rate.value = parseFloat(options.rate) || 1
  
  // 获取当前用户信息
  const currentUserInfo = uni.getStorageSync('userInfo')
  
  // 从本地存储获取玩家数据和对局记录
  const savedPlayers = uni.getStorageSync('players')
  const savedRounds = uni.getStorageSync('gameRounds')
  
  if (savedPlayers && savedRounds) {
    // 计算每个玩家的总分和倍率分
    players.value = savedPlayers.map(player => {
      // 检查是否是玩家自己
      const isSelf = currentUserInfo && 
                    currentUserInfo.userId && 
                    player.userId && 
                    player.userId.toString() === currentUserInfo.userId.toString()
      
      // 计算总分
      let totalScore = 0
      savedRounds.forEach(round => {
        const roundScore = round.find(item => item.playerId === player.id)
        if (roundScore) {
          totalScore += roundScore.score
        }
      })
      
      // 计算倍率分
      const rateScore = Math.round(totalScore * rate.value)
      
      return {
        ...player,
        totalScore,
        rateScore,
        isSelf: isSelf || false // 添加isSelf字段
      }
    })
  } else {
    // 如果没有数据，使用默认数据
    players.value = [
      {
        id: 1,
        name: '玩家80061',
        avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.QQG4bvcAR3CJ0WeQULA9UQAAAA?w=275&h=211&c=8&rs=1&qlt=90&o=6&cb=ucfimgc1&dpr=1.5&pid=3.1&rm=2',
        totalScore: 0,
        rateScore: 0,
        isSelf: true
      }
    ]
  }
})

// 跳转到对局详情页面
const goToGameDetail = () => {
  uni.navigateTo({
    url: '/pages/game-detail/index'
  })
}

// 返回首页并清空数据
const goHome = () => {
  // 清空本地存储的数据
  uni.removeStorageSync('players')
  uni.removeStorageSync('gameRounds')
  
  uni.switchTab({
    url: '/pages/index/index'
  })
}

// 分享功能
const shareResult = () => {
  uni.showToast({
    title: '分享功能待实现',
    icon: 'none'
  })
}
</script>

<style lang="less" scoped>
.settle-page {
  background-color: #fff;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #41479b;
  color: #fff;

  .nav-home, .nav-actions {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    font-size: 32rpx;
    font-weight: 500;
  }
}

.result-table {
  margin: 30rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #e8e8e8;
  border-bottom: 1rpx solid #ddd;

  text {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    
    &:first-child {
      text-align: left;
      flex: 1.5; /* 调整玩家信息列宽度 */
      padding-left: 30rpx;
    }
  }
}

.table-row {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #ddd;
  background-color: #fff;

  &:last-child {
    border-bottom: none;
  }

  .player-info {
    display: flex;
    align-items: center;
    flex: 1.5; /* 与表头对齐 */
    min-width: 200rpx;

    .avatar-container {
      position: relative;
      width: 110rpx; /* 容器比头像稍大 */
      height: 110rpx;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .player-avatar {
        width: 100rpx; /* 增大头像尺寸 */
        height: 100rpx;
        border-radius: 50%;
        border: 5rpx solid #fff; /* 添加白色边框 */
        box-shadow: 0 6rpx 20rpx rgba(65, 71, 155, 0.3); /* 添加阴影效果 */
        background: linear-gradient(135deg, #41479b 0%, #8b91e2 100%); /* 添加渐变背景 */
        transition: all 0.3s ease;
        
        /* 为虚拟玩家头像添加特殊样式 */
        &:not([src*="OIP-C"]) {
          /* 处理默认头像的特殊样式 */
          border: 5rpx solid #f0f0f0;
        }
      }
      
      /* 玩家自己头像的特殊标识 */
      .self-indicator {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24rpx;
        height: 24rpx;
        background-color: #4CAF50;
        border: 3rpx solid #fff;
        border-radius: 50%;
        z-index: 2;
      }
    }

.player-name {
  font-size: 26rpx;
  color: #000;
  margin-right: 10rpx;
  font-weight: 500;
  /* 允许换行 */
  word-break: break-all;
  white-space: normal;
}

    .self-tag {
      background-color: #007aff;
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 8rpx;
      border-radius: 10rpx;
      margin-left: 5rpx;
    }
  }

  .win-lose {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .win-tag {
      background-color: #07c160;
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      border-radius: 8rpx;
      text-align: center;
    }
    
    .lose-tag {
      background-color: #fa5151;
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      border-radius: 8rpx;
      text-align: center;
    }
    
    .draw-tag {
      background-color: #10aeff;
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      border-radius: 8rpx;
      text-align: center;
    }
  }

  .score {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }
}

/* 优化虚拟玩家头像的默认样式 */
.player-avatar[src*="OIP-C"] {
  /* 虚拟玩家的默认头像样式 */
  border: 5rpx solid #e6e6ff !important;
  box-shadow: 0 6rpx 20rpx rgba(139, 145, 226, 0.3) !important;
}

.detail-link {
  text-align: center;
  margin: 20rpx 0;
  padding: 20rpx;
  
  text {
    font-size: 28rpx;
    color: #41479b;
    text-decoration: underline;
  }
  
  &:active {
    background-color: #f0f0f0;
  }
}

.share-btn {
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin: 30rpx auto;
  background-color: #ffc107;
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.3);
  transition: all 0.2s ease;
  
  &:active {
    background-color: #e6ac00;
    transform: translateY(2rpx);
  }
}
</style>