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="{ paddingTop: (statusBarHeight + 44) + 'px' }">
			<!-- 顶部固定区域：导航栏背景和搜索框 -->
			<view class="fixed-header-area" :style="{ 
				paddingTop: statusBarHeight + 44 + 'px',
				backgroundImage: scrollTop > 0 ? 'url(/pages-sell/static/top-bg.png)' : 'none',
				backgroundPosition: `center top`
			}">
				<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>

                <!-- 热搜词横向滚动区域 -->
                <view class="hot-search-wrapper" v-if="hotSearchList.length > 0">
                    <view class="hot-search-fixed-title">
                        <view class="hot-tag hot-tag-highlight" @click="navigateTo('/pages-sell/pages/search')">热搜</view>
                    </view>
                    <scroll-view class="hot-search-scroll" scroll-x="true" :show-scrollbar="false">
                        <view class="hot-search-list">
                            <view 
                                class="hot-tag" 
                                v-for="(item, index) in hotSearchList" 
                                :key="index" 
                                @click="goSearchResult(item)"
                            >
                                {{ item }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
			</view>

			<!-- 占位，防止内容被 fixed 区域遮挡 -->
			<view class="search-placeholder"></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">
				<swiper class="info-card-swiper" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item v-for="(item, index) in leftBookList" :key="index">
						<view class="info-card bg-orange" @click="navigateTo(item.jumpUrl)">
							<view class="info-text-group">
								<text class="info-title text-orange">{{ item.showCateName }}</text>
								<text class="info-desc text-orange-light">{{ item.remark }}</text>
							</view>
							<image :src="item.imgUrl" class="info-icon" mode="aspectFit"
								style="width: 125rpx;height: 111rpx;"></image>
						</view>
					</swiper-item>
				</swiper>
				<swiper class="info-card-swiper" :autoplay="true" :interval="3500" :circular="true">
					<swiper-item v-for="(item, index) in rightBookList" :key="index">
						<view class="info-card bg-green" @click="navigateTo(item.jumpUrl)">
							<view class="info-text-group">
								<text class="info-title text-green">{{ item.showCateName }}</text>
								<text class="info-desc text-green-light">{{ item.remark }}</text>
							</view>
							<image :src="item.imgUrl" class="info-icon" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 公众号横幅 -->
			<view class="gzh-section" @click="navigateToOfficialAccount">
				<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">{{ item.showCateName }}</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.stop="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>

		<!-- 分享红包悬浮按钮 -->
		<FloatingDrag :width="126" :height="140" :initial-position="redPacketPosition"
			@position-change="handleRedPacketPositionChange" v-if="shareList.length > 0">
			<button class="red-packet-btn" @click="navigateToRedPacket">
				<image src="/packet/static/index/btn_share.png" mode="widthFix" style="width: 126rpx; height: 140rpx">
				</image>
			</button>
		</FloatingDrag>
	</view>
</template>

<script>
import FloatingDrag from "@/components/floating-drag.vue";

export default {
	name: 'SellContainer',
	components: {
		FloatingDrag
	},
	data() {
		return {
			// 红包悬浮按钮位置
			redPacketPosition: {
				left: 'auto',
				right: 0,
				bottom: '15%',
			},
			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: '',
			// 记录滚动距离以实现背景错位效果
			scrollTop: 0,
			// 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: [], //专题推荐 
			leftBookList: [], // 左侧推荐书籍
			rightBookList: [], // 右侧推荐书籍
			shareList: [], // 分享列表
			hotSearchList: [] // 存放热搜词
		}
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 20;
		this.hasShareList()

		this.getIndexCateInfo()
		this.getHotSearchData()
	},
	methods: {
		async getHotSearchData() {
			try {
				const res = await this.$u.api.getHotSearchListAjax();
				if (res.code === 200 || res.code === 0) {
					this.hotSearchList = res.data || [];
				}
			} catch (error) {
				console.log('获取热搜词失败', error);
			}
		},
		goSearchResult(keyword) {
			if (!keyword) return;
			// 过滤可能带有的 <em> 等后端返回的 HTML 标签
			const cleanKey = keyword.replace(/<[^>]+>/g, '');
			uni.navigateTo({
				url: '/pages-sell/pages/search-result?keyword=' + encodeURIComponent(cleanKey)
			});
		},
		// 接收外部传入的页面滚动事件
		onPageScroll(scrollTop) {
			this.scrollTop = scrollTop || 0;
			console.log(this.scrollTop)
		},
		async hasShareList() {
			const res = await this.$u.api.getShareRedBagListAjax();
			if (res.code === 200 || res.code === 0) {
				this.shareList = res.data || [];
			}
		},

		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
			});
		},
		navigateToOfficialAccount() {
			// 打开公众号
			uni.getProvider({
				service: "oauth",
				success: function (res) {
					if (res.provider.includes("weixin")) {
						// 调用微信小程序的 wx.openOfficialAccountProfile
						wx.openOfficialAccountProfile({
							username: "bookersea",
							success: function (res) {
								console.log("打开公众号资料页成功", res);
							},
							fail: function (err) {
								console.log("打开公众号资料页失败", err);
							},
							complete: function () {
								console.log("接口调用结束");
							},
						});
					}
				},
			});
		},

		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.leftBookList = res.data.find(item => item.position == 'left_book_list')?.shopIndexCateVo || []
					this.rightBookList = res.data.find(item => item.position == 'right_book_list')?.shopIndexCateVo || []
					//获取专题推荐
					this.topicList = res.data.find(item => item.position == 'topic')?.shopIndexCateVo || []
				}
			})
		},
		getDisplayBooks(item) {
			if (!item.bookInfoList) return []
			let limit = 3
			if (item.topicType === 2) {
				limit = 6
			}
			return item.bookInfoList.slice(0, limit)
		},
		// 跳转到红包分享页面
		navigateToRedPacket() {
			uni.navigateTo({
				url: '/packet/pages/share'
			});
		},
		// 红包按钮位置变化
		handleRedPacketPositionChange(position) {
			this.redPacketPosition = position;
		}
	}
}
</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;
}

/* 顶部固定区域：背景和搜索框 */
.fixed-header-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-bottom: 16rpx;
	box-sizing: border-box;
	transition: background-color 0.2s;
}

.search-placeholder {
	height: 160rpx; /* 增加高度以容纳热搜词 */
}

/* 热搜词横向滚动 */
.hot-search-wrapper {
    margin-bottom: 24rpx;
    width: 100%;
    display: flex;
    align-items: center;
}

.hot-search-fixed-title {
    flex-shrink: 0;
    padding-left: 24rpx;
}

.hot-search-scroll {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
}

.hot-search-list {
    display: inline-flex;
    align-items: center;
    padding: 0 20rpx;
}

.hot-tag {
    display: inline-block;
    margin-right: 30rpx;
    font-size: 26rpx;
    color: #666;
    font-weight: 500;
}

.hot-tag-highlight {
    color: #38C148;
    font-weight: bold;
    padding-right: 20rpx;
    margin-right: 0;
    position: relative;
}

.hot-tag-highlight::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rpx;
    height: 24rpx;
    background-color: #E0E0E0;
}

/* 搜索框 */
.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-swiper {
		width: 48%;
		height: 140rpx;
		border-radius: 12px;
		overflow: hidden;
	}

	.info-card {
		width: 100%;
		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;
				display: inline-block;
				width: 90%;
				//超出部分省略号显示
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 200rpx;
			}

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

			.text-green-light {
				color: #1F8049;
				display: inline-block;
				width: 90%;
				//超出部分省略号显示
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 200rpx;
			}
		}

		.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
}

.red-packet-btn {
	width: 126rpx;
	height: 140rpx;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	&::after {
		border: none;
	}
}
</style>