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

<template>
	<view class="content" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
		<!-- 采美采购商城 -->
		<view :style="{ display: show_index == 0 ? 'block' : 'none' }">
			<supplier-home ref="home" v-if="isHomeData"></supplier-home>
		</view>
		<!-- 商品分类 -->
		<view :style="{ display: show_index == 1 ? 'block' : 'none' }">
			<supplier-category ref="category" v-if="isCategory"></supplier-category>
		</view>
		<!-- 通知消息 -->
		<view :style="{ display: show_index == 2 ? 'block' : 'none' }">
			<supplier-notice ref="notice" v-if="isNotice"></supplier-notice>
		</view>
		<!-- 账户中心 -->
		<view :style="{ display: show_index == 3 ? 'flex' : 'none' }">
			<supplier-user ref="user" v-if="isUserData"></supplier-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
						v-if="item.id == 2 && upNum > 0"
						class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
					>
						{{ upNum | BadgeType }}
					</view>
					<view :class="{ tabBar_name: true, nav_active: show_index == item.id }">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import supplierHome from '@/components/cm-module/supplier/home.vue'
import supplierUser from '@/components/cm-module/supplier/user.vue'
import supplierNotice from '@/components/cm-module/supplier/notice.vue'
import supplierCategory from '@/components/cm-module/supplier/category.vue'
export default {
	components: {
		supplierHome, //采美采购商城 0
		supplierUser, //账户中心     1
		supplierNotice, //通知消息 2
		supplierCategory //商品分类 3
	},
	data() {
		return {
			show_index: 3, //控制显示那个组件
			isUserData: false,
			isCategory: false,
			isNotice: 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-news@3x.png',
					iconAc: 'https://static.caimei365.com/app/img/icon/icon-news-active@3x.png'
				},
				{
					id: 3,
					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
			},
			upNum:0,
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar // 顶部导航栏高度
		}
	},
	filters: {
		BadgeType(value) {
			if(value){return value > 99 ? '99+' : value}
		}
	},
	onLoad() {
		this.$nextTick(() => {
			// 一定要等视图更新完再调用方法
			setTimeout(() => {
				this.isUserData = true
				this.initData();
			}, 100)
		})
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.upNum = userInfo.savedCount
		},
		// 切换组件
		cut_index(type) {
			this.show_index = type
			if (this.show_index == 0) {
				this.isHomeData = true
				this.isUserData = false
				this.isNotice = false
				this.isCategory = false
			} else if (this.show_index == 1) {
				this.isHomeData = false
				this.isUserData = false
				this.isNotice = false
				this.isCategory = true
			} else if(this.show_index == 2){
				this.isHomeData = false
				this.isUserData = false
				this.isNotice = true
				this.isCategory = false
			}else if (this.show_index == 3) {
				this.isHomeData = false
				this.isNotice = 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.notice.initGetList()
			}else if (this.show_index == 3) {
				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;
			position: relative;
			.icon-num {
				position: absolute;
				right: 10rpx;
				top: -9rpx;
			}
		}
	}
}
.nav_active {
	color: $color-system;
}
</style>