751 lines
18 KiB
Vue
751 lines
18 KiB
Vue
<template>
|
||
<view class="singleplay">
|
||
<!-- 顶部功能区 -->
|
||
<view class="top-functions">
|
||
<view class="function-btn" @click="addPlayer">
|
||
<image src="/static/add.png" class="btn-icon" mode="aspectFill"></image>
|
||
<text>添加玩家</text>
|
||
</view>
|
||
<view class="function-btn" @click="transferScorer">
|
||
<image src="/static/transfer.png" class="btn-icon" mode="aspectFill"></image>
|
||
<text>转让计分员</text>
|
||
</view>
|
||
<view class="switch-group">
|
||
<text>语音播报</text>
|
||
<switch :checked="voiceBroadcast" @change="voiceBroadcast = $event.detail.value" color="#007aff" />
|
||
</view>
|
||
<view class="switch-group">
|
||
<text>台板</text>
|
||
<switch :checked="tableMode" @change="tableMode = $event.detail.value" color="#007aff" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 对局记录区域 -->
|
||
<view class="game-record">
|
||
<view class="record-title">
|
||
对局记录
|
||
<text class="hint">点击对局分数进行修改</text>
|
||
</view>
|
||
|
||
<!-- 用户信息区域 -->
|
||
<view class="user-section">
|
||
<text class="user-hint">点击自己头像编辑用户头像和昵称~</text>
|
||
<view class="user-info" @click="editUserInfo">
|
||
<image class="user-avatar" :src="currentUser.avatar" mode="aspectFill"></image>
|
||
<view class="user-details">
|
||
<view class="user-name">
|
||
{{ currentUser.name }}
|
||
<text class="self-tag">自己</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 玩家列表 -->
|
||
<view class="players-section">
|
||
<view class="section-header">
|
||
<text class="header-title">玩家</text>
|
||
<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>
|
||
<view class="score-display" @click="editScore(index)">
|
||
{{ player.score }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view class="bottom-buttons">
|
||
<button class="start-btn" type="primary" @click="startScoring">开局计分</button>
|
||
<button class="settle-btn" type="default" @click="settleRoom">结算房间</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||
|
||
// 状态管理
|
||
const voiceBroadcast = ref(false)
|
||
const tableMode = ref(false)
|
||
const roomId = ref('')
|
||
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'
|
||
})
|
||
|
||
// 玩家列表（初始包含自己）
|
||
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
|
||
}
|
||
])
|
||
|
||
// 台板玩家对象
|
||
const tablePlayer = {
|
||
id: 'table',
|
||
name: '台板',
|
||
avatar: '/static/robot.png',
|
||
score: 0
|
||
}
|
||
|
||
// 计算属性：动态返回包含或不包含台板玩家的列表
|
||
const displayPlayers = computed(() => {
|
||
if (tableMode.value) {
|
||
// 检查台板玩家是否已存在，避免重复添加
|
||
const hasTablePlayer = players.value.some(player => player.id === 'table')
|
||
if (hasTablePlayer) {
|
||
return players.value
|
||
}
|
||
// 添加台板玩家
|
||
return [...players.value, tablePlayer]
|
||
} else {
|
||
// 移除台板玩家
|
||
return players.value.filter(player => player.id !== 'table')
|
||
}
|
||
})
|
||
|
||
// 添加玩家
|
||
const addPlayer = () => {
|
||
console.log('添加玩家')
|
||
|
||
// 生成默认玩家名
|
||
const defaultPlayerName = '请输入玩家名称'
|
||
|
||
// 弹出对话框让用户输入玩家名称
|
||
uni.showModal({
|
||
title: '添加玩家',
|
||
editable: true,
|
||
placeholderText: defaultPlayerName,
|
||
// #ifdef MP-WEIXIN
|
||
confirmText: '添加',
|
||
cancelText: '取消',
|
||
autofocus: true, // 微信小程序下自动聚焦输入框
|
||
// #endif
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 获取用户输入的名称，如果为空则使用默认名称
|
||
const playerName = res.content && res.content.trim() !== '' ? res.content.trim() : defaultPlayerName
|
||
|
||
// 创建新玩家
|
||
const newPlayer = {
|
||
id: `player_${Date.now()}`,
|
||
name: playerName,
|
||
avatar: '/static/people.png',
|
||
score: 0
|
||
}
|
||
|
||
// 添加到玩家列表
|
||
players.value.push(newPlayer)
|
||
|
||
// 语音提示或普通提示（如果开启）
|
||
if (voiceBroadcast.value) {
|
||
uni.showToast({
|
||
title: `已添加玩家 ${newPlayer.name}`,
|
||
icon: 'none'
|
||
})
|
||
// 这里可以添加语音播报逻辑
|
||
} else {
|
||
uni.showToast({
|
||
title: `已添加玩家 ${newPlayer.name}`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('添加玩家失败:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 转让计分员
|
||
const transferScorer = () => {
|
||
console.log('转让计分员')
|
||
|
||
// 显示提示对话框
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '房间内暂无扫码或分享加入房间的玩家，无法转让计分员。',
|
||
showCancel: false,
|
||
// #ifdef MP-WEIXIN
|
||
confirmText: '确定',
|
||
// #endif
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('用户确认提示')
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('显示提示失败:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 编辑用户信息 - 跳转到change页面
|
||
const editUserInfo = () => {
|
||
console.log('跳转到用户信息编辑页面')
|
||
|
||
// 跳转到change页面，并传递当前用户信息
|
||
uni.navigateTo({
|
||
url: `/pages/index/singleplay/change?userData=${encodeURIComponent(JSON.stringify(currentUser.value))}`
|
||
})
|
||
}
|
||
|
||
// 更新用户数据 - 从change页面返回时调用
|
||
const updateUserData = (updatedUser) => {
|
||
console.log('更新用户数据', updatedUser)
|
||
|
||
// 更新当前用户信息
|
||
currentUser.value = { ...updatedUser }
|
||
|
||
// 更新玩家列表中的用户信息
|
||
const selfPlayerIndex = players.value.findIndex(p => p.id === 'self')
|
||
if (selfPlayerIndex !== -1) {
|
||
players.value[selfPlayerIndex] = {
|
||
...players.value[selfPlayerIndex],
|
||
name: updatedUser.name,
|
||
avatar: updatedUser.avatar
|
||
}
|
||
}
|
||
|
||
// 当启用台板模式时，确保台板玩家信息正确
|
||
if (tableMode.value) {
|
||
const tablePlayerIndex = players.value.findIndex(p => p.id === 'table')
|
||
if (tablePlayerIndex === -1) {
|
||
// 如果需要，重新添加台板玩家（这通常不会发生，因为计算属性会处理）
|
||
players.value.push(tablePlayer)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 头像和昵称编辑功能已迁移到change页面
|
||
|
||
// 编辑分数
|
||
const editScore = (index) => {
|
||
console.log('编辑分数', index)
|
||
const player = displayPlayers.value[index]
|
||
|
||
// 检查是否是台板玩家
|
||
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'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
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 startScoring = () => {
|
||
console.log('开局计分')
|
||
|
||
// 检查是否有足够的玩家（至少需要2个玩家才能开始计分）
|
||
if (displayPlayers.value.length < 2) {
|
||
uni.showToast({
|
||
title: '玩家数不超过两个人时无法点击进行开始计分',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 重置所有玩家分数
|
||
players.value.forEach(player => {
|
||
player.score = 0
|
||
})
|
||
|
||
// 重置台板玩家分数（即使不在原始数组中）
|
||
if (tableMode.value) {
|
||
tablePlayer.score = 0
|
||
}
|
||
|
||
// 准备要传递的玩家数据
|
||
const playersToPass = [...displayPlayers.value]
|
||
|
||
// 保存到临时存储，用于页面间数据传递
|
||
uni.setStorageSync('currentPlayers', JSON.stringify(playersToPass))
|
||
|
||
// 跳转到计分页面
|
||
uni.navigateTo({
|
||
url: '/pages/index/singleplay/scoring'
|
||
})
|
||
}
|
||
|
||
// 结算房间
|
||
const settleRoom = () => {
|
||
console.log('结算房间')
|
||
|
||
// 显示结算结果，使用displayPlayers确保包含台板玩家
|
||
let result = '结算结果:\n'
|
||
displayPlayers.value.forEach(player => {
|
||
result += `${player.name}: ${player.score}分\n`
|
||
})
|
||
|
||
uni.showModal({
|
||
title: '结算',
|
||
content: result,
|
||
confirmText: '保存记录',
|
||
cancelText: '关闭',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 这里可以保存记录到数据库
|
||
uni.showToast({
|
||
title: '记录已保存',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
console.log('单人模式页面加载完成')
|
||
// 可以在这里初始化数据或加载用户信息
|
||
|
||
// 生成随机房间号（4位数字）
|
||
roomId.value = Math.floor(1000 + Math.random() * 9000).toString()
|
||
|
||
// 动态设置导航栏标题
|
||
uni.setNavigationBarTitle({
|
||
title: `单人 - ${roomId.value}号房间`
|
||
})
|
||
|
||
// 监听页面返回事件，用于接收从计分页面传回的更新后的分数
|
||
const updateListener = () => {
|
||
// 尝试获取更新后的玩家数据
|
||
const updatedPlayers = uni.getStorageSync('updatedPlayers')
|
||
if (updatedPlayers) {
|
||
try {
|
||
const parsedPlayers = JSON.parse(updatedPlayers)
|
||
console.log('收到更新的玩家数据:', parsedPlayers)
|
||
|
||
// 更新玩家列表中的分数
|
||
parsedPlayers.forEach(updatedPlayer => {
|
||
// 查找对应的玩家
|
||
const playerIndex = players.value.findIndex(p => p.id === updatedPlayer.id)
|
||
if (playerIndex !== -1) {
|
||
// 更新普通玩家的分数
|
||
players.value[playerIndex].score = updatedPlayer.score
|
||
} else if (updatedPlayer.id === 'table') {
|
||
// 更新台板玩家的分数
|
||
tablePlayer.score = updatedPlayer.score
|
||
}
|
||
})
|
||
|
||
// 清除临时存储的数据
|
||
uni.removeStorageSync('updatedPlayers')
|
||
} catch (error) {
|
||
console.error('解析更新的玩家数据失败:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听页面显示事件
|
||
uni.$on('updatePlayers', updateListener)
|
||
|
||
// 监听页面显示生命周期
|
||
uni.onShow(() => {
|
||
updateListener()
|
||
})
|
||
|
||
// 组件卸载时移除监听
|
||
onUnmounted(() => {
|
||
uni.$off('updatePlayers', updateListener)
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.singleplay {
|
||
width: 750rpx;
|
||
margin: 0;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f8f8f8;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
user-select: none;
|
||
/* #endif */
|
||
}
|
||
|
||
/* 顶部功能区 */
|
||
.top-functions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
//padding: 10rpx 15rpx;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
overflow-x: auto;
|
||
|
||
.function-btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 5rpx;
|
||
padding: 8rpx 8rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
margin: 0 8rpx;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
|
||
// 图标样式
|
||
.btn-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
// 文本样式
|
||
text {
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// 微信小程序特有点击反馈
|
||
/* #ifdef MP-WEIXIN */
|
||
&:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.95);
|
||
}
|
||
/* #endif */
|
||
}
|
||
|
||
.switch-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
margin: 0 8rpx;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
switch {
|
||
transform: scale(0.75);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 对局记录区域 */
|
||
.game-record {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30rpx;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.record-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
|
||
.hint {
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
/* 用户信息区域 */
|
||
.user-section {
|
||
margin-bottom: 20rpx;
|
||
|
||
.user-hint {
|
||
font-size: 24rpx;
|
||
color: #fa5d5d;
|
||
margin-bottom: 15rpx;
|
||
display: block;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
padding: 10rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f0f8ff;
|
||
|
||
.user-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-details {
|
||
.user-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
.self-tag {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 玩家列表区域 */
|
||
.players-section {
|
||
.section-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
|
||
.header-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.player-count {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 玩家表格 */
|
||
.players-table {
|
||
border: 1rpx solid #e0e0e0;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.table-header {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 底部操作按钮 */
|
||
.bottom-buttons {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20rpx;
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
/* #endif */
|
||
|
||
.start-btn,
|
||
.settle-btn {
|
||
flex: 1;
|
||
height: 90rpx;
|
||
font-size: 32rpx;
|
||
line-height: 90rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.start-btn {
|
||
background-color: #007aff;
|
||
}
|
||
|
||
.settle-btn {
|
||
border: 1rpx solid #007aff;
|
||
color: #007aff;
|
||
}
|
||
}
|
||
|
||
/* 适配不同屏幕尺寸 */
|
||
@media screen and (max-width: 375px) {
|
||
.singleplay {
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.top-functions {
|
||
gap: 8rpx;
|
||
|
||
.function-btn {
|
||
padding: 1rpx 1rpx;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |