You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
9.8 KiB
412 lines
9.8 KiB
<template>
|
|
<view class="service-detail-page">
|
|
<!-- 顶部轮播图 -->
|
|
<view class="swiper-section">
|
|
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular>
|
|
<swiper-item v-for="(image, index) in swiperImages" :key="index">
|
|
<image class="swiper-image" :src="image" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<!-- 服务信息 -->
|
|
<view class="service-info-section">
|
|
<view class="service-title">{{ serviceInfo.name || serviceInfo.title }}</view>
|
|
<view class="service-subtitle" v-if="serviceInfo.comments">{{ serviceInfo.comments }}</view>
|
|
|
|
<!-- 价格信息 -->
|
|
<view class="price-section">
|
|
<view class="price-box">
|
|
<text class="price-symbol">¥</text>
|
|
<text class="price-value">{{ serviceInfo.amount || '0' }}</text>
|
|
<text class="price-unit">起</text>
|
|
</view>
|
|
<view class="original-price" v-if="serviceInfo.originAmount">
|
|
<text class="original-price-text">原价: ¥{{ serviceInfo.originAmount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务详情 -->
|
|
<view class="detail-section">
|
|
<view class="section-title">
|
|
<view class="title-line"></view>
|
|
<text class="title-text">服务详情</text>
|
|
<view class="title-line"></view>
|
|
</view>
|
|
<view class="detail-content">
|
|
<u-parse v-if="serviceInfo.content" :content="serviceInfo.content"/>
|
|
<view v-else class="default-content">
|
|
<view class="content-item">
|
|
<text class="item-label">服务名称：</text>
|
|
<text class="item-value">{{ serviceInfo.title }}</text>
|
|
</view>
|
|
<view class="content-item" v-if="serviceInfo.comments">
|
|
<text class="item-label">服务说明：</text>
|
|
<text class="item-value">{{ serviceInfo.comments }}</text>
|
|
</view>
|
|
<view class="content-item">
|
|
<text class="item-label">服务价格：</text>
|
|
<text class="item-value price-text">¥{{ serviceInfo.amount || '0' }}</text>
|
|
</view>
|
|
<view class="content-item" v-if="serviceInfo.description">
|
|
<text class="item-label">详细描述：</text>
|
|
<text class="item-value">{{ serviceInfo.description }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务须知 -->
|
|
<!-- <view class="notice-section">-->
|
|
<!-- <view class="section-title">-->
|
|
<!-- <view class="title-line"></view>-->
|
|
<!-- <text class="title-text">服务须知</text>-->
|
|
<!-- <view class="title-line"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="notice-content">-->
|
|
<!-- <view class="notice-item" v-for="(notice, index) in noticeList" :key="index">-->
|
|
<!-- <text class="notice-dot">•</text>-->
|
|
<!-- <text class="notice-text">{{ notice }}</text>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view class="bottom-bar">
|
|
<button class="share-btn" open-type="contact">
|
|
<u-icon name="chat" size="40rpx" color="#666" label="客服" label-pos="bottom"/>
|
|
</button>
|
|
<view class="action-buttons">
|
|
<button class="order-btn" @click="handleOrder">立即预约</button>
|
|
</view>
|
|
</view>
|
|
|
|
<u-popup :show="showPopup" close-on-click-overlay round="10" mode="bottom">
|
|
<view class="p-30">
|
|
<view class="flex justify-between items-center">
|
|
<view class="flex justify-start items-start">
|
|
<u-image :src="serviceInfo.image" radius="10" width="100rpx" height="100rpx"/>
|
|
<view class="flex flex-col justify-start items-start text-25 ml-15">
|
|
<text class="font-bold">{{ serviceInfo.title }}</text>
|
|
<view class="flex justify-start items-center mt-20">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getServiceDetailReq } from "@/api/service";
|
|
import { addViewNumReq } from "@/api/common";
|
|
|
|
export default {
|
|
name: "ServiceDetail",
|
|
data() {
|
|
return {
|
|
serviceId: null,
|
|
serviceInfo: {},
|
|
isCollected: false,
|
|
showPopup: false,
|
|
serviceTags: ['专业服务', '快速响应', '品质保证'],
|
|
noticeList: [],
|
|
specList: [],
|
|
spec: [],
|
|
storeList: []
|
|
}
|
|
},
|
|
computed: {
|
|
swiperImages() {
|
|
// 如果有多张图片，使用图片数组，否则使用单张图片
|
|
if (this.serviceInfo.images && this.serviceInfo.images.length > 0) {
|
|
return this.serviceInfo.images;
|
|
} else if (this.serviceInfo.image) {
|
|
return [this.serviceInfo.image];
|
|
}
|
|
// 默认图片
|
|
return [];
|
|
}
|
|
},
|
|
methods: {
|
|
async getServiceDetail() {
|
|
try {
|
|
uni.showLoading({ title: '加载中...' });
|
|
const { data } = await getServiceDetailReq(this.serviceId);
|
|
this.serviceInfo = data;
|
|
this.specList = JSON.parse(data.spec);
|
|
this.storeList = JSON.parse(data.serviceStoreList);
|
|
this.spec = this.specList[0];
|
|
} catch (error) {
|
|
console.error('获取服务详情失败:', error);
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
handleOrder() {
|
|
// TODO: 跳转到预约页面或打开预约弹窗
|
|
uni.showToast({
|
|
title: '预约功能开发中',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.serviceId = options.id;
|
|
this.getServiceDetail();
|
|
} else {
|
|
uni.showToast({
|
|
title: '参数错误',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.service-detail-page {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.swiper-section {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
background-color: #fff;
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.swiper-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-info-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.service-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.service-subtitle {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 24rpx;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.price-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.price-box {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-right: 20rpx;
|
|
|
|
.price-symbol {
|
|
font-size: 28rpx;
|
|
color: #FF6B6B;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 48rpx;
|
|
color: #FF6B6B;
|
|
font-weight: bold;
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.price-unit {
|
|
font-size: 24rpx;
|
|
color: #FF6B6B;
|
|
}
|
|
}
|
|
|
|
.original-price {
|
|
.original-price-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
|
|
.tag-item {
|
|
padding: 8rpx 20rpx;
|
|
background: linear-gradient(135deg, #FFE5E5 0%, #FFF0F0 100%);
|
|
border-radius: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #FF6B6B;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-section,
|
|
.notice-section {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.title-line {
|
|
flex: 1;
|
|
height: 2rpx;
|
|
background: linear-gradient(90deg, transparent 0%, #ddd 50%, transparent 100%);
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 0 30rpx;
|
|
}
|
|
}
|
|
|
|
.detail-content {
|
|
.default-content {
|
|
.content-item {
|
|
margin-bottom: 24rpx;
|
|
line-height: 1.8;
|
|
|
|
.item-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.item-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
|
|
&.price-text {
|
|
color: #FF6B6B;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice-content {
|
|
.notice-item {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
|
|
.notice-dot {
|
|
font-size: 28rpx;
|
|
color: #FF6B6B;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.notice-text {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 999;
|
|
|
|
.contact-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 20rpx;
|
|
|
|
.btn-text {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
margin-left: 20rpx;
|
|
|
|
.collect-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
background-color: #FFF5E6;
|
|
border: 2rpx solid #FFD700;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
|
|
.btn-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.order-btn {
|
|
flex: 2;
|
|
height: 80rpx;
|
|
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
|
|
border-radius: 40rpx;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|