book-hi/pages-sell/components/sell-container/index.vue

<template>
	<view class="sell-container">
		<!-- 顶部背景图 -->
		<image class="top-bg-image" src="/pages-sell/static/top-bg.png" mode="widthFix"></image>

		<!-- 导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<text class="navbar-title">书嗨</text>
				<!-- 右侧胶囊占位，保持布局平衡 -->
				<view class="nav-right-placeholder"></view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
			<!-- 搜索框 -->
			<view class="search-wrapper" @click="navigateTo('/pages-sell/pages/search')">
				<view class="search-box-uview">
					<u-search placeholder="搜索关键字" :show-action="false" bg-color="transparent" height="40"
						:clearabled="true" v-model="keyword" :disabled="true"
						search-icon="/pages-sell/static/search-icon.png"></u-search>
					<view class="search-btn-overlay">
						<text>搜索</text>
					</view>
				</view>
			</view>

			<!-- tab标签 -->
			<view class="tabs-wrapper">
				<u-tabs :list="hotTagList" :current="currentHotTag" @change="changeHotTag" bgColor="transparent"
					lineColor="transparent" :active-item-style="{ fontWeight: 'bold', color: '#333' }"
					inactive-color="#3C4F3E" :barStyle="barStyle" :bar-height="27" :bar-width="52"></u-tabs>
			</view>

			<!-- 顶部横幅 Banner -->
			<view class="top-banner-wrapper">
				<image src="/pages-sell/static/top-banner.png" class="top-banner-img" mode="widthFix"></image>
			</view>

			<!-- 金刚区分类图标 (2行5列) -->
			<view class="category-grid">
				<view class="grid-item" v-for="(item, index) in categoryList" :key="index"
					@click="handleCategory(item)">
					<view class="icon-circle">
						<image :src="item.imgUrl" class="cat-icon" mode="aspectFit"></image>
					</view>
					<text class="cat-name">{{ item.showCateName || '-' }}</text>
				</view>
			</view>

			<!-- 推广与热销双卡片 -->
			<view class="promo-dual-card">
				<!-- 左侧：推广卖书 -->
				<view class="card-left">
					<view class="card-content">
						<u-swiper :list="swiperList" :autoplay="true" :interval="3000" name="imgUrl"></u-swiper>
					</view>
				</view>

				<!-- 右侧：热销商品 -->
				<view class="card-right">
					<view class="right-header" @click="navigateTo('/pages-sell/pages/hot-sell')">
						<image src="/pages-sell/static/icon-fire.png" class="fire-icon" mode="widthFix"></image>
						<text class="right-title">热销商品</text>
						<image src="/pages-sell/static/icon-fire.png" class="fire-icon flip" mode="widthFix"></image>
					</view>
					<view class="products-container">
						<!-- 使用网络图片作为书的封面占位 -->
						<image v-for="(item, index) in bookList" :key="index" :src="item.imgUrl" class="product-cover" mode="aspectFill" @click="navigateTo(item.jumpUrl)"></image>
					</view>
				</view>
			</view>

			<!-- 健康与成长双卡片 -->
			<view class="info-dual-card">
				<view class="info-card bg-orange">
					<view class="info-text-group">
						<text class="info-title text-orange">健康与身材</text>
						<text class="info-desc text-orange-light">和身体和解科学管理状态</text>
					</view>
					<image src="/pages-sell/static/shape-19.png" class="info-icon" mode="aspectFit"
						style="width: 125rpx;height: 111rpx;"></image>
				</view>
				<view class="info-card bg-green">
					<view class="info-text-group">
						<text class="info-title text-green">成长与心态</text>
						<text class="info-desc text-green-light">拥有持续进步的动力和抗挫力</text>
					</view>
					<image src="/pages-sell/static/shape-20.png" class="info-icon" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 公众号横幅 -->
			<view class="gzh-section">
				<view class="gzh-bg-wrapper">
					<image src="/pages-sell/static/gzh-banner.png" class="gzh-img-bg" mode="aspectFill"></image>
					<view class="gzh-content-overlay">
						<text class="gzh-title">关注公众号 ，定期领红包</text>
						<view class="gzh-subtitle-pill">
							<text class="gzh-subtitle">别让好书蒙尘 ，书嗨陪你逐页品读</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 书嗨推荐 -->
			<view class="recommend-section" @click="navigateTo(item.jumpUrl)" v-for="(item, index) in topicList" :key="index">
				<view class="section-header">
					<text class="section-title">书嗨推荐</text>
					<view class="view-more">
						<text>查看全部</text>
						<image src="/pages-sell/static/right-arrow.png" class="arrow-icon" mode="widthFix"></image>
					</view>
				</view>

				<view class="book-list">
					<view class="book-item" v-for="(book, index) in getDisplayBooks(item)" :key="index" @click="navigateTo('/pages-sell/pages/detail?isbn=' + book.bookIsbn)">
						<image :src="book.bookImg" class="book-image" mode="aspectFill"></image>
						<text class="book-name">{{ book.bookName }}</text>
						<view class="price-row">
							<text class="currency">¥</text>
							<text class="price-val">{{ book.bookPrice }}</text>
							<text class="price-old">¥{{ book.bookOriginalPrice }}</text>
						</view>
						<view class="add-btn">
							<text>加入购物车</text>
							<image src="/pages-sell/static/shape-10.png" class="cart-symbol"></image>
						</view>
					</view>
				</view>
			</view>
		
			<!-- 底部留白，防止遮挡 -->
			<view class="bottom-safe-area"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SellContainer',
		data() {
			return {
				barStyle: {
					backgroundColor: 'transparent',
					background: "url('/pages-sell/static/tab-selected.png') no-repeat center",
					backgroundSize: '100% 100%',
					position: 'relative',
					top: '-6rpx',
				},
				swiperList: [],
				statusBarHeight: 20,
				keyword: '',
				// u-tabs 需要对象数组 [{name: 'xxx'}]
				hotTagList: [
					{ name: '热搜' },
					{ name: '励志' },
					{ name: '绘本' },
					{ name: '诺贝尔文学奖' },
					{ name: '茅盾奖' },
					{ name: '童书' }
				],
				currentHotTag: 0,
				// 临时的网络书封面图片
				bookCoverUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
				categoryList: [], //金刚区
				bookList: [], // 右侧推荐书籍
				recommendBooks: [
					{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' },
					{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' },
					{ title: '山河岁月', price: '6.80', original: '36.80', cover: 'https://img.yzcdn.cn/vant/cat.jpeg' }
				],
				topicList:[], //专题推荐 
			}
		},
		created() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 20;

			this.getIndexCateInfo()
		},
		methods: {
			handleCategory(item) {
				if(!item.jumpUrl) return
				this.navigateTo(item.jumpUrl)
			},
			changeHotTag(index) {
				this.currentHotTag = index;
				console.log('切换标签:', index);
			},
			//跳转 URL
			navigateTo(url) {
				if(!url) return
				console.log(url)
				uni.navigateTo({
					url: url
				});
			},

			goRecommend() {
				uni.navigateTo({
					url: '/pages-sell/pages/recommend'
				});
			},
			goHotSell() {
				uni.navigateTo({
					url: '/pages-sell/pages/hot-sell'
				});
			},
			//获取首页装修信息
			getIndexCateInfo() {
				uni.$u.http.get('/token/shop/showIndex/getIndexCateInfo').then(res => {
					console.log(res)
					if (res.code == 200) {
						console.log(res.data)
						this.categoryList = res.data.find(item => item.position == 'diamond_area')?.shopIndexCateVo || []
						this.swiperList = res.data.find(item => item.position == 'left_banner')?.shopIndexCateVo || []
						this.bookList = res.data.find(item => item.position == 'right_banner')?.shopIndexCateVo || []
				
						//获取专题推荐
						this.topicList = res.data.find(item => item.position == 'topic')?.shopIndexCateVo || []
					}
				})
			},
			getDisplayBooks(item) {
				if (!item.bookInfoList) return []
				let limit = 3
				if (item.positionType === 'double_row_topic') {
					limit = 6
				}
				return item.bookInfoList.slice(0, limit)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sell-container {
		position: relative;
		min-height: 100vh;
		background-color: #F6F6F6;
		overflow-x: hidden;
	}

	/* 顶部大背景图 */
	.top-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
		display: block;
	}

	/* 导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;

		.navbar-content {
			height: 44px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.navbar-title {
				color: #fff;
				font-size: 36rpx;
				font-weight: 600;
			}
		}
	}

	.main-content {
		position: relative;
		z-index: 1;
		padding: 0 24rpx;
	}

	/* 搜索框 */
	.search-wrapper {
		margin-top: 10rpx;
		margin-bottom: 20rpx;

		.search-box-uview {
			height: 80rpx;
			background-color: #fff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 10rpx 0 16rpx;
			position: relative;

			/* 覆盖 u-search 的 padding 以适配 */
			::v-deep .u-search {
				flex: 1;
				/* 让输入框不遮挡右侧按钮 */
				padding-right: 140rpx !important;
			}

			.search-btn-overlay {
				position: absolute;
				right: 8rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 140rpx;
				height: 64rpx;
				background: linear-gradient(0deg, #37C148 0%, #6ADD83 100%);
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;

				text {
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}

	/* 顶部横幅 */
	.top-banner-wrapper {
		width: 100%;
		margin-bottom: 30rpx;
		position: relative;

		.top-banner-img {
			width: 100%;
			border-radius: 40rpx;
			display: block;
		}
	}

	/* 分类图标 */
	.category-grid {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;

		.grid-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;

			.icon-circle {
				width: 96rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;

				.cat-icon {
					width: 100%;
					height: 100%;
				}
			}

			.cat-name {
				font-size: 24rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}

	/* 推广双卡片 */
	.promo-dual-card {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.card-left {
			width: 48%;
			height: 252rpx;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;
		}

		.card-right {
			width: 48%;
			height: 252rpx;
			/* Updated background per request */
			background: linear-gradient(to bottom, #FFD7C3 0%, #FFFFFF 32%);
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.right-header {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.right-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin: 0 10rpx;
				}

				.fire-icon {
					width: 30rpx;
					height: 30rpx;
				}

				.flip {
					transform: scaleX(-1);
				}
			}

			.products-container {
				display: flex;
				justify-content: space-between;
				gap: 20rpx;

				.product-cover {
					flex: 1;
					height: 160rpx;
					border-radius: 12rpx;
					background-color: #f0f0f0;
				}
			}
		}
	}

	/* 信息双卡片 */
	.info-dual-card {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.info-card {
			width: 48%;
			padding: 24rpx;
			border-radius: 12px;
			/* Updated radius */
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 140rpx;
			box-sizing: border-box;
			position: relative;
			/* For absolute icon */
			overflow: hidden;

			&.bg-orange {
				background: #FFF3E0;
				border: 1px solid #FFB72A;
			}

			&.bg-green {
				background: #D4F1D8;
				border: 1px solid #54A94E;
			}

			.info-text-group {
				flex: 1;
				z-index: 1;
				/* Ensure text is above */

				.info-title {
					font-size: 28rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 6rpx;
				}

				.info-desc {
					font-size: 22rpx;
					line-height: 1.2;
				}

				.text-orange {
					color: #DB832D;
				}

				.text-orange-light {
					color: #DB832D;
				}

				.text-green {
					color: #1F8049;
				}

				.text-green-light {
					color: #1F8049;
				}
			}

			.info-icon {
				width: 100rpx;
				/* Slightly larger maybe */
				height: 100rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 0;
				opacity: 0.8;
			}
		}
	}

	/* 公众号 */
	.gzh-section {
		margin-bottom: 30rpx;
		height: 180rpx;
		/* Fixed height for consistency */
		border-radius: 20rpx;
		overflow: hidden;

		.gzh-bg-wrapper {
			width: 100%;
			height: 100%;
			position: relative;

			.gzh-img-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.gzh-content-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 60%;
				/* Only cover left side */
				height: 100%;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.gzh-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #134E13;
					/* Dark green */
					margin-bottom: 16rpx;
				}

				.gzh-subtitle-pill {
					background: #FFF;
					border-radius: 24rpx;
					padding: 0 14rpx;
					line-height: 1.4;
					align-self: flex-start;

					.gzh-subtitle {
						font-size: 22rpx;
						color: #134E13;
						font-weight: 500;
					}
				}
			}
		}
	}

	/* 书嗨推荐 */
	.recommend-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.view-more {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #8D8D8D;

				.arrow-icon {
					width: 12rpx;
					margin-left: 6rpx;
				}
			}
		}

		.book-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.book-item {
			width: 200rpx;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: column;

			.book-image {
				width: 200rpx;
				height: 255rpx;
				border-radius: 2rpx;
				margin-bottom: 16rpx;
				background-color: #f9f9f9;
			}

			.book-name {
				font-family: 'Source Han Sans SC';
				font-weight: bold;
				font-size: 28rpx;
				color: #303030;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.price-row {
				display: flex;
				align-items: baseline;
				margin-bottom: 12rpx;

				.currency {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 22rpx;
					color: #D81A00;
				}

				.price-val {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #D81A00;
					margin-right: 12rpx;
				}

				.price-old {
					font-family: 'Source Han Sans SC';
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
					text-decoration: line-through;
				}
			}

			.add-btn {
				width: fit-content;
				height: 36rpx;
				line-height: 36rpx;
				background: linear-gradient(0deg, #4ED964 0%, #4ED964 100%);
				border-radius: 18rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 22rpx;
					color: #fff;
				}

				.cart-symbol {
					width: 24rpx;
					height: 24rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.bottom-safe-area {
		height: 30rpx
	}
</style>