xzt/-----
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2124

Browse Source
This commit is contained in:
xxxx
2025-11-24 16:01:45 +08:00
parent aa160793e7
commit 46c975591b
45 changed files with 1311 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

510
scoring/pages/index/singleplay/singleplay.vue
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;
}
}
}