2124
This commit is contained in:
@@ -1,27 +1,19 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 自定义头部 -->
|
||||
<view class="header">
|
||||
<view class="back-btn" @click="goBack">
|
||||
<uni-icons type="left" size="22" color="#fff" />
|
||||
</view>
|
||||
<view class="title">用户信息</view>
|
||||
<view class="placeholder"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 昵称输入 -->
|
||||
<view class="form-item">
|
||||
<view class="label">昵称:</view>
|
||||
<input class="input" v-model="userInfo.nickName" placeholder="请输入昵称" />
|
||||
<input class="input" v-model="userInfo.name" placeholder="请输入昵称" />
|
||||
</view>
|
||||
|
||||
<!-- 头像选择 -->
|
||||
<view class="form-item">
|
||||
<view class="label">头像:</view>
|
||||
<view class="avatar-wrapper" @click="chooseNewAvatar">
|
||||
<image :src="userInfo.avatarUrl || '/static/logo.png'" mode="aspectFill" class="avatar" />
|
||||
<image :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill" class="avatar" />
|
||||
<view class="avatar-tip">点击更新头像</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -33,20 +25,18 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { updateGlobalUserInfo } from '../../../main.js'
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
id: '',
|
||||
nickName: '',
|
||||
avatarUrl: ''
|
||||
name: '',
|
||||
avatar: ''
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onLoad((options) => {
|
||||
// 从选项中获取用户数据
|
||||
if (options.userData) {
|
||||
try {
|
||||
const data = JSON.parse(decodeURIComponent(options.userData))
|
||||
@@ -55,27 +45,16 @@ onLoad((options) => {
|
||||
console.error('解析用户数据失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 记录来源页面信息,支持返回到正确页面
|
||||
if (options.from) {
|
||||
console.log('来源页面:', options.from)
|
||||
}
|
||||
})
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
// 检查是否有未保存的修改
|
||||
if (userInfo.value.nickName.trim()) {
|
||||
// 使用全局方法保存用户信息,确保全局可用
|
||||
updateGlobalUserInfo(userInfo.value)
|
||||
}
|
||||
|
||||
wx.navigateBack()
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 选择新头像
|
||||
const chooseNewAvatar = () => {
|
||||
wx.chooseMedia({
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
@@ -85,10 +64,10 @@ const chooseNewAvatar = () => {
|
||||
// 统一处理头像选择逻辑,支持所有平台
|
||||
try {
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath
|
||||
userInfo.value.avatarUrl = tempFilePath
|
||||
userInfo.value.avatar = tempFilePath
|
||||
} catch (error) {
|
||||
console.error('处理头像文件路径失败:', error)
|
||||
wx.showToast({
|
||||
uni.showToast({
|
||||
title: '头像设置失败',
|
||||
icon: 'none'
|
||||
})
|
||||
@@ -96,7 +75,7 @@ const chooseNewAvatar = () => {
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败:', err)
|
||||
wx.showToast({
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
})
|
||||
@@ -106,45 +85,46 @@ const chooseNewAvatar = () => {
|
||||
|
||||
// 保存用户信息
|
||||
const saveUserInfo = () => {
|
||||
if (!userInfo.value.nickName.trim()) {
|
||||
wx.showToast({
|
||||
if (!userInfo.value.name.trim()) {
|
||||
uni.showToast({
|
||||
title: '昵称不能为空',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 使用全局方法保存用户信息,确保全局可用
|
||||
updateGlobalUserInfo(userInfo.value)
|
||||
|
||||
// 保存成功,返回上一页并传递更新的数据
|
||||
const pages = getCurrentPages()
|
||||
const prevPage = pages[pages.length - 2]
|
||||
if (prevPage) {
|
||||
// 通过事件通知上一页更新数据
|
||||
// 通过页面实例调用方法更新数据
|
||||
if (prevPage.$vm && prevPage.$vm.updateUserData) {
|
||||
prevPage.$vm.updateUserData(userInfo.value)
|
||||
} else {
|
||||
// 如果上一页没有updateUserData方法,通过全局事件通知
|
||||
wx.$emit && wx.$emit('userDataUpdated', userInfo.value)
|
||||
}
|
||||
}
|
||||
|
||||
// 通过全局事件通知更新数据(作为备选方案)
|
||||
uni.$emit('userDataUpdated', userInfo.value)
|
||||
|
||||
// 将用户信息保存到本地存储
|
||||
uni.setStorageSync('userInfo', userInfo.value)
|
||||
uni.setStorageSync('currentUserInfo', userInfo.value)
|
||||
|
||||
// 显示保存成功提示
|
||||
wx.showToast({
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success',
|
||||
duration: 1500,
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
wx.navigateBack()
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
@@ -106,7 +106,6 @@
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-actions" v-if="!showKeyboard">
|
||||
<button class="action-btn" type="default" @click="nextRound">下一局</button>
|
||||
<button class="action-btn primary" type="primary" @click="endGame">结束对局</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -472,6 +471,17 @@ onMounted(() => {
|
||||
if (savedSound !== '') {
|
||||
soundEnabled.value = savedSound
|
||||
}
|
||||
|
||||
// 检查是否有选中的玩家索引(用于分数编辑)
|
||||
const selectedIndex = uni.getStorageSync('selectedPlayerIndex')
|
||||
if (selectedIndex !== '' && players.value.length > 0) {
|
||||
// 延迟执行,确保玩家数据已加载
|
||||
setTimeout(() => {
|
||||
selectPlayer(parseInt(selectedIndex))
|
||||
// 清除临时存储的选中玩家索引
|
||||
uni.removeStorageSync('selectedPlayerIndex')
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
@@ -48,27 +48,47 @@
|
||||
<text class="player-count">({{ players.length }}位)</text>
|
||||
</view>
|
||||
|
||||
<!-- 玩家表格 -->
|
||||
<view class="players-table">
|
||||
<view class="table-header">
|
||||
<view class="player-column">玩家</view>
|
||||
<view class="score-column">总分</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(player, index) in displayPlayers" :key="player.id" class="player-row">
|
||||
<view class="player-info">
|
||||
<image :src="player.avatar" mode="aspectFill"></image>
|
||||
<text>{{ player.name }}</text>
|
||||
<!-- 玩家表格(表头在左侧) -->
|
||||
<view class="players-table-container vertical">
|
||||
<view class="players-table vertical">
|
||||
<!-- 表头行 -->
|
||||
<view class="table-row header-row">
|
||||
<!-- 固定表头:玩家 -->
|
||||
<view class="header-cell player-column">玩家</view>
|
||||
<!-- 每个玩家作为一列 -->
|
||||
<view v-for="(player, index) in displayPlayers" :key="player.id" class="data-cell">
|
||||
<view class="player-info">
|
||||
<image :src="player.avatar" mode="aspectFill"></image>
|
||||
<text>{{ player.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="score-display" @click="editScore(index)">
|
||||
</view>
|
||||
|
||||
<!-- 总分行 -->
|
||||
<view class="table-row">
|
||||
<view class="header-cell score-column">总分</view>
|
||||
<view v-for="(player, index) in displayPlayers" :key="player.id" class="data-cell score-display" >
|
||||
{{ player.score }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每局分数行 -->
|
||||
<view v-for="(round, roundIndex) in rounds" :key="round" class="table-row">
|
||||
<view class="header-cell score-column">第{{ round }}局</view>
|
||||
<view @click="editScore(index)" v-for="(player, playerIndex) in displayPlayers" :key="player.id" class="data-cell score-display">
|
||||
{{ player.roundScores[roundIndex] || 0 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!--
|
||||
<view>
|
||||
<button @click="postscore">提交分数</button>
|
||||
<input v-model="score.value.playerId" type="number" placeholder="输入分数" :src="score.value.playerId">
|
||||
</view> -->
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="bottom-buttons">
|
||||
@@ -76,28 +96,114 @@
|
||||
<button class="settle-btn" type="default" @click="settleRoom">结算房间</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted, toRaw } from 'vue'
|
||||
import { GET,POST } from '../../../utils/request'
|
||||
import { BASE_URL } from '../../../utils/CommonValues.js';
|
||||
const res=ref(null)
|
||||
// const score=ref(
|
||||
// playerId: currentUser.id
|
||||
// )
|
||||
|
||||
const getuserinfo =()=>{
|
||||
GET('/score/info/list',null,).then(res=>{
|
||||
console.log('获取用户信息成功:', res.data)
|
||||
|
||||
// 检查API返回数据结构
|
||||
if(res.data && res.data.code === 200 && Array.isArray(res.data.rows)) {
|
||||
const userList = res.data.rows;
|
||||
|
||||
// 清空现有的玩家列表(保留自己)
|
||||
const selfPlayer = players.value.find(p => p.id === 'self');
|
||||
players.value = selfPlayer ? [selfPlayer] : [];
|
||||
|
||||
// 将API返回的用户信息添加到玩家列表
|
||||
userList.forEach(user => {
|
||||
if(user.nickName) {
|
||||
// 处理头像URL:如果是相对路径则与BASE_URL拼接
|
||||
let avatarUrl = user.avatars;
|
||||
if (avatarUrl) {
|
||||
// 检查是否是相对路径(以/开头)
|
||||
if (avatarUrl.startsWith('/')) {
|
||||
avatarUrl = `${BASE_URL}${avatarUrl}`;
|
||||
} else if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
|
||||
// 不是绝对URL也不是以/开头的相对路径,拼接完整路径
|
||||
avatarUrl = `${BASE_URL}/${avatarUrl}`;
|
||||
}
|
||||
} else {
|
||||
// 如果没有头像则使用默认头像
|
||||
avatarUrl = '/static/avatar14.png';
|
||||
}
|
||||
|
||||
const newPlayer = {
|
||||
id: `player_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: user.nickName, // 使用API返回的nickName作为玩家名称
|
||||
avatar: avatarUrl, // 使用处理后的头像URL
|
||||
score: 0,
|
||||
roundScores: []
|
||||
};
|
||||
players.value.push(newPlayer);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('玩家列表更新完成:', players.value);
|
||||
uni.showToast({
|
||||
title: `成功添加${userList.length}位玩家`,
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
console.error('API返回数据结构异常:', res.data);
|
||||
uni.showToast({
|
||||
title: '获取玩家信息失败,数据结构异常',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}).catch(err=>{
|
||||
console.error('获取用户信息失败:', err);
|
||||
// 使用request.js中提供的友好错误信息
|
||||
const errorMsg = err.userFriendlyMsg || '获取玩家信息失败';
|
||||
uni.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// const postscore = () => {
|
||||
// POST('/a/post',score.value).then(r=>{
|
||||
// console.log('提交分数成功:', r.data,)
|
||||
// console.log(score.value)
|
||||
// res.value=r.data
|
||||
// }).catch(err=>{
|
||||
// console.error('提交分数失败:', err);
|
||||
// })
|
||||
// }
|
||||
// 状态管理
|
||||
const voiceBroadcast = ref(false)
|
||||
const tableMode = ref(false)
|
||||
const roomId = ref('')
|
||||
// 当前用户信息 - 从本地存储获取
|
||||
const storedUserInfo = uni.getStorageSync('userInfo');
|
||||
const currentUser = ref({
|
||||
id: 'self',
|
||||
name: '玩家50950',
|
||||
avatar: 'https://t14.baidu.com/it/u=3165460156,649373630&fm=224&app=112&f=JPEG?w=500&h=500'
|
||||
})
|
||||
name: storedUserInfo?.name||'玩家50920' ,
|
||||
avatar: storedUserInfo?.avatar ||'/static/logo.png' })
|
||||
|
||||
// 局数信息
|
||||
const rounds = ref([]) // 存储每局信息,每个元素是局数编号
|
||||
|
||||
// 玩家列表(初始包含自己)
|
||||
const players = ref([
|
||||
{
|
||||
id: 'self',
|
||||
name: '玩家50950',
|
||||
avatar: 'https://t14.baidu.com/it/u=3165460156,649373630&fm=224&app=112&f=JPEG?w=500&h=500',
|
||||
score: 0
|
||||
name: currentUser.value.name ||'玩家50920',
|
||||
avatar: currentUser.value.avatar||'/static/logo.png',
|
||||
score: 0,
|
||||
roundScores: [] // 存储每局的分数
|
||||
}
|
||||
])
|
||||
|
||||
@@ -106,7 +212,8 @@ const tablePlayer = {
|
||||
id: 'table',
|
||||
name: '台板',
|
||||
avatar: '/static/robot.png',
|
||||
score: 0
|
||||
score: 0,
|
||||
roundScores: [] // 存储每局的分数
|
||||
}
|
||||
|
||||
// 计算属性:动态返回包含或不包含台板玩家的列表
|
||||
@@ -151,8 +258,9 @@ const addPlayer = () => {
|
||||
const newPlayer = {
|
||||
id: `player_${Date.now()}`,
|
||||
name: playerName,
|
||||
avatar: '/static/people.png',
|
||||
score: 0
|
||||
avatar: '/static/avatar14.png',
|
||||
score: 0,
|
||||
roundScores: [] // 存储每局的分数
|
||||
}
|
||||
|
||||
// 添加到玩家列表
|
||||
@@ -229,91 +337,47 @@ const updateUserData = (updatedUser) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 当启用台板模式时,确保台板玩家信息正确
|
||||
if (tableMode.value) {
|
||||
const tablePlayerIndex = players.value.findIndex(p => p.id === 'table')
|
||||
if (tablePlayerIndex === -1) {
|
||||
// 如果需要,重新添加台板玩家(这通常不会发生,因为计算属性会处理)
|
||||
players.value.push(tablePlayer)
|
||||
}
|
||||
}
|
||||
// 将更新后的用户信息保存到本地存储
|
||||
uni.setStorageSync('userInfo', updatedUser)
|
||||
uni.setStorageSync('currentUserInfo', updatedUser)
|
||||
}
|
||||
|
||||
// 头像和昵称编辑功能已迁移到change页面
|
||||
|
||||
// 编辑分数
|
||||
const editScore = (index) => {
|
||||
console.log('编辑分数', index)
|
||||
const player = displayPlayers.value[index]
|
||||
// 编辑分数 - 点击分数时调用
|
||||
const editScore = (playerIndex) => {
|
||||
console.log('编辑分数,玩家索引:', playerIndex)
|
||||
|
||||
// 检查是否是台板玩家
|
||||
if (player.id === 'table') {
|
||||
// 台板玩家的分数编辑逻辑
|
||||
uni.showModal({
|
||||
title: '修改台板分数',
|
||||
content: `当前分数: ${player.score}`,
|
||||
editable: true,
|
||||
placeholderText: '请输入新分数',
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content !== null) {
|
||||
const newScore = parseInt(res.content)
|
||||
if (!isNaN(newScore)) {
|
||||
// 找到台板玩家在原始数组中的位置
|
||||
const tableIndex = players.value.findIndex(p => p.id === 'table')
|
||||
if (tableIndex !== -1) {
|
||||
players.value[tableIndex].score = newScore
|
||||
} else {
|
||||
// 如果台板玩家不在原始数组中,创建一个副本并更新
|
||||
tablePlayer.score = newScore
|
||||
}
|
||||
|
||||
// 语音播报分数(如果开启)
|
||||
if (voiceBroadcast.value) {
|
||||
console.log(`语音播报: 台板 分数更新为 ${newScore}`)
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入有效的数字',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取当前选中的玩家
|
||||
const selectedPlayer = displayPlayers.value[playerIndex]
|
||||
|
||||
// 检查是否有局数记录
|
||||
if (rounds.value.length === 0) {
|
||||
uni.showToast({
|
||||
title: '暂无局数记录,无法编辑分数',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 普通玩家的分数编辑逻辑
|
||||
uni.showModal({
|
||||
title: '修改分数',
|
||||
content: `${player.score}`,
|
||||
editable: true,
|
||||
placeholderText: '请输入新分数',
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content !== null) {
|
||||
const newScore = parseInt(res.content)
|
||||
if (!isNaN(newScore)) {
|
||||
// 找到对应的普通玩家
|
||||
const playerIndex = players.value.findIndex(p => p.id === player.id)
|
||||
if (playerIndex !== -1) {
|
||||
players.value[playerIndex].score = newScore
|
||||
}
|
||||
|
||||
// 语音播报分数(如果开启)
|
||||
if (voiceBroadcast.value) {
|
||||
console.log(`语音播报: ${player.name} 分数更新为 ${newScore}`)
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入有效的数字',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取当前局数
|
||||
const currentRound = rounds.value.length
|
||||
|
||||
// 准备要传递的玩家数据
|
||||
const playersToPass = [...displayPlayers.value]
|
||||
|
||||
// 保存到临时存储,用于页面间数据传递
|
||||
uni.setStorageSync('currentPlayers', JSON.stringify(playersToPass))
|
||||
// 保存当前局数
|
||||
uni.setStorageSync('currentRound', currentRound)
|
||||
// 保存选中的玩家索引
|
||||
uni.setStorageSync('selectedPlayerIndex', playerIndex)
|
||||
|
||||
// 跳转到计分页面进行分数编辑
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/singleplay/scoring'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 开局计分
|
||||
const startScoring = () => {
|
||||
console.log('开局计分')
|
||||
@@ -327,21 +391,17 @@ const startScoring = () => {
|
||||
return
|
||||
}
|
||||
|
||||
// 重置所有玩家分数
|
||||
players.value.forEach(player => {
|
||||
player.score = 0
|
||||
})
|
||||
|
||||
// 重置台板玩家分数(即使不在原始数组中)
|
||||
if (tableMode.value) {
|
||||
tablePlayer.score = 0
|
||||
}
|
||||
// 新增一局
|
||||
const newRound = rounds.value.length + 1
|
||||
rounds.value.push(newRound)
|
||||
|
||||
// 准备要传递的玩家数据
|
||||
const playersToPass = [...displayPlayers.value]
|
||||
|
||||
// 保存到临时存储,用于页面间数据传递
|
||||
uni.setStorageSync('currentPlayers', JSON.stringify(playersToPass))
|
||||
// 保存当前局数
|
||||
uni.setStorageSync('currentRound', newRound)
|
||||
|
||||
// 跳转到计分页面
|
||||
uni.navigateTo({
|
||||
@@ -380,6 +440,7 @@ const settleRoom = () => {
|
||||
onMounted(() => {
|
||||
console.log('单人模式页面加载完成')
|
||||
// 可以在这里初始化数据或加载用户信息
|
||||
getuserinfo();
|
||||
|
||||
// 生成随机房间号(4位数字)
|
||||
roomId.value = Math.floor(1000 + Math.random() * 9000).toString()
|
||||
@@ -398,16 +459,34 @@ onMounted(() => {
|
||||
const parsedPlayers = JSON.parse(updatedPlayers)
|
||||
console.log('收到更新的玩家数据:', parsedPlayers)
|
||||
|
||||
// 获取当前局数
|
||||
const currentRound = uni.getStorageSync('currentRound') || 1
|
||||
const roundIndex = currentRound - 1
|
||||
|
||||
// 更新玩家列表中的分数
|
||||
parsedPlayers.forEach(updatedPlayer => {
|
||||
// 查找对应的玩家
|
||||
const playerIndex = players.value.findIndex(p => p.id === updatedPlayer.id)
|
||||
if (playerIndex !== -1) {
|
||||
// 更新普通玩家的分数
|
||||
players.value[playerIndex].score = updatedPlayer.score
|
||||
// 更新普通玩家当前局的分数
|
||||
// 确保roundScores数组有足够的空间
|
||||
if (players.value[playerIndex].roundScores.length <= roundIndex) {
|
||||
players.value[playerIndex].roundScores.length = roundIndex + 1
|
||||
}
|
||||
// 保存当前局的分数
|
||||
players.value[playerIndex].roundScores[roundIndex] = updatedPlayer.score
|
||||
// 计算总分:所有局分数的总和
|
||||
players.value[playerIndex].score = players.value[playerIndex].roundScores.reduce((sum, score) => sum + (score || 0), 0)
|
||||
} else if (updatedPlayer.id === 'table') {
|
||||
// 更新台板玩家的分数
|
||||
tablePlayer.score = updatedPlayer.score
|
||||
// 更新台板玩家当前局的分数
|
||||
// 确保roundScores数组有足够的空间
|
||||
if (tablePlayer.roundScores.length <= roundIndex) {
|
||||
tablePlayer.roundScores.length = roundIndex + 1
|
||||
}
|
||||
// 保存当前局的分数
|
||||
tablePlayer.roundScores[roundIndex] = updatedPlayer.score
|
||||
// 计算总分:所有局分数的总和
|
||||
tablePlayer.score = tablePlayer.roundScores.reduce((sum, score) => sum + (score || 0), 0)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -422,18 +501,46 @@ onMounted(() => {
|
||||
// 监听页面显示事件
|
||||
uni.$on('updatePlayers', updateListener)
|
||||
|
||||
// 监听用户数据更新事件(来自change页面)
|
||||
const userDataListener = (updatedUser) => {
|
||||
updateUserData(updatedUser)
|
||||
}
|
||||
uni.$on('userDataUpdated', userDataListener)
|
||||
|
||||
// 监听页面显示生命周期
|
||||
uni.onShow(() => {
|
||||
updateListener()
|
||||
})
|
||||
|
||||
// 组件卸载时移除监听
|
||||
onUnmounted(() => {
|
||||
uni.$off('updatePlayers', updateListener)
|
||||
|
||||
// 从本地存储获取最新的用户信息
|
||||
try {
|
||||
const storedUserInfo = uni.getStorageSync('userInfo');
|
||||
if (storedUserInfo) {
|
||||
console.log('从本地存储加载用户信息:', storedUserInfo);
|
||||
// 更新当前用户信息
|
||||
currentUser.value = { ...storedUserInfo };
|
||||
|
||||
// 更新玩家列表中的用户信息
|
||||
const selfPlayerIndex = players.value.findIndex(p => p.id === 'self');
|
||||
if (selfPlayerIndex !== -1) {
|
||||
players.value[selfPlayerIndex] = {
|
||||
...players.value[selfPlayerIndex],
|
||||
name: storedUserInfo.name,
|
||||
avatar: storedUserInfo.avatar
|
||||
};
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('从本地存储获取用户信息失败:', error);
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
onUnmounted(() => {
|
||||
// 移除事件监听器
|
||||
uni.$off('updatePlayers');
|
||||
uni.$off('userDataUpdated');
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.singleplay {
|
||||
width: 750rpx;
|
||||
@@ -599,12 +706,16 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15rpx;
|
||||
|
||||
.header-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.player-count {
|
||||
@@ -615,82 +726,111 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 玩家表格容器 - 实现横向滚动 */
|
||||
.players-table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* 垂直表格容器 - 实现垂直滚动和横向滑动 */
|
||||
.players-table-container.vertical {
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
max-height: 500rpx;
|
||||
-webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
|
||||
}
|
||||
|
||||
/* 玩家表格 */
|
||||
.players-table {
|
||||
border: 1rpx solid #e0e0e0;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.table-header {
|
||||
min-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 垂直表格样式 */
|
||||
.players-table.vertical {
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
|
||||
.player-column {
|
||||
flex: 2;
|
||||
padding: 15rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.score-column {
|
||||
flex: 1;
|
||||
padding: 15rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
.player-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
padding: 15rpx;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.score-display {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #007aff;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
}
|
||||
.header-row {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
width: 150rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 15rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.player-column {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.score-column {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-cell {
|
||||
min-width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 15rpx;
|
||||
border-right: 1rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* 最后一列不需要右边框 */
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
width: 100%;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #007aff;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user