glhcp/uniapp/pages/index/index.vue

<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{use: false}">
		<view class="index index-bg" :style="{'background-image':'url('+ index_bg +')'}">
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
				<view class="index-bg" :style="{'background-image':'url('+ index_bg +')'}">
					<u-navbar :is-fixed="false" :border-bottom="false" :background="{ background: 'transparent', }"
						:is-back="false">
						<view class="flex-1 flex row" >
							<router-link to="/pages/message_center/message_center">
								<image class="icon-md m-l-30" src="/static/images/icon_news.png">
								</image>
							</router-link>
							<view class="flex-1">
								<router-link to="/pages/goods_search/goods_search">
									<u-search wrap-bg-color="transparent" bg-color="#fff" :disabled="true" :height="62">
									</u-search>
								</router-link>
							</view>
						</view>
					</u-navbar>
<!-- 					<view class="flex">
						<view class="flex-1" style="min-width:600rpx">
							<u-tabs active-color="#fff" inactive-color="#fff" :current="active" :list="cateList"
								bg-color="transparent" :active-item-style="{fontSize:'32rpx'}" :bar-width="64"
								:bold="false"
								:barStyle="{background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49%, rgba(255, 255, 255, 0) 100%)'}"
								@change="changeActive">
							</u-tabs>
						</view>
						<router-link to="/pages/goods_cate/goods_cate" navType="pushTab">
							<view class="white flex cate-btn m-l-10">
								<image class="icon-xs m-r-4" src="/static/images/icon_cate.png" alt="">
									分类
							</view>
						</router-link>
					</view> -->
				</view>
			</u-sticky>
			<view class="tab-con">
				<view  v-show="active == 0">
					<index-home ref="indexHome" :home-data="homeData" :nav-list="navList">
					</index-home>
					<goods-column ref="mescrollItem" :autoGetData="false"></goods-column>
				</view>
				<template v-for="(item, index) in cateList">
					<view v-if="index > 0" class="tab-item" v-show="active == index" :key="index">
						<view>
							<cate-home v-if="showCateList[index]" :top="cateTop" ref="cateItem" :i="index"
								:index="active" :cate="item">
							</cate-home>
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.app_agreement" title="服务协议和隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=0'
			policyPath='/bundle/pages/server_explan/server_explan?type=1' policyStorageKey="has_read_privacy">
		</lyg-popup>
		<!-- #endif -->
	</mescroll-body>
	
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {baseURL} from '@/config/app';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getMenu,
		getHome,
		getHotGoods,
		getLevelOneList
	} from "@/api/store"
	import {
		getRect,
		setTabbar
	} from '@/utils/tools'
	const app = getApp()
	const homeItem = {
		name: '首页'
	}
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		data() {
			return {
				index_bg:baseURL + '/uploads/images/20230817102854336fa4990.png',
				active: 0,
				navBg: 0,
				goodsList: [],
				homeData: {},
				navList: [],
				enable: true,
				cateList: [homeItem],
				showCateList: []
			}
		},
		async onLoad(options) {
			setTabbar()
			uni.$on('refreshhome', () => {
				this.getHomeFun()
			})
			
		},
		onUnload() {
			uni.$off('refreshhome')
		},
		onShow() {
			this.enable = this.active == 0 ? true : false
			this.getCartNum()
		},
		onHide() {
			// #ifdef H5
			this.enable = false
			// #endif
		},
		methods: {
			...mapActions(['getCartNum']),
			// 获取1级分类
			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = [homeItem, ...data]
					this.showCateList = []
				}
			},
			// 获取菜单
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				if (code == 1) {
					this.navList = data
				}
			},
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				if (code == 1) {
					this.homeData = data
				}
			},
			changeActive(index) {
				this.active = index
				this.enable = index == 0
				this.mescroll.optDown.use = index == 0
				this.showCateList[index] = true
			},
			async downCallback() {
				await this.getLevelOneListFun()
				await this.getMenuFun()
				await this.getHomeFun()
				this.$refs.mescrollItem.getData()
				this.mescroll.endSuccess(0, false)
			}
		},
		computed: {
			...mapGetters(['sysInfo', 'inviteCode', 'appConfig']),
			navH() {
				return this.sysInfo.navHeight + 'px'
			},
			// 分类栏悬浮高度
			cateTop() {
				return this.sysInfo.navHeight + uni.upx2px(80) + 'px'
			},
			headerStyle() {
				const {
					active,
					cateList,
					appConfig
				} = this
				let bg = cateList[active].bg_image
				if (active == 0) {
					bg = appConfig.index_setting.top_bg_image
				}
				return bg ? {
					'background-image': `url(${bg})`
				} : {}

			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}
	.index-bg {

		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.index {
		min-height: calc(100vh - var(--window-bottom));
		
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}
</style>