|
|
@@ -9,7 +9,7 @@
|
|
|
<!-- Header Content -->
|
|
|
<view class="header-content">
|
|
|
<view class="title-area">
|
|
|
- <text class="main-title">【考试】大学英语四六级</text>
|
|
|
+ <text class="main-title">{{ showName }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -19,10 +19,11 @@
|
|
|
@add-cart="handleAddToCart"></RecommendItem>
|
|
|
|
|
|
<!-- Change Batch Button -->
|
|
|
- <view class="refresh-fab" @click="changeBatch">
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
@@ -31,201 +32,181 @@
|
|
|
</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 : ''}`
|
|
|
- })));
|
|
|
- }
|
|
|
+ import RecommendItem from '../components/recommend-item/index.vue'
|
|
|
+ import Navbar from '@/components/navbar/navbar.vue'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ RecommendItem,
|
|
|
+ Navbar
|
|
|
},
|
|
|
- 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
|
|
|
- });
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cateId: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ total: 0,
|
|
|
+ bookList: [],
|
|
|
+ showName: ''
|
|
|
+ }
|
|
|
},
|
|
|
- changeBatch() {
|
|
|
- const maxIndex = Math.ceil(this.allBooks.length / this.pageSize) - 1;
|
|
|
- if (this.currentIndex < maxIndex) {
|
|
|
- this.currentIndex++;
|
|
|
- } else {
|
|
|
- this.currentIndex = 0;
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.cateId || options.id) {
|
|
|
+ this.cateId = options.cateId || options.id;
|
|
|
+ this.loadData();
|
|
|
}
|
|
|
-
|
|
|
- // 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'
|
|
|
- });
|
|
|
+ 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.total = data.bookPageList.total;
|
|
|
+
|
|
|
+ this.bookList = data.bookPageList.rows.map(item => {
|
|
|
+ return {
|
|
|
+ title: item.bookName,
|
|
|
+ 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'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</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;
|
|
|
- }
|
|
|
+ .feature-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
+
|
|
|
+ .header-bg {
|
|
|
+ position: fixed;
|
|
|
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;
|
|
|
+ z-index: 0;
|
|
|
}
|
|
|
-
|
|
|
- .refresh-content {
|
|
|
+
|
|
|
+ .header-content {
|
|
|
position: relative;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 0 40rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
-
|
|
|
- .refresh-text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-top: 4rpx;
|
|
|
+ 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>
|
