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

<template>
	<view class="feature-page">
		<!-- Header Background -->
		<image class="header-bg" src="/pages-sell/static/topic/top-bg-2.png" 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">【考试】大学英语四六级</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">
				<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 {
			currentIndex: 0,
			pageSize: 5,
			allBooks: [],
			bookList: []
		}
	},
	created() {
		this.initBooks();
		this.updateBookList();
	},
	methods: {
		initBooks() {
			const baseBooks = [
				{
					title: '山河岁月',
					author: '本书编写组',
					price: '6.80',
					originalPrice: '36.80',
					cover: '/static/img/1.png',
					desc: '“山河岁月”以宏大的历史视野，讲述了...'
				},
				{
					title: '平凡的世界',
					author: '路遥',
					price: '12.80',
					originalPrice: '45.00',
					cover: '/static/img/1.png',
					desc: '中国当代城乡社会生活的巨大变迁...'
				},
				{
					title: '活着',
					author: '余华',
					price: '9.90',
					originalPrice: '28.00',
					cover: '/static/img/1.png',
					desc: '讲述了人如何去承受巨大的苦难...'
				},
				{
					title: '三体',
					author: '刘慈欣',
					price: '15.50',
					originalPrice: '38.00',
					cover: '/static/img/1.png',
					desc: '地球文明在宇宙中的兴衰历程...'
				},
				{
					title: '百年孤独',
					author: '马尔克斯',
					price: '18.00',
					originalPrice: '55.00',
					cover: '/static/img/1.png',
					desc: '布恩迪亚家族七代人的传奇故事...'
				}
			];
			
			// Generate more data for demonstration
			this.allBooks = [];
			for (let i = 0; i < 4; i++) {
				this.allBooks.push(...baseBooks.map((b, idx) => ({
					...b,
					id: i * 10 + idx + 1,
					title: `${b.title} ${i > 0 ? i + 1 : ''}`
				})));
			}
		},
		updateBookList() {
			const start = this.currentIndex * this.pageSize;
			const end = start + this.pageSize;
			this.bookList = this.allBooks.slice(start, end);
			
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		changeBatch() {
			const maxIndex = Math.ceil(this.allBooks.length / this.pageSize) - 1;
			if (this.currentIndex < maxIndex) {
				this.currentIndex++;
			} else {
				this.currentIndex = 0;
			}
			
			// Simple loading effect
			uni.showLoading({ title: '加载中' });
			setTimeout(() => {
				this.updateBookList();
				uni.hideLoading();
			}, 300);
		},
		handleAddToCart(data) {
			console.log('Add to cart:', data);
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			});
		}
	}
}
</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>