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

<template>
	<view class="feature-page">
		<!-- Header Background -->
		<image class="header-bg" :src="imageUrl" mode="widthFix"></image>

		<!-- Custom Navbar -->
		<Navbar title="图书专题" :titleSize="32" title-color="#ffffff" back-icon-color="#ffffff"></Navbar>

		<!-- Header Content -->
		<view class="header-content">
			<view class="title-area">
				<text class="main-title">{{ showName }}</text>
			</view>
		</view>

		<!-- List Content -->
		<view class="list-container">
			<RecommendItem v-for="(item, index) in bookList" :key="index" :item="item" :show-desc="false"
				@add-cart="handleAddToCart"></RecommendItem>

			<!-- Change Batch Button -->
			<view class="refresh-fab" @click="changeBatch" v-if="total > pageSize">
				<view class="refresh-bg"></view>
				<view class="refresh-content">
					<image src="/pages-sell/static/topic/icon-refresh.png" class="refresh-icon" mode="widthFix"
						style="width: 32rpx"></image>
					<text class="refresh-text">换一批</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RecommendItem from '../components/recommend-item/index.vue'
	import Navbar from '@/components/navbar/navbar.vue'

	export default {
		components: {
			RecommendItem,
			Navbar
		},
		data() {
			return {
				cateId: '',
				pageNum: 1,
				pageSize: 5,
				total: 0,
				bookList: [],
				showName: '',
				imageUrl: '/pages-sell/static/topic/top-bg-2.png'
			}
		},
		onLoad(options) {
			if (options.cateId || options.id) {
				this.cateId = options.cateId || options.id;
				this.loadData();
			}
		},
		methods: {
			loadData() {
				uni.showLoading({ title: '加载中' });
				this.$u.api.getBookListByCateIdAjax({
					cateId: this.cateId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						const data = res.data;
						this.showName = data.showName || '图书专题';
						this.imageUrl = data.imgUrl || '/pages-sell/static/topic/top-bg-2.png';
						this.total = data.bookPageList.total;

						this.bookList = data.bookPageList.rows.map(item => {
							return {
								title: item.bookName,
								author: item.author || '', // API doesn't return author currently
								price: item.bookPrice,
								originalPrice: item.bookOriginalPrice,
								cover: item.bookImg,
								desc: item.bookShortReview,
								id: item.bookId || item.id,
								isbn: item.bookIsbn
							}
						});

						// Scroll to top when data changes
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			changeBatch() {
				const maxPages = Math.ceil(this.total / this.pageSize);
				if (this.pageNum < maxPages) {
					this.pageNum++;
				} else {
					this.pageNum = 1;
				}
				this.loadData();
			},
			handleAddToCart(data) {
				console.log('Add to cart:', data);
				// Implement actual add to cart logic if needed, or keep toast
				this.$u.api.addShopCartAjax({
					bookId: data.id,
					num: 1
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success',
							duration: 3000
						});
                        this.$updateCartBadge();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feature-page {
		min-height: 100vh;
		background-color: #F8F8F8;
		position: relative;
	}

	.header-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.header-content {
		position: relative;
		z-index: 1;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 200rpx;

		.title-area {
			width: 100%;

			.main-title {
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 60rpx;
				color: #FFFFFF;
				text-shadow: 2px 2px 4px #0C256D;
				text-align: center;
			}
		}
	}

	.list-container {
		position: relative;
		z-index: 1;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 10rpx 40rpx 40rpx;
		min-height: calc(100vh - 360rpx);
	}

	.refresh-fab {
		position: fixed;
		right: 30rpx;
		bottom: 30%;
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;

		.refresh-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000000;
			opacity: 0.2;
			/* Adjusted for visibility, user said 0.1 but that might be too faint for white text bg */
			z-index: 1;
		}

		.refresh-content {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.refresh-text {
				font-size: 20rpx;
				color: #FFFFFF;
				margin-top: 4rpx;
			}
		}
	}
</style>