caimei-applets-caimei/pages/seller/index/index.vue

<template>
	<view class="content" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
		<!-- 采美采购商城 -->
		<view :style="{ display: show_index == 0 ? 'block' : 'none' }">
			<seller-home ref="home" v-if="isHomeData"></seller-home>
		</view>
		<!-- 商品分类 -->
		<view :style="{ display: show_index == 1 ? 'block' : 'none' }">
			<seller-category ref="category" v-if="isCategory"></seller-category>
		</view>
		<!-- 账户中心 -->
		<view :style="{ display: show_index == 2 ? 'flex' : 'none' }">
			<seller-user ref="user" v-if="isUserData"></seller-user>
		</view>
		<!-- isIphoneX判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
		<view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }">
			<!-- 导航的中间圆圈 -->
			<view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }">
				<view v-for="item in tab_nav_list" :key="item.id" class="tabBar_item" @tap="cut_index(item.id)">
					<image v-if="show_index == item.id" :src="item.iconAc"></image>
					<image v-else :src="item.icon"></image>
					<view :class="{ tabBar_name: true, nav_active: show_index == item.id }">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import sellerHome from '../components/home.vue'
import sellerUser from '../components/user.vue'
import sellerCategory from '../components/category.vue'
export default {
	components: {
		sellerHome, //采美采购商城 0
		sellerUser, //账户中心     1
		sellerCategory //商品分类 2
	},
	data() {
		return {
			show_index: 2, //控制显示那个组件
			isUserData: false,
			isCategory: false,
			isHomeData: false,
			isIphoneX: this.$store.state.isIphone,
			tab_nav_list: [
				//菜单列表
				{
					id: 0,
					name: '首页',
					icon: 'https://static.caimei365.com/app/img/icon/icon-home@3x.png',
					iconAc: 'https://static.caimei365.com/app/img/icon/icon-home-active@3x.png'
				},
				{
					id: 1,
					name: '分类',
					icon: 'https://static.caimei365.com/app/img/icon/icon-sort@3x.png',
					iconAc: 'https://static.caimei365.com/app/img/icon/icon-sort-active@3x.png'
				},
				{
					id: 2,
					name: '我的',
					icon: 'https://static.caimei365.com/app/img/icon/icon-user@3x.png',
					iconAc: 'https://static.caimei365.com/app/img/icon/icon-user-active@3x.png'
				}
			],
			nvabarData: {
				//顶部自定义导航
				showCapsule: 0, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '账户中心', // 导航栏 中间的标题
				textLeft: false
			},
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar // 顶部导航栏高度
		}
	},
	onLoad() {
		this.$nextTick(() => {
			// 一定要等视图更新完再调用方法
			setTimeout(() => {
				this.isUserData = true
			}, 100)
		})
	},
	methods: {
		// 切换组件
		cut_index(type) {
			this.show_index = type
			if (this.show_index == 0) {
				this.isHomeData = true
				this.isUserData = false
				this.isCategory = false
			} else if (this.show_index == 1) {
				this.isHomeData = false
				this.isUserData = false
				this.isCategory = true
			} else if (this.show_index == 2) {
				this.isHomeData = false
				this.isUserData = true
				this.isCategory = false
			}
		},
		onPullDownRefresh() {
			if (this.show_index == 0) {
				this.$refs.home.getHomeInformation()
			} else if (this.show_index == 2) {
				this.$refs.user.initData()
			}
			uni.stopPullDownRefresh()
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '生美医美正品采购服务平台',
			path: 'pages/tabBar/home/index',
			imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
		}
	}
}
</script>

<style lang="scss">
.tabBar {
	width: 100%;
	height: 98rpx;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	.tabBar_list {
		width: 86%;
		display: flex;
		justify-content: space-between;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 2rpx;
		}
		.tabBar_item {
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
			color: #999999;
		}
	}
}
.nav_active {
	color: $color-system;
}
</style>