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">
			<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>
		</view>
	</view>
</template>

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

export default {
	components: {
		HotSellItem,
		Navbar
	},
	data() {
		return {
			statusBarHeight: 20,
			bookList: [],
			scrollTop: 0
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
	},
	onLoad() {
		this.getHotBookList();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getHotBookList() {
			uni.showLoading({ title: '加载中...', mask: true });
			this.$u.api.getHotBookListAjax({pageNum: 1, pageSize: 100}).then(res => {
				if (res.code === 200) {
					this.bookList = res.data || res.rows || [];
				}
			}).finally(() => {
				uni.hideLoading();
			});
		},
		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>