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"
								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">
						<ScsScrollIconbar :tabsData="tabsProduct" :tabCurrentIndex="tabsProductIndex" nameKey="name"
							key="tabsProductIndex" @tabChange="tabProductChange" />
					</view>
					<view class="px-12 mt-14">
						<view class="bg-white  pb-10 rounded-8 overflow-hidden">
							<image class="w-all h-195"
								src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422">
							</image>
							<view
								class="goods-count px-12 flex items-center justify-between text-white w-all h-32 rounded-6 mt--15 zi-2 relative">
								<view class="fw-500 fs-18">热卖爆品</view>
								<view class="fw-400 fs-13">已售1000件</view>
							</view>
							<view class="fw-500 fs-13 text-333333 mt-11 px-12">
								[广州康和药业 GKH PHARMACEUTICAL LTD]盐酸多西环素片 0.1g*12片 1盒装
							</view>
							<view class="fw-400 fs-12 text-D46C0D mt-7 px-12">
								处方药须凭处方在药师指导下购买和使用
							</view>
							<view class="flex items-center justify-between mt-7 px-12">
								<view class="flex items-center gap-4 text-FF4B33 fs-11">
									<view class="px-4 ph-2 border border-FFA599 rounded-2 ">9.5折</view>
									<view class="px-4 ph-2 border border-FFA599 rounded-2 ">限购1份</view>
								</view>
								<view class="flex items-center gap-2">
									<view class="fs-12 text-FA341E fw-400">领卷</view>
									<image class="w-12 h-12" src="/static/images/home/sdyhzq_bg@2x.png"></image>
								</view>
							</view>
							<view class="flex items-center justify-between mt-8 px-12">
								<view class="flex items-end gap-8">
									<view class="text-FA341E ">
										<text class="fs-12 fw-600">¥</text>
										<text class="fs-24 fw-600">105</text>
										<text class="fs-15 fw-600">.36</text>
									</view>
									<view class="text-999999 fs-13 fw-400 text-line-through pb-3">
										¥128.00
									</view>
								</view>
								<view class="flex items-center w-110 h-34 rounded-34 overflow-hidden">
									<view class="w-44 h-all flex items-center justify-center bg-38D97D">
										<image class="w-20 h-20" src="/static/images/home/shopping_car_icon24@2x.png">
										</image>
									</view>
									<view
										class="flex-1 h-all flex items-center justify-center bg-02B176 fw-500 text-white fs-14">
										去购买</view>
								</view>
							</view>
						</view>
					</view>

					<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 {
	getMenu,
	getCanvas,
	getIndexData,
	getTuiDoctor,
	getTuiArticle,
	getTuiDoctorOrder,
	getCartCount
} from '@/api/index'
export default {
	components: {
		HomeMenu,
		HomeProduct,
		HomeSearch,
	},
	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-scroll-navbar {
	width: calc(100vw - 140rpx) !important;
}



.scs-nav-bar {
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);
}

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

.goods-count {
	background: linear-gradient(to right, #FA341E, #F4A007)
}
</style>