111
This commit is contained in:
196
scoring/pages/history-game/history-game.vue
Normal file
196
scoring/pages/history-game/history-game.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view class="history-game">
|
||||
<view class="filter-tab">
|
||||
<view class="filter-item" @click="filterClick('all')" :class="{'filter-active': filterActive == 'all'}">全部</view>
|
||||
<view class="filter-item" @click="filterClick('win')" :class="{'filter-active': filterActive == 'win'}">胜场</view>
|
||||
<view class="filter-item" @click="filterClick('lose')" :class="{'filter-active': filterActive == 'lose'}">负场</view>
|
||||
</view>
|
||||
<view class="game-list">
|
||||
<view class="game-item" v-for="item in 10" :key="item">
|
||||
<view class="game-info">
|
||||
<view class="game-type">单人-1237房间</view>
|
||||
<view class="game-date">2025-06-12 12:00</view>
|
||||
<view class="del-btn">
|
||||
<uni-icons type="trash" size="30"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="game-user">
|
||||
<view class="game-user-item" v-for="(user, index) in userList" :key="index">
|
||||
<view class="user-avatar">
|
||||
<image :src="user.avatar" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="user-name">{{user.name}}</view>
|
||||
<view class="user-score">{{user.score}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="game-foot">
|
||||
<view class="game-status">
|
||||
已结束
|
||||
</view>
|
||||
<view class="check-detail">
|
||||
<uni-icons type="right" size="25" color="#748cec"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
|
||||
const proxy = getCurrentInstance().proxy;
|
||||
|
||||
// 过滤相关
|
||||
const filterActive = ref('all'); // all:全部，win:胜场，lose:负场
|
||||
const filterClick = (type) => {
|
||||
filterActive.value = type;
|
||||
};
|
||||
|
||||
|
||||
// 参与人
|
||||
const userList = ref([
|
||||
{
|
||||
avatar: 'https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg',
|
||||
name: '赵云',
|
||||
score: 100
|
||||
},
|
||||
{
|
||||
avatar: 'https://q1.itc.cn/q_70/images03/20241119/197701bb9ef34b20b6497720081a9972.jpeg',
|
||||
name: '张飞',
|
||||
score: -50
|
||||
},
|
||||
{
|
||||
avatar: 'https://img1.baidu.com/it/u=3612220943,2414740890&fm=253&app=138&f=JPEG?w=526&h=500',
|
||||
name: '刘备',
|
||||
score: 30
|
||||
},
|
||||
{
|
||||
avatar: 'https://c-ssl.dtstatic.com/uploads/blog/202206/12/20220612135738_992b1.thumb.1000_0.jpg',
|
||||
name: '诸葛亮',
|
||||
score: -80
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.history-game {
|
||||
width: 750rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.filter-tab {
|
||||
--filter-height: 80rpx;
|
||||
--filter-color: #748cec;
|
||||
--filter-border: 1rpx;
|
||||
width: 700rpx;
|
||||
height: var(--filter-height);
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: calc(var(--filter-height) - 2 * var(--filter-border));
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
border: var(--filter-border) solid var(--filter-color);
|
||||
}
|
||||
.filter-active {
|
||||
background-color: var(--filter-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.game-list {
|
||||
width: 700rpx;
|
||||
margin: 0 auto;
|
||||
.game-item {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
margin: 20rpx 0;
|
||||
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.game-info {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.game-type {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.game-date {
|
||||
font-size: 32rpx;
|
||||
color: #bbbbbb;
|
||||
}
|
||||
.del-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 1rpx solid #cccccc;
|
||||
}
|
||||
}
|
||||
.game-user {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: auto;
|
||||
padding: 20rpx 0;
|
||||
.game-user-item {
|
||||
width: 140rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
.user-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10%;
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.user-score {
|
||||
font-size: 32rpx;
|
||||
color: #fa5d5d;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.game-foot {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.game-status {
|
||||
font-size: 32rpx;
|
||||
color: #57bcef;
|
||||
}
|
||||
.check-detail {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
scoring/pages/index/index.vue
Normal file
161
scoring/pages/index/index.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="notice">
|
||||
<view class="icon">
|
||||
<uni-icons type="sound" size="20"></uni-icons>
|
||||
</view>
|
||||
<view class="text">
|
||||
您还有未结束的对局,
|
||||
<text class="underline">点击前往</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="function-list">
|
||||
<view class="function-item">
|
||||
<view class="function-icon">
|
||||
<image src="https://t14.baidu.com/it/u=3165460156,649373630&fm=224&app=112&f=JPEG?w=500&h=500"></image>
|
||||
</view>
|
||||
<view class="function-introduce">
|
||||
<view class="function-name">
|
||||
多人模式
|
||||
</view>
|
||||
<view class="function-desc">
|
||||
所有玩家自己计分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="function-item"@click="goToSingleMode">
|
||||
<view class="function-icon">
|
||||
<image src="https://pic.rmb.bdstatic.com/bjh/down/1742bc3845cbbcf0c78c01eb59bb1c1a.jpeg"></image>
|
||||
</view>
|
||||
<view class="function-introduce">
|
||||
<view class="function-name">
|
||||
单人模式
|
||||
</view>
|
||||
<view class="function-desc">
|
||||
房主给所有玩家计分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getOpenId } from '@/utils/wxutils.js'
|
||||
|
||||
// 跳转到单人模式页面
|
||||
const goToSingleMode = () => {
|
||||
// 生成随机房间ID
|
||||
const roomId = Math.floor(Math.random() * 10000000).toString().padStart(8, '0');
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/single-room/index?roomId=${roomId}`
|
||||
});
|
||||
}
|
||||
|
||||
// 如果您有未结束对局的功能，可以添加以下方法
|
||||
const goToUnfinishedGame = () => {
|
||||
// 这里可以跳转到未结束的对局
|
||||
uni.showToast({
|
||||
title: '前往未结束对局',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 页面加载时的初始化逻辑
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.index {
|
||||
width: 750rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.notice {
|
||||
width: 80%;
|
||||
margin: 20rpx auto;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 10rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
border-radius: 20rpx;
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: #fa5d5d;
|
||||
}
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
color: #fa5d5d;
|
||||
}
|
||||
}
|
||||
.function-list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.function-item {
|
||||
--content-height: 100rpx;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
margin: 40rpx auto;
|
||||
box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
gap: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
.function-icon {
|
||||
width: var(--content-height);
|
||||
height: var(--content-height);
|
||||
border-radius: 10%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.function-introduce {
|
||||
flex: 1;
|
||||
height: var(--content-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.function-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
.function-desc {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
254
scoring/pages/my/my.vue
Normal file
254
scoring/pages/my/my.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="my">
|
||||
<view class="user-info">
|
||||
<!-- 背景区域 -->
|
||||
<view class="background">
|
||||
<view class="bg-decoration bg-circle-1"></view>
|
||||
<view class="bg-decoration bg-circle-2"></view>
|
||||
</view>
|
||||
|
||||
<view class="info-content">
|
||||
<!-- 顶部用户名区域 -->
|
||||
<view class="top-user-name" :style="{'height': topHeight, 'line-height': topHeight}">
|
||||
{{userInfo.nickName}}
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="main-content">
|
||||
<!-- 头像区域 -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-wrapper">
|
||||
<image class="avatar-img" :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285889616,2023536093&fm=253&gp=0.jpg'"></image>
|
||||
<view class="avatar-glow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 欢迎文字区域 - 确保这个区域不被遮挡 -->
|
||||
<view class="welcome-section">
|
||||
<view class="welcome-card">
|
||||
<view class="welcome-icon">🎯</view>
|
||||
<view class="welcome-text">
|
||||
<text class="greeting">你好，{{userInfo.nickName}}</text>
|
||||
<text class="welcome-message">欢迎使用计分小程序</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
|
||||
import { getOpenId } from '@/utils/wxutils.js'
|
||||
import { register, login } from '@/api/user.js'
|
||||
|
||||
const proxy = getCurrentInstance().proxy;
|
||||
|
||||
// 小程序胶囊高度
|
||||
const topHeight = ref(proxy.$StaticValue.getTopHeight());
|
||||
|
||||
// 用户信息相关
|
||||
const userInfo = ref({});
|
||||
const getUserInfo = async () => {
|
||||
// 从本地获取用户信息
|
||||
userInfo.value = proxy.$StaticValue.getUserInfo();
|
||||
if(!userInfo.value?.userId) {
|
||||
// 如果没有登录, 获取到当前用户的openid
|
||||
const openIdRes = await getOpenId();
|
||||
const openId = openIdRes.openid;
|
||||
userInfo.value = {
|
||||
openId: openId,
|
||||
nickName: '用户'+openId.substring(0, 6)
|
||||
};
|
||||
register(userInfo.value).then(res => {
|
||||
// 注册成功就执行登录
|
||||
login(userInfo.value).then(loginRes => {
|
||||
userInfo.value = loginRes.data;
|
||||
// 存储用户信息到本地
|
||||
proxy.$StaticValue.setUserInfo(userInfo.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getUserInfo();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.my {
|
||||
width: 750rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
--user-height: 1000rpx; /* 增加整体高度确保内容不被遮挡 */
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.background {
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
background: linear-gradient(135deg,
|
||||
rgba(74, 144, 226, 0.95) 0%,
|
||||
rgba(103, 198, 243, 0.9) 50%,
|
||||
rgba(135, 206, 250, 0.85) 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bg-circle-1 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
top: -150rpx;
|
||||
right: -100rpx;
|
||||
}
|
||||
|
||||
.bg-circle-2 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
bottom: -80rpx;
|
||||
left: -50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
width: 750rpx;
|
||||
height: var(--user-height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
.top-user-name {
|
||||
width: 750rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* 确保内容从顶部开始排列 */
|
||||
height: calc(100% - v-bind('topHeight'));
|
||||
padding-top: 40rpx; /* 增加顶部内边距 */
|
||||
|
||||
.avatar-section {
|
||||
margin-top: 20rpx; /* 减少头像区域的上边距 */
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
|
||||
.avatar-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.avatar-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.4) 0%,
|
||||
rgba(255, 255, 255, 0.1) 100%);
|
||||
z-index: 1;
|
||||
animation: glow 3s ease-in-out infinite alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
margin-top: 40rpx; /* 调整欢迎文字区域的上边距 */
|
||||
width: 100%;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.welcome-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.welcome-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
|
||||
.greeting {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
font-size: 40rpx;
|
||||
color: #55aa7f;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
transform: translate(-50%, -50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 750rpx) {
|
||||
.user-info {
|
||||
--user-height: 560rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
254
scoring/pages/scoring/index.vue
Normal file
254
scoring/pages/scoring/index.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="scoring-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">第1局</view>
|
||||
<view class="nav-actions">
|
||||
<uni-icons type="more" size="24" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 玩家计分表格 -->
|
||||
<view class="player-table">
|
||||
<view class="table-header">
|
||||
<text>玩家</text>
|
||||
<text>胜负</text>
|
||||
<text>得分</text>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<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>
|
||||
</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>
|
||||
</view>
|
||||
<view class="score-input">
|
||||
<input type="text" v-model="score" placeholder="0" class="score-text" />
|
||||
<button class="sum-btn">∑ 合分</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<view class="keypad">
|
||||
<view class="keypad-row">
|
||||
<button class="keypad-btn" @click="inputNumber(1)">1</button>
|
||||
<button class="keypad-btn" @click="inputNumber(2)">2</button>
|
||||
<button class="keypad-btn" @click="inputNumber(3)">3</button>
|
||||
<button class="keypad-btn" @click="inputOperator('+')">+</button>
|
||||
<button class="keypad-btn" @click="deleteLast">⌫</button>
|
||||
</view>
|
||||
<view class="keypad-row">
|
||||
<button class="keypad-btn" @click="inputNumber(4)">4</button>
|
||||
<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>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isWin = ref(true)
|
||||
const score = ref('0')
|
||||
|
||||
// 数字键盘输入逻辑
|
||||
const inputNumber = (num) => {
|
||||
score.value += num.toString()
|
||||
}
|
||||
const inputOperator = (op) => {
|
||||
score.value += op
|
||||
}
|
||||
const deleteLast = () => {
|
||||
score.value = score.value.slice(0, -1)
|
||||
}
|
||||
|
||||
// 提交分数并跳转至结算页
|
||||
const submitScore = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/settle/index?score=' + score.value + '&isWin=' + isWin.value
|
||||
})
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.scoring-page {
|
||||
background-color: #f5f5f5;
|
||||
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-table {
|
||||
margin: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.win-lose {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.win-btn, .lose-btn {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.win-btn {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lose-btn {
|
||||
background-color: #fff;
|
||||
color: #007aff;
|
||||
border: 1rpx solid #007aff;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.score-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.score-text {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid #eee;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.sum-btn {
|
||||
margin-left: 10rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keypad {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
|
||||
.keypad-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.keypad-btn {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f8f8f8;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
scoring/pages/settle/index.vue
Normal file
183
scoring/pages/settle/index.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="settle-page">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-home" @click="goHome">
|
||||
<uni-icons type="home" 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="result-table">
|
||||
<view class="table-header">
|
||||
<text>玩家</text>
|
||||
<text>胜负</text>
|
||||
<text>得分</text>
|
||||
<text>倍率分</text>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<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>
|
||||
</view>
|
||||
<view class="win-tag" v-if="isWin">胜利!</view>
|
||||
<text class="score">{{ score }}</text>
|
||||
<text class="score">0</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 对局详情链接 -->
|
||||
<view class="detail-link">
|
||||
<text>对局详情</text>
|
||||
</view>
|
||||
|
||||
<!-- 分享按钮 -->
|
||||
<button class="share-btn" @click="shareResult">分享给好友结算信息</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const score = ref('0')
|
||||
const isWin = ref(true)
|
||||
|
||||
// 页面加载时接收计分页传参
|
||||
onLoad((options) => {
|
||||
score.value = options.score || '0'
|
||||
isWin.value = options.isWin === 'true'
|
||||
})
|
||||
|
||||
// 返回首页
|
||||
const goHome = () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 分享功能（演示用）
|
||||
const shareResult = () => {
|
||||
uni.showToast({
|
||||
title: '分享功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.settle-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-home, .nav-actions {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.result-table {
|
||||
margin: 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx;
|
||||
background-color: #e8e8e8;
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 20rpx;
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.win-tag {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.score {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
text-align: center;
|
||||
margin: 20rpx 0;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: #41479b;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 600rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 30rpx auto;
|
||||
background-color: #ffc107;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
</style>
|
||||
671
scoring/pages/single-room/index.vue
Normal file
671
scoring/pages/single-room/index.vue
Normal file
@@ -0,0 +1,671 @@
|
||||
<template>
|
||||
<view class="single-room">
|
||||
<!-- 顶部导航栏 -->
|
||||
<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">单人 - {{ roomId }}房间</view>
|
||||
<view class="nav-actions">
|
||||
<uni-icons type="more" size="24" color="#fff" @click="showMoreOptions"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能栏 -->
|
||||
<view class="function-bar">
|
||||
<view class="function-item" @click="openAddPlayerPopup">
|
||||
<uni-icons type="plus" size="20" color="#fff"></uni-icons>
|
||||
<text>添加玩家</text>
|
||||
</view>
|
||||
<view class="function-item" @click="transferScorer">
|
||||
<uni-icons type="exchange" size="20" color="#fff"></uni-icons>
|
||||
<text>转让计分员</text>
|
||||
</view>
|
||||
<view class="function-item">
|
||||
<switch :checked="voiceEnabled" @change="toggleVoice" color="#4CAF50"></switch>
|
||||
<text>语音播报</text>
|
||||
</view>
|
||||
<view class="function-item">
|
||||
<switch :checked="boardEnabled" @change="toggleBoard" color="#4CAF50"></switch>
|
||||
<text>台板</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 对局记录区域 -->
|
||||
<view class="record-section">
|
||||
<view class="record-title">对局记录</view>
|
||||
<view class="record-tip">点击对局分数进行修改</view>
|
||||
<view class="record-tip">点击自己头像编辑用户头像和昵称~</view>
|
||||
</view>
|
||||
|
||||
<!-- 玩家列表 -->
|
||||
<view class="player-list">
|
||||
<view class="player-item">
|
||||
<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">
|
||||
<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 class="player-label">总分</view>
|
||||
<view class="player-score">{{ totalScore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button class="start-btn" @click="startScoring">开局计分</button>
|
||||
<button class="settle-btn" @click="openSettlePopup">结算房间</button>
|
||||
</view>
|
||||
|
||||
<!-- 添加玩家弹窗 -->
|
||||
<view v-if="showAddPlayerPopup" class="popup-mask" @click="closeAddPlayerPopup">
|
||||
<view class="popup-content" @click.stop>
|
||||
<view class="popup-header">
|
||||
<view class="popup-title">扫码加入房间</view>
|
||||
<view class="popup-close" @click="closeAddPlayerPopup">
|
||||
<uni-icons type="close" size="24" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="popup-body">
|
||||
<view class="popup-tip">邀请好友扫描下方二维码加入房间</view>
|
||||
<view class="qrcode-container">
|
||||
<image class="qrcode" src="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" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
<view class="popup-buttons">
|
||||
<button class="share-btn" @click="shareRoom">分享给好友邀请加入房间</button>
|
||||
<button class="add-virtual-btn" @click="addVirtualPlayer">手动添加虚拟玩家</button>
|
||||
</view>
|
||||
|
||||
<view class="popup-footer">
|
||||
<view class="footer-tip">点击自己头像编辑用户头像和昵称~</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 结算房间弹窗 -->
|
||||
<view v-if="showSettlePopup" class="popup-mask" @click="closeSettlePopup">
|
||||
<view class="settle-popup-content" @click.stop>
|
||||
<view class="settle-popup-body">
|
||||
<view class="settle-tip">输入倍率，快速结算！</view>
|
||||
|
||||
<view class="rate-input-section">
|
||||
<input
|
||||
class="rate-input"
|
||||
type="number"
|
||||
placeholder="请输入倍率"
|
||||
v-model="rateValue"
|
||||
focus
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="settle-popup-buttons">
|
||||
<button class="cancel-btn" @click="closeSettlePopup">取消</button>
|
||||
<button class="confirm-btn" @click="confirmSettlement">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 转让计分员弹窗 -->
|
||||
<view v-if="showTransferPopup" class="popup-mask" @click="closeTransferPopup">
|
||||
<view class="transfer-popup-content" @click.stop>
|
||||
<view class="transfer-popup-body">
|
||||
<view class="transfer-tip">房间内暂无扫码或分享加入房间的玩家，无法转让计分员。</view>
|
||||
<view class="transfer-popup-buttons">
|
||||
<button class="confirm-btn" @click="closeTransferPopup">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// 房间数据
|
||||
const roomId = ref('15198520')
|
||||
const voiceEnabled = ref(false)
|
||||
const boardEnabled = ref(false)
|
||||
|
||||
// 玩家数据
|
||||
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,
|
||||
isSelf: true
|
||||
}
|
||||
])
|
||||
|
||||
// 弹窗显示状态
|
||||
const showAddPlayerPopup = ref(false)
|
||||
const showSettlePopup = ref(false)
|
||||
const showTransferPopup = ref(false)
|
||||
const rateValue = ref('')
|
||||
|
||||
// 计算总分 - 使用普通函数替代 computed
|
||||
const totalScore = ref(0)
|
||||
|
||||
// 更新总分函数
|
||||
const updateTotalScore = () => {
|
||||
totalScore.value = players.value.reduce((sum, player) => sum + player.score, 0)
|
||||
}
|
||||
|
||||
// 组件挂载后初始化
|
||||
onMounted(() => {
|
||||
console.log('组件已挂载')
|
||||
updateTotalScore()
|
||||
})
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 显示更多选项
|
||||
const showMoreOptions = () => {
|
||||
uni.showActionSheet({
|
||||
itemList: ['添加到我的小程序', '分享房间', '设置'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
uni.showToast({
|
||||
title: '已添加到我的小程序',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 打开添加玩家弹窗
|
||||
const openAddPlayerPopup = () => {
|
||||
showAddPlayerPopup.value = true
|
||||
}
|
||||
|
||||
// 关闭添加玩家弹窗
|
||||
const closeAddPlayerPopup = () => {
|
||||
showAddPlayerPopup.value = false
|
||||
}
|
||||
|
||||
// 打开结算弹窗
|
||||
const openSettlePopup = () => {
|
||||
showSettlePopup.value = true
|
||||
rateValue.value = '' // 重置倍率输入
|
||||
}
|
||||
|
||||
// 关闭结算弹窗
|
||||
const closeSettlePopup = () => {
|
||||
showSettlePopup.value = false
|
||||
}
|
||||
|
||||
// 打开转让计分员弹窗
|
||||
const transferScorer = () => {
|
||||
showTransferPopup.value = true
|
||||
}
|
||||
|
||||
// 关闭转让计分员弹窗
|
||||
const closeTransferPopup = () => {
|
||||
showTransferPopup.value = false
|
||||
}
|
||||
|
||||
// 切换台板
|
||||
const toggleBoard = (e) => {
|
||||
boardEnabled.value = e.detail.value
|
||||
|
||||
if (boardEnabled.value) {
|
||||
// 台板开启时添加一个新玩家
|
||||
addBoardPlayer()
|
||||
} else {
|
||||
// 台板关闭时移除台板玩家
|
||||
removeBoardPlayer()
|
||||
}
|
||||
updateTotalScore()
|
||||
}
|
||||
|
||||
// 添加台板玩家
|
||||
const addBoardPlayer = () => {
|
||||
const newPlayer = {
|
||||
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,
|
||||
isSelf: false
|
||||
}
|
||||
|
||||
players.value.push(newPlayer)
|
||||
}
|
||||
|
||||
// 移除台板玩家
|
||||
const removeBoardPlayer = () => {
|
||||
players.value = players.value.filter(player => player.name !== '台板')
|
||||
}
|
||||
|
||||
// 确认结算
|
||||
const confirmSettlement = () => {
|
||||
if (!rateValue.value) {
|
||||
uni.showToast({
|
||||
title: '请输入倍率',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
closeSettlePopup()
|
||||
|
||||
// 跳转到结算页面，传递倍率参数
|
||||
uni.navigateTo({
|
||||
url: `/pages/settle/index?rate=${rateValue.value}`
|
||||
})
|
||||
}
|
||||
|
||||
// 切换语音播报
|
||||
const toggleVoice = (e) => {
|
||||
voiceEnabled.value = e.detail.value
|
||||
}
|
||||
|
||||
// 开局计分
|
||||
const startScoring = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/scoring/index'
|
||||
})
|
||||
}
|
||||
|
||||
// 分享房间
|
||||
const shareRoom = () => {
|
||||
uni.showShareMenu({
|
||||
withShareTicket: true
|
||||
})
|
||||
uni.showToast({
|
||||
title: '请使用分享功能',
|
||||
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>
|
||||
.single-room {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能栏 */
|
||||
.function-bar {
|
||||
display: flex;
|
||||
padding: 15rpx 20rpx;
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
border-top: 1rpx solid #555aaf;
|
||||
border-bottom: 1rpx solid #555aaf;
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
switch {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 对局记录区域 */
|
||||
.record-section {
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.record-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.record-tip {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 玩家列表 */
|
||||
.player-list {
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.player-item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.player-label {
|
||||
width: 120rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.player-info-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.player-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.self-tag {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.player-score {
|
||||
font-size: 36rpx;
|
||||
color: #007aff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 40rpx;
|
||||
gap: 40rpx;
|
||||
margin-top: 600rpx;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 90rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.settle-btn {
|
||||
background-color: #fff;
|
||||
color: #41479b;
|
||||
border: 1rpx solid #41479b;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗遮罩层 */
|
||||
.popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 添加玩家弹窗样式 */
|
||||
.popup-content {
|
||||
width: 650rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
padding: 30rpx;
|
||||
|
||||
.popup-tip {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.qrcode {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
button {
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.add-virtual-btn {
|
||||
background-color: #fff;
|
||||
color: #41479b;
|
||||
border: 1rpx solid #41479b;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
.footer-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 结算弹窗样式 */
|
||||
.settle-popup-content {
|
||||
width: 600rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.settle-popup-body {
|
||||
padding: 30rpx;
|
||||
|
||||
.settle-tip {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 120rpx;
|
||||
}
|
||||
|
||||
.rate-input-section {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.rate-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settle-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 转让计分员弹窗样式 */
|
||||
.transfer-popup-content {
|
||||
width: 600rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.transfer-popup-body {
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
|
||||
.transfer-tip {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.transfer-popup-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
background-color: #41479b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user