From 5419f1348a88bf4ad5768a5b00e35f8213aef439 Mon Sep 17 00:00:00 2001
From: "1173117610@qq.com" <a15133400227>
Date: Mon, 11 May 2026 13:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E8=A1=8C=E6=A6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/bottom-nav/bottom-nav.vue |  89 ++++
 pages.json                           |   6 +
 pages/index/index.vue                |  28 +-
 pages/rank/rank.vue                  | 599 +++++++++++++++++++++++++++
 4 files changed, 702 insertions(+), 20 deletions(-)
 create mode 100644 components/bottom-nav/bottom-nav.vue
 create mode 100644 pages/rank/rank.vue

diff --git a/components/bottom-nav/bottom-nav.vue b/components/bottom-nav/bottom-nav.vue
new file mode 100644
index 0000000..3466d40
--- /dev/null
+++ b/components/bottom-nav/bottom-nav.vue
@@ -0,0 +1,89 @@
+<template>
+	<view class="bottom-tab-bar">
+		<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="handleTabClick(tab, index)">
+			<image class="tab-icon" :src="activeTab === index ? tab.hl_img : tab.img"></image>
+			<text class="tab-text" :style="{ color: activeTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			activeTab: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				bottomBarList: []
+			}
+		},
+		mounted() {
+			this.getBottomBar();
+		},
+		methods: {
+			getBottomBar() {
+				uni.request({
+					url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
+					success: (res) => {
+						if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
+							// 根据 sort 降序排序
+							this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
+						}
+					}
+				});
+			},
+			handleTabClick(tab, index) {
+				if (this.activeTab === index) return;
+				
+				let url = '';
+				if (tab.title === '首页') url = '/pages/index/index';
+				else if (tab.title === '榜单') url = '/pages/rank/rank';
+				
+				if (url) {
+					uni.redirectTo({
+						url: url
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.bottom-tab-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		background: rgba(255, 255, 255, 0.98);
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		padding-bottom: env(safe-area-inset-bottom);
+		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+		z-index: 999;
+		backdrop-filter: blur(10px);
+	}
+
+	.tab-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+	}
+
+	.tab-icon {
+		width: 44rpx;
+		height: 44rpx;
+		margin-bottom: 4rpx;
+	}
+
+	.tab-text {
+		font-size: 20rpx;
+	}
+</style>
diff --git a/pages.json b/pages.json
index 7795fef..f95c03a 100644
--- a/pages.json
+++ b/pages.json
@@ -23,6 +23,12 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/rank/rank",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 41a7307..a8fb520 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -248,22 +248,21 @@
 			<view class="loading-more">-- 到底啦 --</view>
 		</scroll-view>
 
-		<!-- 底部 Tab 栏 -->
-		<view class="bottom-tab-bar">
-			<view class="tab-item" v-for="(tab, index) in bottomBarList" :key="index" @click="activeBottomTab = index">
-				<image class="tab-icon" :src="activeBottomTab === index ? tab.hl_img : tab.img"></image>
-				<text class="tab-text" :style="{ color: activeBottomTab === index ? tab.hl_color : tab.color }">{{ tab.title }}</text>
-			</view>
-		</view>
+		<!-- 通用底部 Tab 栏 -->
+		<bottom-nav :activeTab="0"></bottom-nav>
 	</view>
 </template>
 
 <script>
+	import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
+
 	export default {
+		components: {
+			BottomNav
+		},
 		data() {
 			return {
 				activeBottomTab: 0,
-				bottomBarList: [],
 				currentTab: 0,
 				navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
 				scrollTarget: '',
@@ -304,7 +303,6 @@
 		},
 		onLoad() {
 			this.getIndexData();
-			this.getBottomBar();
 			this.getCategoryList();
 			this.getNoticeList();
 			this.getGoodsList();
@@ -352,17 +350,7 @@
 					url: `/pages/detail/detail?id=${id}`
 				});
 			},
-			getBottomBar() {
-				uni.request({
-					url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
-					success: (res) => {
-						if (res.data && res.data.code === 200 && res.data.data.bottom_bar) {
-							// 根据 sort 降序排序
-							this.bottomBarList = res.data.data.bottom_bar.sort((a, b) => b.sort - a.sort);
-						}
-					}
-				});
-			},
+
 			getCategoryList() {
 				uni.request({
 					url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
diff --git a/pages/rank/rank.vue b/pages/rank/rank.vue
new file mode 100644
index 0000000..6b6b826
--- /dev/null
+++ b/pages/rank/rank.vue
@@ -0,0 +1,599 @@
+<template>
+	<view class="rank-container">
+		<!-- 沉浸式渐变头部 -->
+		<view class="rank-header">
+			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<!-- 榜单类型切换 -->
+			<view class="rank-main-tabs">
+				<view class="main-tab" :class="{ 'active': rankType === 1 }" @click="switchRankType(1)">
+					<text class="fire-icon" v-if="rankType === 1">🔥</text>
+					<text class="tab-main-txt">实时热销榜</text>
+					<text class="fire-icon" v-if="rankType === 1">🔥</text>
+				</view>
+				<view class="main-tab" :class="{ 'active': rankType === 2 }" @click="switchRankType(2)">
+					<text class="tab-main-txt">全天热销榜</text>
+				</view>
+			</view>
+
+			<!-- 分类滑动导航 -->
+			<scroll-view scroll-x class="cate-nav" :show-scrollbar="false">
+				<view class="cate-item" :class="{ 'active': currentCateId === item.id }"
+					v-for="(item, index) in categoryList" :key="index" @click="switchCategory(item.id)">
+					<text class="cate-txt">{{ item.name }}</text>
+				</view>
+			</scroll-view>
+		</view>
+
+		<scroll-view scroll-y class="rank-content" @scrolltolower="loadMore">
+			<!-- 顶部占位 -->
+			<view class="header-placeholder" :style="{ height: (statusBarHeight + 180) + 'px' }"></view>
+
+			<!-- Top 1-3 领奖台布局 (2 - 1 - 3) -->
+			<view class="top-three-wrap" v-if="goodsList.length >= 3">
+				<!-- Top 2 (左侧) -->
+				<view class="top-card top-card-side" @click="goToDetail(goodsList[1].id)">
+					<view class="top-badge-wrap">
+						<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
+						<text class="top-badge-num">2</text>
+					</view>
+					<view class="top-img-box">
+						<image class="top-img" :src="goodsList[1].image" mode="aspectFill"></image>
+						<view class="top-sales-bar">已抢{{ goodsList[1].sales }}件</view>
+					</view>
+					<view class="top-title">
+						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
+						<text class="top-name">{{ goodsList[1].title }}</text>
+					</view>
+					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[1].finalPrice }}</text></text>
+					<view class="top-coupon-tag">券 {{ goodsList[1].couponValue }}元</view>
+				</view>
+
+				<!-- Top 1 (中间，略高) -->
+				<view class="top-card top-card-center" @click="goToDetail(goodsList[0].id)">
+					<view class="top-badge-wrap">
+						<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
+						<text class="top-badge-num">1</text>
+					</view>
+					<view class="top-img-box">
+						<image class="top-img" :src="goodsList[0].image" mode="aspectFill"></image>
+						<view class="top-sales-bar top-sales-bar-1">已抢{{ goodsList[0].sales }}件</view>
+					</view>
+					<view class="top-title">
+						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
+						<text class="top-name">{{ goodsList[0].title }}</text>
+					</view>
+					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[0].finalPrice }}</text></text>
+					<view class="top-coupon-tag">券 {{ goodsList[0].couponValue }}元</view>
+				</view>
+
+				<!-- Top 3 (右侧) -->
+				<view class="top-card top-card-side" @click="goToDetail(goodsList[2].id)">
+					<view class="top-badge-wrap">
+						<image class="top-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
+						<text class="top-badge-num">3</text>
+					</view>
+					<view class="top-img-box">
+						<image class="top-img" :src="goodsList[2].image" mode="aspectFill"></image>
+						<view class="top-sales-bar">已抢{{ goodsList[2].sales }}件</view>
+					</view>
+					<view class="top-title">
+						<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
+						<text class="top-name">{{ goodsList[2].title }}</text>
+					</view>
+					<text class="top-price">券后¥<text class="tp-val">{{ goodsList[2].finalPrice }}</text></text>
+					<view class="top-coupon-tag">券 {{ goodsList[2].couponValue }}元</view>
+				</view>
+			</view>
+
+			<!-- Top 4+ 横向列表 -->
+			<view class="rest-list">
+				<view class="rest-item" v-for="(goods, idx) in goodsList.slice(3)" :key="idx" @click="goToDetail(goods.id)">
+					<view class="rest-left">
+						<view class="rest-badge-wrap">
+							<image class="rest-badge-img" src="https://img.bc.haodanku.com/cms_web/1698115498" mode="widthFix"></image>
+							<text class="rest-badge-num">{{ idx + 4 }}</text>
+						</view>
+						<image class="rest-img" :src="goods.image" mode="aspectFill"></image>
+					</view>
+					<view class="rest-right">
+						<view class="rest-title-row">
+							<image src="https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4" class="p-icon"></image>
+							<text class="rest-name">{{ goods.title }}</text>
+						</view>
+						<view class="rest-price-row">
+							<text class="rest-price-tip">券后¥</text>
+							<text class="rest-price-val">{{ goods.finalPrice }}</text>
+							<text class="rest-price-old">¥{{ goods.originalPrice }}</text>
+						</view>
+						<view class="rest-coupon">券 {{ goods.couponValue }}元</view>
+						<view class="rest-buy-bar">
+							<text class="rest-buy-txt">近2小时已抢 <text class="rest-buy-num">{{ goods.sales }}</text> 件</text>
+							<view class="rest-buy-btn">马上抢</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="loading-status" v-if="loading">火速加载中...</view>
+			<view class="footer-placeholder"></view>
+		</scroll-view>
+
+		<!-- 底部导航 -->
+		<bottom-nav :activeTab="1"></bottom-nav>
+	</view>
+</template>
+
+<script>
+	import BottomNav from '@/components/bottom-nav/bottom-nav.vue';
+
+	export default {
+		components: {
+			BottomNav
+		},
+		data() {
+			return {
+				statusBarHeight: 44,
+				rankType: 1,
+				currentCateId: 0,
+				categoryList: [
+					{ id: 0, name: '全部' },
+					{ id: 10, name: '居家' },
+					{ id: 11, name: '美食' },
+					{ id: 8, name: '儿童' },
+					{ id: 3, name: '女装' },
+					{ id: 4, name: '美妆' }
+				],
+				goodsList: [],
+				loading: false,
+				page: 1
+			}
+		},
+		onLoad() {
+			const sysInfo = uni.getSystemInfoSync();
+			this.statusBarHeight = sysInfo.statusBarHeight || 44;
+			this.getRankList(true);
+		},
+		methods: {
+			switchRankType(type) {
+				if (this.rankType === type) return;
+				this.rankType = type;
+				this.getRankList(true);
+			},
+			switchCategory(id) {
+				if (this.currentCateId === id) return;
+				this.currentCateId = id;
+				this.getRankList(true);
+			},
+			getRankList(refresh = false) {
+				if (refresh) {
+					this.page = 1;
+					this.goodsList = [];
+				}
+				if (this.loading) return;
+				this.loading = true;
+
+				uni.request({
+					url: `https://api.cmspro.haodanku.com/ranking/lists?type=${this.rankType}&category_id=${this.currentCateId}&page=${this.page}&page_size=60&cid=qOstW90`,
+					success: (res) => {
+						if (res.data && res.data.code === 200 && res.data.data && res.data.data.list_item && res.data.data.list_item.list) {
+							const list = res.data.data.list_item.list.map(item => {
+								// 处理标题
+								let title = item.itemshorttitle || item.itemtitle;
+								if (title.length > 18) {
+									title = title.substring(0, 18) + '...';
+								}
+
+								// 处理销量显示
+								let salesCount = this.rankType === 1 ? (item.todaysale || item.itemsale2 || 0) : item.itemsale;
+								let salesStr = salesCount >= 10000 ? (salesCount / 10000).toFixed(1) + '万' : salesCount;
+
+								return {
+									id: item.itemid,
+									image: item.itempic,
+									title: title,
+									finalPrice: item.itemendprice,
+									originalPrice: item.itemprice,
+									couponValue: item.couponmoney || 0,
+									sales: salesStr,
+									shopName: item.shopname,
+									labels: item.label || []
+								};
+							});
+							this.goodsList = [...this.goodsList, ...list];
+						}
+					},
+					complete: () => {
+						this.loading = false;
+					}
+				});
+			},
+			loadMore() {
+				// 榜单通常展示前60条
+			},
+			goToDetail(id) {
+				uni.navigateTo({
+					url: `/pages/detail/detail?id=${id}`
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.rank-container {
+		width: 100%;
+		height: 100vh;
+		background-color: #f5f6f8;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* ========== 头部区域 ========== */
+	.rank-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(180deg, #ff6034, #ff4b2b, #ff416c);
+		z-index: 100;
+		padding-bottom: 0;
+	}
+
+	.rank-main-tabs {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 88rpx;
+		gap: 60rpx;
+	}
+
+	.main-tab {
+		display: flex;
+		align-items: center;
+		gap: 4rpx;
+	}
+
+	.tab-main-txt {
+		font-size: 30rpx;
+		color: rgba(255, 255, 255, 0.7);
+		transition: all 0.3s;
+	}
+
+	.main-tab.active .tab-main-txt {
+		color: #ffffff;
+		font-size: 34rpx;
+		font-weight: bold;
+	}
+
+	.fire-icon {
+		font-size: 28rpx;
+	}
+
+	/* 分类导航 */
+	.cate-nav {
+		white-space: nowrap;
+		padding: 16rpx 0;
+		background: #ffffff;
+		border-radius: 20rpx 20rpx 0 0;
+	}
+
+	.cate-item {
+		display: inline-block;
+		padding: 8rpx 28rpx;
+		margin: 0 8rpx;
+		position: relative;
+	}
+
+	.cate-txt {
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.cate-item.active .cate-txt {
+		color: #333;
+		font-weight: bold;
+	}
+
+	.cate-item.active {
+		border-bottom: 4rpx solid #ff4b2b;
+	}
+
+	/* ========== 滚动内容 ========== */
+	.rank-content {
+		flex: 1;
+		height: 100%;
+	}
+
+	.header-placeholder {
+		width: 100%;
+	}
+
+	/* ========== Top 1-3 领奖台 ========== */
+	.top-three-wrap {
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		padding: 20rpx 16rpx 10rpx;
+		background: #ffffff;
+		margin: 0 0 16rpx;
+		gap: 10rpx;
+	}
+
+	.top-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: #ffffff;
+		border-radius: 12rpx;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.top-card-side {
+		flex: 1;
+	}
+
+	.top-card-center {
+		flex: 1.15;
+		margin-top: -20rpx;
+	}
+
+	.top-badge-wrap {
+		position: absolute;
+		top: -6rpx;
+		left: 8rpx;
+		width: 60rpx;
+		height: 60rpx;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.top-badge-img {
+		width: 60rpx;
+		position: absolute;
+	}
+
+	.top-badge-num {
+		position: relative;
+		z-index: 11;
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #ffffff;
+		margin-top: -6rpx;
+	}
+
+	.top-img-box {
+		width: 100%;
+		aspect-ratio: 1;
+		border-radius: 12rpx;
+		overflow: hidden;
+		position: relative;
+		background: #f5f5f5;
+	}
+
+	.top-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.top-sales-bar {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: linear-gradient(90deg, #ff9a44, #ff6534);
+		color: #ffffff;
+		font-size: 20rpx;
+		text-align: center;
+		padding: 6rpx 0;
+		font-weight: bold;
+	}
+
+	.top-sales-bar-1 {
+		background: linear-gradient(90deg, #ff5e62, #ff416c);
+	}
+
+	.top-title {
+		display: flex;
+		align-items: center;
+		padding: 10rpx 8rpx 4rpx;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.p-icon {
+		width: 24rpx;
+		height: 24rpx;
+		margin-right: 4rpx;
+		flex-shrink: 0;
+	}
+
+	.top-name {
+		font-size: 22rpx;
+		color: #333;
+		font-weight: bold;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+	}
+
+	.top-price {
+		font-size: 22rpx;
+		color: #ff4b2b;
+		padding: 0 8rpx;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.tp-val {
+		font-size: 30rpx;
+		font-weight: bold;
+	}
+
+	.top-coupon-tag {
+		background: linear-gradient(90deg, #ff9a44, #ff6534);
+		color: #ffffff;
+		font-size: 20rpx;
+		padding: 4rpx 16rpx;
+		border-radius: 20rpx;
+		margin: 6rpx 0 12rpx;
+	}
+
+	/* ========== Top 4+ 列表 ========== */
+	.rest-list {
+		background: #ffffff;
+		margin: 0 16rpx;
+		border-radius: 16rpx;
+		overflow: hidden;
+	}
+
+	.rest-item {
+		display: flex;
+		padding: 24rpx;
+		border-bottom: 1rpx solid #f5f5f5;
+	}
+
+	.rest-left {
+		flex-shrink: 0;
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 12rpx;
+		overflow: hidden;
+		position: relative;
+		background: #f5f5f5;
+	}
+
+	.rest-badge-wrap {
+		position: absolute;
+		top: -2rpx;
+		left: 4rpx;
+		width: 50rpx;
+		height: 50rpx;
+		z-index: 10;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rest-badge-img {
+		width: 50rpx;
+		position: absolute;
+	}
+
+	.rest-badge-num {
+		position: relative;
+		z-index: 11;
+		font-size: 22rpx;
+		font-weight: bold;
+		color: #ffffff;
+		margin-top: -4rpx;
+	}
+
+	.rest-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.rest-right {
+		flex: 1;
+		margin-left: 20rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.rest-title-row {
+		display: flex;
+		align-items: center;
+	}
+
+	.rest-name {
+		font-size: 26rpx;
+		color: #333;
+		font-weight: bold;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+	}
+
+	.rest-price-row {
+		display: flex;
+		align-items: baseline;
+		margin-top: 10rpx;
+	}
+
+	.rest-price-tip {
+		font-size: 22rpx;
+		color: #ff4b2b;
+	}
+
+	.rest-price-val {
+		font-size: 40rpx;
+		color: #ff4b2b;
+		font-weight: bold;
+		margin-right: 10rpx;
+	}
+
+	.rest-price-old {
+		font-size: 22rpx;
+		color: #bbb;
+		text-decoration: line-through;
+	}
+
+	.rest-coupon {
+		display: inline-block;
+		align-self: flex-start;
+		background: linear-gradient(90deg, #ff9a44, #ff6534);
+		color: #ffffff;
+		font-size: 20rpx;
+		padding: 4rpx 16rpx;
+		border-radius: 20rpx;
+		margin-top: 6rpx;
+	}
+
+	.rest-buy-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: linear-gradient(90deg, #fff0e6, #ffe8d6);
+		border-radius: 30rpx;
+		margin-top: 10rpx;
+		padding: 4rpx 4rpx 4rpx 20rpx;
+		overflow: hidden;
+	}
+
+	.rest-buy-txt {
+		font-size: 20rpx;
+		color: #ff6534;
+	}
+
+	.rest-buy-num {
+		font-weight: bold;
+		color: #ff4b2b;
+	}
+
+	.rest-buy-btn {
+		background: linear-gradient(90deg, #ff6534, #ff4b2b);
+		color: #ffffff;
+		font-size: 22rpx;
+		font-weight: bold;
+		padding: 10rpx 24rpx;
+		border-radius: 30rpx;
+	}
+
+	/* ========== 其他 ========== */
+	.loading-status {
+		text-align: center;
+		padding: 40rpx 0;
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	.footer-placeholder {
+		height: 140rpx;
+	}
+</style>