|
|
@@ -0,0 +1,231 @@
|
|
|
+<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>
|
