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

<template>
	<view class="seller-content" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }" >
		<!-- 采美采购商城 -->
		<view class="content-main" :style="{ display: show_index == 0 ? 'block' : 'none' }">
			<seller-home ref="home" v-if="isHomeData" />
		</view>
		<!-- 商品分类 -->
		<view class="content-main" :style="{ display: show_index == 1 ? 'block' : 'none' }">
			<seller-category ref="category" v-if="isCategory" />
		</view>
        <!-- 消息 -->
        <view class="content-main" :style="{ display: show_index == 2 ? 'block' : 'none' }">
        	<seller-message ref="message" v-if="isMessage" />
        </view>
		<!-- 账户中心 -->
		<view class="content-main" :style="{ display: show_index == 3 ? 'flex' : 'none' }">
			<seller-user ref="user" v-if="isUserData" />
		</view>
		<!-- isIphoneX判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
		<view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }">
			<!-- 导航的中间圆圈 -->
			<view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }" v-if="insideFLag === 0">
				<view v-for="item in navList" :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 class="tabBar_list inside" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }" v-else>
            	<view v-for="item in userNavList" :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'
import sellerMessage from '../components/message.vue'
import { mapMutations, mapState } from 'vuex'
export default {
	components: {
		sellerHome, //采美采购商城 0
		sellerUser, //账户中心     3
		sellerCategory, //商品分类 1
        sellerMessage, //消息 2
	},
	data() {
		return {
			show_index: 3, //控制显示那个组件
			isUserData: false,
			isCategory: false,
			isHomeData: false,
            isMessage: false,
			isIphoneX: this.$store.state.isIphone,
			navList: [
				//菜单列表
				{
					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'
				}
			],
            userNavList: [
            	//菜单列表
                {
                	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: 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
			},
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar // 顶部导航栏高度
		}
	},
	onLoad() {
		this.$nextTick(() => {
			// 一定要等视图更新完再调用方法
			setTimeout(() => {
				this.isUserData = true
			}, 100)
		})
	},
    computed: {
        ...mapState(['userInfo','insideFLag'])
    },
	methods: {
		// 切换组件
		cut_index(type) {
			this.show_index = type
			if (this.show_index == 0) {
				this.isHomeData = true
				this.isUserData = false
				this.isCategory = false
                this.isMessage = false
			} else if (this.show_index == 1) {
				this.isHomeData = false
				this.isUserData = false
				this.isCategory = true
                this.isMessage = false
			} else if (this.show_index == 2) {
				this.isHomeData = false
				this.isUserData = false
				this.isCategory = false
                this.isMessage = true
			} else if (this.show_index == 3) {
				this.isHomeData = false
				this.isUserData = true
                this.isCategory = false
				this.isMessage = false
			}
		},
		onPullDownRefresh() {
			if (this.show_index == 0) {
				this.$refs.home.getHomeInformation()
			} else if (this.show_index == 3) {
				this.$refs.user.initData()
			} else if (this.show_index == 2) {
                this.$refs.message.getMessageList()
            }
			uni.stopPullDownRefresh()
		}
	},
	onPageScroll(e){//实时获取到滚动的值
		if(e.scrollTop>400){
			this.$refs.home.isScrollTop = true
		}else{
			this.$refs.home.isScrollTop = false
		}	
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '生美医美正品采购服务平台',
			path: `pages/tabBar/home/index?type=4&suid=${this.userInfo.userId}&spId=${this.userInfo.serviceProviderId}`,
			imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
		}
	}
}
</script>

<style lang="scss" scoped>
.seller-content{
	height: 100%;
	box-sizing: border-box;
	.content-main{
		height: 100%;
	}
}	
.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;
        box-sizing: border-box;
		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>