huimv-employment/huimv-employment/app/packageA/worker/profile.vue

<template>
	<view class="fe-page fe-page--tab">
		<scroll-view scroll-y class="page-scroll" :show-scrollbar="false">
			<view class="page-body">
				<view class="fe-profile-card">
					<view class="fe-profile-avatar-lg">{{ avatarText }}</view>
					<view class="worker-profile__name">{{ worker.name }}</view>
					<view class="worker-profile__phone">{{ worker.phone }}</view>
					<view class="worker-profile__badge">✓ 已实名核验</view>
				</view>

				<view class="menu-card">
					<view class="fe-profile-menu-item" @tap="goPasswordSetting">
						<view class="fe-profile-menu-icon" style="background:#EDE9FE;">🔐</view>
						<view class="menu-card__main">
							<view class="fe-profile-menu-title">{{ passwordMenuTitle }}</view>
							<view v-if="passwordSet && usernameMask" class="fe-profile-menu-desc">用户名 {{ usernameMask }}</view>
							<view v-else-if="!passwordSet && !passwordStatusLoading" class="fe-profile-menu-desc">尚未设置，建议尽快设置</view>
						</view>
						<text class="menu-card__arrow">›</text>
					</view>
				</view>

				<view class="fe-btn fe-btn--secondary fe-btn--lg fe-btn--full logout-btn" @tap="logout">退出账号</view>
			</view>
		</scroll-view>

		<FeBottomNav current="mine" role="worker" />
	</view>
</template>

<script>
import FeBottomNav from '@/packageA/components/FeBottomNav.vue'
import store from '@/common/store.js'
import { getPasswordStatus } from '@/api/login.js'

export default {
	components: { FeBottomNav },
	data() {
		return {
			worker: {},
			avatarText: '',
			passwordSet: false,
			usernameMask: '',
			passwordStatusLoading: false
		}
	},
	computed: {
		passwordMenuTitle() {
			if (this.passwordStatusLoading) return '登录密码'
			return this.passwordSet ? '修改登录密码' : '设置登录密码'
		}
	},
	onShow() {
		if (!store.getState().loggedIn || store.getState().role !== 'worker') {
			uni.redirectTo({ url: '/packageA/auth/login' })
			return
		}
		if (!store.isWorkerRegistered()) {
			uni.redirectTo({ url: '/packageA/worker/register' })
			return
		}
		this.worker = store.getState().worker
		this.avatarText = this.worker.name ? this.worker.name[0] : '工'
		this.loadPasswordStatus()
	},
	methods: {
		async loadPasswordStatus() {
			this.passwordStatusLoading = true
			try {
				const res = await getPasswordStatus({ showError: false })
				this.passwordSet = !!(res && res.passwordSet)
				this.usernameMask = (res && res.usernameMask) || ''
			} catch (e) {
				this.passwordSet = false
				this.usernameMask = ''
			} finally {
				this.passwordStatusLoading = false
			}
		},
		goPasswordSetting() {
			uni.navigateTo({
				url: '/packageA/auth/set-password?from=worker'
			})
		},
		logout() {
			store.logout()
			uni.reLaunch({ url: '/packageA/auth/login' })
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-page--tab {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	padding-bottom: calc(#{$fe-h-tabbar} + #{$fe-h-safe-bottom});
}

.page-scroll {
	flex: 1;
	height: 0;
}

.page-body {
	padding: 32rpx;
	padding-bottom: 48rpx;
}

.worker-profile__name {
	font-size: 32rpx;
	font-weight: 700;
}

.worker-profile__phone {
	font-size: 26rpx;
	color: #64748B;
	margin-top: 4rpx;
}

.worker-profile__badge {
	display: inline-flex;
	align-items: center;
	gap: 8rpx;
	padding: 6rpx 20rpx;
	border-radius: 9999rpx;
	background: #D1FAE5;
	color: #065F46;
	font-size: 24rpx;
	font-weight: 600;
	margin-top: 16rpx;
}

.logout-btn {
	margin-top: 48rpx;
	color: $fe-danger !important;
}

.menu-card {
	background: #fff;
	border-radius: $fe-radius-md;
	margin-bottom: 32rpx;
	border: 1rpx solid $fe-border-light;
	overflow: hidden;
}

.menu-card__main {
	flex: 1;
	min-width: 0;
}

.menu-card__arrow {
	color: #94A3B8;
	flex-shrink: 0;
}
</style>