fanghuayuexuan/pages/home/index.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-06 15:02:20
 * @Description: 首页
-->
<template>
	<view class="w-all h-all flex flex-column bg-F5F7FA">
		<image src="/static/images/yuexuan_home_top_bg.png" class="absolute top-0 left-0 zi-1 w-all h-266"></image>
		<uni-nav-bar fixed :statusBar="true" left-icon="back" backgroundColor="" :border="false" rightWidth="0"
			leftWidth="0">
			<template v-slot:default>
				<view class="scs-headr-default flex items-center h-44">
					<view class="flex-1">
						<view class="fw-500 fs-18 text-000000">芳华悦选</view>
						<view class="fw-400 fs-12 text-999999">让家人放心吃健康安全的食品</view>
					</view>
					<view class="img-car flex items-center justify-center w-32 h-32 bg-white rounded-32">
						<image class="w-20 h-20" src="/static/images/shopping_car_icon.png"></image>
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<!-- 搜索栏 -->
		<HomeSearch @onSearch="onSearch" />
		<view class="zi-10 flex-1 overflow-auto">
			<ScsScrollView ref="fresher" refresherBackground="transparent" :refresherEnabled="false"
				@onfresher="onfresher" @loadMore="loadMore" @handleScroll="(flag) => isShowToTop = flag">
				<template v-slot:list>
					<!-- tab栏 -->
					<view class="scs-nav-bar px-12 mt-11 rounded-8">
						<view class="flex items-center relative ">
							<ScsScrollNavbar :tabsData="tabsData" :tabCurrentIndex="tabCurrentIndex" nameKey="name"
								key="tabCurrentIndex" @tabChange="tabChange" />
							<image class="w-32 h-32  absolute bottom-2.5 right-40 zi-10"
								src="/static/images/white_gradient_bg.png">
							</image>
							<view class="flex items-center justify-center">
								<image class="w-16 h-16 ml-5 mr-12" src="/static/images/product_section_icon.png">
								</image>
								<image class="w-16 h-16 mr-7" src="/static/images/home_filter_icon.png"></image>
							</view>
						</view>
						<HomeMenu :autoplay="false" :swiperList="menusData" />
					</view>
					<!-- 商品栏 -->
					<HomeProduct />
					<!-- tab栏 -->
					<view class="tab-goods w-all mt-10 rounded-t-8 px-28">
						<ScsScrollNavbar :tabsData="tabsProduct" activeColor="#02B176" textColor="#333333"
							:isUseActImg="true" :isScroll="false" :isUseLine="false" :calcLeft="28"
							:tabCurrentIndex="tabsProductIndex" nameKey="name" key="tabsProductIndex"
							@tabChange="tabProductChange" />
					</view>
					<!-- 商品列表 -->
					<view class="px-12 mt-14">
						<HomeGoodsItem />
					</view>
					<!-- 更多列表 -->
					<ScsHelangWaterfall :waterfallList="waterfallList">
						<template v-slot:special>
							<HomeSalesItem />
						</template>
						<template v-slot:default="{ item }">
							<HomeMoreItem :itemData="item" :itemIndex="index" :key="item.id" />
						</template>
					</ScsHelangWaterfall>
					<u-gap height="15"></u-gap>
				</template>
			</ScsScrollView>
			<ScsScrollTop :isShowToTop="isShowToTop" @goTop="$refs.fresher.goTop" />
		</view>
		<!-- 频道 可拖拽 -->
		<channel ref="channelManager" :initial-my-channels="myChannels" :initial-all-channels="allChannels"
			:active-channel-id="activeChannelId" :show="showChannel" @channels-change="onChannelsChange"
			@order-change="onOrderChange" @channel-tap="onChannelTap" @close="showChannel = false" />

	</view>
</template>
<script>


import HomeMenu from './components/home-menu.vue'
import HomeProduct from './components/home-product.vue'
import HomeSearch from './components/home-search.vue'
import HomeGoodsItem from './components/home-goods-item.vue'
import HomeSalesItem from './components/home-sales.vue'
import HomeMoreItem from './components/home-more-item.vue'
import ScsHelangWaterfall from '@/components/public/scs-helang-waterfall.vue'
import channel from '@/components/channel.vue'
import {
	getMenu,
} from '@/api/index'
export default {
	components: {
		HomeMenu,
		HomeProduct,
		HomeSearch,
		HomeGoodsItem,
		HomeSalesItem,
		HomeMoreItem,
		channel,
		ScsHelangWaterfall,
	},
	data() {
		return {
			showChannel: false, // 默认不显示
			channelManager: false,
			// 频道相关数据
			activeChannelId: 1,
			myChannels: [{
				id: 1,
				name: '推荐'
			},
			{
				id: 2,
				name: '热点'
			},
			{
				id: 3,
				name: '科技'
			},
			{
				id: 4,
				name: '体育'
			}
			],
			allChannels: [{
				id: 5,
				name: '财经'
			},
			{
				id: 6,
				name: '娱乐'
			},
			{
				id: 7,
				name: '时尚'
			},
			{
				id: 8,
				name: '汽车'
			},
			{
				id: 9,
				name: '游戏'
			},
			{
				id: 10,
				name: '旅游'
			}
			],

			// UI状态数据
			statusBarHeight: 0,
			isShowToTop: false,

			// Tab数据
			tabsData: [{
				name: '精选'
			},
			{
				name: '健康新品'
			},
			{
				name: '营养保健'
			},
			{
				name: '健康滋补'
			},
			],
			tabCurrentIndex: 0,

			tabsProduct: [{
				name: '今日主推'
			},
			{
				name: '健康新品'
			},
			{
				name: '营养保健'
			},
			],

			menusData: [],
			tabsProduct: [
				{ name: '今日主推' },
				{ name: '健康新品' },
				{ name: '营养保健' },
			],
			tabsProductIndex: 0,
			goodList: [1, 2],
			isShowToTop: false,
			waterfallList: [
				{
					id: 2,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				},
				{
					id: 3,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				},
				{
					id: 4,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				},
				{
					id: 5,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				},
				{
					id: 4,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				},
				{
					id: 5,
					image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
					title: '云南白药EGER每瓶重50g保险液每测试',
				}],
		}
	},
	onLoad() {
	},
	onShow() {
		this.getMenuData();
	},
	methods: {
		// 搜索
		onSearch(keyword) {


		},
		showChannelPopup() {
			this.showChannel = true;
		},

		// 在某个地方调用这个方法，比如点击按钮
		onSomeButtonClick() {
			this.showChannelPopup();
		},
		// 搜索事件
		onSearch(keyword) {
			console.log('搜索关键词:', keyword);
			// 实现搜索逻辑
		},

		// 分类tab切换
		tabChange(index) {
			this.tabCurrentIndex = index;
			// 这里可以添加分类切换后的数据加载逻辑
		},

		// 商品tab切换
		tabProductChange(index) {
			this.tabsProductIndex = index;
			// 这里可以添加商品分类切换后的数据加载逻辑
		},

		// 获取分类数据
		async getMenuData() {
			try {
				const {
					code,
					data,
					msg
				} = await getMenu();
				if (code == 200) {
					// 将数据每5个一组分割
					this.menusData = this.$scsUtils.splitArrayIntoSubarrays(data, 5) || []
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取菜单数据失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		// 下拉刷新
		onfresher() {
			const self = this;
			self.$refs.fresher.isTrigger = true;

			// 模拟异步请求
			setTimeout(() => {
				self.$refs.fresher.refresherText = "刷新成功";
				self.$refs.fresher.isTrigger = false;
				// 这里可以添加实际的数据刷新逻辑
			}, 500);
		},

		// 上拉加载更多
		loadMore() {
			// 实现加载更多逻辑
			console.log('加载更多数据');
		},

		// 频道相关方法
		onChannelsChange(channels) {
			console.log('频道变化:', channels);
			// 处理频道变化
		},

		onOrderChange(orderInfo) {
			console.log('顺序变化:', orderInfo);
			// 处理顺序变化
		},

		onChannelTap(channel) {
			console.log('点击频道:', channel);
			this.activeChannelId = channel.id;
			// 根据频道切换内容
		},
	}
}
</script>
<style lang="scss" scoped>
::v-deep.scs-nav-bar {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);

	.scs-scroll-navbar {
		width: calc(100vw - 140rpx) !important;

		.nav-underline {
			background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
			bottom: 28rpx;
		}
	}
}

::v-deep .tab-goods {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);

	.scs-scroll-navbar {
		.nav-item {
			margin-right: 78rpx !important;
		}
	}

}
</style>