365 lines
7.2 KiB
Vue
365 lines
7.2 KiB
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> |