111
This commit is contained in:
272
scoring/pages/game-detail/index.vue
Normal file
272
scoring/pages/game-detail/index.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="game-detail-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<uni-icons type="arrowleft" 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="player-header">
|
||||
<view class="header-row">
|
||||
<view class="header-cell header-label">玩家 ({{ players.length }}位)</view>
|
||||
<view class="header-cell" v-for="player in players" :key="player.id">
|
||||
<view class="player-header-info">
|
||||
<image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 对局详情表格 -->
|
||||
<view class="detail-table">
|
||||
<!-- 总分行 -->
|
||||
<view class="table-row">
|
||||
<view class="row-label">总分</view>
|
||||
<view class="row-cells">
|
||||
<view class="score-cell" v-for="player in players" :key="player.id">
|
||||
{{ formatScore(player.totalScore) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每局得分行 -->
|
||||
<view class="table-row" v-for="(round, roundIndex) in gameRounds" :key="roundIndex">
|
||||
<view class="row-label">第{{ roundIndex + 1 }}局</view>
|
||||
<view class="row-cells">
|
||||
<view class="score-cell" v-for="player in players" :key="player.id">
|
||||
{{ formatScore(getPlayerRoundScore(roundIndex, player.id)) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部分享按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="share-btn" @click="shareDetail">分享对局详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 玩家数据
|
||||
const players = ref([])
|
||||
// 对局记录
|
||||
const gameRounds = ref([])
|
||||
|
||||
// 格式化分数显示
|
||||
const formatScore = (score) => {
|
||||
if (score === 0) return '0'
|
||||
return score > 0 ? `+${score}` : `${score}`
|
||||
}
|
||||
|
||||
// 获取玩家在某一局的得分
|
||||
const getPlayerRoundScore = (roundIndex, playerId) => {
|
||||
if (!gameRounds.value[roundIndex]) return 0
|
||||
const playerScore = gameRounds.value[roundIndex].find(item => item.playerId === playerId)
|
||||
return playerScore ? playerScore.score : 0
|
||||
}
|
||||
|
||||
// 计算玩家总分
|
||||
const calculateTotalScores = () => {
|
||||
players.value.forEach(player => {
|
||||
let total = 0
|
||||
gameRounds.value.forEach(round => {
|
||||
const roundScore = round.find(item => item.playerId === player.id)
|
||||
if (roundScore) {
|
||||
total += roundScore.score
|
||||
}
|
||||
})
|
||||
player.totalScore = total
|
||||
})
|
||||
}
|
||||
|
||||
// 页面加载时初始化数据
|
||||
onMounted(() => {
|
||||
// 从本地存储获取玩家数据和对局记录
|
||||
const savedPlayers = uni.getStorageSync('players')
|
||||
const savedRounds = uni.getStorageSync('gameRounds')
|
||||
|
||||
if (savedPlayers) {
|
||||
players.value = savedPlayers
|
||||
} 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
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '2',
|
||||
avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
|
||||
totalScore: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
if (savedRounds) {
|
||||
gameRounds.value = savedRounds
|
||||
calculateTotalScores()
|
||||
} else {
|
||||
// 如果没有数据，使用默认数据
|
||||
gameRounds.value = [
|
||||
[
|
||||
{ playerId: 1, score: 3 },
|
||||
{ playerId: 2, score: -3 }
|
||||
]
|
||||
]
|
||||
calculateTotalScores()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 分享对局详情
|
||||
const shareDetail = () => {
|
||||
uni.showToast({
|
||||
title: '分享功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.game-detail-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-back, .nav-actions {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.player-header {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&.header-label {
|
||||
width: 200rpx;
|
||||
flex: none;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.player-header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-table {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
width: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-cells {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.score-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #eee;
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #ffc107;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user