warst/warst-h5/pages/my/index.vue

<template>
	<!--我的-->
	<view class="my-container">
		<view class="user-info-header">
			<userAvatar></userAvatar>
			<view class="col">
				<text class="u-name">{{ userInfo.userName }}</text>
				<view class="u-office">
					<text class="department">{{ userInfo.company }}</text>
					<view class="position" v-show="userInfo.post">
						{{ userInfo.post }}
					</view>
				</view>
			</view>

			<view class="leave-box" v-if="userStatus">
				<view class="bg-box"></view>
				<view class="leave-txt">{{ userStatus }}</view>
			</view>

			<view>
				<image
					src="@/static/images/my/header-bg.png"
					class="right-icon"
				></image>
			</view>
		</view>
		<view class="content-fun">
			<view
				class="cell"
				@click="handleClick(item)"
				:key="idx"
				v-for="(item, idx) in list"
			>
				<view class="left-title">
					<image
						class="cell-img"
						:src="require(`@/static/images/my/${item.iconName}.png`)"
					></image>
					<text>{{ item.title }}</text>
				</view>
				<view class="right-box">
					<msgNum
						v-if="item.msgNum"
						size="12"
						:value="item.msgNum"
					></msgNum>
					<text class="tel-text" v-if="item.tel">{{ newTel }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<c-button
			type="primary"
			class="footer-btn"
			@click="handleConfirm"
		>
			退出登录
		</c-button>

		<u-modal
			:show="isShow"
			showCancelButton
			@confirm="handleLogOut"
			closeOnClickOverlay
			@close="isShow = false"
			@cancel="isShow = false"
		>
			确认退出登录吗？
		</u-modal>
	</view>
</template>

<script>
import userAvatar from '@/pages/my/userAvatar.vue';
import msgNum from '@/components/msgNum/index.vue';

export default {
	name: 'my',
	components: {
		userAvatar,
		msgNum,
	},
	data() {
		return {
			isShow: false,
			list: [
				{
					iconName: 'my-msg',
					title: '我的消息',
					msgNum: 10,
					path: '/pages/com/msgNotification/index',
				},
				{
					iconName: 'personal-data',
					title: '个人资料',
					msgNum: 0,
					path: '/pages/my/personalData',
				},
				{
					iconName: 'update-pwd',
					title: '修改密码',
					msgNum: 0,
					path: '/pages/my/updatePwd',
				},
				{
					iconName: 'update-phoneNum',
					title: '修改手机号',
					tel: '',
					msgNum: 0,
					path: '/pages/my/checkCurrentTel',
				},
			],
			userInfo: {},
		};
	},
	onShow() {
		this.getUserInfo();
	},
	computed: {
		userStatus() {
			// 0正常 1加班  2出差 3请假
			const types = {
				1: '加班',
				2: '出差',
				3: '请假',
			};
			const status = this.userInfo?.status;
			return types[status];
		},
		newTel() {
			const { phonenumber } = this.userInfo;
			return this.$c.middleTel(phonenumber, true);
		},
	},
	methods: {
		async getUserInfo() {
			const { data } = await this.$store.dispatch('user/GetInfo');
			this.userInfo = data || {};
		},
		handleClick(item) {
			this.$u.route(item.path);
		},
		handleConfirm() {
			this.isShow = true;
		},
		async handleLogOut() {
			await this.$store.dispatch('user/LogOut');
			this.isShow = false;
		},
	},
};
</script>

<style scoped lang="scss">
.my-container {
	background-color: #f8f8f8;
	padding: 28rpx;
	height: 100%;

	.user-info-header {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 30rpx;
		border-radius: $bd-radius;
		height: 70px;
		margin-bottom: 28rpx;

		.col {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.u-name {
				font-size: 13px;
				color: #000000;
			}

			.u-office {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.department {
					font-size: 12px;
					color: #8c93a3;
				}
				.position {
					color: #ff9935;
					padding: 0px 6rpx;
					font-size: 13px;
					border: 1px solid #ff9935;
					border-radius: 10rpx;
					margin-left: 10rpx;
					background-color: rgba(239, 140, 39, 0.1);
				}
			}
		}

		.leave-box {
			.bg-box {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				border-width: 20px;
				border-style: solid;
				border-color: #436ff6 #436ff6 transparent transparent;
			}

			.leave-txt {
				transform: rotateZ(45deg);
				position: absolute;
				top: 5px;
				right: 0;
				z-index: 2;
				font-size: 12px;
				color: #fff;
			}
		}
		.right-icon {
			position: absolute;
			top: 0;
			right: 0;
			width: 78px;
			height: 70px;
		}
	}

	.content-fun {
		background-color: #fff;
		border-radius: $bd-radius;
		.cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #edeeef;
			&:last-child {
				border-bottom: 0;
			}
			padding: 28rpx;
			.left-title {
				display: flex;
				align-items: center;
			}
			.right-box {
				display: flex;
				align-items: center;
				.tel-text {
					font-size: 13px;
				}
			}
			.cell-img {
				width: 34px;
				height: 34px;
				margin-right: 16rpx;
			}
		}
	}
	.footer-btn {
		margin-top: 100rpx;
	}
}
</style>