TabBar.vue 4.22 KB
<template>
	<view class="page-total">
		<view class="tab-list">
			<!-- 普通用户 -->
			<view class="list" v-for="(item,index) in TabBarList"  v-if="qxshow"
			@click="onTabBar(item,item.index)"
			:key="index">
				<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === item.index"></image>
				<image :src="item.img" mode="widthFix" v-show="tabBarShow != item.index"></image>
				<text :class="{'action':tabBarShow===item.index}">{{item.name}}</text>
			</view>
			<!-- 司机收敛工 -->
			<view class="list" v-for="(item,index) in TabBarList1" v-if="sjshow"
			@click="onTabBar(item,item.index)"
			:key="index">
				<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === item.index"></image>
				<image :src="item.img" mode="widthFix" v-show="tabBarShow != item.index"></image>
				<text :class="{'action':tabBarShow===item.index}">{{item.name}}</text>
			</view>
			<!-- 登记底部 -->
			<view class="list" v-for="(item,index) in TabBarList2" v-if="ddshow"
			@click="onTabBar(item,item.index)"
			:key="index">
				<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === item.index"></image>
				<image :src="item.img" mode="widthFix" v-show="tabBarShow != item.index"></image>
				<text :class="{'action':tabBarShow===item.index}">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabBarList:[
					{
						index: 0,
						name: '首页',
						img: '/static/tabBar/tab_01.png',
						acImg: '/static/tabBar/tab_02.png'
					},
					{
						index: 3,
						name: '我的',
						img: '/static/tabBar/tab_07.png',
						acImg: '/static/tabBar/tab_08.png'
					}
				],
				TabBarList1:[
					{
						index: 3,
						name: '我的',
						img: '/static/tabBar/tab_07.png',
						acImg: '/static/tabBar/tab_08.png'
					}
				],
				TabBarList2:[
					// {
					// 	index: 3,
					// 	name: '我的',
					// 	img: '/static/tabBar/tab_07.png',
					// 	acImg: '/static/tabBar/tab_08.png'
					// },
					{
						index: 4,
						name: '报丧登记',
						img: '/static/tabBar/tab_07.png',
						acImg: '/static/tabBar/tab_08.png'
					}
				],
				codeheight: 0,
				isOverall: 0,
				phoneModel: '',
				qxshow:true,
				ddshow:false,
				sjshow:false
			};
		},
		props:{
			tabBarShow: {
				type: Number,
				default: 0,
			}
		},
		mounted() {
			try {
				console.log("角色",uni.getStorageSync('userjs'));
				if(uni.getStorageSync('userjs') != '普通用户' && uni.getStorageSync('userjs') != '调度员'){
					this.sjshow = true
				}else{
					this.sjshow = false
				}
				if(uni.getStorageSync('userjs') == '普通用户'){
					this.qxshow = true
				}else{
					this.qxshow = false
				}
				if(uni.getStorageSync('userjs') == '调度员'){
					this.ddshow = true
				}else{
					this.ddshow = false
				}
			    const res = uni.getSystemInfoSync();
					let that = this;
			    // 获取系统信息
			    uni.getSystemInfo({
			    	success(res) {
			    		console.log(res.brand) //手机牌子
			    		console.log(res.model) //手机型号
			    		console.log(res.screenWidth) //屏幕宽度
			    		console.log(res.screenHeight) //屏幕高度
							that.codeheight = Math.round(res.screenHeight);
							that.phoneModel =res.model
							if(res.model.search('iPhone')){
								that.isOverall = 0;
							}else if(Math.round(res.screenHeight)>740){
							 that.isOverall = 1;
							}
							console.log(that.isOverall);
			    	}
			    });
			} catch (e) {
			    // error
			}
		},
		methods:{
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			onTabBar(item,index){
				this.tabBarShow = index;
				switch (index){
					case 0:
						wx.switchTab({
							url:'/pages/funeral/funeral'
						})
						break;
					case 1:
						wx.switchTab({
							url:'/pages/institution/institution'
						})
						break;
					case 2:
						wx.switchTab({
							url:'/pages/mall/mall'
						})
						break;
					case 3:
						wx.switchTab({
							url:'/pages/my/my'
						})
						break;
					case 4:
						uni.navigateTo({
							url:'/pages/funeralreport/funeralreport'
						})
						// wx.switchTab({
						// 	url:'/pages/funeralreport/funeralreport'
						// })
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'TabBar.scss';
</style>