jy-safe-app/pages/my/index.vue

<template>
	<view class="my-page">
		<view class="card-common user-info">
			<!--			<image-->
			<!--				class="user-edit-icon"-->
			<!--				@click="linkToUserInfo"-->
			<!--				src="/static/ic_edit@2x.png"-->
			<!--			/>-->
			<view class="user">
				<view class="user-avatar">
					<!--          <image-->
					<!--            src="/static/img_person@2x.png"-->
					<!--          />-->
					<u-avatar :text="userInfo.NAME.slice(1)" fontSize="20" size="64" randomBgColor></u-avatar>
				</view>
				<view class="info">
					<view class="user-name">{{`${userInfo.NAME}（${userInfo.CODE}）`}}</view>
					<!-- <view class="user-phone">{{userInfo.PHONE}}</view> -->
					<view class="dep-num">
						<text>部门:{{userInfo.Nav_Department.NAME}}</text>
						<!-- <text>|</text>
						<text>工号:{{userInfo.CODE}}</text> -->
					</view>
				</view>
			</view>
			<view class="message">
				<!-- <view class="msg">
          <view class="num">10</view>
          <view class="text">待办任务</view>
        </view>
        <view class="msg last">
          <view class="num">10</view>
          <view class="text">未读消息</view>
        </view> -->
				<!-- <view class="msg last">
          <view class="num">10</view>
          <view class="text">其它任务</view>
        </view> -->
			</view>
		</view>
		<view class="card-common menu-list">
			<view class="row" @click="linkToUserInfo">
				<view class="left">
					<image src="/static/ic_edit@2x.png" />
					<text>资料编辑</text>
				</view>
				<view class="right">
					<image src="/static/ic_more@2x.png" />
				</view>
			</view>
			<view class="row" @click="linkToFeedBack">
				<view class="left">
					<image src="/static/icon_feedback@2x.png" />
					<text>意见反馈</text>
				</view>
				<view class="right">
					<image src="/static/ic_more@2x.png" />
				</view>
			</view>
			<view class="row" @click="linkToEditPassword">
				<view class="left">
					<image src="/static/ic_key@2x.png" />
					<text>修改密码</text>
				</view>
				<view class="right">
					<image src="/static/ic_more@2x.png" />
				</view>
			</view>
			<view class="row" @click="handleLogout">
				<view class="left">
					<image src="/static/icon_logout@2x.png" />
					<text>退出登录</text>
				</view>
				<!-- <view class="right">
					<image src="/static/ic_more@2x.png" />
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			const appInfoData = uni.getStorageSync('appInfo')
			const {
				User
			} = appInfoData
			this.userInfo = User
		},
		methods: {
			handleLogout() {
				uni.removeStorageSync('accessToken')
				uni.removeStorageSync('orgId')
				uni.removeStorageSync('Tenant')
				uni.removeStorageSync('appInfo')
				uni.removeStorageSync('MineType')
				uni.redirectTo({
					url: '/pages/login/index'
				})
			},
			linkToEditPassword() {
				uni.navigateTo({
					url: '/pages/my/subPages/editPassword'
				})
			},
			linkToUserInfo() {
				uni.navigateTo({
					url: '/pages/my/subPages/userInfo1'
				})
			},
			linkToFeedBack() {
				uni.navigateTo({
					url: '/pages/my/subPages/feedBack'
				})
			}
		}
	}
</script>

<style>
	.my-page {
		padding: 16px;
	}

	.card-common {
		border-radius: 8px;
		border: 1px solid rgba(72, 160, 247, 1);
		box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 16px;
		overflow: hidden;
	}

	.user-info {
		padding: 24px;
		box-sizing: border-box;
		position: relative;
	}

	.user-info .user {
		display: flex;
		margin-bottom: 24px;
	}

	.user-info .user .info {
		flex: 1;
		padding-left: 18px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 12px;
		color: rgba(51, 51, 51, 1);
	}

	.user-info .user .info .user-name {
		font-size: 18px;
		font-weight: 500;
		line-height: 24px;
		margin-bottom: 8px;
		color: #333;
	}

	.user-info .user .info .user-phone {
		font-weight: 400;
		line-height: 16px;
	}

	.user-info .user .info .dep-num {
		line-height: 16px;
		font-size: 12px;
		color: #666;
	}

	.user-info .user-edit-icon {
		position: absolute;
		width: 16px;
		height: 16px;
		top: 24px;
		right: 24px;
	}

	/*.user-info .user-avatar image {*/
	/*  width: 64px;*/
	/*  height: 64px;*/
	/*  border-radius: 50%;*/
	/*  overflow: hidden;*/
	/*}*/
	.user-info .message {
		display: flex;
		justify-content: space-between;
	}

	.user-info .message .msg {
		border-right: 1px solid #C9C9C9;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #333;
		width: 50%;
		font-weight: 500;
		line-height: 22px;
	}

	.user-info .message .text {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
	}

	.user-info .message .last {
		border-right: none;
	}

	.menu-list {
		padding: 24px 16px 0;
		border: none;
	}

	.menu-list .row {
		display: flex;
		height: 20px;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		color: #333;
		margin-bottom: 28px;
	}

	.menu-list .row .left {
		display: flex;
		align-items: center;
	}

	.menu-list .row .left image {
		width: 20px;
		height: 20px;
		margin-right: 15px;
	}

	.menu-list .row .right image {
		width: 5px;
		height: 10px;
	}
</style>