1049 lines
28 KiB
Vue
1049 lines
28 KiB
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: #E8101E;
|
||
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> |