1XJT/scoring/pages/history-game/history-game.vue

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