111

scoring/pages/settle/index.vue

@@ -19,19 +19,25 @@
         <text>得分</text>
         <text>倍率分</text>
       </view>
-      <view class="table-row">
+      
+      <!-- 动态渲染每个玩家的结算结果 -->
+      <view class="table-row" v-for="player in players" :key="player.id">
         <view class="player-info">
-          <image class="player-avatar" src="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" mode="aspectFit"></image>
-          <text class="player-name">玩家80061</text>
+          <image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
+          <text class="player-name">{{ player.name }}</text>
         </view>
-        <view class="win-tag" v-if="isWin">胜利!</view>
-        <text class="score">{{ score }}</text>
-        <text class="score">0</text>
+        <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">
+    <!-- 对局详情链接 - 修改为可点击 -->
+    <view class="detail-link" @click="goToGameDetail">
       <text>对局详情</text>
     </view>
 
@@ -41,26 +47,85 @@
 </template>
 
 <script setup>
-import { onLoad } from '@dcloudio/uni-app'	
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
-const score = ref('0')
-const isWin = ref(true)
+const players = ref([])
+const rate = ref(1)
 
-// 页面加载时接收计分页传参
-onLoad((options) => {
-  score.value = options.score || '0'
-  isWin.value = options.isWin === 'true'
+// 格式化分数显示
+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 savedPlayers = uni.getStorageSync('players')
+  const savedRounds = uni.getStorageSync('gameRounds')
+  
+  if (savedPlayers && savedRounds) {
+    // 计算每个玩家的总分和倍率分
+    players.value = savedPlayers.map(player => {
+      // 计算总分
+      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
+      }
+    })
+  } 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
+      }
+    ]
+  }
 })
 
-// 返回首页
+// 跳转到对局详情页面
+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: '分享功能待实现',
@@ -122,6 +187,11 @@ const shareResult = () => {
 .table-row {
   display: flex;
   padding: 20rpx;
+  border-bottom: 1rpx solid #ddd;
+
+  &:last-child {
+    border-bottom: none;
+  }
 
   .player-info {
     display: flex;
@@ -141,14 +211,35 @@ const shareResult = () => {
     }
   }
 
-  .win-tag {
+  .win-lose {
     flex: 1;
-    text-align: center;
-    background-color: #f00;
-    color: #fff;
-    font-size: 24rpx;
-    padding: 2rpx 10rpx;
-    border-radius: 8rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    .win-tag {
+      background-color: #07c160;
+      color: #fff;
+      font-size: 24rpx;
+      padding: 5rpx 15rpx;
+      border-radius: 8rpx;
+    }
+    
+    .lose-tag {
+      background-color: #fa5151;
+      color: #fff;
+      font-size: 24rpx;
+      padding: 5rpx 15rpx;
+      border-radius: 8rpx;
+    }
+    
+    .draw-tag {
+      background-color: #10aeff;
+      color: #fff;
+      font-size: 24rpx;
+      padding: 5rpx 15rpx;
+      border-radius: 8rpx;
+    }
   }
 
   .score {
@@ -156,18 +247,26 @@ const shareResult = () => {
     text-align: center;
     font-size: 28rpx;
     color: #666;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
 .detail-link {
   text-align: center;
   margin: 20rpx 0;
-
+  padding: 20rpx;
+  
   text {
     font-size: 26rpx;
     color: #41479b;
     text-decoration: underline;
   }
+  
+  &:active {
+    background-color: #f0f0f0;
+  }
 }
 
 .share-btn {