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

<template>
    <view class="recommend-page">
        <!-- Header Background Image -->
        <!-- User specified 363rpx x 251rpx. Assuming top-right positioning or similar based on typical designs -->
        <image class="header-bg" src="/pages-sell/static/recommend/top-bg.png" mode="aspectFit"></image>

        <!-- Custom Navbar -->
        <Navbar title="推荐图书专题"></Navbar>

		<!-- Header Content -->
		<view class="header-content">
			<image class="header-image" :src="imageUrl" mode="widthFix"></image>
			<view class="header-desc">
				<view class="title-row">
					<text class="title-text">{{ showName }}</text>
					<button class="share-btn" open-type="share">
						<image class="share-icon" src="/pages-sell/static/recommend/icon-share.png" mode="aspectFit"></image>
					</button>
				</view>
				<text class="desc-text">{{ remark }}</text>
			</view>
		</view>

		<!-- List Content -->
		<view class="list-container">
			<recommend-item v-for="(item, index) in bookList" :key="index" :item="item"></recommend-item>
			<u-loadmore :status="loadStatus" margin-top="30" margin-bottom="30"></u-loadmore>
		</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: 10,
			loadStatus: 'loadmore',
			
			imageUrl: "",
			showName: "",
			remark: "",
			bookList: []
		}
	},
	onLoad(options) {
		if(options.cateId || options.id) {
			this.cateId = options.cateId || options.id;
			this.loadData();
		}
	},
	onReachBottom() {
		if(this.loadStatus == 'loadmore') {
			this.loadData();
		}
	},
	onShareAppMessage() {
		return {
			title: this.showName || '推荐图书专题',
			path: `/pages-sell/pages/recommend?cateId=${this.cateId}`,
			imageUrl: this.imageUrl || ''
		};
	},
	onShareTimeline() {
		return {
			title: this.showName || '推荐图书专题',
			query: `cateId=${this.cateId}`,
			imageUrl: this.imageUrl || ''
		};
	},
	methods: {
		loadData() {
			this.loadStatus = 'loading';
			this.$u.api.getBookListByCateIdAjax({
				cateId: this.cateId,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then(res => {
				if(res.code == 200) {
					const data = res.data;
					// Update header info (only needed on first page, but safe to update every time or check pageNum)
					if(this.pageNum == 1) {
						this.imageUrl = data.imgUrl;
						this.showName = data.showName;
						this.remark = data.remark;
						this.bookList = [];
					}
					
					const list = 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,
							// Pass other props if needed by item component
							id: item.bookId || item.id, // Assuming there might be an ID
							isbn: item.bookIsbn
						}
					});
					
					this.bookList = [...this.bookList, ...list];
					
					if(this.bookList.length >= data.bookPageList.total) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
						this.pageNum++;
					}
				} else {
					this.loadStatus = 'nomore';
				}
			}).catch(() => {
				this.loadStatus = 'nomore';
			});
		},
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #EBF9F1 0%, #FFFFFF 400rpx);
    /* Light green gradient to match theme */
    position: relative;
}

.header-bg {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 624rpx;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
    padding: 30rpx 40rpx;
    display: flex;
    align-items: flex-start;
    font-family: Source Han Sans SC;

    .header-image {
        width: 226rpx;
        height: 300rpx;
        border-radius: 4rpx;
        box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
        flex-shrink: 0;
    }

    .header-desc {
        flex: 1;
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;

        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20rpx;

            .title-text {
                font-size: 40rpx;
                font-weight: bold;
                color: #333;
                line-height: 1.2;
            }

            .share-btn {
				max-width: 60rpx;
                background-color: transparent;
                padding: 0;
                margin: 0;
                line-height: normal;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
				height: 50rpx;
                
                &::after {
                    border: none;
                }

                .share-icon {
                    width: 34rpx;
                    height: 34rpx;
                    flex-shrink: 0;
                    margin-left: 20rpx;
                    margin-top: 10rpx;
                }
            }
        }

        .desc-text {
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
            text-align: justify;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;
            overflow: hidden;
        }
    }
}

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