factory_mp/pages/system/userInfo.vue

<template>
	<view class="profile-page">
		<!-- 头部卡片 -->
		<view class="profile-header">
			<view class="profile-avatar">
				<text class="profile-avatar-text">{{userInfo.name ? userInfo.name.slice(-2) : ''}}</text>
			</view>
			<text class="profile-name">{{userInfo.name}}</text>
			<text class="profile-dept">{{userInfo.belong_dept_name}} · {{userInfo.post_name}}</text>
		</view>

		<!-- 信息卡片 -->
		<view class="profile-card">
			<view class="profile-card-title">账户信息</view>
			<view class="profile-info-row">
				<text class="profile-info-label">姓名</text>
				<text class="profile-info-value">{{userInfo.name}}</text>
			</view>
			<view class="profile-info-divider"></view>
			<view class="profile-info-row">
				<text class="profile-info-label">账户名</text>
				<text class="profile-info-value">{{userInfo.username}}</text>
			</view>
			<view class="profile-info-divider"></view>
			<view class="profile-info-row">
				<text class="profile-info-label">主部门</text>
				<text class="profile-info-value">{{userInfo.belong_dept_name}}</text>
			</view>
			<view class="profile-info-divider"></view>
			<view class="profile-info-row">
				<text class="profile-info-label">主岗位</text>
				<text class="profile-info-value">{{userInfo.post_name}}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="profile-actions">
			<button class="profile-btn profile-btn-primary" @click="changePw">修改密码</button>
			<button class="profile-btn profile-btn-logout" @click="logout">退出登录</button>
		</view>
	</view>

	<!-- 修改密码弹窗 -->
	<view class="dialogWrap" v-if="dialogV">
		<view class="dialogCont">
			<view class="dialogTitle">
				<view>修改密码</view>
				<view class="dialog-close" @click="closeDialog">✕</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view>
				<uni-forms v-model="formData">
					<uni-forms-item label="原密码" required>
						<uni-easyinput type="password" v-model="formData.old_password"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="新密码">
						<uni-easyinput type="password" v-model="formData.new_password1"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="确认密码">
						<uni-easyinput type="password" v-model="formData.new_password2"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view style="height: 16rpx;"></view>
				<button class="profile-btn profile-btn-primary" @click="save" style="width:100%">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				formData: {},
				dialogV: false
			}
		},
		mounted() {
			this.initUserInfo()
		},
		methods: {
			initUserInfo() {
				let userInfo = uni.getStorageSync("userInfo")
				this.userInfo = userInfo;
			},
			logout() {
				// #ifdef APP-PLUS || H5
				try{uni.removeStorageSync("mySecret")}catch(e){};
				// #endif
				// #ifdef MP-WEIXIN
				this.$api.unbindWxmp().then(res=>{});
				// #endif
				uni.removeStorageSync("access")
				uni.reLaunch({
					url: "/pages/auth/login?autoLoading=no"
				})
				
			},
			changePw() {
				this.form = {}
				this.dialogV = true;
			},
			closeDialog() {
				this.dialogV = false;
			},
			save() {
				this.$api.changePw(this.formData).then(res=>{
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
					uni.reLaunch({
						url: '/pages/auth/login?autoLoading=no'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.profile-page {
	min-height: 100vh;
	background: #F5FAF7;
	padding-bottom: 40rpx;
}

.profile-header {
	background: linear-gradient(135deg, #14694A, #1F8C5E, #2BA471);
	padding: 60rpx 32rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.profile-avatar {
	width: 128rpx;
	height: 128rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid rgba(255, 255, 255, 0.4);
	margin-bottom: 20rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
}

.profile-avatar-text {
	font-size: 44rpx;
	color: #FFFFFF;
	font-weight: 700;
}

.profile-name {
	font-size: 38rpx;
	color: #FFFFFF;
	font-weight: 700;
	margin-bottom: 10rpx;
	letter-spacing: 4rpx;
}

.profile-dept {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 2rpx;
}

.profile-card {
	margin: -20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 28rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 2;
}

.profile-card-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #191B23;
	margin-bottom: 24rpx;
	padding-left: 16rpx;
	border-left: 6rpx solid #2BA471;
	letter-spacing: 2rpx;
}

.profile-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.profile-info-label {
	font-size: 28rpx;
	color: #74777F;
}

.profile-info-value {
	font-size: 28rpx;
	color: #191B23;
	font-weight: 500;
}

.profile-info-divider {
	height: 1rpx;
	background: #DCF0E4;
}

.profile-actions {
	padding: 32rpx 24rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.profile-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 16rpx !important;
	font-size: 30rpx;
	font-weight: 500;
	border: none !important;
	letter-spacing: 4rpx;
}

.profile-btn-primary {
	background: linear-gradient(135deg, #2BA471, #1F8C5E) !important;
	color: #FFFFFF !important;
	box-shadow: 0 6rpx 20rpx rgba(0, 61, 166, 0.25);
}

.profile-btn-logout {
	background: #fff !important;
	color: #EF4444 !important;
	border: 2rpx solid #FCA5A5 !important;
}

.dialog-close {
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #74777F;
	font-size: 32rpx;
}
</style>