ylrz_scrm_company_h5/pages/courseManage/index.vue

<template>
	<view>
		<view class="app-wrapper" :style="{height: '100vh'}">
			<dataIndex v-if="templateView == 'dataIndex'"></dataIndex>
			<liveIndex ref="mescrollItem1" v-show="templateView == 'liveIndex'"></liveIndex>
			<operationIndex ref="mescrollItem1" :key="templateView" v-show="templateView == 'operationIndex'">
			</operationIndex>
			<courseIndex ref="mescrollItem2" v-show="templateView == 'courseIndex'"></courseIndex>
			<vipIndex ref="mescrollItem3" v-show="templateView == 'vipIndex'"></vipIndex>
			<manageIndex ref="mescrollItem3" v-show="templateView == 'manageIndex'"></manageIndex>
		</view>
		<view class="myTabBar x-f x-bc">
			<view class="myTabBar-item x-f y-f" @click="handleTab('dataIndex')">
				<image src="@/static/manageTabIcon/data.png" mode="aspectFill" v-if="templateView!=='dataIndex'">
				</image>
				<image src="@/static/manageTabIcon/data_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='dataIndex'?'base-color':''">数据</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('operationIndex')" v-if="user.userType==0">
				<image src="@/static/manageTabIcon/liveclasses.png" mode="aspectFill"
					v-if="templateView!=='operationIndex'"></image>
				<image src="@/static/manageTabIcon/liveclasses_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='operationIndex'?'base-color':''">运营</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('liveIndex')" v-if="user.userType==1">
				<image src="@/static/manageTabIcon/liveclasses.png" mode="aspectFill" v-if="templateView!=='liveIndex'">
				</image>
				<image src="@/static/manageTabIcon/liveclasses_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='liveIndex'?'base-color':''">直播课</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('courseIndex')">
				<image src="@/static/manageTabIcon/training.png" mode="aspectFill" v-if="templateView!=='courseIndex'">
				</image>
				<image src="@/static/manageTabIcon/training_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='courseIndex'?'base-color':''" v-if="user.userType==1">训练营</text>
				<text :class="templateView=='courseIndex'?'base-color':''" v-else>课程库</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('vipIndex')">
				<image src="@/static/manageTabIcon/vip.png" mode="aspectFill" v-if="templateView!=='vipIndex'"></image>
				<image src="@/static/manageTabIcon/vip_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='vipIndex'?'base-color':''">会员</text>
			</view>
			<view class="myTabBar-item x-f y-f" @click="handleTab('manageIndex')" v-if="user.userType==0">
				<image src="@/static/manageTabIcon/manage.png" mode="aspectFill" v-if="templateView!=='manageIndex'">
				</image>
				<image src="@/static/manageTabIcon/manage_on.png" mode="aspectFill" v-else></image>
				<text :class="templateView=='manageIndex'?'base-color':''">管理</text>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
	import dataIndex from "./dataIndex/index.vue"
	import liveIndex from "./live/index.vue"
	import courseIndex from "./course/index.vue"
	import vipIndex from "./vip/index.vue"
	import operationIndex from './operation/index.vue'
	import manageIndex from './manage/index.vue'
	export default {
		mixins: [ MescrollCompMixin,MescrollMoreMixin], //mescroll-body写在子组件时
		components: {
			dataIndex,
			liveIndex,
			courseIndex,
			vipIndex,
			operationIndex,
			manageIndex
		},
		data() {
			return {
				templateView: 'vipIndex',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				windowHeight: uni.getSystemInfoSync().windowHeight,
				bodyHeight: 0,
				tabIndex: 0,
				user: []
			}
		},
		onLoad() {
			// console.log(this.windowHeight);
			this.bodyHeight = `calc(${this.windowHeight}px - 56px)`
			uni.setNavigationBarTitle({
				title: '数据'
			});
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			if (this.user.userType == 0) {
				this.templateView = 'manageIndex'
			} else {
				this.templateView = 'vipIndex'
			}
		},
		methods: {
			handleTab(tem) {
				this.templateView = tem
				// console.log(tem)
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-wrapper {
		width: 100%;
	}

	.myTabBar {
		height: 64px;
		border-top: 1px solid #f5f5f5;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		font-size: 10px;

		image {
			width: 24px;
			height: 24px;
			margin-bottom: 3px;
		}

		&-item {
			flex: 1;
		}
	}
</style>