1XJT/scoring/pages/compute/compute.vue

<template>
	<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 { onMounted, ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const players1 = ref([]);
const round1 = ref();
//存储当前局每个玩家的得分
const currentScores = ref([]);

//设置胜负结果
const setResult = (index, result) => {
	players1.value[index].result = result;
	//如果有分数则进行跳转
	if(players1.value[index].score) {
		validateScore(index);
	}
}

//分数输入验证
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 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;
      });
    }
  });
  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 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;
	}
	
}
</style>