mrr.sj.front/pages/shop/staff/staffDetail.vue

<template>
	<view class="profile-page">
		<custom-navbar title="员工详情" :showUser="true" backgroundColor="#fff" titleColor="#000000"
			borderBottom="none"></custom-navbar>
		<!-- 头部信息区 -->
		<view class="header">
			<!-- 头像 -->
			<image class="avatar" :src="syrInfo.head_photo" mode="aspectFill"></image>
			<!-- 名称+服务时间 -->
			<view class="header-info">
				<view class="name">
					<text>{{ syrInfo.name }}</text>
					<view class="service-link" @click="goServiceList">
						<text>已分服务项目</text>
						<image src="/static/images/icons/right_gray7.png" class="service-link-icon"></image>
					</view>
				</view>
				<view class="service-time">服务时间：{{ syrInfo.default_times || "暂无数据" }}</view>
			</view>
		</view>

		<!-- 所在地模块 -->
		<view class="section">
			<view class="section-title">所在地</view>
			<view class="section-content line">{{ syrInfo.address || "暂无地址信息" }}</view>
			<view class="section-title">擅长</view>
			<view class="tags line">
				<view class="tag">美容</view>
				<view class="tag">理疗</view>
				<view class="tag">纹绣</view>
				<view class="tag">美睫美甲</view>
			</view>
			<view class="section-title">简介</view>
			<view class="section-content">
				{{ syrInfo.detail || "暂无简介" }}
			</view>
		</view>

		<!-- 健康证模块：先判断health_card是否存在 -->
		<view class="zs-title">健康证</view>
		<view class="section flex-row-center-center" v-if="syrInfo.health_card"
			@click="handlePreview(syrInfo.health_card)">
			<image class="cert-img" :src="syrInfo.health_card" mode="widthFix"></image>
		</view>
		<!-- 无健康证时的兜底提示 -->
		<view class="section flex-row-center-center" v-else>
			<text class="no-cert">暂无健康证</text>
		</view>

		<!-- 资质证书模块：先判断qualifications数组是否有值 -->
		<view class="zs-title">资质证书</view>
		<view class="section flex-row-center-center" v-if="syrInfo.qualifications && syrInfo.qualifications.length"
			@click="handlePreview(syrInfo.qualifications[0])">
			<image class="cert-img" :src="syrInfo.qualifications[0]" mode="widthFix"></image>
		</view>
		<!-- 无资质证书时的兜底提示 -->
		<view class="section flex-row-center-center" v-else>
			<text class="no-cert">暂无资质证书</text>
		</view>

		<!-- 底部返回按钮 -->
		<view class="return-btn" @click="goBack">返回</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				syrid: "",
				userInfo: {},
				bindsyr: {},
				syrInfo: {
					qualifications: [], // 资质证书默认空数组
					health_card: "" // 健康证默认空字符串
				},
			};
		},
		async onLoad(options) {
			if (options.syrid) {
				this.syrid = Number(options.syrid);
			}
			let type = 3;
			let result = await request.post("/user/getuser", {
				type,
			});
			this.userInfo = result.data;
			this.getbindsyr();
		},
		methods: {
			goServiceList() {
				uni.navigateTo({
					url: `/pages/shop/staff/serviceList?syrid=${this.syrid}&isBack=1`,
				});
			},
			goBack() {
				uni.navigateBack();
			},
			// 预览图片
			handlePreview(src) {
				uni.previewImage({
					current: 0,
					urls: [src],
				});
			},
			getbindsyr() {
				let obj = {
					sjid: this.userInfo.id,
					syrid: this.syrid,
				};
				// 获取绑定的服务员信息
				request.post("/sj/getbindsyr", obj).then((res) => {
					if (res.code == 200) {
						this.bindsyr = res.data;
						this.syrInfo = res.data.syr;
					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.profile-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 60rpx;

		// 头部信息区
		.header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			margin: 20rpx;
			border-radius: 20rpx;

			.avatar {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.header-info {
				flex: 1;

				.name {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					margin-bottom: 19rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.service-link {
						padding: 9rpx 20rpx;
						border-radius: 25rpx;
						border: 2rpx solid rgba(232, 16, 30, 0.28);
						font-weight: 400;
						font-size: 24rpx;
						color: #FF4767;
						line-height: 32rpx;
						text-align: right;
						font-style: normal;

						.service-link-icon {
							width: 9rpx;
							height: 16rpx;
							margin-left: 8rpx;
						}
					}
				}

				.service-time {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		// 通用模块样式
		.section {
			background-color: #fff;
			padding: 30rpx;
			margin: 20rpx;
			border-radius: 20rpx;

			.section-title {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
				margin-bottom: 17rpx;
			}

			.section-content {
				font-weight: 400;
				font-size: 26rpx;
				color: #5b5b5b;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}

			// 擅长标签
			.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;

				.tag {
					padding: 0 8rpx;
					border-radius: 16rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
					height: 30rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
				}
			}

			.line {
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #f5f3f3;
			}
		}

		.zs-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			margin: 33rpx 20rpx 20rpx 20rpx;
		}

		.cert-img {
			width: 200rpx;
			height: 200rpx;
		}

		// 底部返回按钮
		.return-btn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #f03838;
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			margin: 40rpx auto 0;
		}
	}
</style>