jiuyiUniapp/jiuyi2/pages/shop/shop.vue

<script setup>
	/**
	 * 商城
	 */
	import {
		ref,
		reactive,
		getCurrentInstance,
		computed,
		nextTick
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	// 状态栏
	import statusBar from '@/components/header/statusBar.vue'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 商城首页
	import shopIndex from '@/pages/shop/components/shopIndex.vue'
	// 线下店铺
	import offlineIndex from './components/offlineIndex.vue';
	// 
	import footerMneu from '@/components/footerMenu/footerMenu'

	const {
		proxy
	} = getCurrentInstance()
	// 分类
	const navList = reactive([{
			key: 'shop',
			name: '商城',
			load: false,
			domRef: 'shopIndexRef',
		},
		{
			key: 'offline',
			name: '线下店铺',
			load: false,
			domRef: 'offlineIndexRef',
		}
	])
	// 分类下标
	const navIndex = ref('')
	// 当前导航项
	const navCurrent = computed(() => navList[navIndex.value] || {})

	onLoad(() => {
		handleNavIndex(1)
	})

	onReady(() => {
		// proxy.$refs.product.getList()
	})

	onReachBottom(() => {
		// 重载列表
		// proxy.$refs.product.getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载列表
		// proxy.$refs.product.refreshList()
	})

	onShow(() => {
		// 触发自定义tabbar函数
		uni.$emit('changeMine', 'shop')
	})

	// 切换导航
	function handleNavIndex(index) {
		if (navIndex.value === index) return
		navIndex.value = index
		navCurrent.value.load = true

		nextTick(() => {
			if (navCurrent.value.domRef) proxy.$refs[navCurrent.value.domRef].init()
		})
	}
</script>

<template>
	<view class="app">
		<!-- 菜单首页 -->
		<view class="navBox bfff">
			<statusBar />

			<view class="nav">
				<view class="item fmid f1" :class="{'active': index === navIndex}" v-for="(item,index) in navList"
					:key="index" @click="handleNavIndex(index)">
					<view class="">{{item.name}}</view>
				</view>
			</view>
		</view>

		<template v-if="navList[0].load">
			<view v-show="navCurrent.key == 'shop'">
				<!-- 商城首页 -->
				<shopIndex ref="shopIndexRef" />
			</view>
		</template>

		<template v-if="navList[1].load">
			<view v-show="navCurrent.key == 'offline'">
				<!-- 商城首页 -->
				<offlineIndex ref="offlineIndexRef" />
			</view>
		</template>
	</view>

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="shop" />
</template>

<style lang="scss" scoped>
	// 顶部导航
	.nav {
		display: flex;

		// 
		.item {
			color: #3d3d3d;
			font-size: 36rpx;
			height: 100rpx;
			transition: .3s;

			// 
			&.active {
				font-weight: bold;
				color: #000;
			}
		}
	}
</style>