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="scrollTop > 0 ? '#333333' : '#ffffff'" :back-icon-color="scrollTop > 0 ? '#333333' : '#ffffff'" :background="scrollTop > 0 ? '#ffffff' : 'transparent'"></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" @update-item="updateBookItem($event, index)"></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>
		<select-good-popup-host />
	</view>
</template>

<script>
	import RecommendItem from '../components/recommend-item/index.vue'
	import Navbar from '@/components/navbar/navbar.vue'
	import SelectGoodPopupHost from '@/components/select-good-popup-host.vue'

	export default {
		components: {
			RecommendItem,
			Navbar,
			SelectGoodPopupHost,
		},
		data() {
			return {
				cateId: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				bookList: [],
				showName: '',
				imageUrl: '/pages-sell/static/topic/top-bg-2.png',
				scrollTop: 0
			}
		},
		onLoad(options) {
			if (options.cateId || options.id) {
				this.cateId = options.cateId || options.id;
				this.loadData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		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,
								availableStock: item.availableStock,
								hasArrivalNotice: item.hasArrivalNotice,
								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();
			},
			updateBookItem(updatedItem, index) {
				this.$set(this.bookList, index, { ...this.bookList[index], ...updatedItem });
			},
			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(async res => {
					if (res.code == 200) {
                        await this.$updateCartBadge();
						uni.showToast({
							title: '已加入购物车',
							icon: 'success',
							duration: 3000
						});
					}
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "reduce") {
				let reduceCode = uni.getStorageSync("reduceCodeShare");
				if (this.$u && this.$u.api && this.$u.api.goToReduceShareAjax) {
					this.$u.api.goToReduceShareAjax({ reduceCode: reduceCode });
				} else {
					uni.$u && uni.$u.http && uni.$u.http.get('/token/shop/order/goToShare', { reduceCode: reduceCode });
				}
				return {
					title: "快来帮我减钱买书吧！",
					path: "/pages/sell/index?reduceCode=" + reduceCode,
					imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
					desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
				};
			}
			return {
				title: this.showName || '图书专题',
				path: `/pages-sell/pages/topic?cateId=${this.cateId}`,
				imageUrl: this.imageUrl || ''
			};
		}
	}
</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>