ParkApp/pages/mine/mine.vue

<template>
	<view>
		<view class="">
			<view class="header">
				<view class="" style="height: 25rpx;"></view>
			    <view class="flex justify-between">
			    	<view class="flex">
			    		<view class="avatar">
			    		   <open-data  type="userAvatarUrl"></open-data>
			    		</view>
			    		<view style="padding: 10rpx 20rpx;" v-if="loginType=='staff'">
			    			<open-data style="font-size: 32rpx;" type="userNickName"></open-data>
			    			<view class="text-white text-df padding-top-20">
			    				{{$cache.get('phone')}}
			    			</view>
			    		</view>
			    		<view v-else class="nickname">
			    			<open-data  type="userNickName"></open-data>
			    		</view>
			    	</view>
					<view @click="loginOut" class="flex justify-center align-center" style="text-decoration: underline;color: #FFFFFF;padding-right: 80rpx;">
						<image src="../../static/login/logout.png" style="width: 50rpx;" mode="widthFix"></image>
					</view>
			    </view>
			</view>
			
			<view class="info" @click="jump">
				<text v-text="loginType=='agency'?'我的园区':'所属公司'"></text>
				<text>{{title}}</text>
			</view>
			
			<view class="item_list" >
				<view class="item">
					<text style="font-size: 32rpx;">系统功能</text>
				</view>
				<view v-if="item.show" class="item" v-for="(item, index) in systemItemList" :key="index" @tap="tapToMenu(item.name)">
					<view class="item_content">
						<image :src="item.itemIcon"></image>
						<text>{{ item.itemName }}</text>
					</view>
					<view class="">
						<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		 <u-tabbar v-model="tabbarCurr"
		  :icon-size="tabbar.iconSize" 
		  :active-color="tabbar.activeColor" 
		  :mid-button-size="tabbar.MinButtonSize" 
		  :list="tabbar.list" :mid-button="true">
		  </u-tabbar>
	</view>
</template>

<script>
	var app=getApp()
	import {tabbar} from "@/assets/js/tabbar.js"
	let that
	export default {
		data() {
			return {
				//tabbar
				tabbarCurr:2,
				tabbar:tabbar,
				
				//登陆类型
				loginType:'',
				title:'',
				//功能列表
				systemItemList:[]
				
			}
		},
		onLoad() {
			that=this
			this.fetchStaticData()
			if (this.loginType==this.$loginType.STAFF) {
				console.log("1");
				this.fetchStaffInfo()
			}else if (this.loginType==this.$loginType.ENTERPRISE) {
				console.log("2");
				this.fetchEnterpriseInfo()
			}else if (this.loginType==this.$loginType.AGENCY) {
				console.log("3");
				this.fetchAgencyInfo()
			}
		},
		// onReady() {
		// 	if (this.$cache.get('loginType')!=this.$loginType.STAFF) {
		// 		let tmp=this.$u.deepClone(tabbar)
		// 		tmp.list.splice(1,1)
		// 		this.tabbar=tmp
		// 	}else{
		// 		this.tabbar=tabbar
		// 	}
		// },
		methods: {
			loginOut(){
				let that=this
				try {
					 uni.clearStorageSync();
					 uni.showModal({
						showCancel:false,
						confirmText:"确认",
						content:"退出成功",
						success() {
							getApp().globalData.userInfo=''
							uni.reLaunch({
								url:"/pages/login/login"
							})
						}
					 })
				} catch (e) {
					uni.showToast({
						title:"退出失败",
						icon:"none"
					})
				}
			},
			fetchStaticData(){
				this.loginType=this.$cache.get('loginType') || ''
				this.systemItemList=[
					{
						itemName: '换绑手机号',
						itemIcon: '/static/icon/phone.png',
						name:'changePhone',
						show:this.loginType==this.$loginType.STAFF
					},
					{
						itemName: '修改密码',
						itemIcon: '/static/icon/mima.png',
						name:'changePsw',
						show:this.loginType!=this.$loginType.STAFF
					},
					{
						itemName: '问题反馈',
						itemIcon: '/static/icon/fankui.png',
						name:'feedback',
						show:true
					},
					{
						itemName: '用户协议',
						itemIcon: '/static/icon/xieyi.png',
						name:'protocol',
						show:true
					}
				]
			},
			/**
			 * 加载员工信息
			 */
			fetchStaffInfo(){
				let phone= this.$cache.get('phone')
				this.$api.enterprisestaff.page({phone:phone,examine:1}).then(res=>{
					this.title=res.data.records[0].enterpriseName
				})
			},
			/**
			 * 加载企业信息
			 */
			fetchEnterpriseInfo(){
				let creditCode=this.$cache.get('creditCode')
				this.$api.enterprise.detail({creditCode:creditCode}).then(res=>{
					this.title=res.data.enterpriseName
				})
			},
			/**
			 * 加载园区信息
			 */
			fetchAgencyInfo(){
				let agencyId=this.$cache.get('agencyId')
				this.$api.agency.page({id:agencyId}).then(res=>{
					this.title=res.data[0].agencyName
				})
			},
			/**
			 * 企业详情
			 */
			jump(){
				let url=''
				if (this.loginType==this.$loginType.AGENCY) {
					url='/pages/agency/agency'
				}else{
					url='/pages/company/company'
				}
				uni.navigateTo({
					url
				})
			},
			//功能跳转
			tapToMenu(name){
				let url=''
				switch (name){
					case 'feedback':
						url="/pages/mine/feedback/feedback"
						break;
					case 'changePhone':
						url="/pages/mine/editPhone/editPhone"
						break;
					case 'changePsw':
						url="/pages/mine/changePass/changePass"
						break;
					default:
						break;
				}
				if (!this.$isEmpty(url)) {
					uni.navigateTo({
						url:url
					})
				}else{
					uni.navigateTo({
						url:"/pages/mine/protocol/protocol"
					})
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	
	
	.header{
		background-color: $base-color;
		height: 250rpx;
		
		.avatar{
			display: block;
			margin-left: 50rpx;
		    overflow:hidden;  
		    width: 120rpx;
		    height: 120rpx; 
		    left: 50%;  
		    border-radius: 50%;  
		}
		.nickname{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 30rpx;
			font-size: 34rpx;
		}
	}
	
	.info{
		padding:30rpx 20rpx;
		text-align: center;
		margin: -60rpx 25rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 10rpx #e7f1fd ;
		display: flex;
		justify-content: space-between;
		
		text:first-child{
			font-size: 30rpx;
			padding-left: 15rpx;
			color: #000000;
			font-weight: 800;
		}
		
		text:last-child{
			color: #333;
			padding-right: 20rpx;
			font-size: 28rpx;
		}
	}
	
	.item_list {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			height: 90upx;
			border-bottom: 1upx solid #f1f1f1;
	
			.item_content {
				display: flex;
				flex-direction: row;
				align-items: center;
	
				image {
					width: 42upx;
					height: 42upx;
				}
	
				text {
					font-size: 28upx;
					color: #333333;
					margin-left: 20upx;
				}
			}
	
			image {
				width: 10upx;
				height: 18upx;
			}
		}
		
		.item:first-child{
			border: none;
		}
	
		.item:last-child {
			border: none;
		}
	}

</style>