This commit is contained in:
2025-11-24 16:01:45 +08:00
parent aa160793e7
commit 46c975591b
45 changed files with 1311 additions and 559 deletions

View File

@@ -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;

View File

@@ -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(() => {

View File

@@ -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;
}
}
}