1XJT/scoring/pages/over/over.vue

<template>
	<view class="over">
		<view class="over-lan">
			<view class="over-lan-player">玩家</view>
			<view class="over-lan-score">得分</view>
			<view class="over-lan-oddscore">倍率分</view>
		</view>
		<div v-if="loading">正在努力加载数据中...</div>
		<div v-else>
			<view class="over-content" v-for="(item,index) in scoredetailData1" :key="index">
				<view class="over-content-player">
					<image :src='item.avatars' mode="widthFix" style="width: 80rpx;"></image>
					<text>{{item.Nickname}}</text>
				</view>
				<view class="over-content-score">
					{{item.score}}
				</view>
				<view class="over-content-oddscore">
					{{item.oddscore}}
				</view>
			</view>	
			<button @click="onsubmit">
				返回首页
			</button>
		</div>
		
	</view>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { GET, POST, PUT } from '../../utils/request';
import { onLoad } from '@dcloudio/uni-app';
import StaticValue from '@/utils/StaticValue.js';
import { login } from '../../api/user';

//获取本地用户数据

const roomData = ref([]);

const loading = ref(true); // 加载状态

const scoredetailData1 = ref([]);
console.log("打印数组scoredetailData1:",scoredetailData1.value);
const scoredetailData = [
	{
		avatars: "https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg",
		Nickname: '小王',
		score: 12,
		oddscore: 24,
	},
	{
		avatars: "https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg",
		Nickname: '历史王',
		score: 13,
		oddscore: 26,
	},
]

//传入用户所输入的倍率odd
const odd1 =ref();

onLoad((options) => {
	    try {
			odd1.value = JSON.parse(decodeURIComponent(options.multiple));
		  
			console.log("odd1:",odd1);
			}
		catch(error){
			  
			}
		})

onMounted(async () => {
	//By本地userId查询 拿取用户所属房间Id
	const getUserInfo = StaticValue.getUserInfo;
	roomData.value = getUserInfo();
	try {
	    // 调用您的异步数据获取方法
	    await ByGetLocalUseId();
		console.log("当前scoredetailData1为：",scoredetailData1.value);
	  } catch (error) {
	    console.error('数据加载失败:', error);
	  } finally {
	    loading.value = false; // 无论成功失败，都关闭加载状态
	  }
	;
	
	//By RoomId from score_room_user表  Get房间下所有用户的得分
	
	
	//调用map和compute方法创建新的倍率数据
	
	//By RoomId form score_room 表，将房间的状态改为2.
	
	//返回index首页
})	


const ByGetLocalUseId = async () => {
	//拿到本地用户所在的房间id
	const response2 = await GET('/system/room/createUser/'+ roomData.value.userId);
	  //show信息
	
	const dataArray1 = response2.data;
	console.log('结算房间的房间号为：', dataArray1[0].roomId);
	
	var roomId1 = dataArray1[0].roomId;  
	
	console.log("拿到本地用户所在的房间id:",roomId1);
	
	const response = await GET("/system/score/room/user/list", {roomId: roomId1});
	
	console.log("拿到房间下的所有用户信息:",response.rows);
	
	scoredetailData1.value = response.rows.map(player => ({
		avatars: player.avatars,
		Nickname: player.nickName,
		score: player.totalScore,
		oddscore: (player.totalScore * odd1.value),
	}));
	
	//修改房间信息
	try{
		const response5 = await PUT("/system/room",{
			roomId: roomId1,
			odds: odd1.value,
			roomStatus: 2,
		})
		console.log("关闭房间成功",response5);
	} 
	catch (error) {
		console.log("关闭房间失败",error);
	}
}

const onsubmit = () => {

	// 返回首页（首页是tabBar页面时使用）
	    uni.reLaunch({
	        url: '/pages/index/index'
	    });
}

</script>

<style lang="less">
.over{
	display: flex;
	flex-direction: column;
	.over-lan{
		display: flex;
		margin-top: 30rpx;	
		.over-lan-player{
			margin-left: 50rpx;
			
		}
		.over-lan-score{
			margin-left: 210rpx;
		}
		.over-lan-oddscore{
			margin-left: 210rpx;
		}
	}
	.over-content{
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		
		.over-content-player{
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			width: 240rpx;
			image{
				margin-right: 15rpx;
			}
		}
		.over-content-score{
			margin-left: 70rpx;
			width: 150rpx;
			
		}
		.over-content-oddscore{
			margin-left: 140rpx;
		}
		
	}
	button{
		position: fixed;
		bottom: 60rpx;
		left: 0;
		right: 0;
		border-radius: 15rpx;
		background-color: rgb(55, 47, 172);
		color: #fff;
		// margin-top: 30rpx;
		// margin-left: 450rpx;
		width: 650rpx;
	}
}
</style>