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>
					<!-- 商品列表 -->
					<HomeGoods />

					<u-gap height="15"></u-gap>
				</template>
			</ScsScrollView>
			<ScsScrollTop :isShowToTop="isShowToTop" @goTop="$refs.fresher.goTop" />
		</view>
		<!-- 频道 可拖拽 -->
		<!-- <channel></channel> -->
		<channel ref="channelManager" :initial-my-channels="myChannels" :initial-all-channels="allChannels"
			:active-channel-id="activeChannelId" @channels-change="onChannelsChange" @order-change="onOrderChange"
			@channel-tap="onChannelTap" />

	</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 HomeGoods from './components/home-goods.vue'
import {
	getMenu,
	getCanvas,
	getIndexData,
	getTuiDoctor,
	getTuiArticle,
	getTuiDoctorOrder,
	getCartCount
} from '@/api/index'
export default {
	components: {
		HomeMenu,
		HomeProduct,
		HomeSearch,
		HomeGoods,
	},
	data() {
		return {
			statusBarHeight: 0,
			tabsData: [
				{ name: '精选' },
				{ name: '健康新品' },
				{ name: '营养保健' },
				{ name: '健康滋补' },
			],
			tabCurrentIndex: 0,
			menusData: [],
			tabsProduct: [
				{ name: '今日主推' },
				{ name: '健康新品' },
				{ name: '营养保健' },
			],
			tabsProductIndex: 0,
			goodList: [1, 2],
			isShowToTop: false,
		}
	},
	onLoad() {
	},
	onShow() {
		this.getMenuData();
	},
	methods: {
		// 搜索
		onSearch(keyword) {

		},
		// 分类tab切换
		tabChange(index) {
			this.tabCurrentIndex = index;
		},
		// 商品tab切换
		tabProductChange(index) {
			this.tabsProductIndex = index;
		},
		// 获取分类数据
		async getMenuData() {
			const { code, data, msg } = await getMenu();
			if (code == 200) {
				this.menusData = this.$scsUtils.splitArrayIntoSubarrays(data, 5) || []
			} else {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
		},
		// 下拉刷新
		onfresher() {
			const self = this;
			self.$refs.fresher.isTrigger = true;
			setTimeout(() => {
				self.$refs.fresher.refresherText = "刷新成功";
				self.$refs.fresher.isTrigger = false;
			}, 500);
		},
		// 上拉加载更多
		loadMore() {

		},
	}
}
</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>