jsh_erp_app/pages/index/components/use-pop.vue

<template>
	<view>
		<u-popup :show="meunShow" @close="closeClick" mode="left" zIndex="999999" bgColor="#F6F8FA">
			<view class="meun-pop">
			 <view class="use-cont">
				 <u-avatar :src="userInfo.avatar" size="44"></u-avatar>
				 <view class="use-cont-name">{{userInfo.username}}</view>
				 <!-- <image class="edit-img" src="@/static/image/home/edit-icon.png" mode=""></image> -->
			 </view>
			 <view class="use-msg">
				<view class="use-msg-line">
					<image class="label-icon" src="@/static/image/home/phone-icon.png" mode=""></image>
					<view class="use-msg-line-cont">
						<view>手机号</view>
						<view class="line-value">{{userInfo.phonenum}}</view>
					</view>
				</view>
				<view class="use-msg-line">
					<image class="label-icon" src="@/static/image/home/role-icon.png" mode=""></image>
					<view class="use-msg-line-cont">
						<view>角色</view>
						<view class="line-value">
							<view>{{userInfo.position}}</view>
							<u-icon name="arrow-right" color="#7E838D"></u-icon>
						</view>
					</view>
				</view>
			 </view>
			 <button class="toLoginBtn" @click="logout">
			  退出登录
			 </button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		props:{
			userInfo:{
				type:Object,
				default:()=>{}
			},
			value:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			value(val) {
				this.meunShow = val
			}
		},
		data() {
			return {
				meunShow:false
			}
		},
		methods:{
			closeClick() {
				this.meunShow = false
				this.$emit('close')
			},
			logout() {
				this.$store.dispatch('userLogout')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.meun-pop {
		padding: 0 32rpx;
		padding-top: calc(74rpx + var(--status-bar-height));
		width: 80vw;
		.use-cont {
			display: flex;
			align-items: center;
			&-name {
				color: #0F1828;
				font-family: "PingFang SC";
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
				margin-right: 8rpx;
			}
			.edit-img {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.use-msg {
			margin-top: 32rpx;
			border-radius: 16rpx;
			background: #FFF;
			box-shadow: 0px 4rpx 16rpx 0px rgba(207, 223, 232, 0.12);
			padding: 0 32rpx;
			&-line {
				display: flex;
				align-items: center;
				.label-icon {
					width: 48rpx;
					height: 48rpx;
				}
				&-cont {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100rpx;
					border-bottom: 1px solid rgba(191, 200, 219, 0.50);
					margin-left: 24rpx;
					flex: 1;
					color: #0F1828;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					.line-value {
						display: flex;
						align-items: center;
						color: #666;
						.u-icon {
							margin-left: 24rpx;
						}
					}
				}
			}
		}
		.toLoginBtn {
		  height: 88rpx;
			background: linear-gradient(90deg, #1A65FF 0%, #4287FF 100%);
		  border-radius: 16rpx;
		  color: #fff;
		  margin-bottom: 32rpx;
		  margin-top: 30rpx;
		}
	}
</style>