feat 新增热销商品页面及跳转功能

- 新增热销商品页面路由配置，支持自定义导航栏
- 在卖书页面热销商品标题区域添加点击跳转功能
- 添加 goHotSell 方法实现页面导航

pages-sell/components/hot-sell-item/index.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="hot-item">
+		<!-- Rank -->
+		<view class="rank-col">
+			<image v-if="rank === 1" src="/pages-sell/static/hot/icon-first.png" class="rank-icon" mode="widthFix"></image>
+			<image v-else-if="rank === 2" src="/pages-sell/static/hot/icon-second.png" class="rank-icon" mode="widthFix"></image>
+			<image v-else-if="rank === 3" src="/pages-sell/static/hot/icon-third.png" class="rank-icon" mode="widthFix"></image>
+			<text v-else class="rank-text">{{ rank < 10 ? '0' + rank : rank }}</text>
+		</view>
+
+		<!-- Book Info -->
+		<view class="book-info">
+			<image :src="item.cover" class="book-cover" mode="aspectFill"></image>
+			
+			<view class="info-right">
+				<text class="title">{{ item.title }}</text>
+				<text class="author">{{ item.author }}</text>
+				
+				<view class="bottom-row">
+					<view class="price-box">
+						<text class="currency">¥</text>
+						<text class="price">{{ item.price }}</text>
+						<text class="original">¥{{ item.originalPrice }}</text>
+					</view>
+					
+					<view class="cart-btn">
+						<text>加入购物车</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'HotSellItem',
+	props: {
+		rank: {
+			type: Number,
+			required: true
+		},
+		item: {
+			type: Object,
+			required: true
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.hot-item {
+	display: flex;
+	align-items: center;
+	padding: 30rpx 0;
+	border-bottom: 1rpx solid #F0F0F0;
+
+	.rank-col {
+		width: 80rpx;
+		display: flex;
+		justify-content: center;
+		margin-right: 10rpx;
+
+		.rank-icon {
+			width: 60rpx;
+			height: 60rpx;
+		}
+
+		.rank-text {
+			font-family: Arial-BoldItalicMT;
+			font-size: 36rpx;
+			color: #706F6D;
+			font-style: italic;
+			font-weight: bold;
+		}
+	}
+
+	.book-info {
+		flex: 1;
+		display: flex;
+		align-items: center;
+
+		.book-cover {
+			width: 140rpx;
+			height: 180rpx;
+			border-radius: 4rpx;
+			background-color: #f5f5f5;
+			margin-right: 24rpx;
+			flex-shrink: 0;
+		}
+
+		.info-right {
+			flex: 1;
+			height: 190rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			padding: 10rpx 0;
+
+			.title {
+				font-size: 36rpx;
+				color: #303030;
+				font-weight: bold;
+				line-height: 1.2;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+
+			.author {
+				font-size: 24rpx;
+				color: #999999;
+			}
+
+			.bottom-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+
+				.price-box {
+					display: flex;
+					align-items: baseline;
+
+					.currency {
+						font-size: 24rpx;
+						color: #D81A00;
+						font-weight: bold;
+					}
+
+					.price {
+						font-size: 36rpx;
+						color: #D81A00;
+						font-weight: bold;
+						margin-right: 12rpx;
+					}
+
+					.original {
+						font-size: 24rpx;
+						color: #999999;
+						text-decoration: line-through;
+					}
+				}
+
+				.cart-btn {
+					width: 160rpx;
+					height: 56rpx;
+					background: linear-gradient(90deg, #4ED964 0%, #38C248 100%);
+					border-radius: 28rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					text {
+						font-size: 24rpx;
+						color: #fff;
+						font-weight: 500;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages-sell/components/sell-container/index.vue

@@ -63,7 +63,7 @@
 
 				<!-- 右侧：热销商品 -->
 				<view class="card-right">
-					<view class="right-header">
+					<view class="right-header" @click="goHotSell">
 						<image src="/pages-sell/static/icon-fire.png" class="fire-icon" mode="widthFix"></image>
 						<text class="right-title">热销商品</text>
 						<image src="/pages-sell/static/icon-fire.png" class="fire-icon flip" mode="widthFix"></image>
@@ -199,6 +199,11 @@ export default {
 		changeHotTag(index) {
 			this.currentHotTag = index;
 			console.log('切换标签:', index);
+		},
+		goHotSell() {
+			uni.navigateTo({
+				url: '/pages-sell/pages/hot-sell'
+			});
 		}
 	}
 }

pages-sell/pages/hot-sell.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="hot-sell-page">
+		<!-- Header Background -->
+		<image class="header-bg" src="/pages-sell/static/hot/top-bg.png" mode="widthFix"></image>
+		
+		<!-- Custom Navbar -->
+		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
+			<view class="navbar-content">
+				<image src="/pages-sell/static/hot/icon-back.png" class="back-icon" @click="goBack"></image>
+			</view>
+		</view>
+
+		<!-- Header Content -->
+		<view class="header-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
+			<view class="title-area">
+				<text class="main-title">热销榜单</text>
+				<text class="sub-title">Best Sellers</text>
+			</view>
+		</view>
+
+		<!-- List Content -->
+		<view class="list-container">
+			<hot-sell-item 
+				v-for="(item, index) in bookList" 
+				:key="index" 
+				:rank="index + 1" 
+				:item="item"
+			></hot-sell-item>
+		</view>
+	</view>
+</template>
+
+<script>
+import HotSellItem from '../components/hot-sell-item/index.vue'
+
+export default {
+	components: {
+		HotSellItem
+	},
+	data() {
+		return {
+			statusBarHeight: 20,
+			bookList: [
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				},
+				{
+					title: '山河岁月',
+					author: '本书编写组',
+					price: '6.80',
+					originalPrice: '36.80',
+					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
+				}
+			]
+		}
+	},
+	created() {
+		const systemInfo = uni.getSystemInfoSync();
+		this.statusBarHeight = systemInfo.statusBarHeight || 20;
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack();
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.hot-sell-page {
+	min-height: 100vh;
+	background-color: #fff;
+	position: relative;
+}
+
+.header-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 0;
+}
+
+.custom-navbar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 100;
+	
+	.navbar-content {
+		height: 44px;
+		display: flex;
+		align-items: center;
+		padding-left: 40rpx;
+		
+		.back-icon {
+			width: 16rpx;
+			height: 26rpx;
+		}
+	}
+}
+
+.header-content {
+	position: relative;
+	z-index: 1;
+	padding: 0 40rpx;
+	height: 200rpx; /* Adjust based on bg image height */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
+	.title-area {
+		.main-title {
+			font-size: 60rpx;
+			font-weight: bold;
+			color: #0B2E16;
+			display: block;
+		}
+
+		.sub-title {
+			font-size: 36rpx;
+			color: #72967D;
+		}
+	}
+}
+
+.list-container {
+	position: relative;
+	z-index: 1;
+	background-color: #fff;
+	border-radius: 40rpx 40rpx 0 0; /* Rounded top corners for list area */
+	margin-top: 0rpx;
+	padding: 30rpx 40rpx;
+	min-height: 500rpx;
+}
+</style>

pages.json

@@ -284,6 +284,13 @@
                     "style": {
                         "navigationBarTitleText": "Placeholder"
                     }
+                },
+                {
+                    "path": "pages/hot-sell",
+                    "style": {
+                        "navigationStyle": "custom",
+                        "navigationBarTitleText": ""
+                    }
                 }
             ]
         }