mrr.sj.front/pages/user/employee-detail.vue

<template>
	<view class="artisan-detail-page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="员工详情" :show-back="true" backgroundColor="#fff"></custom-navbar>

		<!-- 页面内容 -->
		<scroll-view class="detail-scroll" scroll-y="true" :style="{height: scrollViewHeight + 'px'}"
			@scrolltolower="loadMoreComments">
			<!-- 手艺人信息卡片 -->
			<view class="artisan-info-card">
				<view class="artisan-header">
					<!-- 左侧头像 -->
					<view class="artisan-avatar-container">
						<image :src="artisanInfo.head_photo || defaultAvatar" class="artisan-avatar" mode="aspectFill">
						</image>
					</view>

					<!-- 右侧信息 -->
					<view class="artisan-info">
						<!-- 第一行：名字和距离 -->
						<view class="name-row">
							<text class="artisan-name">{{ artisanInfo.name}}</text>
							<view class="distance-section">
								<image src="/static/images/icons/address_icon.png" class="distance-icon"></image>
								<text class="distance-text">{{ formatDistance(artisanInfo.distance) }}</text>
							</view>
						</view>

						<!-- 第二行：从业经历 -->
						<view class="experience-row">
							<text class="experience-text">从业经历</text>
							<image
								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0a9bcad4-a3b2-457f-bdfd-d659d6b1b084.png"
								class="experience-icon" @click="goQualification"></image>
							<text class="vertical-divider">|</text>
							<text class="join-text">入驻{{ formatWorkingYears(artisanInfo.working_years) }}</text>
						</view>

						<!-- 第三行：服务时间 -->
						<view class="service-time-row">
							<text class="service-time-label">服务时间:</text>
							<text class="service-time-value">{{ artisanInfo.default_times}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价部分 - 使用服务详情页的样式 -->
			<!-- <view class="comments-section" v-if="artisanId"> -->
			<!-- <view class="section-title">
					<text class="section-num">评价({{ commentCount || 0 }})</text>
					<view class="look-all" @click="goCommentList">
						<text class="look">查看全部</text>
						<image src="/static/images/arrow_right.png" class="enter-icon" mode="aspectFit"></image>
					</view>
				</view> -->

			<!-- 模拟评论数据展示 -->
			<!-- <view class="comment-list" v-if="showMockComments">
					<view class="comment-item" v-for="(comment, index) in mockComments" :key="index">
						<view class="comment-left">
							<view class="comment-header">
								<image :src="comment.avatar" class="user-avatar"></image>
								<view class="comment-user-info">
									<text class="user-name">{{comment.userName}}</text>
									<view class="user-two">
										<text class="comment-tab">{{comment.tab}}</text>
										<text class="comment-type">{{comment.type}}</text>
									</view>
								</view>
							</view>
							<text class="comment-content text-overflow">{{comment.content}}</text>
						</view>
						<view class="comment-images" v-if="comment.images && comment.images.length">
							<image 
								:src="comment.images[0]" 
								mode="aspectFill"
								class="comment-image"
							></image>
						</view>
					</view>
				</view> -->

			<!-- 	<evaluationList 
					:order_shop_id="parseInt(artisanId)" 
					:order_shop_type="3" 
					@count-change="handleCommentCountChange"
					@goList="goCommentList"
					:showHeader="false"
					:limit="3"
				></evaluationList> -->
			<evaluationList :evaluated_id="artisanInfo.id" :evaluated_type="1" v-if="artisanInfo.id" @goList="goList">
			</evaluationList>
			<!-- </view> -->

			<!-- 作品部分 等接口出来完善-->
			<!-- <view class="works-section">
				<view class="section-header">
					<text class="section-title">作品 ({{ worksList.length || 0 }})</text>
				</view> -->

			<!-- 作品网格 -->
			<!-- <view class="works-grid" v-if="worksList.length > 0">
					<view 
						v-for="(work, index) in worksList" 
						:key="work.id || index" 
						class="work-item"
						@click="previewWorkImage(work, index)"
					>
						<image 
							:src="work.image || work.url" 
							class="work-image"
							mode="aspectFill"
						></image>
					</view>
				</view> -->

			<!-- 空状态 -->
			<!-- <view v-if="!loadingWorks && worksList.length === 0" class="empty-works">
					<image 
						src="/static/images/common/empty.png" 
						class="empty-image"
					></image>
					<text class="empty-text">暂无作品</text>
				</view>
			</view> -->

			<!-- 加载状态 -->
			<!-- <view class="loading-status">
				<text v-if="loadingComments" class="loading-text">加载中...</text>
				<text v-if="commentsFinished && commentList.length > 0" class="no-more-text">~ 暂时只有这些了 ~</text>
			</view> -->
		</scroll-view>

		<!-- 底部电话咨询按钮 -->
		<!-- 		<view class="bottom-bar">
			<view class="phone-consult-btn" @click="callArtisan">
				<text class="phone-text">电话咨询</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import request from "@/utils/request";
	import evaluationList from '@/pages/evaluate/components/evaluationList.vue';

	export default {
		components: {
			evaluationList
		},

		data() {
			return {
				artisanId: null, // 手艺人ID
				artisanInfo: {}, // 手艺人信息
				scrollViewHeight: 0, // 滚动区域高度

				// 默认头像
				defaultAvatar: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40",

				// 评价相关
				commentCount: 0, // 评价总数
				commentList: [], // 评价列表
				loadingComments: false, // 评论加载状态
				commentsFinished: false, // 评论是否加载完毕
				commentPage: 1, // 评论当前页码
				commentLimit: 10, // 评论每页数量

				// 作品相关
				worksList: [], // 作品列表
				loadingWorks: false, // 作品加载状态
				worksFinished: false, // 作品是否加载完毕
				workPage: 1, // 作品当前页码
				workLimit: 12, // 作品每页数量

				// 模拟评论数据
				showMockComments: true, // 是否显示模拟评论数据
				mockComments: [{
						userName: '七喜',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40',
						time: '2025年9月12日',
						content: '上周去家附近的"甜糯美甲"做款式，体验感远超预期！店面不大但收拾得很整洁，浅橙色墙面绿植...',
						tab: '购买 #小蛮腰小蛮腰小蛮腰小蛮腰...',
						type: '还可以 4.0分'
					},
					{
						userName: '默认名称默认头像',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40',
						time: '2025年8月20日',
						content: '我带了张碎钻法式甲的网图，美甲师静静看了会儿没直接说"做不了"，而是建议："你指甲偏短..."',
						tab: '购买 #小蛮腰',
						type: '一般 3.0分'
					},
					{
						userName: '用户123',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40',
						time: '2025年7月15日',
						content: '服务态度特别好，技术也很专业，做出来的效果和我想象中的一模一样，下次还会再来！',
						tab: '购买 #法式美甲',
						type: '非常满意 5.0分'
					},
					{
						userName: '美甲爱好者',
						avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40',
						time: '2025年6月28日',
						content: '颜色搭配得很漂亮，细节处理得很到位，整个美甲过程非常舒适，强烈推荐！',
						tab: '购买 #渐变美甲',
						type: '超出期待 4.5分'
					}
				]
			};
		},

		onLoad(options) {
			// 从路由参数获取手艺人ID
			if (options.id) {
				this.artisanId = options.id;
			}

			console.log("接收到的员工ID:", this.artisanId, "类型:", typeof this.artisanId);

			// 计算滚动区域高度
			this.calculateScrollHeight();

			// 获取手艺人详情
			this.getArtisanDetail();

			// 获取作品列表
			this.getWorksList();

			// 设置模拟评论数量
			this.commentCount = 4; // 根据图片显示的数量
		},

		onReady() {
			// 页面加载完成后再计算一次高度，确保准确
			setTimeout(() => {
				this.calculateScrollHeight();
			}, 100);
		},

		methods: {
			goList() {
				uni.navigateTo({
					url: `/pages/evaluate/evaluationList?evaluated_id=${this.artisanInfo.id}&evaluated_type=1`
				})
			},
			// 计算滚动区域高度
			calculateScrollHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 获取导航栏高度，假设为44px（可以根据实际情况调整）
				const navBarHeight = 44;
				// 状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight || 0;
				// 底部栏高度
				const bottomBarHeight = 100;
				// 计算可用高度
				this.scrollViewHeight = systemInfo.windowHeight - (navBarHeight + statusBarHeight + bottomBarHeight);
			},

			// 获取手艺人详情
			getArtisanDetail() {
				if (!this.artisanId) {
					console.error("手艺人ID为空");
					return;
				}

				// 获取用户位置信息
				let addressRes = {};
				let userAdrees = uni.getStorageSync("userAdrees");
				if (userAdrees) {
					addressRes = userAdrees.addressRes;
				} else {
					addressRes = getApp().globalData.addressRes;
				}
				let userLat = addressRes?.latitude;
				let userLngz = addressRes?.longitude;

				console.log("用户位置信息:", {
					userLat,
					userLngz
				});

				const params = {
					id: this.artisanId,
					userLat,
					userLngz
				};

				console.log("请求参数:", params);

				request
					.post("/user/syrdetail", params)
					.then((res) => {
						console.log("手艺人详情接口返回:", res);

						if (res.state === 1) {
							this.artisanInfo = res.data || {};

							// 格式化距离
							if (this.artisanInfo.distance) {
								this.artisanInfo.distance = parseFloat(this.artisanInfo.distance).toFixed(2);
								console.log("格式化后的距离:", this.artisanInfo.distance);
							} else {
								console.log("接口没有返回distance字段");
							}

							// 使用default_times作为服务时间
							if (this.artisanInfo.default_times && this.artisanInfo.default_times.trim() !== '') {
								this.artisanInfo.service_time = this.artisanInfo.default_times;
								console.log("使用default_times作为服务时间:", this.artisanInfo.service_time);
							} else {
								this.artisanInfo.service_time = '09:00-21:00';
								console.log("未找到服务时间，使用默认值");
							}

							// 处理从业年限
							if (this.artisanInfo.working_years && this.artisanInfo.working_years !== "0年1个月") {
								console.log("使用接口返回的从业年限:", this.artisanInfo.working_years);
							} else {
								if (this.artisanInfo.applyyes_time) {
									// 处理日期字符串：将空格替换为T，兼容所有浏览器的Date解析
									const timeStr = this.artisanInfo.applyyes_time.replace(' ', 'T');
									const createdDate = new Date(timeStr);

									// 增加日期合法性校验，避免解析失败导致的计算错误
									if (isNaN(createdDate.getTime())) {
										this.artisanInfo.working_years = "0年0个月";
										console.log("日期格式解析失败，从业年限默认0年0个月");
										return;
									}

									const now = new Date();

									// 计算年数和月数差值
									const years = now.getFullYear() - createdDate.getFullYear();
									const months = now.getMonth() - createdDate.getMonth();

									// 总月数（处理负数情况，比如创建日期还没到当前月/年）
									let totalMonths = years * 12 + months;
									if (totalMonths <= 0) totalMonths = 1;

									// 格式化成年和月的展示形式
									const formattedYears = Math.floor(totalMonths / 12);
									const formattedMonths = totalMonths % 12;

									this.artisanInfo.working_years = `${formattedYears}年${formattedMonths}个月`;
									console.log("重新计算的从业年限:", this.artisanInfo.working_years);
								} else {
									this.artisanInfo.working_years = "0年1个月";
								}
							}

							console.log("处理后的手艺人信息:", this.artisanInfo);
						} else {
							console.error("获取手艺人详情失败:", res);
							uni.showToast({
								title: res.msg || '获取手艺人详情失败',
								icon: 'none'
							});
						}
					})
					.catch((err) => {
						console.error("获取手艺人详情失败:", err);
						uni.showToast({
							title: '网络错误，请重试',
							icon: 'none'
						});
					});
			},

			// 获取作品列表
			getWorksList() {
				if (this.loadingWorks || this.worksFinished || !this.artisanId) {
					return;
				}

				this.loadingWorks = true;

				const params = {
					artisan_id: this.artisanId,
					page: this.workPage,
					limit: this.workLimit
				};

				console.log("请求作品列表参数:", params);

				setTimeout(() => {
					// 模拟数据
					const mockWorks = [{
							id: 1,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 2,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 3,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 4,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 5,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 6,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 7,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 8,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 9,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
						{
							id: 10,
							image: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png"
						},
					];

					// 如果是第一页，直接赋值；否则追加数据
					if (this.workPage === 1) {
						this.worksList = mockWorks;
					} else {
						this.worksList = [...this.worksList, ...mockWorks];
					}

					// 判断是否已加载完毕
					if (mockWorks.length < this.workLimit) {
						this.worksFinished = true;
					} else {
						this.workPage += 1;
					}

					this.loadingWorks = false;

					// 实际接口调用示例（注释掉，用的时候打开）：
					// request
					// 	.post("/user/syrWorksList", params)
					// 	.then((res) => {
					// 		console.log("作品列表接口返回:", res);
					// 		
					// 		if (res.state === 1 || res.code === 200) {
					// 			const resultData = res.data || {};
					// 			const list = resultData.list || [];
					// 			const total = resultData.count || list.length || 0;
					// 			
					// 			// 格式化作品数据
					// 			const formattedList = this.formatWorksList(list);
					// 			
					// 			// 如果是第一页，直接赋值；否则追加数据
					// 			if (this.workPage === 1) {
					// 				this.worksList = formattedList;
					// 			} else {
					// 				this.worksList = [...this.worksList, ...formattedList];
					// 			}
					// 			
					// 			// 判断是否已加载完毕
					// 			if (list.length < this.workLimit) {
					// 				this.worksFinished = true;
					// 			} else {
					// 				this.workPage += 1;
					// 			}
					// 		} else {
					// 			console.error("获取作品列表失败:", res);
					// 		}
					// 	})
					// 	.catch((err) => {
					// 		console.error("获取作品列表失败:", err);
					// 	})
					// 	.finally(() => {
					// 		this.loadingWorks = false;
					// 	});
				}, 500);
			},

			// 格式化作品列表数据
			formatWorksList(list) {
				if (!list || list.length === 0) {
					return [];
				}

				return list.map(item => {
					return {
						id: item.id || '',
						image: item.image_url || item.image || item.url,
						title: item.title || item.name || '作品',
						time: item.create_time || item.created_at || item.time,
						description: item.description || item.content || ''
					};
				});
			},

			// 加载更多评论
			loadMoreComments() {
				// 如果evaluationList组件有加载更多功能，这里可以触发
				// 由于evaluationList组件内部已经处理了加载更多，这里可以不做处理
			},

			// 处理评论数量变化
			handleCommentCountChange(count) {
				this.commentCount = count;
			},

			// 跳转到评论列表页面
			goCommentList() {
				uni.navigateTo({
					url: `/pages/evaluate/evaluationList?order_shop_id=${this.artisanId}&order_shop_type=3`
				});
			},

			// 格式化距离显示
			formatDistance(distance) {
				if (!distance && distance !== 0) {
					return "距离未知";
				}

				// 如果是字符串，尝试转换为数字
				const numDistance = typeof distance === 'string' ? parseFloat(distance) : distance;

				if (isNaN(numDistance)) {
					return distance;
				}

				// 保留两位小数
				return `${numDistance.toFixed(2)}Km`;
			},

			// 格式化从业年限显示
			formatWorkingYears(yearsStr) {
				// 如果已经是格式化好的字符串，直接返回
				if (typeof yearsStr === 'string') {
					return yearsStr;
				}

				// 否则尝试转换
				try {
					// 假设是月份数
					const months = parseInt(yearsStr);
					if (!isNaN(months)) {
						const y = Math.floor(months / 12);
						const m = months % 12;
						return `${y}年${m}个月`;
					}
				} catch (e) {
					console.error("格式化从业年限失败:", e);
				}

				return "0年0个月";
			},

			// 格式化作品时间
			formatWorkTime(timeStr) {
				if (!timeStr) return "";

				// 如果是时间戳，转换为日期
				if (typeof timeStr === 'number') {
					const date = new Date(timeStr * 1000);
					return `${date.getMonth() + 1}月${date.getDate()}日`;
				}

				// 如果是日期字符串，提取月日
				const match = timeStr.match(/(\d{1,2})月(\d{1,2})日/);
				if (match) {
					return `${match[1]}月${match[2]}日`;
				}

				// 如果是完整日期，提取月日
				const dateMatch = timeStr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/);
				if (dateMatch) {
					return `${parseInt(dateMatch[2])}月${parseInt(dateMatch[3])}日`;
				}

				return timeStr;
			},

			// 跳转到资质页面
			goQualification() {
				// 跳转到资质页面，传递手艺人ID
				uni.navigateTo({
					url: `/pages/user/qualifications?id=${this.artisanId}`
				});
			},

			// 预览作品图片
			previewWorkImage(work, index) {
				// 提取所有作品图片URL
				const imageUrls = this.worksList
					.filter(item => item.image || item.url)
					.map(item => item.image || item.url);

				if (imageUrls.length > 0) {
					uni.previewImage({
						urls: imageUrls,
						current: index
					});
				}
			},

			// 电话咨询
			callArtisan() {
				if (this.artisanInfo.account || this.artisanInfo.second_phone) {
					const phoneNumber = this.artisanInfo.account || this.artisanInfo.second_phone;
					uni.makePhoneCall({
						phoneNumber: phoneNumber.toString()
					});
				} else {
					uni.showToast({
						title: '暂无联系电话',
						icon: 'none'
					});
				}
			},

			// 下拉刷新
			onPullDownRefresh() {
				// 重置状态
				this.workPage = 1;
				this.worksFinished = false;
				this.worksList = [];

				// 重新加载数据
				this.getArtisanDetail();
				this.getWorksList();

				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}
		}
	};
</script>

<style lang="less">
	.artisan-detail-page {
		background-color: #f5f5f5;
		min-height: 100vh;

		.detail-scroll {
			width: 95%;
			padding: 20rpx;

			/* 手艺人信息卡片 */
			.artisan-info-card {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

				.artisan-header {
					display: flex;
					align-items: flex-start;

					.artisan-avatar-container {
						margin-right: 30rpx;

						.artisan-avatar {
							width: 150rpx;
							height: 150rpx;
							border-radius: 50%;
							background-color: #f0f0f0;
						}
					}

					.artisan-info {
						flex: 1;

						.name-row {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;

							.artisan-name {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 34rpx;
								color: #333333;
								line-height: 48rpx;
								text-align: left;
								font-style: normal;
							}

							.distance-section {
								display: flex;
								align-items: center;

								.distance-icon {
									width: 20rpx;
									height: 23rpx;
									margin-right: 6rpx;
								}

								.distance-text {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									line-height: 33rpx;
								}
							}
						}

						.experience-row {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;

							.experience-text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								line-height: 37rpx;
								margin-right: 10rpx;
							}

							.experience-icon {
								width: 68rpx;
								height: 24rpx;
								margin-right: 10rpx;
							}

							.vertical-divider {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #E9E9E9;
								line-height: 37rpx;
								border-radius: 1rpx;
								margin: 0 10rpx;
							}

							.join-text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								line-height: 33rpx;
								text-align: left;
								font-style: normal;
							}
						}

						.service-time-row {
							display: flex;
							align-items: center;

							.service-time-label {
								margin-right: 10rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #666666;
								line-height: 37rpx;
								text-align: left;
								font-style: normal;
							}

							.service-time-value {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #666666;
								line-height: 37rpx;
							}
						}
					}
				}
			}

			/* 评价部分 - 采用服务详情页样式 */
			.comments-section {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 24rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

				.section-title {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;


					.section-num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}

					.look-all {
						display: flex;
						flex-flow: row nowrap;
						justify-content: flex-end;
						align-items: center;

						.look {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
							line-height: 33rpx;
							text-align: left;
							font-style: normal;
						}

						.enter-icon {
							width: 10rpx;
							height: 19rpx;
							margin-left: 8rpx;
							margin-top: 2rpx;
						}
					}
				}

				/* 模拟评论样式 */
				.comment-list {
					.comment-item {
						padding: 24rpx 0;
						display: flex;
						flex-flow: row nowrap;
						justify-content: space-between;
						align-items: flex-start;

						&:last-child {
							padding-bottom: 0rpx;
						}

						.comment-left {
							flex: 1;
							margin-right: 20rpx;

							.comment-header {
								display: flex;
								align-items: center;
								margin-bottom: 14rpx;

								.user-avatar {
									width: 64rpx;
									height: 64rpx;
									border-radius: 32rpx;
									margin-right: 14rpx;
									background-color: #f0f0f0;
								}

								.comment-user-info {
									flex: 1;

									.user-name {
										font-size: 28rpx;
										color: #3D3D3D;
										margin-bottom: 8rpx;
										display: block;
									}

									.user-two {
										display: flex;
										align-items: center;

										.comment-tab {
											font-size: 20rpx;
											color: #666666;
											margin-right: 8rpx;
										}

										.comment-type {
											font-size: 20rpx;
											color: #999999;
										}
									}
								}
							}

							.comment-content {
								font-size: 24rpx;
								color: #333333;
								line-height: 1.5;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.comment-images {
							width: 154rpx;
							height: 154rpx;
							background-color: #f0f0f0;
							border-radius: 8rpx;
							overflow: hidden;

							.comment-image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				::v-deep .evaluation-list-container {
					padding: 0;

					.section-header {
						// display: none; /* 隐藏evaluationList组件的标题，因为外部标题了 */
					}
				}
			}

			/* 作品部分 */
			.works-section {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				margin-bottom: 40rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

				.section-header {
					margin-bottom: 20rpx;

					.section-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}
				}

				.works-grid {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 20rpx;

					.work-item {
						.work-image {
							border-radius: 20rpx;
							width: 190rpx;
							height: 257rpx;
							background-color: #f0f0f0;
						}
					}
				}

				.empty-works {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 60rpx 0;

					.empty-image {
						width: 150rpx;
						height: 150rpx;
						margin-bottom: 20rpx;
					}

					.empty-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						line-height: 37rpx;
					}
				}
			}

			/* 加载状态 */
			.loading-status {
				padding: 40rpx 0;
				text-align: center;

				.loading-text {
					font-size: 26rpx;
					color: #999;
				}

				.no-more-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #CECECE;
					line-height: 33rpx;
				}
			}
		}

		/* 底部电话咨询按钮 */
		.bottom-bar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0rpx;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);

			.phone-consult-btn {
				width: 448rpx;
				height: 86rpx;
				margin-left: 240rpx;
				background: #FF4767;
				border-radius: 43rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.phone-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 15rpx;
				}

				.phone-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 45rpx;
				}
			}
		}
	}
</style>