wechat_yxcl/pages/everdayRenven/components/RankContent.vue

<template>
	<view class="ranking-container">
		<!-- 现代化选项卡 -->
		<view class="ranking-tabs">
			<view class="tab-item" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">
				<view class="tab-icon">🏪</view>
				<text class="tab-text">商超</text>
			</view>
			<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
				<view class="tab-icon">🍽️</view>
				<text class="tab-text">餐饮</text>
			</view>
			<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
				<view class="tab-icon">🍿</view>
				<text class="tab-text">小吃</text>
			</view>
		</view>

		<!-- 排行榜内容 -->
		<view class="ranking-content" v-if="wechatPushSalesList && wechatPushSalesList[nowRank]">
			<view class="ranking-item" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index"
				:class="'rank-' + (index + 1)">

				<!-- 排名徽章 -->
				<view class="rank-badge" :class="'rank-' + (index + 1)">
					<view v-if="index < 3" class="medal-icon">
						{{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
					</view>
					<text v-else class="rank-number">{{ index + 1 }}</text>
				</view>

				<!-- 商品信息 -->
				<view class="item-content">
					<view class="item-name">{{ item.COMMODITY_NAME || item.Commodity_Name }}</view>
					<view class="item-stats">
						<view class="stat-item">
							<text class="stat-label">销售额</text>
							<text class="stat-value sales-amount">¥{{ $util.fmoney(item.TOTALPRICE || item.TotalPrice)
							}}</text>
						</view>
						<view class="stat-divider">|</view>
						<view class="stat-item">
							<text class="stat-label">销量</text>
							<text class="stat-value sales-count">{{ item.SELLCOUNT || item.SellCount }}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 空状态 -->
		<view v-else class="empty-state">
			<view class="empty-icon">📊</view>
			<text class="empty-text">暂无排行数据</text>
		</view>
	</view>
</template>

<script>
export default {
	props: ['wechatPushSalesList'],
	data: () => {
		return {
			nowRank: 1000
		}
	},
	methods: {
		selectTab(index) {

			this.nowRank = index
		}
	},
	onLoad() {

	}
}
</script>

<style lang="scss" scoped>
.ranking-container {
	margin: 20rpx 0;
}

/* 现代化选项卡 */
.ranking-tabs {
	display: flex;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 6rpx;
	margin: 0 20rpx 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid #f0f0f0;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16rpx 8rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
	cursor: pointer;

	&.active {
		background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
		box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;
		transform: translateY(-2rpx);

		.tab-text {
			color: #fff !important;
			font-weight: 600;
		}

		.tab-icon {
			transform: scale(1.1);
		}
	}

	&:hover {
		background: rgba(39, 178, 95, 0.1);
	}
}

.tab-icon {
	font-size: 32rpx;
	margin-bottom: 8rpx;
	transition: transform 0.3s ease;
}

.tab-text {
	font-size: 24rpx;
	color: #666;
	transition: all 0.3s ease;
	font-weight: 500;
}

/* 排行榜内容 */
.ranking-content {
	padding: 0 20rpx;
}

.ranking-item {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	border: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 4rpx;
		background: linear-gradient(180deg, #27B25F, #4CCC7F);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	&:hover {
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transform: translateY(-2rpx);

		&::before {
			opacity: 1;
		}
	}

	// 前三名特殊样式
	&.rank-1 {
		background: linear-gradient(135deg, #fffbf0, #fff);

		&::before {
			background: linear-gradient(180deg, #ffb300, #ffd700);
			opacity: 1;
		}
	}

	&.rank-2 {
		background: linear-gradient(135deg, #f0f0f0, #fff);

		&::before {
			background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
			opacity: 1;
		}
	}

	&.rank-3 {
		background: linear-gradient(135deg, #f5f1eb, #fff);

		&::before {
			background: linear-gradient(180deg, #a0714d, #cd853f);
			opacity: 1;
		}
	}
}

/* 排名徽章 */
.rank-badge {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	font-weight: 700;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);

	&.rank-1,
	&.rank-2,
	&.rank-3 {
		background: transparent;
		box-shadow: none;
	}

	.medal-icon {
		font-size: 36rpx;
		animation: pulse 2s infinite;
	}

	.rank-number {
		color: #fff;
		font-size: 24rpx;
		font-weight: 700;
	}
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
	background: linear-gradient(135deg, #8c9eff, #a5b4fc);
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

/* 商品信息 */
.item-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.item-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 12rpx;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item-stats {
	display: flex;
	align-items: center;
}

.stat-item {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
}

.stat-label {
	font-size: 24rpx;
	color: #6c757d;
	margin-right: 8rpx;
	line-height: 40rpx;
	font-weight: 500;
	white-space: nowrap;
}

.stat-value {
	font-size: 24rpx;
	font-weight: 600;
	line-height: 40rpx;
	// font-family: 'DIN Alternate', 'Bahnschrift', monospace;
	white-space: nowrap;

	&.sales-amount {
		color: #27B25F;
	}

	&.sales-count {
		color: #666;
	}
}

.stat-divider {
	margin: 0 16rpx;
	color: #e0e0e0;
	font-size: 20rpx;
}


/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 20rpx;
	color: #999;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 主题色支持 - 通过全局主题类控制 */
:global(.province-theme-330200) .tab-item.active {
	background: linear-gradient(135deg, #1890FF, #69C0FF) !important;
	box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3) !important;

	.stat-value.sales-amount {
		color: #1890FF;
	}
}

:global(.province-theme-340000) .tab-item.active {
	background: linear-gradient(135deg, #748ED6, #91A7E3) !important;
	box-shadow: 0 4rpx 12rpx rgba(116, 142, 214, 0.3) !important;

	.stat-value.sales-amount {
		color: #748ED6;
	}
}

:global(.province-theme-500000) .tab-item.active {
	background: linear-gradient(135deg, #FA541C, #FF7A45) !important;
	box-shadow: 0 4rpx 12rpx rgba(250, 84, 28, 0.3) !important;

	.stat-value.sales-amount {
		color: #FA541C;
	}
}

:global(.province-theme-510000) .tab-item.active {
	background: linear-gradient(135deg, #FA8C16, #FFA940) !important;
	box-shadow: 0 4rpx 12rpx rgba(250, 140, 22, 0.3) !important;

	.stat-value.sales-amount {
		color: #FA8C16;
	}
}

:global(.province-theme-520000) .tab-item.active {
	background: linear-gradient(135deg, #52C41A, #73D13D) !important;
	box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3) !important;

	.stat-value.sales-amount {
		color: #52C41A;
	}
}

:global(.province-theme-530000) .tab-item.active {
	background: linear-gradient(135deg, #27B25F, #4CCC7F) !important;
	box-shadow: 0 4rpx 12rpx rgba(39, 178, 95, 0.3) !important;

	.stat-value.sales-amount {
		color: #27B25F;
	}
}

:global(.province-theme-630000) .tab-item.active {
	background: linear-gradient(135deg, #13C2C2, #36CFC9) !important;
	box-shadow: 0 4rpx 12rpx rgba(19, 194, 194, 0.3) !important;

	.stat-value.sales-amount {
		color: #13C2C2;
	}
}

:global(.province-theme-734100) .tab-item.active {
	background: linear-gradient(135deg, #E91E63, #F06292) !important;
	box-shadow: 0 4rpx 12rpx rgba(233, 30, 99, 0.3) !important;

	.stat-value.sales-amount {
		color: #E91E63;
	}
}
</style>