book-hi/pages-sell/pages/hot-sell.vue

<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 -->
		<Navbar :background="scrollTop > 0 ? '#ffffff' : 'transparent'"></Navbar>

		<!-- Header Content -->
		<view class="header-content">
			<view class="title-area">
				<text class="main-title">热销榜单</text>
				<text class="sub-title">Best Sellers</text>
			</view>
		</view>

		<!-- List Content -->
		<view class="list-container">
			<page-scroll ref="pageRef" class="hot-scroll" slotEmpty
				url="/token/shop/showIndex/getHotBookList"
				:page-size="20"
				:params="listParams"
				bgColor="#ffffff"
				height="calc(100vh - 432rpx)"
				@updateList="handleUpdateList">
				<hot-sell-item 
					v-for="(item, index) in bookList" 
					:key="index" 
					:rank="index + 1" 
					:item="item"
					@add-cart="addToCart"
					@update-item="updateBookItem($event, index)"
				></hot-sell-item>
			</page-scroll>
		</view>
	</view>
</template>

<script>
import HotSellItem from '../components/hot-sell-item/index.vue'
import Navbar from '@/components/navbar/navbar.vue'
import pageScroll from '@/components/pageScroll/index.vue'

export default {
	components: {
		HotSellItem,
		Navbar,
		pageScroll
	},
	data() {
		return {
			statusBarHeight: 20,
			bookList: [],
			scrollTop: 0,
			listParams: {}
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		handleUpdateList(list) {
			this.bookList = list || [];
		},
		updateBookItem(updatedItem, index) {
			this.$set(this.bookList, index, { ...this.bookList[index], ...updatedItem });
		},
		addToCart(data) {
			console.log('add to cart:', data);
		}
	}
}
</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%;
	height: 458rpx;
	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;
	margin-top: -20rpx;

	.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 */
	padding: 30rpx 40rpx;
	min-height: 500rpx;
}
</style>