1475 lines
39 KiB
Vue
1475 lines
39 KiB
Vue
<template>
|
||
<view class="detail-page">
|
||
<custom-navbar title="店铺主页" :show-back="true" backgroundColor="#fff" :show-headle="true"
|
||
headleSrc="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/3b04f0c1-a55e-4658-9de5-22175cce9bbc.png"
|
||
@onHeadleClick="goInvite"></custom-navbar>
|
||
<!-- 手艺人顶部首图 -->
|
||
<view class="main-image-section">
|
||
<!-- <swiper class="banner-swiper" circular :indicator-dots="false" :autoplay="false" :interval="3000"
|
||
:duration="500" indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, 0.6)">
|
||
<swiper-item @click="previewImage()">
|
||
<video :src="sjdetail.video" v-if="sjdetail.video" id="myVideo" class="banner-image"
|
||
:autoplay="true" :controls="false" :muted="true" :loop="true" enable-play-gesture="true"
|
||
object-fit="cover">
|
||
</video>
|
||
<image v-else :src="headPhoto" mode="aspectFill" class="banner-image"
|
||
referrer="no-referrer">
|
||
</image>
|
||
|
||
</swiper-item>
|
||
</swiper> -->
|
||
<view class="banner-swiper">
|
||
<video :src="imgVideoList.main_video.url" v-if="imgVideoList.main_video" id="myVideo"
|
||
class="banner-image" :autoplay="true" :controls="false" :muted="true" :loop="true"
|
||
enable-play-gesture="true" object-fit="cover">
|
||
</video>
|
||
<image v-else-if="!imgVideoList.main_video && imgVideoList.main_img" :src="imgVideoList.main_img.url"
|
||
mode="aspectFill" class="banner-image" referrer="no-referrer">
|
||
</image>
|
||
<image v-else src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9682f8ef-cb0c-47df-a42e-1795bd1f625b.png"
|
||
mode="aspectFill" class="banner-image" referrer="no-referrer">
|
||
</image>
|
||
<cover-view class="album flex-row-center" v-if="imgVideoList.main_video || imgVideoList.main_img" @tap="goAlbum">
|
||
<cover-view class="album-left flex-row-center-center">
|
||
{{ imgVideoList.main_video?"视频":"图片" }}
|
||
</cover-view>
|
||
<cover-view class="album-line">
|
||
</cover-view>
|
||
<cover-view class="album-right flex-row-center-center" >
|
||
<cover-view class="album-right-text">
|
||
<cover-view>相册</cover-view>
|
||
</cover-view>
|
||
<cover-image src="/static/images/icons/right7_13.png" class="album-right-img"></cover-image>
|
||
</cover-view>
|
||
</cover-view>
|
||
</view>
|
||
</view>
|
||
<!-- 手艺人信息卡片 -->
|
||
<view class="detail-info">
|
||
<view class="detail-info-user">
|
||
<view class="detail-info-user__heard">
|
||
<image :src="headPhoto" mode="aspectFill" class="detail-info-user__heard__photo"
|
||
referrer="no-referrer"></image>
|
||
<view class="detail-info-user__heard__name">
|
||
<view class="detail-info-user__heard__name__text">
|
||
{{ sjdetail.name }}
|
||
</view>
|
||
<view class="detail-info-user__heard__name__sales" v-if="sjdetail.all_sales_num >= 0">
|
||
<text class="detail-info-user__heard__name__sales__text1">
|
||
全部销量
|
||
</text>
|
||
<text class="detail-info-user__heard__name__sales__text2">
|
||
{{ sjdetail.all_sales_num }}
|
||
</text>
|
||
<text class="detail-info-user__heard__name__sales__text1">
|
||
单
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 联系客服按钮 -->
|
||
<!-- <view class="contact-customer-btn" @click="contactCustomer">
|
||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2cee17d5-0603-421a-8956-d698a2e8c7aa.png" class="contact-customer-icon"></image>
|
||
<text>联系客服</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="detail-info-user__time">
|
||
<view class="detail-info-user__time__left">
|
||
<text class="detail-info-user__time__left__text1">营业时间</text><text
|
||
class="detail-info-user__time__left__text2">{{
|
||
sjdetail.business_time
|
||
}}</text>
|
||
</view>
|
||
<view class="detail-info-user__time__right" @click="goInformation">
|
||
<text>经营信息</text>
|
||
<image src="/static/images/shop/right.png" class="detail-info-user__time__right__img"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-info-user__tabs">
|
||
<view v-for="(item, index) in tabsPopList" :key="index" class="detail-info-user__tabs__tab">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 修改后的联系方式区域 -->
|
||
<view class="detail-info-user__connect">
|
||
<!-- 第一行：地址和距离 -->
|
||
<view class="connect-row address-row">
|
||
<view class="address-section" @click="openMap">
|
||
<view class="address-content">
|
||
<text class="address-text">{{ sjdetail.address }}</text>
|
||
<image src="/static/images/shop/right.png" class="address-arrow"></image>
|
||
</view>
|
||
</view>
|
||
<view class="distance-section" v-if="sjdetail.distance">
|
||
<!-- <text class="distance-text">距您</text> -->
|
||
<image src="/static/images/icons/address_icon.png" class="address-icon"></image>
|
||
<text class="distance-value">{{ sjdetail.distance.toFixed(2) }}Km</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 第二行：电话和图标 -->
|
||
<view class="connect-row phone-row">
|
||
<view class="phone-section" @click="contactService(sjdetail.legal_phone)">
|
||
<view class="phone-content">
|
||
<text class="phone-label">电话</text>
|
||
<text class="phone-number">{{ sjdetail.legal_phone }}</text>
|
||
<image src="/static/images/shop/right.png" class="phone-arrow"></image>
|
||
</view>
|
||
</view>
|
||
<view class="icon-section">
|
||
<image @click="openMap" src="/static/images/shop/address.png" class="nav-icon"></image>
|
||
<image @click="contactService(sjdetail.legal_phone)" src="/static/images/shop/phone.png"
|
||
class="phone-icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<image src="/static/images/syr/banner.png" mode="widthFix" class="detail-info-user__banner"
|
||
referrer="no-referrer"></image>
|
||
|
||
<!-- 营业执照选项 -->
|
||
<!-- <view class="business-license-section" @click="viewBusinessLicense">
|
||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f083ec38-a325-48a2-a66b-e8ea34b63648.png" class="license-icon"></image>
|
||
<view class="license-info">
|
||
<text class="license-title">营业执照</text>
|
||
</view>
|
||
<view class="license-view">
|
||
<text>点击查看</text>
|
||
<image src="/static/images/shop/right.png" class="license-arrow"></image>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 卡片外的切换标签（无背景） -->
|
||
<view class="shop-tabs-outside">
|
||
<view :class="['shop-tab-outside', activeTab === 'projects' ? 'active' : '']"
|
||
@click="scrollToSection('projects-section')">
|
||
全部项目
|
||
</view>
|
||
<view :class="['shop-tab-outside', activeTab === 'artisans' ? 'active' : '']"
|
||
@click="scrollToSection('artisans-section')" v-if="artisanList.length > 0">
|
||
手艺人
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 全部项目部分 -->
|
||
<view id="projects-section" class="detail-info-shop">
|
||
<!-- 卡片内显示当前激活的标签名称（红色，有背景） -->
|
||
<!-- <view class="shop-tabs-inside">
|
||
<view class="shop-tab-inside active">
|
||
全部项目
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 全部项目页面 -->
|
||
<projectTabs :tabsPopList="tabsPopList" @clickTap="clickTap" @clickPopTap="clickPopTap"></projectTabs>
|
||
<CommonList background="transparent" ref="groupRef" :apiUrl="'/user/getserverlist'"
|
||
:listScrollHeight="`${count * 200 + 80}rpx`" @load-success-all="listSuccess">
|
||
<template #listData="{ list }">
|
||
<serviceCardList :list="list"></serviceCardList>
|
||
</template>
|
||
|
||
<!-- 空数据状态 -->
|
||
<template #empty>
|
||
<noData></noData>
|
||
</template>
|
||
</CommonList>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 手艺人展示板块（只有有手艺人时才显示） -->
|
||
<view id="artisans-section" class="artisan-showcase-section" v-if="artisanList.length > 0 || showMockArtisans">
|
||
<view class="showcase-header">
|
||
<text class="showcase-title">手艺人展示({{ displayArtisanCount }})</text>
|
||
<view class="view-all-btn" @click="viewAllArtisans">
|
||
<text>查看全部</text>
|
||
<image src="/static/images/shop/right.png" class="view-all-arrow"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="showcase-scroll" scroll-x="true" :scroll-left="scrollLeft" show-scrollbar="false">
|
||
<view class="showcase-list">
|
||
<view v-for="(artisan, index) in displayArtisanList" :key="index" class="showcase-item"
|
||
@click="viewArtisanDetail(artisan)">
|
||
<image :src="artisan.avatar" class="showcase-avatar" mode="aspectFill"></image>
|
||
<text class="showcase-name">{{ artisan.name }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
<evaluationList :evaluated_id="sjdetail.id" :evaluated_type="2" v-if="sjdetail.id" @goList="goList" style="margin-top: 20rpx;">
|
||
</evaluationList>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
handleImgSize,
|
||
handleImgSizeUni
|
||
} from '@/utils/service.js'
|
||
import _public from "@/utils/public";
|
||
import permissionUtils from "@/utils/per";
|
||
import CommonList from "@/components/common/CommonList.vue";
|
||
import request from "../../utils/request";
|
||
import projectTabs from "./components/project-tabs.vue";
|
||
import serviceCardList from "./components/serviceCardList.vue";
|
||
import evaluationList from '@/pages/evaluate/components/evaluationList';
|
||
export default {
|
||
components: {
|
||
projectTabs,
|
||
CommonList,
|
||
serviceCardList,
|
||
evaluationList
|
||
},
|
||
data() {
|
||
return {
|
||
imgVideoList: {},
|
||
count: 1,
|
||
sjdetail: {
|
||
qualifications: [],
|
||
},
|
||
distance: 12.31, //距离
|
||
queryData: {
|
||
publish_user_id: null,
|
||
server_kind: 2,
|
||
page: 1,
|
||
limit: 10,
|
||
order_type: 1,
|
||
},
|
||
tabsPopList: [],
|
||
showPopup: false,
|
||
userObj: {},
|
||
|
||
autoShare: false,
|
||
autoShareExecuted: false,
|
||
|
||
activeTab: 'projects', // 当前激活的标签，用于样式控制
|
||
artisanList: [], // 手艺人列表
|
||
artisanLoading: false, // 手艺人加载状态
|
||
artisanFinished: false, // 手艺人是否已加载完毕
|
||
artisanPage: 1, // 手艺人当前页码
|
||
artisanLimit: 10, // 手艺人每页数量
|
||
artisanTotal: 0, // 手艺人总数量
|
||
|
||
// 手艺人滚动相关
|
||
scrollLeft: 0,
|
||
|
||
// 手艺人的模拟数据
|
||
showMockArtisans: false, // 是否显示模拟手艺人数据（调试时设为true，正式时设为false）
|
||
mockArtisanList: [{
|
||
id: 1,
|
||
name: '张美甲师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '李美睫师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '王美容师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '刘纹绣师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '陈造型师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '赵皮肤师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 7,
|
||
name: '钱美发师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
},
|
||
{
|
||
id: 8,
|
||
name: '孙按摩师',
|
||
avatar: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png',
|
||
}
|
||
]
|
||
};
|
||
},
|
||
computed: {
|
||
headPhoto() {
|
||
if (this.sjdetail.head_photo == "-" || !this.sjdetail.head_photo) {
|
||
return `https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40`
|
||
} else {
|
||
return this.sjdetail.head_photo
|
||
}
|
||
},
|
||
// 显示的艺人列表
|
||
displayArtisanList() {
|
||
// 如果有真实数据且不为空，显示真实数据
|
||
if (this.artisanList.length > 0) {
|
||
return this.artisanList;
|
||
}
|
||
// 否则显示模拟数据
|
||
return this.mockArtisanList;
|
||
},
|
||
// 显示的艺人数量
|
||
displayArtisanCount() {
|
||
if (this.artisanList.length > 0) {
|
||
return this.artisanList.length;
|
||
}
|
||
return this.mockArtisanList.length;
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log(options);
|
||
this.queryData.publish_user_id = options.id;
|
||
|
||
// 检查是否需要自动分享
|
||
if (options.autoShare === '1') {
|
||
this.autoShare = true;
|
||
}
|
||
|
||
let userAdrees = uni.getStorageSync("userAdrees");
|
||
if (userAdrees) {
|
||
this.userObj.userLngz = userAdrees.longitude;
|
||
this.userObj.userLat = userAdrees.latitude;
|
||
} else {
|
||
this.userObj.userLngz = "117.330043";
|
||
this.userObj.userLat = "38.372266";
|
||
}
|
||
this.userObj.id = options.id;
|
||
this.getShopDetail();
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
|
||
// 获取手艺人列表
|
||
this.getArtisanList();
|
||
this.getImgVideoList();
|
||
},
|
||
methods: {
|
||
goList() {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluate/evaluationList?evaluated_id=${this.sjdetail.id}&evaluated_type=2`
|
||
})
|
||
},
|
||
goAlbum() {
|
||
console.log(11111)
|
||
uni.navigateTo({
|
||
url: `/pages/album/index?id=${this.queryData.publish_user_id}&user_type=2`
|
||
});
|
||
},
|
||
getImgVideoList() {
|
||
request.post("/user/imgVideo/main", {
|
||
user_id: this.queryData.publish_user_id,
|
||
user_type: 2
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.imgVideoList = res.data
|
||
}
|
||
})
|
||
},
|
||
listSuccess(e) {
|
||
if (e.count) {
|
||
this.count = e.count <= 4 ? e.count : 4;
|
||
}
|
||
// 更新项目列表
|
||
if (e.list) {
|
||
this.projectList = e.list;
|
||
this.updateDisplayedProjects();
|
||
}
|
||
},
|
||
// 更新显示的项目列表（默认显示5个）
|
||
updateDisplayedProjects() {
|
||
if (this.showAllProjects) {
|
||
this.displayedProjects = this.projectList;
|
||
} else {
|
||
this.displayedProjects = this.projectList.slice(0, 5);
|
||
}
|
||
},
|
||
// 加载更多项目
|
||
loadMoreProjects() {
|
||
this.showAllProjects = true;
|
||
this.updateDisplayedProjects();
|
||
// 重新搜索以获取完整列表
|
||
this.search();
|
||
},
|
||
// 滚动到指定部分
|
||
scrollToSection(sectionId) {
|
||
// 如果是手艺人部分且没有手艺人，则返回
|
||
if (sectionId === 'artisans-section' && this.displayArtisanList.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// 更新激活标签状态
|
||
this.activeTab = sectionId === 'projects-section' ? 'projects' : 'artisans';
|
||
|
||
// 使用uni.scrollTo滚动到指定元素
|
||
uni.createSelectorQuery().select(`#${sectionId}`).boundingClientRect((rect) => {
|
||
if (rect) {
|
||
// 获取页面滚动位置
|
||
uni.createSelectorQuery().selectViewport().scrollOffset((scrollOffset) => {
|
||
// 计算目标位置（考虑navbar高度）
|
||
const targetTop = rect.top + scrollOffset.scrollTop - 130;
|
||
|
||
uni.pageScrollTo({
|
||
scrollTop: targetTop,
|
||
duration: 300
|
||
});
|
||
}).exec();
|
||
}
|
||
}).exec();
|
||
},
|
||
// 查看全部手艺人
|
||
viewAllArtisans() {
|
||
// 跳转到手艺人列表页面，传递店铺ID
|
||
uni.navigateTo({
|
||
url: `/pages/user/store-syr-list?shopId=${this.queryData.publish_user_id}`
|
||
});
|
||
},
|
||
openMap() {
|
||
// #ifdef MP-WEIXIN
|
||
uni.openLocation({
|
||
success: () => console.log("打开系统位置地图成功"),
|
||
fail: (error) => console.log(error),
|
||
});
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
_public.goMap({
|
||
latitude: parseFloat(this.sjdetail.latitude),
|
||
longitude: parseFloat(this.sjdetail.longitude),
|
||
name: this.sjdetail.name,
|
||
address: this.sjdetail.address,
|
||
});
|
||
// #endif
|
||
},
|
||
async contactService(phone) {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.platform === "ios") {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
} else {
|
||
let permission =
|
||
systemInfo.platform === "ios" ?
|
||
"phone" :
|
||
"android.permission.CALL_PHONE";
|
||
this.isShowPer = true;
|
||
const firstRequest = !plus.storage.getItem(`perm_${permission}`);
|
||
if (firstRequest) this.isShowPer = true;
|
||
const {
|
||
granted
|
||
} = await permissionUtils.checkPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
if (granted) {
|
||
this.isShowPer = false;
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
return;
|
||
}
|
||
this.isShowPer = false;
|
||
const confirm = await this.showPermissionDialog(
|
||
"拨打电话权限申请",
|
||
"我们需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
if (!confirm) return;
|
||
const result = await permissionUtils.requestPermission(
|
||
"phone",
|
||
"需要拨打电话权限，方便您联系商家或平台"
|
||
);
|
||
if (result) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
} else {
|
||
locationService.openAppSettings();
|
||
}
|
||
}
|
||
},
|
||
|
||
// 联系客服
|
||
contactCustomer() {
|
||
// uni.showModal({
|
||
// title: '联系客服',
|
||
// content: '您可以通过电话或在线客服联系商家',
|
||
// confirmText: '拨打电话',
|
||
// cancelText: '在线客服',
|
||
// success: (res) => {
|
||
// if (res.confirm) {
|
||
// this.contactService(this.sjdetail.legal_phone);
|
||
// } else if (res.cancel) {
|
||
// // 跳转到在线客服页面
|
||
// uni.navigateTo({
|
||
// url: '/pages/chat/customer-service'
|
||
// });
|
||
// }
|
||
// }
|
||
// });
|
||
},
|
||
|
||
// 查看营业执照 还不知道是要弹窗形式还是跳转页面 先放着 ！！！！！！！！！！！！！
|
||
viewBusinessLicense() {
|
||
// if (this.sjdetail.qualifications && this.sjdetail.qualifications.length > 0) {
|
||
// // 跳转到营业执照查看页面
|
||
// uni.navigateTo({
|
||
// url: `/pages/user/business-license?id=${this.sjdetail.id}`
|
||
// });
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: '暂无营业执照信息',
|
||
// icon: 'none'
|
||
// });
|
||
// }
|
||
},
|
||
|
||
// 获取手艺人列表
|
||
getArtisanList() {
|
||
// 如果正在加载或已加载完毕，则不再请求
|
||
if (this.artisanLoading || this.artisanFinished) {
|
||
return;
|
||
}
|
||
|
||
this.artisanLoading = true;
|
||
|
||
const params = {
|
||
sjid: this.queryData.publish_user_id // 使用店铺ID作为商家ID
|
||
};
|
||
|
||
console.log("请求手艺人列表参数:", params);
|
||
|
||
// 如果是调试模式，直接使用模拟数据
|
||
if (this.showMockArtisans) {
|
||
console.log("使用模拟手艺人数据");
|
||
this.artisanList = this.mockArtisanList;
|
||
this.artisanLoading = false;
|
||
return;
|
||
}
|
||
|
||
// 真实接口调用
|
||
request
|
||
.post("/user/sjSyrBind/syrList", params)
|
||
.then((res) => {
|
||
console.log("手艺人列表接口返回:", res);
|
||
|
||
if (res.code === 200) {
|
||
// 注意：接口返回的data是一个对象，包含count和list
|
||
const resultData = res.data || {};
|
||
const list = resultData.list || [];
|
||
const total = resultData.count || list.length || 0;
|
||
|
||
console.log("获取到手艺人数据:", list, "总数:", total);
|
||
|
||
// 格式化数据
|
||
const formattedList = this.formatArtisanList(resultData);
|
||
console.log("格式化后的手艺人数据:", formattedList);
|
||
|
||
// 如果是第一页，直接赋值；否则追加数据
|
||
if (this.artisanPage === 1) {
|
||
this.artisanList = formattedList;
|
||
} else {
|
||
this.artisanList = [...this.artisanList, ...formattedList];
|
||
}
|
||
|
||
this.artisanTotal = total;
|
||
|
||
// 判断是否已加载完毕
|
||
if (list.length < this.artisanLimit) {
|
||
this.artisanFinished = true;
|
||
} else {
|
||
this.artisanPage += 1;
|
||
}
|
||
} else {
|
||
console.error("接口返回错误:", res);
|
||
uni.showToast({
|
||
title: res.msg || '获取手艺人列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.error("获取手艺人列表失败:", err);
|
||
uni.showToast({
|
||
title: '网络错误，请重试',
|
||
icon: 'none'
|
||
});
|
||
})
|
||
.finally(() => {
|
||
this.artisanLoading = false;
|
||
});
|
||
},
|
||
|
||
// 格式化手艺人列表数据
|
||
formatArtisanList(data) {
|
||
console.log("开始格式化手艺人数据:", data);
|
||
|
||
const list = data.list || [];
|
||
if (!list || list.length === 0) {
|
||
return [];
|
||
}
|
||
|
||
return list.map((item, index) => {
|
||
console.log("处理手艺人数据项:", item);
|
||
|
||
// 解析服务技能（从PHP序列化字符串中解析）
|
||
let tags = [];
|
||
if (item.servers_kill) {
|
||
try {
|
||
// 尝试解析PHP序列化字符串
|
||
if (item.servers_kill.startsWith('a:')) {
|
||
// 简单提取数字ID，实际项目中可能需要映射到具体技能名称
|
||
const matches = item.servers_kill.match(/i:\d+;i:(\d+)/g);
|
||
if (matches) {
|
||
tags = matches.map(match => {
|
||
const id = match.split(':')[2];
|
||
return `技能${id}`;
|
||
});
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error("解析servers_kill失败:", e);
|
||
}
|
||
}
|
||
|
||
// 从业年限计算
|
||
let experience = "经验丰富";
|
||
if (item.add_time) {
|
||
const addDate = new Date(item.add_time);
|
||
const now = new Date();
|
||
const yearsDiff = now.getFullYear() - addDate.getFullYear();
|
||
const monthsDiff = now.getMonth() - addDate.getMonth();
|
||
const totalMonths = yearsDiff * 12 + monthsDiff;
|
||
if (totalMonths > 0) {
|
||
if (totalMonths >= 12) {
|
||
const years = Math.floor(totalMonths / 12);
|
||
experience = `${years}年经验`;
|
||
} else {
|
||
experience = `${totalMonths}个月经验`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标签（使用技能中的第一个或默认）
|
||
let tag = tags.length > 0 ? tags[0] : "专业技师";
|
||
|
||
// 从模拟数据中借用一些数据来丰富显示
|
||
const mockTags = ["高级美甲师", "美睫专家", "美容顾问", "纹绣大师", "造型设计", "皮肤管理", "发型总监", "按摩理疗"];
|
||
const tagIndex = index % mockTags.length;
|
||
|
||
return {
|
||
id: item.id || index,
|
||
name: item.name || item.nick_name || `手艺人${index + 1}`,
|
||
avatar: item.head_photo ||
|
||
"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png",
|
||
experience: experience,
|
||
tag: tag || mockTags[tagIndex],
|
||
serviceCount: item.service_count || 0,
|
||
goodRating: item.good_rating || '100%'
|
||
};
|
||
});
|
||
},
|
||
|
||
// 查看手艺人详情
|
||
viewArtisanDetail(artisan) {
|
||
uni.navigateTo({
|
||
url: `/pages/user/employee-detail?id=${artisan.id}`
|
||
});
|
||
},
|
||
|
||
setShare(imageUrl) {
|
||
// 备用图片地址（常量提取，方便统一维护）
|
||
const backupImageUrl =
|
||
"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40";
|
||
|
||
// 获取页面栈，用于返回
|
||
const pages = getCurrentPages();
|
||
|
||
// 生成分享配置的公共函数（接收图片地址，返回完整配置）
|
||
const getShareConfig = (imgUrl) => ({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 5,
|
||
title: "好友刚推了个超赞商家！点开认识TA ~",
|
||
miniProgram: {
|
||
id: "gh_89c92e18b70b", // 小程序原始ID
|
||
path: `/subPackages/user/store-detail?id=${this.sjdetail.id}`, // 动态路径（直接用this，无需_that）
|
||
type: this.$store.state.wxShareType, // 版本类型
|
||
webUrl: "https://www.baidu.com/", // 降级网页地址
|
||
},
|
||
imageUrl: imgUrl, // 动态传入图片地址
|
||
success: (res) => {
|
||
console.log("分享成功:", JSON.stringify(res));
|
||
// 延迟返回并显示成功提示
|
||
setTimeout(() => {
|
||
// 返回上一页（即profile页面）
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
success: () => {
|
||
// 在profile页面显示分享成功提示
|
||
// 使用事件总线或全局状态传递消息
|
||
uni.showToast({
|
||
title: '分享成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
});
|
||
}
|
||
});
|
||
}, 500); // 延迟0.5秒，让用户看到分享界面
|
||
},
|
||
fail: (err) => {
|
||
console.log("分享失败:", JSON.stringify(err));
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
|
||
// 分享失败也返回，但提示失败
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}, 1500);
|
||
},
|
||
});
|
||
|
||
// 首次分享：使用传入的imageUrl
|
||
uni.share(getShareConfig(imageUrl))
|
||
.catch(() => {
|
||
// 首次失败时，自动使用备用图重试
|
||
console.log("首次分享图片无效，尝试备用图片分享...");
|
||
uni.share(getShareConfig(backupImageUrl));
|
||
});
|
||
},
|
||
|
||
async goInvite() {
|
||
let _that = this;
|
||
let imageUrl =
|
||
"https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40";
|
||
var pages = getCurrentPages();
|
||
var page = pages[pages.length - 1];
|
||
var bitmap = null;
|
||
// 获取当前页面 webview 的对象实例
|
||
var currentWebview = await page.$getAppWebview();
|
||
bitmap = await new plus.nativeObj.Bitmap("store-detail");
|
||
// 将webview内容绘制到Bitmap对象中
|
||
currentWebview.draw(
|
||
bitmap,
|
||
function() {
|
||
console.log("截屏绘制图片成功", bitmap);
|
||
bitmap.save(
|
||
"_doc/a.jpg", {},
|
||
async function(i) {
|
||
imageUrl = i.target;
|
||
try {
|
||
// 直接调用导入的函数，不要加 this
|
||
const processedUrl = await handleImgSizeUni(i.target);
|
||
console.log("处理后的图片地址：", processedUrl);
|
||
// 赋值给组件数据
|
||
imageUrl = processedUrl;
|
||
} catch (err) {
|
||
console.error("处理失败：", err);
|
||
}
|
||
_that.setShare(imageUrl);
|
||
bitmap.clear();
|
||
},
|
||
function(e) {
|
||
_that.setShare(imageUrl);
|
||
console.log("保存图片失败：" + JSON.stringify(e));
|
||
}
|
||
);
|
||
},
|
||
function(e) {
|
||
_that.setShare(imageUrl);
|
||
console.log("截屏绘制图片失败：" + JSON.stringify(e));
|
||
}
|
||
);
|
||
},
|
||
previewImage(index) {
|
||
// uni.previewImage({
|
||
// urls: this.photoList,
|
||
// current: index
|
||
// })
|
||
},
|
||
clickTap(e) {
|
||
if (e.order_type) {
|
||
this.queryData.order_type = e.order_type;
|
||
this.search();
|
||
}
|
||
},
|
||
clickPopTap(e) {
|
||
this.queryData.first_class = e;
|
||
this.search();
|
||
},
|
||
// 去资质页
|
||
goInformation() {
|
||
uni.navigateTo({
|
||
url: `/pages/user/store-detail-information?id=${this.queryData.publish_user_id}`,
|
||
});
|
||
},
|
||
// 获取商家详情
|
||
getShopDetail() {
|
||
request
|
||
.post("/user/sjdetail", this.userObj)
|
||
.then((res) => {
|
||
this.sjdetail = res.data;
|
||
// this.sjdetail.distance = this.sjdetail.distance.toFixed(2)
|
||
this.tabsPopList = [];
|
||
this.sjdetail.servers_kill.forEach((element, index) => {
|
||
let obj = {
|
||
id: element,
|
||
name: this.sjdetail.servers_kill_arr[index],
|
||
active: false,
|
||
};
|
||
this.tabsPopList.push(obj);
|
||
});
|
||
// 如果需要自动分享且未执行过
|
||
if (this.autoShare && !this.autoShareExecuted) {
|
||
this.autoShareExecuted = true;
|
||
|
||
// 等待页面渲染
|
||
setTimeout(() => {
|
||
this.autoTriggerShare();
|
||
}, 800);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
// 加载失败时隐藏loading
|
||
if (this.autoShareLoading) {
|
||
uni.hideLoading();
|
||
this.autoShareLoading = false;
|
||
uni.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 自动触发分享
|
||
autoTriggerShare() {
|
||
// #ifdef APP-PLUS
|
||
console.log('开始自动分享');
|
||
this.goInvite();
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
});
|
||
|
||
uni.showToast({
|
||
title: '请点击右上角分享',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
// #endif
|
||
},
|
||
search() {
|
||
// 重置项目显示状态
|
||
this.showAllProjects = false;
|
||
// 触发列表刷新
|
||
this.$nextTick(() => {
|
||
this.$refs.groupRef?.manualRefresh(this.queryData);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.detail-page {
|
||
padding-bottom: 200rpx;
|
||
|
||
/* 主图区域 */
|
||
.main-image-section {
|
||
position: relative;
|
||
width: 750rpx;
|
||
height: 602rpx;
|
||
background-color: #999;
|
||
|
||
.banner-swiper {
|
||
width: 750rpx;
|
||
height: 602rpx;
|
||
position: relative;
|
||
|
||
.banner-image {
|
||
width: 750rpx;
|
||
height: 602rpx;
|
||
}
|
||
|
||
.album {
|
||
position: absolute;
|
||
bottom: 25rpx;
|
||
left: 20rpx;
|
||
height: 44rpx;
|
||
width: 184rpx;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 23rpx;
|
||
|
||
.album-left {
|
||
width: 73rpx;
|
||
height: 44rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 40rpx;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
color: #333333;
|
||
}
|
||
|
||
.album-line {
|
||
width: 2rpx;
|
||
height: 20rpx;
|
||
background: #A09C9E;
|
||
border-radius: 1rpx;
|
||
margin: 0 18rpx;
|
||
}
|
||
|
||
.album-right {
|
||
height: 44rpx;
|
||
.album-right-text {
|
||
// width: 44rpx;
|
||
// height: 44rpx;
|
||
// border-radius: 23rpx;
|
||
// min-width: 50rpx;
|
||
//line-height: 44rpx;
|
||
transform: translateY(-4rpx);
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.album-right-img {
|
||
width: 8rpx;
|
||
height: 16rpx;
|
||
padding-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-info {
|
||
margin-top: 20rpx;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
|
||
.detail-info-user {
|
||
padding: 20rpx 26rpx 20rpx 30rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.detail-info-user__heard {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
&__photo {
|
||
width: 122rpx;
|
||
height: 122rpx;
|
||
margin-right: 17rpx;
|
||
border-radius: 10rpx;
|
||
flex-shrink: 0;
|
||
/* 防止头像被压缩 */
|
||
}
|
||
|
||
&__name {
|
||
margin-bottom: 15rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
flex: 1;
|
||
|
||
&__text {
|
||
margin-bottom: 10rpx;
|
||
font-weight: 500;
|
||
font-size: 42rpx;
|
||
color: #333333;
|
||
// line-height: 80rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
white-space: wrap;
|
||
}
|
||
|
||
&__sales {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
|
||
&__text1 {
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #aaaaaa;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
&__text2 {
|
||
margin-left: 11rpx;
|
||
margin-right: 2rpx;
|
||
margin-bottom: 2rpx;
|
||
font-family: DINPro, DINPro;
|
||
font-weight: bold;
|
||
font-size: 25rpx;
|
||
color: #666666;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 联系客服按钮 */
|
||
.contact-customer-btn {
|
||
width: 114rpx;
|
||
height: 89rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
border: #D9DBDB 1rpx solid;
|
||
background: linear-gradient(180deg, #FAF9F9 0%, #FFFFFF 100%);
|
||
margin-left: 20rpx;
|
||
flex-shrink: 0;
|
||
padding: 5rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
.contact-customer-icon {
|
||
width: 36rpx;
|
||
height: 34rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
}
|
||
|
||
&:active {
|
||
// background: linear-gradient( 180deg, #FAF9F9 0%, #FFFFFF 100%);
|
||
transform: scale(0.99);
|
||
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||
/* 内阴影，凹陷效果 */
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.detail-info-user__time {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 31rpx;
|
||
|
||
&__left {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
&__text1 {
|
||
font-weight: 600;
|
||
}
|
||
|
||
&__text2 {
|
||
margin-left: 8rpx;
|
||
font-weight: 500;
|
||
font-family: DINPro, DINPro;
|
||
}
|
||
}
|
||
|
||
&__right {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
&__img {
|
||
width: 11rpx;
|
||
height: 20rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-info-user__tabs {
|
||
margin-top: 16rpx;
|
||
padding-bottom: 23rpx;
|
||
border-bottom: 2rpx solid #f5f3f3;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
flex-wrap: wrap;
|
||
|
||
/* 允许标签按行换行排列 */
|
||
&__tab {
|
||
flex-shrink: 0;
|
||
/* 禁止子项被压缩换行 */
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
padding: 0 8rpx;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #666666;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.detail-info-user__connect {
|
||
margin-top: 20rpx;
|
||
|
||
.connect-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.address-row {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.address-section {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
|
||
.address-content {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
|
||
.address-text {
|
||
// flex: 1;
|
||
// width: 460rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.address-arrow {
|
||
width: 11rpx;
|
||
height: 20rpx;
|
||
margin-left: 10rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distance-section {
|
||
flex-shrink: 0;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 28rpx;
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-icon {
|
||
width: 20rpx;
|
||
height: 23rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.distance-value {
|
||
font-family: "DINPro";
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.phone-section {
|
||
flex: 1;
|
||
|
||
.phone-content {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
|
||
.phone-label {
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.phone-number {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.phone-arrow {
|
||
width: 11rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon-section {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
|
||
.nav-icon,
|
||
.phone-icon {
|
||
width: 43rpx;
|
||
height: 43rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-info-user__banner {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
/* 营业执照选项 */
|
||
.business-license-section {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.license-icon {
|
||
width: 32rpx;
|
||
height: 26rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.license-info {
|
||
flex: 1;
|
||
|
||
.license-title {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.license-view {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.license-arrow {
|
||
width: 11rpx;
|
||
height: 20rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 卡片外的切换标签样式（无背景） */
|
||
.shop-tabs-outside {
|
||
display: flex;
|
||
margin: 20rpx 0rpx 0 0;
|
||
|
||
.shop-tab-outside {
|
||
font-size: 30rpx;
|
||
line-height: 42rpx;
|
||
color: #333;
|
||
margin-right: 50rpx;
|
||
padding: 20rpx 10rpx;
|
||
position: relative;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&.active {
|
||
color: #E8101E;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-info-shop {
|
||
padding: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin-top: 10rpx;
|
||
|
||
/* 卡片内的标签样式（有背景） */
|
||
.shop-tabs-inside {
|
||
margin-bottom: 20rpx;
|
||
|
||
.shop-tab-inside {
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
padding: 10rpx 0;
|
||
|
||
}
|
||
}
|
||
|
||
.detail-info-shop-title {
|
||
width: 136rpx;
|
||
height: 48rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 手艺人展示板块（只有有手艺人时才显示） */
|
||
.artisan-showcase-section {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 20rpx 20rpx 0rpx;
|
||
padding: 20rpx;
|
||
|
||
.showcase-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.showcase-title {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.view-all-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.view-all-arrow {
|
||
width: 11rpx;
|
||
height: 20rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.showcase-scroll {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
|
||
.showcase-list {
|
||
display: inline-flex;
|
||
|
||
.showcase-item {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 35rpx;
|
||
white-space: normal;
|
||
width: 198rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.showcase-avatar {
|
||
width: 198rpx;
|
||
height: 200rpx;
|
||
background: #D8D8D8;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.showcase-name {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
line-height: 33rpx;
|
||
margin-bottom: 8rpx;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.showcase-experience {
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
text-align: center;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.showcase-tag {
|
||
font-size: 20rpx;
|
||
color: #E8101E;
|
||
background: rgba(232, 16, 30, 0.1);
|
||
border-radius: 15rpx;
|
||
padding: 4rpx 12rpx;
|
||
text-align: center;
|
||
width: auto;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .list-container {
|
||
padding: 0;
|
||
}
|
||
</style> |