logpm/pages/user/user.vue

<template>
	<view class="titles">个人中心</view>
	<image class="usebg" src="/static/userbg.png"></image>
	<view class="userviews" @click="gologin" v-if="!(users?.user_id)">
		<image src="/static/userimg.png"></image>
		<view>
			<view>未登录</view>
		</view>
	</view>
	<view class="userviews" v-if="users?.user_id">
		<image src="/static/userimg.png"></image>
		<view>
			<view>{{users.real_name}}</view>
			<view>
				<view>
					广州市汇通运输有限公司
				</view>
				<view>
					<view>{{users.role_name}}-龙泉仓库</view>
					<image src="/static/rigthviewb.png"></image>
				</view>
			</view>
		</view>
	</view>
	<view class="btsview">
		<view v-for="item in butlist">
			<view>
				<image :src="item.icon"></image>
				<view>
					{{item.name}}
				</view>
			</view>
			<view>
				<image src="/static/rigthview.png"></image>
			</view>
		</view>
	</view>
	<view class="butout" @click="removeall">
		退出登录
	</view>
	<view class="zhanwei"></view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	let users = ref<any>(null)
	let butlist = ref([
		{ icon: '/static/usericon1.png', name: '通讯录', type: 1 },
		{ icon: '/static/usericon2.png', name: '计件工资', type: 2 },
		{ icon: '/static/usericon3.png', name: '系统设置', type: 3 },
		{ icon: '/static/usericon4.png', name: '安全设置', type: 4 },
		{ icon: '/static/usericon5.png', name: '关于我们', type: 5 },
		{ icon: '/static/usericon6.png', name: '系统更新', type: 6 },
		{ icon: '/static/usericon7.png', name: '分享', type: 7 },
	])
	users.value = uni.getStorageSync('userinfo')
	function gologin() {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	function removeall() {
		const res = uni.getStorageInfoSync();
		res.keys.map(item=>{
			if(item=='loginuser'||item=='HistoryDate'||item=='setip'){
				return
			}
			uni.removeStorageSync(item)
		})
		uni.navigateTo({
			url:'/pages/login/login'
		})
		console.log(res.currentSize);
		console.log(res.limitSize);
	}
</script>

<style lang="scss">
	.titles {
		position: absolute;
		left: 50%;
		top: 70upx;
		transform: translate(-50%);
		font-size: 36upx;
		font-weight: 400;
		color: #FFFFFF;
		z-index: 5;
	}

	.butout {
		width: 400upx;
		height: 88upx;
		background: #D3832A40;
		border-radius: 8upx 8upx 8upx 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 500;
		color: #D3832A;
		margin: auto;
		margin-top: 60upx;
		box-sizing: border-box;
	}

	.zhanwei {
		width: 100%;
		height: 80upx;
	}

	.btsview {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 26upx;
		box-sizing: border-box;
		border-radius: 30upx 30upx 0 0;
		margin-top: 50upx;
		background-color: #ffffff;
		padding-bottom: 0upx;

		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #EEEEEE;
			padding-right: 0;
			padding-left: 20upx;

			&:nth-last-child(1) {
				border-bottom: none;
			}

			>view {
				&:nth-of-type(1) {
					display: flex;
					align-items: center;
					justify-content: center;

					>image {
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}

					>view {
						font-size: 32upx;
						font-weight: 500;
						color: #3D3D3D;
					}
				}

				&:nth-of-type(2) {
					>image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
	}

	.userviews {
		display: flex;
		align-items: center;
		position: relative;
		width: 560upx;
		margin: auto;
		margin-top: 200upx;

		>image {
			width: 160upx;
			height: 160upx;
			box-sizing: border-box;
			margin-right: 24upx;
		}

		>view {
			width: 400upx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			color: #ffffff;

			>view {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				&:nth-of-type(1) {
					font-size: 40upx;
					font-weight: 700;
					margin-bottom: 30upx;
				}

				>view {
					display: flex;
					align-items: center;

					&:nth-of-type(1) {
						font-size: 32upx;
						font-weight: 700;
						margin-bottom: 10upx;
					}

					&:nth-of-type(2) {
						font-size: 28upx;
					}

					>image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
	}

	.usebg {
		width: 100%;
		height: 476upx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.login {
		width: 260upx;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0073ff;
		color: #ffffff;
		border-radius: 90upx;
		margin: auto;
		margin-top: 180upx;
	}

	.contmabox {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 400upx;
		background-color: #FA8C16da;
	}
</style>