hx123666/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="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>