1XJT/scoring/pages/index/index.vue

<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="gotoNewPage">
				<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 class="function-item">
				<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">
						输入房间id进入房间
					</view>
				</view>
			</view>
			<view class="function-item">
				<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 class="">
				{{roomData}}
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getOpenId } from '@/utils/wxutils.js'
import { GET, POST } from '../../utils/request'
import StaticValue from '@/utils/StaticValue.js';
const loading = ref(false);
//定义承接本地用户信息对象
const roomData = ref([]);

onMounted(() => {
	const getUserInfo = StaticValue.getUserInfo;
	roomData.value = getUserInfo();
})


const gotoNewPage = async () => {	
	//判断有无历史房间记录
	const response = await GET('/system/room/createUser/'+ roomData.value.userId);
	//检查是否请求成功
	if (response.code = 200) {
		//检查数组是否有对象
		const dataArray = response.data;
		if (dataArray && dataArray.length > 0) {
			console.log(`查询到 ${dataArray.length} 条房间记录`);
			
		} else {
			// 数据条数为0，执行B方法
			console.log('未查询到房间记录,新建个人房间');
			//创建新房间
			POST('/system/room', {
				  createUser: roomData.value.userId,
				  odds: 1,
				  roomStatus: 1,
				  bossId: roomData.value.userId,
				  roomName: `${roomData.value.nickName}的房间`,
			});
		}
	} else {
		console.error('接口请求失败:', response.msg);
		uni.showToast({
		                title: '查询失败',
		                icon: 'none'
		            });
	}   
  wx.navigateTo({
    url: '/pages/single/single'
  })
}

</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>