Wjj/scoring/scoring/pages/single/single.vue

<template>
	<view class="single">
		<view class="header">


			<view class="list-container">
				<view class="list-item"><text @click="changeA">+ </text>
					<text>添加玩家</text>
				</view>
				<view class="list-item"><text @click="changeA">♟</text> <text>转让计分员</text></view>
				<view class="list-item"><text @click="changeX">{{X}}</text> <text>语音播报</text></view>
				<view class="list-item"><text @click="changeY">{{Y}}</text> <text>台板</text></view>
			</view>
			<view class="remind">
				<text class="remind-title">对局记录</text><text class="remind-content">点击对局进行修改</text>
			</view>
		</view>
		<view class="container">
			<view class="container-remind">
				<text class="remind-text">点击自己头像编辑用户头像和昵称~</text>
			</view>
			<view class="table">
				<!-- 表头 -->
				<view class="table-header">
					<view class="playing-title">
						<text>玩家</text>
						<text>({{playerCount}}位)</text>
					</view>
					<view class="play">
						<view class="plays" v-for="(player, index) in players" :key="index">
							<view class="play-up">
								<image class="player-avatar" :src="player.avatar" mode="aspectFill"></image>
							</view>
							<view class="play-down">
								{{player.name}}
							</view>
						</view>
					</view>
				</view>

				<!-- 表格内容 -->
				<view class="table-content">
					<view class="table-row" v-for="(round, roundIndex) in rounds" :key="roundIndex">
						<view class="round-title">第{{roundIndex + 1}}局</view>
						<view class="scores">
							<view class="score-item" v-for="(player, playerIndex) in players" :key="playerIndex">
								{{getScore(roundIndex, playerIndex)}}
							</view>
						</view>
					</view>

					<!-- 总分行 -->
					<view class="table-row total-row">
						<view class="round-title">总分</view>
						<view class="scores">
							<view class="score-item" v-for="(player, index) in players" :key="index">
								{{getTotalScore(index)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="start btn-primary" @click="startRoom">开局计分</view>
			<view class="end btn-secondary" @click="endRoom">结算房间</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 玩家数据
	const players = ref([{
			name: '玩家41471',
			avatar: 'https://pic.rmb.bdstatic.com/bjh/3eaf4f1b5f8/250813/eb4bc98ce21111122a588469c724c9cf.jpeg',
			scores: [-6, 3, 2, -4]
		},
		{
			name: '刚刚',
			avatar: 'https://t14.baidu.com/it/u=3165460156,649373630&fm=224&app=112&f=JPEG',
			scores: [3, -2, 5, 1]
		},
		{
			name: '叫姐姐',
			avatar: 'https://img.yzcdn.cn/upload_files/2021/07/17/FjFzetdJCTFZXSuLrwQJaxcyUaM9.jpg',
			scores: [3, 4, -3, 2]
		}
	])
	const X = ref('关')
	const Y = ref('关')

	function changeX() {
		if (X.value == '关') {
			X.value = '开'
		} else {
			X.value = '关'
		}

	}

	function changeY() {
		if (Y.value == '关') {
			Y.value = '开'
		} else {
			Y.value = '关'
		}
	}

	function changeA() {

		uni.showToast({
			title: '入机房间不需要',
			icon: 'none'
		})

	}

	function endRoom() {
		uni.showToast({
			title: '结算成功',
			icon: 'none'
		})
	}

	function startRoom() {
		uni.showToast({
			title: '已开始计分',
			icon: 'none'
		})
	}

	// 对局数据
	const rounds = ref([1, 2, 3, 4]) // 4局

	// 计算属性
	const playerCount = computed(() => players.value.length)

	// 获取分数
	const getScore = (roundIndex, playerIndex) => {
		const score = players.value[playerIndex].scores[roundIndex]
		return score >= 0 ? `+${score}` : score
	}

	// 获取总分
	const getTotalScore = (playerIndex) => {
		const total = players.value[playerIndex].scores.reduce((sum, score) => sum + score, 0)
		return total >= 0 ? `+${total}` : total
	}
</script>

<style scoped lang="less">
	.single {
		width: 750rpx;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		position: relative;
		min-height: 100vh;
		padding-bottom: 120rpx;
		/* 为底部按钮留出空间 */
	}

	.header {
		margin: 10rpx auto;

		.list-container {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			padding: 20rpx;

			.list-item {
				font-size: 28rpx;
				color: #666;
				display: flex;

				align-items: center;
				gap: 10rpx;

				text:first-child {
					width: 50rpx;
					height: 50rpx;
					background: #f0f0f0;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
				}
			}
		}

		.remind {
			padding: 20rpx 30rpx;
			border-top: 1rpx solid #eee;
			border-bottom: 1rpx solid #eee;
			background: #f9f9f9;

			.remind-title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}

			.remind-content {
				margin-left: 20rpx;
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.container {
		margin: 10rpx auto;

		.container-remind {
			text-align: center;
			padding: 20rpx;
			background: #fff5f5;

			.remind-text {
				font-size: 28rpx;
				color: #ff4444;
			}
		}

		.table {
			width: 750rpx;
			background: white;

			.table-header {
				display: flex;
				border-top: 1rpx solid #e0e0e0;
				border-bottom: 1rpx solid #e0e0e0;
				height: 160rpx;

				.playing-title {
					width: 200rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1rpx solid #e0e0e0;
					font-weight: bold;
				}

				.play {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 10rpx;

					.plays {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 15rpx;

						.play-up {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;

							.player-avatar {
								width: 100%;
								height: 100%;
							}
						}

						.play-down {
							font-size: 24rpx;
							color: #333;
							text-align: center;
						}
					}
				}
			}

			.table-content {
				.table-row {
					display: flex;
					border-bottom: 1rpx solid #f0f0f0;
					height: 80rpx;
					align-items: center;

					.round-title {
						width: 200rpx;
						padding: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 1rpx solid #e0e0e0;
						font-size: 28rpx;
					}

					.scores {
						flex: 1;
						display: flex;
						justify-content: space-around;

						.score-item {
							flex: 1;
							text-align: center;
							font-size: 28rpx;
							font-weight: 500;
						}
					}

					&.total-row {
						background: #f9f9f9;
						font-weight: bold;

						.score-item {
							color: #0055ff;
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx;
		background: white;
		border-top: 1rpx solid #e0e0e0;
		gap: 20rpx;

		.start,
		.end {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.btn-primary {
			background: #0055ff;
			color: white;
		}

		.btn-secondary {
			background: white;
			color: #0055ff;
			border: 1rpx solid #0055ff;
		}
	}
</style>