XJT778/1XJT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

one

Browse Source
This commit is contained in:
jackey
2025-11-24 16:00:42 +08:00
parent 375b1b449b
commit 0520603957
43 changed files with 1318 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

555
scoring/pages/compute/compute.vue
View File

@@ -1,333 +1,252 @@
<template>
<view class="container">
<!-- 顶部表头 -->
<view class="table-header">
<view class="header-player">玩家</view>
<view class="header-result">胜负</view>
<view class="header-score">得分</view>
</view>
<!-- 玩家信息区域 -->
<view class="player-row">
<view class="player-info">
<view class="player-avatar">
<!-- 兔子头像 SVG -->
<svg width="30" height="30" viewBox="0 0 30 30">
<ellipse cx="15" cy="20" rx="9" ry="6" fill="#ffffff"/>
<circle cx="15" cy="12" r="7" fill="#ffffff"/>
<ellipse cx="12" cy="8" rx="2" ry="4" fill="#ffffff"/>
<ellipse cx="18" cy="8" rx="2" ry="4" fill="#ffffff"/>
<ellipse cx="12" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
<ellipse cx="18" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
<circle cx="13" cy="12" r="1" fill="#333333"/>
<circle cx="17" cy="12" r="1" fill="#333333"/>
<circle cx="15" cy="14" r="0.8" fill="#ff69b4"/>
<path d="M14,16 Q15,17 16,16" stroke="#ff69b4" stroke-width="0.5" fill="none"/>
<circle cx="11" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
<circle cx="19" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
<rect x="10" cy="19" width="10" height="4" fill="#4169e1" rx="1"/>
<circle cx="20" cy="21" r="2" fill="#ffd700"/>
</svg>
</view>
<text class="player-name">玩家59306</text>
</view>
<view class="result-buttons">
<view
class="result-btn"
:class="{ active: result === 'win' }"
@tap="setResult('win')"
>胜</view>
<view
class="result-btn"
:class="{ active: result === 'lose' }"
@tap="setResult('lose')"
>负</view>
</view>
<view class="score-display">
<text class="score-value">{{ score }}</text>
<button class="sum-btn" @tap="sumScore">Σ 合分</button>
</view>
</view>
<!-- 固定在底部的数字键盘 -->
<view class="keyboard">
<view
v-for="key in keys"
:key="key.value"
class="key"
:class="{
'operator': key.type === 'operator',
'minus': key.value === '-',
'submit-key': key.type === 'submit'
}"
@tap="pressKey(key.value, key.type)"
>{{ key.display }}</view>
</view>
</view>
<view class="compute">
<view class="compute-lan">
<text class="player">玩家</text>
<text class="vd">胜负</text>
<text class="score">得分</text>
</view>
<view
class="compute-detail"
v-for="(item,index) in players1"
:key="usersData.useId"
>
<view class="compute-detail-player">
<image :src='item.avatars' mode="widthFix"></image>
<text>{{item.nickName}}</text>
</view>
<view class="compute-detail-vd">
<view
class="result-btn"
:class="{ active: item.result === 'win' }"
@tap="setResult(index, 'win')"
>胜</view>
<view
class="result-btn"
:class="{ active: item.result === 'lose' }"
@tap="setResult(index,'lose')"
>负</view>
</view>
<view class="compute-detail-score">
<input
class="score-input"
:class="item.result === 'win' ? 'positive' : 'negative'"
v-model="item.score"
@input="validateScore(index)"
placeholder="0"
type="number" />
</view>
</view>
<view class="">
{{round1}}
</view>
<button @click="onsubmit()">
提交
</button>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onMounted, ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const result = ref('win');
const score = ref('0');
const players1 = ref([]);
const round1 = ref();
//存储当前局每个玩家的得分
const currentScores = ref([]);
// 键盘布局 - 提交按钮在0的左侧
const keys = [
{ value: '1', display: '1', type: 'number' },
{ value: '2', display: '2', type: 'number' },
{ value: '3', display: '3', type: 'number' },
{ value: '+', display: '+', type: 'operator' },
{ value: '×', display: '×', type: 'delete' },
{ value: '4', display: '4', type: 'number' },
{ value: '5', display: '5', type: 'number' },
{ value: '6', display: '6', type: 'number' },
{ value: '-', display: '-', type: 'operator' },
{ value: '√', display: '√', type: 'operator' },
{ value: '7', display: '7', type: 'number' },
{ value: '8', display: '8', type: 'number' },
{ value: '9', display: '9', type: 'number' },
{ value: 'submit', display: '提交', type: 'submit' }, // 提交按钮在0的左侧
{ value: '0', display: '0', type: 'number' }
];
//设置胜负结果
const setResult = (index, result) => {
players1.value[index].result = result;
//如果有分数则进行跳转
if(players1.value[index].score) {
validateScore(index);
}
}
const setResult = (res) => {
result.value = res;
};
//分数输入验证
const validateScore = (index) => {
const player = players1.value[index];
const score = parseFloat(player.score);
//检验是否为有效数字
if (isNaN(score)) {
player.score = '';
return;
}
//根据胜负结果调整分数
if (player.result === 'win' && score <0) {
player.score = Math.abs(score).toString();
} else if (player.result === 'lose' && score >0) {
player.score = (-score).toString();
}
}
const pressKey = (key, type) => {
if (type === 'submit') {
// 提交分数
if (score.value !== '0') {
uni.showToast({
title: `分数 ${score.value} 已提交`,
icon: 'success'
// 计算最大局数（确保表头列数正确）
const maxRounds = computed(() => {
if (!players1.value.length) return 0;
let max = 0;
players1.value.forEach(user => {
if (user.details && user.details.length > 0) {
user.details.forEach(detail => {
if (detail.gameTime > max) max = detail.gameTime;
});
// 实际应用中，这里应该调用API提交分数
console.log('提交分数:', score.value);
// 重置分数
setTimeout(() => {
score.value = '0';
}, 1500);
}
} else if (key === '×') {
// 删除最后一个字符
if (score.value.length > 1) {
score.value = score.value.slice(0, -1);
} else {
score.value = '0';
}
} else if (key === '√') {
// 计算平方根
try {
const result = Math.sqrt(parseFloat(score.value));
score.value = result.toString();
} catch (error) {
score.value = '错误';
setTimeout(() => {
score.value = '0';
}, 1000);
}
} else {
// 添加数字或运算符
if (score.value === '0') {
score.value = key;
} else {
score.value += key;
}
}
};
const sumScore = () => {
uni.showToast({
title: '合分功能需要与后端API交互',
icon: 'none'
});
};
return max;
});
onMounted( () => {
})
onLoad((options) => {
try {
const rawData = JSON.parse(decodeURIComponent(options.players));
// players1.value = JSON.parse(decodeURIComponent(options.players));
round1.value = JSON.parse(decodeURIComponent(options.round));
console.log("round:",round1.value);
players1.value = rawData.map(player => ({
...player,
result: "win",
score: "",
gameTime: round1.value,
}))
// console.log('数据已更新:', updataScore);
}
// console.log('数据已更新:', rawData);
catch (error) {
console.error('解析失败:', error);
players1.value = []; // 确保是数组
}
})
const onsubmit = async () => {
const updataScore = players1.value.map(updata => ({
roomId: updata.roomId,
userId: updata.userId,
score: updata.score,
}))
console.log("输入框的值：",updataScore);
}
const usersData = ref([
{
id: 1,
nickName: '玩家12324',
image: 'https://img1.baidu.com/it/u=3612220943,2414740890&fm=253&app=138&f=JPEG?w=526&h=500',
result: 'win',
score: '',
},
{
id: 2,
nickName: '赵云',
image: 'https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg',
result: 'win',
score: '',
},
{
id: 3,
nickName: '刘备',
image: 'https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg',
result: 'win',
score: '',
}
])
</script>
<style scoped>
.container {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 240rpx; /* 为底部键盘留出空间 */
<style scoped lang="less">
.compute{
display: flex;
flex-direction: column;
.compute-lan{
display: flex;
align-items: center;
height: 80rpx;
padding: 0 15rpx;
border-bottom: 1px solid #eee;
.player{
margin-right: 270rpx;
}
.vd{
margin-right: 210rpx;
}
}
.compute-detail{
display: flex;
padding: 20rpx 0;
align-items: center;
margin-top: 10rpx;
.compute-detail-player{
display: flex;
align-items: center;
width: 230rpx;
text{
font-size: 27rpx;
}
image{
width: 70rpx;
padding: 0 16rpx;
}
}
.compute-detail-vd{
display: flex;
align-items: center;
width: 200rpx;
padding-left: 50rpx;
.result-btn {
flex: 1;
padding: 12rpx 0;
text-align: center;
font-size: 28rpx;
border-radius: 6rpx;
}
.result-btn.active {
background-color:rgb(55, 47, 172);
color: white;
}
}
.compute-detail-score{
padding-left: 133rpx;
.score-input{
width: 50rpx;
border-radius: 10rpx;
border: 1px solid #eee;
padding-left: 30rpx;
}
.score-input.positive {
border-color: #4caf50;
background-color: rgba(76, 175, 80, 0.05);
}
.score-input.negative {
border-color: #f44336;
background-color: rgba(244, 67, 54, 0.05);
}
}
}
button{
position: fixed;
bottom: 40rpx;
left: 0;
right: 0;
border-radius: 15rpx;
background-color: rgb(55, 47, 172);
color: #fff;
// margin-top: 30rpx;
// margin-left: 450rpx;
width: 650rpx;
}
}
/* 顶部表头 */
.table-header {
display: flex;
background-color: white;
padding: 30rpx 40rpx;
border-bottom: 1px solid #e0e0e0;
position: sticky;
top: 0;
z-index: 10;
}
.header-player {
flex: 1;
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.header-result {
width: 200rpx;
font-size: 32rpx;
color: #333;
font-weight: 500;
text-align: center;
}
.header-score {
width: 200rpx;
font-size: 32rpx;
color: #333;
font-weight: 500;
text-align: center;
}
/* 玩家信息区域 */
.player-row {
display: flex;
align-items: center;
padding: 30rpx 40rpx;
border-bottom: 1px solid #f5f5f5;
background-color: white;
}
.player-info {
flex: 1;
display: flex;
align-items: center;
}
.player-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
background-color: #1e3a8a;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.player-name {
font-size: 32rpx;
color: #333;
}
.result-buttons {
width: 200rpx;
display: flex;
background-color: #f0f0f0;
border-radius: 8rpx;
padding: 4rpx;
}
.result-btn {
flex: 1;
padding: 12rpx 0;
text-align: center;
font-size: 28rpx;
border-radius: 6rpx;
}
.result-btn.active {
background-color: #6a5acd;
color: white;
}
.score-display {
width: 200rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.score-value {
font-size: 36rpx;
color: #333;
font-weight: 500;
}
.sum-btn {
background-color: #6a5acd;
color: white;
border: none;
border-radius: 8rpx;
padding: 12rpx 20rpx;
font-size: 28rpx;
}
/* 固定在底部的数字键盘 */
.keyboard {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background-color: #e0e0e0;
padding: 1px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 750rpx;
margin: 0 auto;
}
.key {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
height: 120rpx;
font-size: 40rpx;
}
.key:active {
background-color: #f0f0f0;
}
.operator {
color: #6a5acd;
}
.minus {
color: #ff4757;
}
.submit-key {
background-color: #8a2be2;
color: white;
font-weight: 500;
}
/* 调整键盘布局，使提交按钮在0的左侧 */
.keyboard {
grid-template-areas:
"num1 num2 num3 plus delete"
"num4 num5 num6 minus sqrt"
"num7 num8 num9 submit num0";
}
.key:nth-child(1) { grid-area: num1; }
.key:nth-child(2) { grid-area: num2; }
.key:nth-child(3) { grid-area: num3; }
.key:nth-child(4) { grid-area: plus; }
.key:nth-child(5) { grid-area: delete; }
.key:nth-child(6) { grid-area: num4; }
.key:nth-child(7) { grid-area: num5; }
.key:nth-child(8) { grid-area: num6; }
.key:nth-child(9) { grid-area: minus; }
.key:nth-child(10) { grid-area: sqrt; }
.key:nth-child(11) { grid-area: num7; }
.key:nth-child(12) { grid-area: num8; }
.key:nth-child(13) { grid-area: num9; }
.key:nth-child(14) { grid-area: submit; }
.key:nth-child(15) { grid-area: num0; }
</style>