373 lines
8.7 KiB
Vue
373 lines
8.7 KiB
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> |