detection-business/components/staffHeader/staffHeader.vue

<template>
	<view class="page-top" style="justifyContent: space-between">

		<!-- 管理组件显示的表头信息 -->
		<view class='management-title-class'>

			<!-- 头像 -->
			<view class="management-title-left" @click="showUserDetail">
				<view class="management-title-left-icon">
					<image v-if="customerInfo && customerInfo.avatar" :src="imageUrl+customerInfo.avatar"
						mode="aspectFill"></image>
					<image v-else src="../../static/icons/avatar.png" mode="aspectFill"></image>
				</view>

				<view class="management-title-left-text">
					<!-- 名称 -->
					<view class="text-top">{{loginTitle}}工作台</view>

					<!-- 姓名-->
					<view class="text-bottom" v-if="customerInfo && customerInfo.nickname">
						{{ customerInfo.nickname }}
					</view>
					<view v-if="customerInfo && customerInfo.roleNames && showRoleNames" class="text-bottom">
						{{customerInfo.roleNames}}
					</view>
				</view>
			</view>

			<!-- 消息 -->
			<view class="management-title-right" @click='gotoMsg'>
				<view class="management-title-right-icon">
					<image src="/static/imgs/xiaoxi.png" mode="aspectFit"></image>
					<view class="msg-num" v-if="noReadNum > 0">{{noReadNum}}</view>
				</view>
				<view class="management-title-right-text">消息</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		setUserInfo
	} from '../../utils/auth';
	import request from '../../utils/request';

	export default {
		props: {
			loginTitle: {
				type: String,
				default: '默认标题'
			},
			noReadNum: {
				type: Number,
				default: 0
			},
			showRoleNames: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				customerInfo: null,
				imageUrl: this.$baseImageUrl + '/',
			}
		},
		created() {
			this.loadCustomerInfo();
		},
		methods: {
			loadCustomerInfo() {
				try {
					if (Object.keys(getUserInfo()).length === 0) {
						request({
							url: '/company/staff/getByUserId',
							method: 'get',
							params: {
								id: uni.getStorageSync('userId')
							}
						}).then((res) => {
							setUserInfo(res.data.user)
						})
					}
					this.customerInfo = getUserInfo() || {};
					console.log('用户信息加载成功', this.customerInfo);
				} catch (e) {
					console.error('加载用户信息失败:', e);
					this.customerInfo = {
						name: '默认用户'
					};
				}
			},
			gotoMsg() {
				uni.navigateTo({
					url: '/pages/xiaoxi/notice?type=staff'
				})
			},
			showUserDetail() {
				uni.reLaunch({
					url: '/pages/staff/staff-my'
				});
			},
		}
	}
</script>

<style>
	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);
	}

	.management-title-class {
		padding: 0 32rpx;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.management-title-left {
		display: flex;
		align-items: center;
	}

	.management-title-left-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: white;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		/* 保证圆形头像内不溢出 */
	}

	.management-title-left-icon image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		/* H5 有效，小程序用 mode=aspectFill */
	}

	.management-title-left-text {
		padding-top: 20rpx;
	}

	.text-top {
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	.text-bottom {
		font-weight: 400;
		font-size: 16px;
		color: #FFFFFF;
	}

	.management-title-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.management-title-right-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.management-title-right-icon image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		/* 保持比例 */
	}

	.msg-num {
		position: absolute;
		right: -15rpx;
		top: -15rpx;
		color: white;
		background: #d74a43;
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		font-weight: 800;
		font-size: 11px;
		border-radius: 50%;
	}

	.management-title-right-text {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>