xunjian_app/pages/onsitpection/person/person.vue

<template>
	<view class="u-flex f-d-c u-col-center u-relative person-config" style="overflow: hidden;">
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-col-top">
			<view class="u-flex u-m-t-30">
				<view class="u-m-r-10 ">
					<u-avatar mode="circle" size="110"></u-avatar>
				</view>
				<view v-if="user != null" class="u-flex-1">
					<view class="u-font-18 u-p-b-10 rigt-font u-font-32">{{user.username}}</view>
					<view class=" rigt-font u-font-24">部门：{{user.deptName}}</view>
				</view>
			</view>

		</view>
		<view class="u-m-t-20 meu-list u-relative">
			<u-cell-group>
				<navigator hover-class="none" :url="index.url" v-for="(index,key) in obj" :key="key">
					<u-cell-item :title="index.title" :icon-style="{color:'#000000'}"
						:title-style="{margin:'0rpx 0rpx 0rpx 14rpx',fontSize:'32rpx',color:'#000000'}" :icon-size='50'>
						<u-icon slot="icon" size="50" :name="index.img"></u-icon>
					</u-cell-item>
				</navigator>
			</u-cell-group>
		</view>
		<u-tabbar v-if="tabbar" :before-switch="beforeSwitch" :height="tabheight" :list="tabbar" :mid-button="true">
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import pwd from '@/static/img/person/pwd.png'
	import td from '@/static/img/person/td.png'
	import qh from '@/static/img/person/qh.png'
	export default {
		data() {
			return {
				ifOnShow:false,
				user: null,
				obj: [
					{
						title: "我的团队",
						icon: 'man-add-fill',
						url: '/pages/myteam/myteam',
						img: td,
					}, {
						title: "修改密码",
						icon: 'lock-fill',
						url: '/pages/login/forgetpwd/index',
						img: pwd
					}, {
						title: "切换账户",
						icon: 'coupon',
						url: '/pages/login/login/index',
						img: qh
					}
				],
				tabheight: 0
			}
		},
		computed: {
			...mapState({
				tabbar: state => state.tabbar.tabbar
			})
		},
		onHide(){
		
		this.ifOnShow=true
		
		},
		
		onShow(){
		
		if(this.ifOnShow){
			this.user = uni.getStorageSync("user")
			this.tabheight = getApp().globalData.tabhei
		}
		
		},
		onShow() {
				this.user = uni.getStorageSync("user")
				this.tabheight = getApp().globalData.tabhei
			},
		methods: {
			beforeSwitch(id) {
				if (id == 1) {
					this.$store.dispatch("user/gettasklist");
					return false
				} else {
					return true
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
		overflow: hidden;
	}

	.person-config {
		overflow: hidden;

	}

	.rigt-font {
		color: #FFFFFF;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		width: 751rpx;
		height: 300rpx;
		position: relative;
		z-index: -1;

		&::after {
			content: '';
			width: 140%;
			height: 350rpx;
			position: absolute;
			left: -20%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 45% 45%;
			background: #4A8BFF;
		}
	}

	.meu-list {
		width: 690rpx;
		top: -100rpx;
		height: 100vh;
		background: #FFFFFF;

	}
</style>