fanghuayuexuan/pages/home/index.vue

<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" />
		<!-- tab栏 -->
		<view class="scs-nav-bar px-12 mt-11 rounded-8 zi-10">
			<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="bg-white w-all flex-1 mt-10 rounded-t-8 px-28">
			<scsScrollIconbar :tabsData="tabsProduct" :tabCurrentIndex="tabsProductIndex" nameKey="name"
				key="tabsProductIndex" @tabChange="tabProductChange"  />
		</view>


	</view>
</template>
<script>
import scsScrollNavbar from '@/components/public/scs-scroll-navbar.vue'
import scsScrollIconbar from '@/components/public/scs-scroll-iconbar.vue'
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: {
		scsScrollNavbar,
		homeMenu,
		homeProduct,
		HomeSearch,
		scsScrollIconbar,
	},
	data() {
		return {
			statusBarHeight: 0,
			tabsData: [
				{ name: '精选' },
				{ name: '健康新品' },
				{ name: '营养保健' },
				{ name: '健康滋补' },
			],
			tabCurrentIndex: 0,
			menusData: [],
			tabsProduct: [
				{ name: '今日主推' },
				{ name: '健康新品' },
				{ name: '营养保健' },
			],
			tabsProductIndex: 0,
		}
	},
	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) || []
				console.log("---------11111111-------", this.menusData)
			} else {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
		},
	}
}
</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%);
}
</style>