ParkApp/pages/mine/mine.vue

<template>
<view >
	<view >
		<view v-if="loginType=='staff'" class="mine_order_statue">
			<view   class="flex justify-between" style="padding:30rpx 20rpx;">
				<view class="flex">
					<image :src="staffInfo.avatar?staffInfo.avatar:'http://139.9.103.171:8888/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png'"  style="background-color: #FFFFFF;width: 106rpx;height: 106rpx;border-radius: 10rpx;" ></image>
					<view  class="flex flex-direction padding-left-30">
						<text class="text-lg text-bold" v-text="staffInfo.realName"></text>
						<view  class="text-df"  style="padding: 20rpx 0;" >
							<text  class="margin-top-40 text-df">手机号：{{staffInfo.phone}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item_list" v-if="loginType=='staff'">
			<view class=" flex justify-between" style="padding: 34rpx 24rpx 34rpx 40rpx;">
				<view class="text-bold">所属公司</view>
				<view class="" @click="goEnterpriseDetail">
					<text class="text-black" style="font-size: 28rpx;" >{{staffInfo.enterpriseName}}</text>
					<text class="cuIcon-right text-gray padding-left-20" style="font-size: 24rpx;"></text>
				</view>
			</view>
		</view>
		<view class="item_list" style="margin-top: 0;" v-if="loginType=='enterprise'">
			<view class="flex justify-between" style="padding: 50rpx 25rpx 60rpx 40rpx;">
				<view class="text-bold">我的公司</view>
				<view class="" @click="goEnterpriseDetail">
					<text class="text-black" v-if="loginType=='enterprise'">{{enterpriseInfo.enterpriseName}}</text>
					<text class="cuIcon-right text-gray padding-left-20" style="font-size: 24rpx;"></text>
				</view>
			</view>
		</view>
		<view class="item_list" style="margin-top: 0;" v-if="loginType=='agency'">
			<view class="flex justify-between" style="padding: 50rpx 25rpx 60rpx 40rpx;">
				<view class="text-bold">我的园区</view>
				<view class="" @click="goAgencyDetail">
					<text class="text-black">{{agencyInfo.agencyName}}</text>
					<text class="cuIcon-right text-gray padding-left-20" style="font-size: 24rpx;"></text>
				</view>
			</view>
		</view>
		
		
		
		<view class="item_list" >
			<view class="item" v-if="item.show"  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 @click="loginOut" class="cu-btn round flex bg-blue" style="padding: 40rpx;margin: 80rpx 15rpx 0;">
			退出登陆
		</view>
		
	</view>
	<u-tabbar v-model="tabbarCurr"
	 :icon-size="tabbar.iconSize" 
	 :active-color="tabbar.activeColor" 
	 :list="tabbar.list" :mid-button="false">
	 </u-tabbar>
</view>
</template>

<script>
var app=getApp()
import DtCustomBar from '@/components/dt_custom_bar.vue'
import {tabbar} from "@/assets/js/tabbar.js"
let that
export default {
	components: {
		DtCustomBar
	},
	data() {
		return {
			background: {
				backgroundColor: '#f5f6f8',
			},
			//tabbar
			tabbarCurr:2,
			tabbar:tabbar,
			
			//登陆类型
			loginType:'',
			//员工信息
			staffInfo:{},
			//企业信息
			enterpriseInfo:{},
			//园区信息
			agencyInfo:{},
			
			//功能列表
			systemItemList:[],
		};
	},
	onShow() {
		this.apiGetUserInfo()
	},
	onLoad() {
		that=this
		
		this.fetchStaticData()
		if (this.loginType==this.$loginType.STAFF) {
			this.fetchStaffInfo()
		}else if (this.loginType==this.$loginType.ENTERPRISE) {
			this.fetchEnterpriseInfo()
		}else if (this.loginType==this.$loginType.AGENCY) {
			this.fetchAgencyInfo()
		}
	},
	methods: {
		fetchStaticData(){
			this.loginType=this.$cache.get('loginType') || ''
			
			this.systemItemList=[
				// {
				// 	itemName: '物业报修',
				// 	itemIcon: '/static/index/blue/wuye.png',
				// 	index:10
				// },
				// {
				// 	itemName: '人员认证',
				// 	itemIcon: '/static/index/blue/shenfen.png',
				// 	index:10
				// },
				{
					itemName: '换绑手机号',
					itemIcon: '/static/index/blue/change-phone.png',
					name:'changePhone',
					show:this.loginType==this.$loginType.STAFF
				},
				{
					itemName: '修改密码',
					itemIcon: '/static/index/blue/changePsw.png',
					name:'changePsw',
					show:this.loginType!=this.$loginType.STAFF
				},
				{
					itemName: '问题反馈',
					itemIcon: '/static/index/blue/fankui.png',
					name:'feedback',
					show:true
				},
				{
					itemName: '帮助中心',
					itemIcon: '/static/index/blue/shuoming.png',
					name:'help',
					show:true
				},
				{
					itemName: '用户协议',
					itemIcon: '/static/index/blue/xieyi1.png',
					name:'protocol',
					show:true
				}
			]
		},
		
		loginOut(){
			let that=this
			try {
			     uni.clearStorageSync();
				 uni.showModal({
				 	showCancel:false,
					confirmText:"确认",
					content:"退出成功",
					success() {
						getApp().globalData.userInfo=''
						that.$Router.replaceAll({name:"login"})
					}
				 })
			} catch (e) {
				uni.showToast({
					title:"退出失败",
					icon:"none"
				})
			}
		},
		/**
		 * 订阅认证信息
		 */
		subscribe(){
			// 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
			uni.getSetting({
			 	withSubscriptions: true,//是否获取用户订阅消息的订阅状态，默认false不返回
			   success(res){
				   if(res.authSetting['scope.address']){
						 uni.openSetting({ // 打开设置页
						   success(res) {
								console.log(res.authSetting)
							},
							fail: (err) => {
								console.log(err);
							}
						 });
				    }
				   else{// 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
						 uni.requestSubscribeMessage({
							   tmplIds: that.$tmplIds,
							   success (res) {
								 console.log(res)
							   },
							   fail(err){
								   console.error(err);
							   }
						  })
					 }
			   }
			})
		},
		/**
		 * 加载员工信息
		 */
		fetchStaffInfo(){
			let phone= this.$cache.get('phone')
			this.$api.enterprisestaff.detail({phone:phone}).then(res=>{
				this.staffInfo=res.data
			})
		},
		/**
		 * 加载企业信息
		 */
		fetchEnterpriseInfo(){
			let creditCode=this.$cache.get('creditCode')
			this.$api.enterprise.detail({creditCode:creditCode}).then(res=>{
				this.enterpriseInfo=res.data
			})
		},
		/**
		 * 加载园区信息
		 */
		fetchAgencyInfo(){
			console.log(getApp().globalData.userInfo);
			
			let agencyId=this.$cache.get('agencyId')
			this.$api.agency.page({id:agencyId}).then(res=>{
				this.agencyInfo=res.data[0]
			})
		},
		/**
		 * 企业详情
		 */
		goEnterpriseDetail(){
			uni.navigateTo({
				url:"/pages/company/company"
			})
		},
		/**
		 * 园区详情
		 */
		goAgencyDetail(){
			uni.navigateTo({
				url:"/pages/index/agency/agency"
			})
		},
		//功能跳转
		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"
				})
			}
		},
		//获取微信昵称和头像
		getUserInfo(e){
			this.userInfo=e.detail.userInfo
			console.log(this.userInfo.avatarUrl)
			this.$cache.put('userInfo',this.userInfo)
		},
		//获取用户信息
		apiGetUserInfo(){
			this.phone=this.$cache.get('phone') || ''
			this.userInfo= getApp().globalData.userInfo || {}
		},
	},

};
</script>
<style lang="scss" scoped>
.page{
	min-height: 100vh;
	background-color: #FFFFFF;
	// background-color: #f5f6f8;
}
button::after {
	  border: none;
	}


.mine_order_statue {
	//todo
	// box-shadow: 0 10rpx #e7f1fd ;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 20rpx;
}

.item_list {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 15upx;
    // margin-left: 20rpx;
	// margin-right: 20rpx;
	border-radius: 10rpx;
	.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:last-child {
		border: none;
	}
}
</style>