-----/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" :class="{ 'active': isSinglePlayActive }" @click="handleSinglePlay" hover-class="function-item-hover">
				<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'
// 响应式数据
const isSinglePlayActive = ref(false)
let debounceTimer = null

// 防抖函数 - 防止重复点击
const debounce = (func, wait = 300) => {
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(debounceTimer)
      func(...args)
    }
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(later, wait)
  }
}

// 优化后的单人模式处理函数
const handleSinglePlay = debounce(() => {
  // 设置激活状态，提供视觉反馈
  isSinglePlayActive.value = true
  console.log('进入单人模式')
  
  // 页面跳转，增加错误处理
  uni.navigateTo({
    url: '/pages/index/singleplay/singleplay',
    success: () => {
      console.log('单人模式页面跳转成功')
      // 跳转成功后重置状态
      setTimeout(() => {
        isSinglePlayActive.value = false
      }, 200)
    },
    fail: (err) => {
      console.error('单人模式页面跳转失败:', err)
      // 跳转失败也需要重置状态
      isSinglePlayActive.value = false
      // 显示错误提示
      uni.showToast({
        title: '页面跳转失败，请重试',
        icon: 'none'
      })
    }
  })
})

onMounted(() => {
  console.log('首页加载完成')
})
</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;
  transition: all 0.2s ease;
  /* 微信小程序特有样式：条件编译用多行注释包裹 */
  /* #ifdef MP-WEIXIN */
  user-select: none; /* 防止文本选中 */
  /* #endif */

  .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%;
      object-fit: cover; /* 新增：防止图片拉伸变形 */
    }
  }

  .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;
      /* 微信小程序特有样式：条件编译修复 */
      /* #ifdef MP-WEIXIN */
      pointer-events: none; /* 确保整个区域都可点击 */
      /* #endif */
    }

    .function-desc {
      font-size: 26rpx;
      font-weight: 400;
      color: #a8a8a8;
    }
  }
}

// 点击时的视觉反馈效果
.function-item-hover {
  transform: scale(0.98);
  box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.15);
}

// 激活状态的样式
.function-item.active {
  background-color: #f0f8ff;
  box-shadow: 3rpx 3rpx 8rpx rgba(0, 0, 0, 0.12);
}
</style>