111
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
|
||||
8
scoring/api/room.js
Normal file
8
scoring/api/room.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import {GET} from '@/utils/request'
|
||||
|
||||
|
||||
// 查询【请填写功能名称】详细
|
||||
export const getuser = (roomid) => {
|
||||
return GET('/system/roomuser/list',roomid)
|
||||
}
|
||||
|
||||
@@ -17,6 +17,20 @@
|
||||
"path": "pages/scoring/index", // 计分页面(新增注册)
|
||||
"style": { "navigationBarTitleText": "开局计分" }
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/game-detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "对局详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/edit-user-info/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑用户信息"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/settle/index", // 结算页面(新增注册)
|
||||
"style": { "navigationBarTitleText": "房间结算" }
|
||||
|
||||
273
scoring/pages/edit-user-info/index.vue
Normal file
273
scoring/pages/edit-user-info/index.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="edit-user-info">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="nav-title">编辑用户信息</view>
|
||||
<view class="nav-save" @click="saveUserInfo">
|
||||
<text>保存</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息表单 -->
|
||||
<view class="user-form">
|
||||
<!-- 头像编辑 -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-label">头像:</view>
|
||||
<view class="avatar-content">
|
||||
<view class="avatar-upload" @click="updateAvatar">
|
||||
<image class="avatar-preview" :src="userInfo.avatar" mode="aspectFit"></image>
|
||||
<view class="avatar-mask">
|
||||
<uni-icons type="camera" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<text class="avatar-tip">点击更新头像</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称编辑 -->
|
||||
<view class="nickname-section">
|
||||
<view class="nickname-label">昵称:</view>
|
||||
<view class="nickname-content">
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="text"
|
||||
placeholder="请输入昵称"
|
||||
v-model="userInfo.nickname"
|
||||
maxlength="20"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
nickname: '',
|
||||
avatar: ''
|
||||
})
|
||||
|
||||
// 组件挂载时加载用户信息
|
||||
onMounted(() => {
|
||||
loadUserInfo()
|
||||
})
|
||||
|
||||
// 加载用户信息
|
||||
const loadUserInfo = () => {
|
||||
const savedUserInfo = uni.getStorageSync('userInfo')
|
||||
if (savedUserInfo) {
|
||||
userInfo.value = savedUserInfo
|
||||
} else {
|
||||
// 默认用户信息
|
||||
userInfo.value = {
|
||||
nickname: '666',
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新头像
|
||||
const updateAvatar = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0]
|
||||
userInfo.value.avatar = tempFilePath
|
||||
|
||||
uni.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('选择头像失败:', err)
|
||||
uni.showToast({
|
||||
title: '选择头像失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存用户信息
|
||||
const saveUserInfo = () => {
|
||||
if (!userInfo.value.nickname.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入昵称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 保存到本地存储
|
||||
uni.setStorageSync('userInfo', userInfo.value)
|
||||
|
||||
// 同时更新玩家数据中的自己信息
|
||||
const players = uni.getStorageSync('players') || []
|
||||
const selfPlayer = players.find(player => player.isSelf)
|
||||
if (selfPlayer) {
|
||||
selfPlayer.name = userInfo.value.nickname
|
||||
selfPlayer.avatar = userInfo.value.avatar
|
||||
uni.setStorageSync('players', players)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 触发全局事件,通知其他页面更新
|
||||
uni.$emit('userInfoUpdated')
|
||||
|
||||
// 延迟返回,确保事件被处理
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-user-info {
|
||||
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-back, .nav-save {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-save text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户信息表单 */
|
||||
.user-form {
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
/* 头像编辑区域 */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 60rpx;
|
||||
padding-bottom: 40rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.avatar-label {
|
||||
width: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avatar-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&:active .avatar-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-tip {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/* 昵称编辑区域 */
|
||||
.nickname-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname-label {
|
||||
width: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nickname-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&:focus {
|
||||
border-color: #41479b;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
272
scoring/pages/game-detail/index.vue
Normal file
272
scoring/pages/game-detail/index.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="game-detail-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<uni-icons type="arrowleft" 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="player-header">
|
||||
<view class="header-row">
|
||||
<view class="header-cell header-label">玩家 ({{ players.length }}位)</view>
|
||||
<view class="header-cell" v-for="player in players" :key="player.id">
|
||||
<view class="player-header-info">
|
||||
<image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 对局详情表格 -->
|
||||
<view class="detail-table">
|
||||
<!-- 总分行 -->
|
||||
<view class="table-row">
|
||||
<view class="row-label">总分</view>
|
||||
<view class="row-cells">
|
||||
<view class="score-cell" v-for="player in players" :key="player.id">
|
||||
{{ formatScore(player.totalScore) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每局得分行 -->
|
||||
<view class="table-row" v-for="(round, roundIndex) in gameRounds" :key="roundIndex">
|
||||
<view class="row-label">第{{ roundIndex + 1 }}局</view>
|
||||
<view class="row-cells">
|
||||
<view class="score-cell" v-for="player in players" :key="player.id">
|
||||
{{ formatScore(getPlayerRoundScore(roundIndex, player.id)) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部分享按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="share-btn" @click="shareDetail">分享对局详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 玩家数据
|
||||
const players = ref([])
|
||||
// 对局记录
|
||||
const gameRounds = ref([])
|
||||
|
||||
// 格式化分数显示
|
||||
const formatScore = (score) => {
|
||||
if (score === 0) return '0'
|
||||
return score > 0 ? `+${score}` : `${score}`
|
||||
}
|
||||
|
||||
// 获取玩家在某一局的得分
|
||||
const getPlayerRoundScore = (roundIndex, playerId) => {
|
||||
if (!gameRounds.value[roundIndex]) return 0
|
||||
const playerScore = gameRounds.value[roundIndex].find(item => item.playerId === playerId)
|
||||
return playerScore ? playerScore.score : 0
|
||||
}
|
||||
|
||||
// 计算玩家总分
|
||||
const calculateTotalScores = () => {
|
||||
players.value.forEach(player => {
|
||||
let total = 0
|
||||
gameRounds.value.forEach(round => {
|
||||
const roundScore = round.find(item => item.playerId === player.id)
|
||||
if (roundScore) {
|
||||
total += roundScore.score
|
||||
}
|
||||
})
|
||||
player.totalScore = total
|
||||
})
|
||||
}
|
||||
|
||||
// 页面加载时初始化数据
|
||||
onMounted(() => {
|
||||
// 从本地存储获取玩家数据和对局记录
|
||||
const savedPlayers = uni.getStorageSync('players')
|
||||
const savedRounds = uni.getStorageSync('gameRounds')
|
||||
|
||||
if (savedPlayers) {
|
||||
players.value = savedPlayers
|
||||
} 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
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '2',
|
||||
avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
|
||||
totalScore: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
if (savedRounds) {
|
||||
gameRounds.value = savedRounds
|
||||
calculateTotalScores()
|
||||
} else {
|
||||
// 如果没有数据,使用默认数据
|
||||
gameRounds.value = [
|
||||
[
|
||||
{ playerId: 1, score: 3 },
|
||||
{ playerId: 2, score: -3 }
|
||||
]
|
||||
]
|
||||
calculateTotalScores()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 分享对局详情
|
||||
const shareDetail = () => {
|
||||
uni.showToast({
|
||||
title: '分享功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.game-detail-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-back, .nav-actions {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.player-header {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&.header-label {
|
||||
width: 200rpx;
|
||||
flex: none;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.player-header-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-table {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-label {
|
||||
width: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row-cells {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.score-cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #eee;
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #ffc107;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,7 +5,10 @@
|
||||
<view class="nav-back" @click="goBack">
|
||||
<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="nav-title">第1局</view>
|
||||
<view class="nav-title">
|
||||
{{ isEditMode ? '修改' : '第' + currentRound + '局' }}
|
||||
<text v-if="isEditMode">第{{ currentRound }}局</text>
|
||||
</view>
|
||||
<view class="nav-actions">
|
||||
<uni-icons type="more" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
@@ -18,22 +21,37 @@
|
||||
<text>胜负</text>
|
||||
<text>得分</text>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
|
||||
<!-- 动态渲染每个玩家的计分行 -->
|
||||
<view class="table-row" v-for="(player, index) in players" :key="player.id">
|
||||
<view class="player-info">
|
||||
<image class="player-avatar" src="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" mode="aspectFit"></image>
|
||||
<text class="player-name">玩家80061</text>
|
||||
<image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view v-if="player.isSelf" class="self-tag">自己</view>
|
||||
</view>
|
||||
<view class="win-lose">
|
||||
<button class="win-btn" :class="{ active: isWin }" @click="isWin = true">胜</button>
|
||||
<button class="lose-btn" :class="{ active: !isWin }" @click="isWin = false">负</button>
|
||||
<button class="win-btn" :class="{ active: player.isWin }" @click="setWinStatus(index, true)">胜</button>
|
||||
<button class="lose-btn" :class="{ active: !player.isWin }" @click="setWinStatus(index, false)">负</button>
|
||||
</view>
|
||||
<view class="score-input">
|
||||
<input type="text" v-model="score" placeholder="0" class="score-text" />
|
||||
<button class="sum-btn">∑ 合分</button>
|
||||
<input
|
||||
type="text"
|
||||
v-model="player.currentScore"
|
||||
placeholder="0"
|
||||
class="score-text"
|
||||
@focus="setCurrentPlayer(index)"
|
||||
@input="checkTotalScore"
|
||||
/>
|
||||
<button class="sum-btn" @click="calculateTotalScore(index)">∑ 合分</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 总分检查提示 -->
|
||||
<view v-if="showScoreWarning" class="score-warning">
|
||||
对局分数相加不为0,请检查!
|
||||
</view>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<view class="keypad">
|
||||
<view class="keypad-row">
|
||||
@@ -48,40 +66,287 @@
|
||||
<button class="keypad-btn" @click="inputNumber(5)">5</button>
|
||||
<button class="keypad-btn" @click="inputNumber(6)">6</button>
|
||||
<button class="keypad-btn" @click="inputOperator('-')">-</button>
|
||||
<button class="keypad-btn submit-btn" @click="submitScore">提交</button>
|
||||
<button class="keypad-btn submit-btn" :class="{ disabled: !canSubmit }" @click="submitScore" :disabled="!canSubmit">
|
||||
{{ isEditMode ? '更新' : '提交' }}
|
||||
</button>
|
||||
</view>
|
||||
<view class="keypad-row">
|
||||
<button class="keypad-btn" @click="inputNumber(7)">7</button>
|
||||
<button class="keypad-btn" @click="inputNumber(8)">8</button>
|
||||
<button class="keypad-btn" @click="inputNumber(9)">9</button>
|
||||
<button class="keypad-btn" @click="inputNumber(0)">0</button>
|
||||
<button class="keypad-btn clear-btn" @click="clearScore">清空</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const isWin = ref(true)
|
||||
const score = ref('0')
|
||||
// 玩家数据
|
||||
const players = ref([])
|
||||
// 当前操作的玩家索引
|
||||
const currentPlayerIndex = ref(0)
|
||||
// 当前对局数
|
||||
const currentRound = ref(1)
|
||||
// 是否显示分数警告
|
||||
const showScoreWarning = ref(false)
|
||||
// 是否可以提交
|
||||
const canSubmit = ref(false)
|
||||
// 是否为编辑模式
|
||||
const isEditMode = ref(false)
|
||||
// 编辑的对局索引
|
||||
const editRoundIndex = ref(-1)
|
||||
|
||||
// 使用 onMounted 替代 onLoad
|
||||
onMounted(() => {
|
||||
// 获取页面参数
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
const options = currentPage.options || {}
|
||||
|
||||
// 判断是否为编辑模式
|
||||
isEditMode.value = options.mode === 'edit'
|
||||
if (isEditMode.value && options.roundIndex) {
|
||||
editRoundIndex.value = parseInt(options.roundIndex)
|
||||
}
|
||||
|
||||
if (options.players) {
|
||||
try {
|
||||
const playerData = JSON.parse(decodeURIComponent(options.players))
|
||||
// 初始化每个玩家的胜负状态和得分
|
||||
players.value = playerData.map(player => ({
|
||||
...player,
|
||||
// 编辑模式下使用传入的胜负状态和得分,新增模式下使用默认值
|
||||
isWin: player.isWin !== undefined ? player.isWin : true,
|
||||
currentScore: player.currentScore || '0',
|
||||
finalScore: player.finalScore || 0
|
||||
}))
|
||||
} catch (e) {
|
||||
console.error('解析玩家数据失败:', e)
|
||||
setDefaultPlayers()
|
||||
}
|
||||
} else {
|
||||
setDefaultPlayers()
|
||||
}
|
||||
|
||||
// 获取当前对局数
|
||||
if (options.round) {
|
||||
currentRound.value = parseInt(options.round)
|
||||
}
|
||||
|
||||
// 初始化时检查总分
|
||||
checkTotalScore()
|
||||
})
|
||||
|
||||
// 设置默认玩家数据
|
||||
const setDefaultPlayers = () => {
|
||||
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,
|
||||
isSelf: true,
|
||||
isWin: true,
|
||||
currentScore: '0',
|
||||
finalScore: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '玩家2',
|
||||
avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
|
||||
totalScore: 0,
|
||||
isSelf: false,
|
||||
isWin: true,
|
||||
currentScore: '0',
|
||||
finalScore: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 安全计算表达式(只支持加减法)
|
||||
const safeCalculate = (expression) => {
|
||||
if (!expression || expression === '0') return 0
|
||||
|
||||
try {
|
||||
// 移除所有空格
|
||||
const cleanExpr = expression.replace(/\s+/g, '')
|
||||
|
||||
// 验证表达式只包含数字和加减号
|
||||
if (!/^[\d+\-]+$/.test(cleanExpr)) {
|
||||
console.warn('表达式包含非法字符:', expression)
|
||||
return 0
|
||||
}
|
||||
|
||||
// 分割数字和运算符
|
||||
const numbers = cleanExpr.split(/[+\-]/).map(num => parseInt(num) || 0)
|
||||
const operators = cleanExpr.split(/\d+/).filter(op => op !== '')
|
||||
|
||||
// 如果没有运算符,直接返回数字
|
||||
if (operators.length === 0) {
|
||||
return numbers[0] || 0
|
||||
}
|
||||
|
||||
// 从第一个数字开始计算
|
||||
let result = numbers[0]
|
||||
|
||||
// 遍历运算符进行计算
|
||||
for (let i = 0; i < operators.length; i++) {
|
||||
const operator = operators[i]
|
||||
const nextNumber = numbers[i + 1] || 0
|
||||
|
||||
if (operator === '+') {
|
||||
result += nextNumber
|
||||
} else if (operator === '-') {
|
||||
result -= nextNumber
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
} catch (error) {
|
||||
console.error('计算表达式失败:', error, expression)
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
// 检查总分是否为0
|
||||
const checkTotalScore = () => {
|
||||
let total = 0
|
||||
|
||||
// 计算所有玩家的得分总和
|
||||
players.value.forEach(player => {
|
||||
const score = safeCalculate(player.currentScore)
|
||||
const finalScore = player.isWin ? score : -score
|
||||
total += finalScore
|
||||
})
|
||||
|
||||
// 检查总和是否为0
|
||||
showScoreWarning.value = total !== 0
|
||||
canSubmit.value = total === 0
|
||||
}
|
||||
|
||||
// 设置胜负状态
|
||||
const setWinStatus = (index, isWin) => {
|
||||
players.value[index].isWin = isWin
|
||||
checkTotalScore()
|
||||
}
|
||||
|
||||
// 设置当前操作的玩家
|
||||
const setCurrentPlayer = (index) => {
|
||||
currentPlayerIndex.value = index
|
||||
}
|
||||
|
||||
// 数字键盘输入逻辑
|
||||
const inputNumber = (num) => {
|
||||
score.value += num.toString()
|
||||
const player = players.value[currentPlayerIndex.value]
|
||||
if (player.currentScore === '0') {
|
||||
player.currentScore = num.toString()
|
||||
} else {
|
||||
player.currentScore += num.toString()
|
||||
}
|
||||
checkTotalScore()
|
||||
}
|
||||
|
||||
const inputOperator = (op) => {
|
||||
score.value += op
|
||||
const player = players.value[currentPlayerIndex.value]
|
||||
// 确保不会连续输入运算符
|
||||
const lastChar = player.currentScore.slice(-1)
|
||||
if (lastChar !== '+' && lastChar !== '-') {
|
||||
player.currentScore += op
|
||||
checkTotalScore()
|
||||
}
|
||||
}
|
||||
|
||||
const deleteLast = () => {
|
||||
score.value = score.value.slice(0, -1)
|
||||
const player = players.value[currentPlayerIndex.value]
|
||||
if (player.currentScore.length > 1) {
|
||||
player.currentScore = player.currentScore.slice(0, -1)
|
||||
} else {
|
||||
player.currentScore = '0'
|
||||
}
|
||||
checkTotalScore()
|
||||
}
|
||||
|
||||
const clearScore = () => {
|
||||
players.value[currentPlayerIndex.value].currentScore = '0'
|
||||
checkTotalScore()
|
||||
}
|
||||
|
||||
// 计算合分 - 将输入的分数归零
|
||||
const calculateTotalScore = (index) => {
|
||||
// 将当前玩家的输入分数归零
|
||||
players.value[index].currentScore = '0'
|
||||
|
||||
// 显示提示信息
|
||||
uni.showToast({
|
||||
title: '分数已归零',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
|
||||
// 重新检查总分
|
||||
checkTotalScore()
|
||||
}
|
||||
|
||||
// 提交分数并跳转至结算页
|
||||
const submitScore = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/settle/index?score=' + score.value + '&isWin=' + isWin.value
|
||||
if (!canSubmit.value) {
|
||||
uni.showToast({
|
||||
title: '对局分数相加不为0,请检查!',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 计算每个玩家的最终得分
|
||||
const roundScores = players.value.map(player => {
|
||||
// 使用安全的方式计算表达式
|
||||
const scoreChange = safeCalculate(player.currentScore)
|
||||
|
||||
// 根据胜负决定分数正负
|
||||
const finalScore = player.isWin ? scoreChange : -scoreChange
|
||||
|
||||
return {
|
||||
playerId: player.id,
|
||||
score: finalScore
|
||||
}
|
||||
})
|
||||
|
||||
// 获取现有的对局记录
|
||||
const existingRounds = uni.getStorageSync('gameRounds') || []
|
||||
|
||||
if (isEditMode.value && editRoundIndex.value >= 0) {
|
||||
// 编辑模式:更新指定索引的对局记录
|
||||
existingRounds[editRoundIndex.value] = roundScores
|
||||
|
||||
uni.showToast({
|
||||
title: '对局分数已更新',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
// 新增模式:添加新的对局记录
|
||||
existingRounds.push(roundScores)
|
||||
|
||||
uni.showToast({
|
||||
title: '对局分数已保存',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
// 保存到本地存储
|
||||
uni.setStorageSync('gameRounds', existingRounds)
|
||||
|
||||
// 添加短暂延迟,确保数据保存完成
|
||||
setTimeout(() => {
|
||||
// 返回房间页面
|
||||
uni.navigateBack({
|
||||
success: () => {
|
||||
console.log('返回房间页面,数据已更新')
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
@@ -115,6 +380,14 @@ const goBack = () => {
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,6 +416,11 @@ const goBack = () => {
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
@@ -159,6 +437,15 @@ const goBack = () => {
|
||||
.player-name {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,23 +459,31 @@ const goBack = () => {
|
||||
line-height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
|
||||
.win-btn {
|
||||
background-color: #fff;
|
||||
color: #007aff;
|
||||
border: 1rpx solid #007aff;
|
||||
|
||||
&.active {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lose-btn {
|
||||
background-color: #fff;
|
||||
color: #007aff;
|
||||
border: 1rpx solid #007aff;
|
||||
}
|
||||
color: #ff3b30;
|
||||
border: 1rpx solid #ff3b30;
|
||||
|
||||
.active {
|
||||
background-color: #007aff;
|
||||
&.active {
|
||||
background-color: #ff3b30;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,6 +514,16 @@ const goBack = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.score-warning {
|
||||
text-align: center;
|
||||
color: #ff3b30;
|
||||
font-size: 28rpx;
|
||||
margin: 20rpx;
|
||||
padding: 10rpx;
|
||||
background-color: #ffe6e6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.keypad {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -244,11 +549,22 @@ const goBack = () => {
|
||||
background-color: #f8f8f8;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
&.submit-btn {
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
|
||||
&.disabled {
|
||||
background-color: #ccc;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.clear-btn {
|
||||
background-color: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,19 +19,25 @@
|
||||
<text>得分</text>
|
||||
<text>倍率分</text>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
|
||||
<!-- 动态渲染每个玩家的结算结果 -->
|
||||
<view class="table-row" v-for="player in players" :key="player.id">
|
||||
<view class="player-info">
|
||||
<image class="player-avatar" src="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" mode="aspectFit"></image>
|
||||
<text class="player-name">玩家80061</text>
|
||||
<image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
<view class="win-tag" v-if="isWin">胜利!</view>
|
||||
<text class="score">{{ score }}</text>
|
||||
<text class="score">0</text>
|
||||
<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">
|
||||
<!-- 对局详情链接 - 修改为可点击 -->
|
||||
<view class="detail-link" @click="goToGameDetail">
|
||||
<text>对局详情</text>
|
||||
</view>
|
||||
|
||||
@@ -41,26 +47,85 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const score = ref('0')
|
||||
const isWin = ref(true)
|
||||
const players = ref([])
|
||||
const rate = ref(1)
|
||||
|
||||
// 页面加载时接收计分页传参
|
||||
onLoad((options) => {
|
||||
score.value = options.score || '0'
|
||||
isWin.value = options.isWin === 'true'
|
||||
// 格式化分数显示
|
||||
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 savedPlayers = uni.getStorageSync('players')
|
||||
const savedRounds = uni.getStorageSync('gameRounds')
|
||||
|
||||
if (savedPlayers && savedRounds) {
|
||||
// 计算每个玩家的总分和倍率分
|
||||
players.value = savedPlayers.map(player => {
|
||||
// 计算总分
|
||||
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
|
||||
}
|
||||
})
|
||||
} 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
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 返回首页
|
||||
// 跳转到对局详情页面
|
||||
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: '分享功能待实现',
|
||||
@@ -122,6 +187,11 @@ const shareResult = () => {
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
@@ -141,33 +211,62 @@ const shareResult = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.win-tag {
|
||||
.win-lose {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: #f00;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.win-tag {
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.lose-tag {
|
||||
background-color: #fa5151;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.draw-tag {
|
||||
background-color: #10aeff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.score {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
text-align: center;
|
||||
margin: 20rpx 0;
|
||||
padding: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #41479b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
|
||||
@@ -35,24 +35,83 @@
|
||||
<view class="record-section">
|
||||
<view class="record-title">对局记录</view>
|
||||
<view class="record-tip">点击对局分数进行修改</view>
|
||||
<view class="record-tip">点击自己头像编辑用户头像和昵称~</view>
|
||||
<view class="warning-tip">
|
||||
本工具不涉及金钱,禁止用于非法行为!
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 玩家列表 -->
|
||||
<!-- 玩家列表 - 添加滚动条功能 -->
|
||||
<view class="player-list-container">
|
||||
<!-- 水平滚动容器 -->
|
||||
<scroll-view
|
||||
class="player-scroll-view"
|
||||
scroll-x="true"
|
||||
:scroll-left="scrollLeft"
|
||||
@scroll="onScroll"
|
||||
:show-scrollbar="false"
|
||||
scroll-with-animation
|
||||
>
|
||||
<view class="player-list">
|
||||
<view class="player-item">
|
||||
<!-- 玩家信息行 -->
|
||||
<view class="player-row">
|
||||
<view class="player-label">玩家 ({{ players.length }}位)</view>
|
||||
<view class="player-info-container">
|
||||
<view class="player-info" v-for="(player, index) in players" :key="player.id">
|
||||
<view class="player-columns">
|
||||
<view class="player-column" v-for="(player, index) in players" :key="player.id">
|
||||
<view class="player-info" @click="editUserInfo(player)">
|
||||
<image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view v-if="player.isSelf" class="self-tag">自己</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="player-item">
|
||||
</view>
|
||||
|
||||
<!-- 总分行 -->
|
||||
<view class="player-row">
|
||||
<view class="player-label">总分</view>
|
||||
<view class="player-score">{{ totalScore }}</view>
|
||||
<view class="player-columns">
|
||||
<view class="player-column" v-for="player in players" :key="player.id">
|
||||
<view class="player-score">
|
||||
{{ formatScore(player.totalScore) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每局得分行 -->
|
||||
<view class="player-row" v-for="(round, roundIndex) in gameRounds" :key="roundIndex">
|
||||
<view class="player-label">第{{ roundIndex + 1 }}局</view>
|
||||
<view class="player-columns">
|
||||
<view class="player-column" v-for="player in players" :key="player.id">
|
||||
<view class="round-score" @click="editRoundScore(roundIndex, player.id)">
|
||||
{{ formatScore(getPlayerRoundScore(roundIndex, player.id)) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 自定义可拖动滚动条 -->
|
||||
<view class="custom-scrollbar" v-if="showScrollIndicator">
|
||||
<view
|
||||
class="scroll-track"
|
||||
@touchstart="onTrackTouchStart"
|
||||
@touchmove.prevent="onTrackTouchMove"
|
||||
@touchend="onTrackTouchEnd"
|
||||
:id="trackId"
|
||||
>
|
||||
<view
|
||||
class="scroll-thumb"
|
||||
:style="{
|
||||
left: thumbPosition + '%',
|
||||
width: thumbWidth + '%'
|
||||
}"
|
||||
@touchstart="onThumbTouchStart"
|
||||
@touchmove.prevent="onThumbTouchMove"
|
||||
@touchend="onThumbTouchEnd"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -80,7 +139,7 @@
|
||||
|
||||
<view class="popup-buttons">
|
||||
<button class="share-btn" @click="shareRoom">分享给好友邀请加入房间</button>
|
||||
<button class="add-virtual-btn" @click="addVirtualPlayer">手动添加虚拟玩家</button>
|
||||
<button class="add-virtual-btn" @click="openAddVirtualPlayerPopup">手动添加虚拟玩家</button>
|
||||
</view>
|
||||
|
||||
<view class="popup-footer">
|
||||
@@ -90,6 +149,31 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加虚拟玩家弹窗 -->
|
||||
<view v-if="showAddVirtualPlayerPopup" class="popup-mask" @click="closeAddVirtualPlayerPopup">
|
||||
<view class="add-virtual-popup-content" @click.stop>
|
||||
<view class="add-virtual-popup-body">
|
||||
<view class="add-virtual-title">添加玩家</view>
|
||||
|
||||
<view class="name-input-section">
|
||||
<input
|
||||
class="name-input"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
v-model="virtualPlayerName"
|
||||
maxlength="10"
|
||||
focus
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="add-virtual-popup-buttons">
|
||||
<button class="cancel-btn" @click="closeAddVirtualPlayerPopup">取消</button>
|
||||
<button class="confirm-btn" @click="confirmAddVirtualPlayer">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 结算房间弹窗 -->
|
||||
<view v-if="showSettlePopup" class="popup-mask" @click="closeSettlePopup">
|
||||
<view class="settle-popup-content" @click.stop>
|
||||
@@ -125,12 +209,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { getuser } from '@/api/room'
|
||||
// 房间数据
|
||||
const roomId = ref('15198520')
|
||||
const voiceEnabled = ref(false)
|
||||
@@ -142,29 +228,342 @@ const players = ref([
|
||||
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',
|
||||
score: 0,
|
||||
totalScore: 0,
|
||||
isSelf: true
|
||||
}
|
||||
])
|
||||
|
||||
// 游戏对局记录
|
||||
const gameRounds = ref([])
|
||||
|
||||
// 弹窗显示状态
|
||||
const showAddPlayerPopup = ref(false)
|
||||
const showAddVirtualPlayerPopup = ref(false)
|
||||
const showSettlePopup = ref(false)
|
||||
const showTransferPopup = ref(false)
|
||||
const rateValue = ref('')
|
||||
const virtualPlayerName = ref('')
|
||||
|
||||
// 计算总分 - 使用普通函数替代 computed
|
||||
const totalScore = ref(0)
|
||||
// 滚动条相关数据
|
||||
const scrollLeft = ref(0)
|
||||
const scrollWidth = ref(0)
|
||||
const scrollViewWidth = ref(0)
|
||||
const trackId = ref('scroll-track-' + Date.now())
|
||||
|
||||
// 更新总分函数
|
||||
const updateTotalScore = () => {
|
||||
totalScore.value = players.value.reduce((sum, player) => sum + player.score, 0)
|
||||
// 滚动条拖动状态
|
||||
const isDragging = ref(false)
|
||||
const dragStartX = ref(0)
|
||||
const dragStartScrollLeft = ref(0)
|
||||
const trackRect = ref({ left: 0, width: 0 })
|
||||
|
||||
// 存储最后知道的用户信息,用于比较
|
||||
let lastUserInfo = null
|
||||
|
||||
// 用于保存interval ID的ref
|
||||
const storageIntervalIds = ref(null)
|
||||
const userInfoIntervalIds = ref(null)
|
||||
|
||||
// 计算属性:是否显示滚动条指示器
|
||||
const showScrollIndicator = computed(() => {
|
||||
return scrollWidth.value > scrollViewWidth.value
|
||||
})
|
||||
|
||||
// 计算属性:滚动条滑块宽度
|
||||
const thumbWidth = computed(() => {
|
||||
if (scrollWidth.value === 0) return 100
|
||||
const widthRatio = (scrollViewWidth.value / scrollWidth.value) * 100
|
||||
return Math.max(20, Math.min(100, widthRatio)) // 最小宽度20%,最大100%
|
||||
})
|
||||
|
||||
// 计算属性:滚动条滑块位置
|
||||
const thumbPosition = computed(() => {
|
||||
if (scrollWidth.value === 0 || scrollWidth.value <= scrollViewWidth.value) return 0
|
||||
const maxScroll = scrollWidth.value - scrollViewWidth.value
|
||||
return (scrollLeft.value / maxScroll) * (100 - thumbWidth.value)
|
||||
})
|
||||
|
||||
// 格式化分数显示
|
||||
const formatScore = (score) => {
|
||||
if (score === 0) return '0'
|
||||
return score > 0 ? `+${score}` : `${score}`
|
||||
}
|
||||
|
||||
// 获取玩家在某一局的得分
|
||||
const getPlayerRoundScore = (roundIndex, playerId) => {
|
||||
if (!gameRounds.value[roundIndex]) return 0
|
||||
const playerScore = gameRounds.value[roundIndex].find(item => item.playerId === playerId)
|
||||
return playerScore ? playerScore.score : 0
|
||||
}
|
||||
|
||||
// 更新玩家总分
|
||||
const updateTotalScores = () => {
|
||||
players.value.forEach(player => {
|
||||
let total = 0
|
||||
gameRounds.value.forEach(round => {
|
||||
const roundScore = round.find(item => item.playerId === player.id)
|
||||
if (roundScore) {
|
||||
total += roundScore.score
|
||||
}
|
||||
})
|
||||
player.totalScore = total
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动事件处理
|
||||
const onScroll = (e) => {
|
||||
scrollLeft.value = e.detail.scrollLeft
|
||||
}
|
||||
|
||||
// 监听玩家数量变化,更新滚动区域
|
||||
watch(players, () => {
|
||||
// 在下一个tick更新滚动区域尺寸
|
||||
setTimeout(() => {
|
||||
updateScrollDimensions()
|
||||
}, 100)
|
||||
}, { deep: true })
|
||||
|
||||
// 更新滚动区域尺寸
|
||||
const updateScrollDimensions = () => {
|
||||
const query = uni.createSelectorQuery()
|
||||
query.select('.player-scroll-view').boundingClientRect()
|
||||
query.select('.player-list').boundingClientRect()
|
||||
query.exec((res) => {
|
||||
if (res[0] && res[1]) {
|
||||
scrollViewWidth.value = res[0].width
|
||||
scrollWidth.value = res[1].width
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取轨道位置信息
|
||||
const getTrackRect = () => {
|
||||
return new Promise((resolve) => {
|
||||
const query = uni.createSelectorQuery()
|
||||
query.select('.custom-scrollbar .scroll-track').boundingClientRect()
|
||||
query.exec((res) => {
|
||||
if (res[0]) {
|
||||
trackRect.value = {
|
||||
left: res[0].left,
|
||||
width: res[0].width
|
||||
}
|
||||
resolve(trackRect.value)
|
||||
} else {
|
||||
resolve(null)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动条滑块触摸开始
|
||||
const onThumbTouchStart = async (e) => {
|
||||
isDragging.value = true
|
||||
dragStartX.value = e.touches[0].clientX
|
||||
dragStartScrollLeft.value = scrollLeft.value
|
||||
|
||||
// 获取轨道位置信息
|
||||
await getTrackRect()
|
||||
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// 滚动条滑块触摸移动
|
||||
const onThumbTouchMove = (e) => {
|
||||
if (!isDragging.value) return
|
||||
|
||||
const deltaX = e.touches[0].clientX - dragStartX.value
|
||||
const maxScroll = Math.max(0, scrollWidth.value - scrollViewWidth.value)
|
||||
|
||||
if (maxScroll > 0 && trackRect.value.width > 0) {
|
||||
const scrollPercent = deltaX / trackRect.value.width
|
||||
const newScrollLeft = dragStartScrollLeft.value + (scrollPercent * maxScroll)
|
||||
scrollLeft.value = Math.max(0, Math.min(maxScroll, newScrollLeft))
|
||||
}
|
||||
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// 滚动条滑块触摸结束
|
||||
const onThumbTouchEnd = (e) => {
|
||||
isDragging.value = false
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// 滚动条轨道触摸开始
|
||||
const onTrackTouchStart = async (e) => {
|
||||
// 获取轨道位置信息
|
||||
const rect = await getTrackRect()
|
||||
if (!rect) return
|
||||
|
||||
const clickX = e.touches[0].clientX - rect.left
|
||||
const thumbWidthPx = (thumbWidth.value / 100) * rect.width
|
||||
const thumbCenter = (thumbPosition.value / 100) * rect.width + thumbWidthPx / 2
|
||||
|
||||
// 如果点击位置在滑块中心左侧,滚动到左侧
|
||||
// 如果点击位置在滑块中心右侧,滚动到右侧
|
||||
const maxScroll = Math.max(0, scrollWidth.value - scrollViewWidth.value)
|
||||
|
||||
if (maxScroll > 0) {
|
||||
if (clickX < thumbCenter) {
|
||||
// 向左滚动一页
|
||||
scrollLeft.value = Math.max(0, scrollLeft.value - scrollViewWidth.value * 0.8)
|
||||
} else {
|
||||
// 向右滚动一页
|
||||
scrollLeft.value = Math.min(maxScroll, scrollLeft.value + scrollViewWidth.value * 0.8)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条轨道触摸移动
|
||||
const onTrackTouchMove = (e) => {
|
||||
// 轨道拖动可以用于快速跳转,但这里我们主要用滑块拖动
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// 滚动条轨道触摸结束
|
||||
const onTrackTouchEnd = (e) => {
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// 编辑用户信息
|
||||
const editUserInfo = (player) => {
|
||||
if (player.isSelf) {
|
||||
// 跳转到用户信息编辑页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/edit-user-info/index'
|
||||
})
|
||||
} else {
|
||||
// 如果是其他玩家,可以添加其他操作,比如查看玩家信息等
|
||||
uni.showToast({
|
||||
title: '只能编辑自己的信息',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户信息 - 改进版
|
||||
const loadUserInfo = () => {
|
||||
const savedUserInfo = uni.getStorageSync('userInfo')
|
||||
if (savedUserInfo) {
|
||||
// 强制更新自己的玩家信息
|
||||
const selfPlayerIndex = players.value.findIndex(player => player.isSelf)
|
||||
if (selfPlayerIndex !== -1) {
|
||||
players.value[selfPlayerIndex].name = savedUserInfo.nickname
|
||||
players.value[selfPlayerIndex].avatar = savedUserInfo.avatar
|
||||
// 强制触发视图更新
|
||||
players.value = [...players.value]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载对局记录
|
||||
const loadGameRounds = () => {
|
||||
const savedRounds = uni.getStorageSync('gameRounds')
|
||||
if (savedRounds) {
|
||||
gameRounds.value = savedRounds
|
||||
updateTotalScores()
|
||||
}
|
||||
}
|
||||
|
||||
// 同步玩家信息
|
||||
const syncPlayerInfo = () => {
|
||||
// 从本地存储获取最新的玩家信息
|
||||
const savedPlayers = uni.getStorageSync('players')
|
||||
if (savedPlayers && savedPlayers.length > 0) {
|
||||
// 更新玩家基本信息,但保留当前的总分状态
|
||||
players.value.forEach((player, index) => {
|
||||
const savedPlayer = savedPlayers.find(p => p.id === player.id)
|
||||
if (savedPlayer) {
|
||||
// 只更新头像和名称,不更新总分
|
||||
player.avatar = savedPlayer.avatar
|
||||
player.name = savedPlayer.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息变化监听
|
||||
const setupUserInfoListener = () => {
|
||||
lastUserInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
const currentUserInfo = uni.getStorageSync('userInfo')
|
||||
if (JSON.stringify(currentUserInfo) !== JSON.stringify(lastUserInfo)) {
|
||||
console.log('检测到用户信息变化,自动更新')
|
||||
lastUserInfo = currentUserInfo
|
||||
loadUserInfo()
|
||||
syncPlayerInfo()
|
||||
}
|
||||
}, 500)
|
||||
|
||||
return intervalId
|
||||
}
|
||||
|
||||
// 添加一个全局事件监听器来监听存储变化
|
||||
const setupStorageListener = () => {
|
||||
// 监听存储变化,当 gameRounds 更新时重新加载数据
|
||||
const intervalId = setInterval(() => {
|
||||
const currentRounds = uni.getStorageSync('gameRounds') || []
|
||||
if (JSON.stringify(currentRounds) !== JSON.stringify(gameRounds.value)) {
|
||||
gameRounds.value = currentRounds
|
||||
updateTotalScores()
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
return intervalId
|
||||
}
|
||||
|
||||
// 组件挂载后初始化
|
||||
onMounted(() => {
|
||||
console.log('组件已挂载')
|
||||
updateTotalScore()
|
||||
loadGameRounds()
|
||||
loadUserInfo()
|
||||
|
||||
// 设置监听器并保存ID以便清理
|
||||
const storageIntervalId = setupStorageListener()
|
||||
const userInfoIntervalId = setupUserInfoListener()
|
||||
|
||||
// 监听用户信息更新事件
|
||||
uni.$on('userInfoUpdated', () => {
|
||||
console.log('收到用户信息更新事件')
|
||||
loadUserInfo()
|
||||
syncPlayerInfo()
|
||||
})
|
||||
|
||||
// 保存interval ID以便清理
|
||||
storageIntervalIds.value = storageIntervalId
|
||||
userInfoIntervalIds.value = userInfoIntervalId
|
||||
|
||||
// 初始化滚动区域尺寸
|
||||
setTimeout(() => {
|
||||
updateScrollDimensions()
|
||||
getTrackRect() // 初始化轨道位置信息
|
||||
}, 500)
|
||||
})
|
||||
|
||||
// 页面显示时刷新
|
||||
onShow(() => {
|
||||
console.log('页面显示,刷新数据')
|
||||
loadGameRounds()
|
||||
syncPlayerInfo()
|
||||
loadUserInfo()
|
||||
|
||||
// 更新滚动区域尺寸
|
||||
setTimeout(() => {
|
||||
updateScrollDimensions()
|
||||
getTrackRect() // 更新轨道位置信息
|
||||
}, 100)
|
||||
})
|
||||
|
||||
// 在组件卸载时移除事件监听和定时器
|
||||
onUnmounted(() => {
|
||||
uni.$off('userInfoUpdated')
|
||||
|
||||
if (storageIntervalIds.value) {
|
||||
clearInterval(storageIntervalIds.value)
|
||||
}
|
||||
if (userInfoIntervalIds.value) {
|
||||
clearInterval(userInfoIntervalIds.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 返回上一页
|
||||
@@ -197,6 +596,50 @@ const closeAddPlayerPopup = () => {
|
||||
showAddPlayerPopup.value = false
|
||||
}
|
||||
|
||||
// 打开添加虚拟玩家弹窗
|
||||
const openAddVirtualPlayerPopup = () => {
|
||||
showAddVirtualPlayerPopup.value = true
|
||||
virtualPlayerName.value = '' // 重置输入
|
||||
}
|
||||
|
||||
// 关闭添加虚拟玩家弹窗
|
||||
const closeAddVirtualPlayerPopup = () => {
|
||||
showAddVirtualPlayerPopup.value = false
|
||||
}
|
||||
|
||||
// 确认添加虚拟玩家
|
||||
const confirmAddVirtualPlayer = () => {
|
||||
if (!virtualPlayerName.value.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入玩家名称',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const newPlayer = {
|
||||
id: Date.now(),
|
||||
name: virtualPlayerName.value.trim(),
|
||||
avatar: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.0FQSOvu3OYJFe-h_sZKA6wHaNK?cb=ucfimg2ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3',
|
||||
totalScore: 0,
|
||||
isSelf: false
|
||||
}
|
||||
|
||||
players.value.push(newPlayer)
|
||||
|
||||
// 保存玩家数据到本地存储
|
||||
uni.setStorageSync('players', players.value)
|
||||
|
||||
// 关闭所有弹窗
|
||||
closeAddVirtualPlayerPopup()
|
||||
closeAddPlayerPopup()
|
||||
|
||||
uni.showToast({
|
||||
title: '已添加虚拟玩家',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
// 打开结算弹窗
|
||||
const openSettlePopup = () => {
|
||||
showSettlePopup.value = true
|
||||
@@ -229,7 +672,6 @@ const toggleBoard = (e) => {
|
||||
// 台板关闭时移除台板玩家
|
||||
removeBoardPlayer()
|
||||
}
|
||||
updateTotalScore()
|
||||
}
|
||||
|
||||
// 添加台板玩家
|
||||
@@ -238,7 +680,7 @@ const addBoardPlayer = () => {
|
||||
id: Date.now(),
|
||||
name: '台板',
|
||||
avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.32slU2a6Cq1Sxvd1GV_LvgHaDe?w=292&h=164&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
|
||||
score: 0,
|
||||
totalScore: 0,
|
||||
isSelf: false
|
||||
}
|
||||
|
||||
@@ -260,6 +702,9 @@ const confirmSettlement = () => {
|
||||
return
|
||||
}
|
||||
|
||||
// 保存玩家数据到本地存储,供结算页面使用
|
||||
uni.setStorageSync('players', players.value)
|
||||
|
||||
// 关闭弹窗
|
||||
closeSettlePopup()
|
||||
|
||||
@@ -276,8 +721,40 @@ const toggleVoice = (e) => {
|
||||
|
||||
// 开局计分
|
||||
const startScoring = () => {
|
||||
// 将玩家数据传递到计分页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/scoring/index'
|
||||
url: `/pages/scoring/index?players=${encodeURIComponent(JSON.stringify(players.value))}&round=${gameRounds.value.length + 1}`
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑对局分数
|
||||
const editRoundScore = (roundIndex, playerId) => {
|
||||
// 获取该局的所有玩家得分数据
|
||||
const roundScores = gameRounds.value[roundIndex]
|
||||
|
||||
if (!roundScores) {
|
||||
uni.showToast({
|
||||
title: '该局数据不存在',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 构建玩家数据,包含当前得分和胜负状态
|
||||
const playersWithScores = players.value.map(player => {
|
||||
const playerScore = roundScores.find(score => score.playerId === player.id)
|
||||
const scoreValue = playerScore ? playerScore.score : 0
|
||||
return {
|
||||
...player,
|
||||
currentScore: Math.abs(scoreValue).toString(),
|
||||
isWin: scoreValue >= 0,
|
||||
finalScore: scoreValue
|
||||
}
|
||||
})
|
||||
|
||||
// 跳转到计分页面,传递玩家数据、对局索引和编辑模式标识
|
||||
uni.navigateTo({
|
||||
url: `/pages/scoring/index?players=${encodeURIComponent(JSON.stringify(playersWithScores))}&round=${roundIndex + 1}&mode=edit&roundIndex=${roundIndex}`
|
||||
})
|
||||
}
|
||||
|
||||
@@ -291,26 +768,6 @@ const shareRoom = () => {
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 添加虚拟玩家
|
||||
const addVirtualPlayer = () => {
|
||||
const newPlayer = {
|
||||
id: Date.now(),
|
||||
name: `玩家${Math.floor(Math.random() * 100000)}`,
|
||||
avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
|
||||
score: 0,
|
||||
isSelf: false
|
||||
}
|
||||
|
||||
players.value.push(newPlayer)
|
||||
updateTotalScore()
|
||||
closeAddPlayerPopup()
|
||||
|
||||
uni.showToast({
|
||||
title: '已添加虚拟玩家',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -383,13 +840,38 @@ const addVirtualPlayer = () => {
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.warning-tip {
|
||||
font-size: 26rpx;
|
||||
color: #ff6b6b;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 玩家列表 */
|
||||
.player-list {
|
||||
/* 玩家列表容器 - 新增样式 */
|
||||
.player-list-container {
|
||||
padding: 0 30rpx 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.player-item {
|
||||
/* 滚动视图样式 */
|
||||
.player-scroll-view {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
// 隐藏原生滚动条
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 玩家列表 - 修改后的样式 */
|
||||
.player-list {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.player-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
@@ -402,19 +884,34 @@ const addVirtualPlayer = () => {
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-info-container {
|
||||
.player-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.player-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
|
||||
// 添加点击效果
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.player-avatar {
|
||||
width: 80rpx;
|
||||
@@ -427,6 +924,11 @@ const addVirtualPlayer = () => {
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
margin-bottom: 5rpx;
|
||||
text-align: center;
|
||||
max-width: 100rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
@@ -442,6 +944,55 @@ const addVirtualPlayer = () => {
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
font-weight: 600;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.round-score {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义可拖动滚动条样式 */
|
||||
.custom-scrollbar {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.scroll-track {
|
||||
height: 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
|
||||
// 添加点击区域扩展
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-thumb {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background-color: #41479b;
|
||||
border-radius: 6rpx;
|
||||
transition: all 0.1s ease;
|
||||
|
||||
// 添加悬停效果
|
||||
&:active {
|
||||
background-color: #33367a;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -451,7 +1002,7 @@ const addVirtualPlayer = () => {
|
||||
display: flex;
|
||||
padding: 40rpx;
|
||||
gap: 40rpx;
|
||||
margin-top: 600rpx;
|
||||
margin-top: 500rpx;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
@@ -573,6 +1124,67 @@ const addVirtualPlayer = () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加虚拟玩家弹窗样式 */
|
||||
.add-virtual-popup-content {
|
||||
width: 600rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.add-virtual-popup-body {
|
||||
padding: 30rpx;
|
||||
|
||||
.add-virtual-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-input-section {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.name-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
border-color: #41479b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-virtual-popup-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 结算弹窗样式 */
|
||||
.settle-popup-content {
|
||||
width: 600rpx;
|
||||
@@ -668,4 +1280,5 @@ const addVirtualPlayer = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
export const BASE_URL = 'http://172.20.10.2:8080';
|
||||
export const BASE_URL = 'http://localhost:8080';
|
||||
// export const BASE_URL = 'https://www.jianxinghome.cn:8484';
|
||||
// export const BASE_URL = 'https://www.safeguardfull.cn:8484';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user