<template>
|
<view class="case-detail">
|
<!-- 案例基本信息 -->
|
<view class="info-section">
|
<image :src="case_.image" mode="aspectFill" class="cover-image" />
|
<view class="info-card">
|
<text class="title">{{ case_.title }}</text>
|
<view class="meta">
|
<text class="tag">{{ case_.tag }}</text>
|
<text class="doctor">主治医师：{{ case_.doctor }}</text>
|
<text class="date">{{ case_.date }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 患者信息 -->
|
<view class="section-card">
|
<view class="section-title">患者信息</view>
|
<view class="patient-info">
|
<view class="info-item">
|
<text class="label">性别年龄</text>
|
<text class="value">{{ case_.patient.gender }}，{{ case_.patient.age }}岁</text>
|
</view>
|
<view class="info-item">
|
<text class="label">主要症状</text>
|
<text class="value">{{ case_.patient.symptoms }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">病程时间</text>
|
<text class="value">{{ case_.patient.duration }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 诊疗过程 -->
|
<view class="section-card">
|
<view class="section-title">诊疗过程</view>
|
<rich-text :nodes="case_.process"></rich-text>
|
<view class="image-list" v-if="case_.processImages?.length">
|
<image
|
v-for="(image, index) in case_.processImages"
|
:key="index"
|
:src="image"
|
mode="aspectFill"
|
@tap="previewImage(index, 'process')"
|
/>
|
</view>
|
</view>
|
|
<!-- 治疗效果 -->
|
<view class="section-card">
|
<view class="section-title">治疗效果</view>
|
<rich-text :nodes="case_.effect"></rich-text>
|
<view class="compare-images" v-if="case_.beforeAfter?.length">
|
<view class="compare-item" v-for="(item, index) in case_.beforeAfter" :key="index">
|
<view class="before">
|
<image :src="item.before" mode="aspectFill" @tap="previewCompare(index, 'before')" />
|
<text class="label">治疗前</text>
|
</view>
|
<view class="after">
|
<image :src="item.after" mode="aspectFill" @tap="previewCompare(index, 'after')" />
|
<text class="label">治疗后</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 患者评价 -->
|
<view class="section-card">
|
<view class="section-title">患者评价</view>
|
<view class="review-card">
|
<view class="user-info">
|
<image :src="case_.review.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<text class="name">{{ case_.review.name }}</text>
|
<text class="time">{{ case_.review.time }}</text>
|
</view>
|
<view class="rating">
|
<text class="iconfont icon-star" v-for="n in 5" :key="n"></text>
|
</view>
|
</view>
|
<text class="content">{{ case_.review.content }}</text>
|
</view>
|
</view>
|
|
<!-- 相关项目 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">相关项目</text>
|
<text class="more">查看全部</text>
|
</view>
|
<scroll-view
|
scroll-x
|
class="project-list"
|
:show-scrollbar="false"
|
>
|
<view
|
class="project-item"
|
v-for="(item, index) in case_.relatedProjects"
|
:key="index"
|
@tap="viewProject(item)"
|
>
|
<image :src="item.image" mode="aspectFill" class="project-image" />
|
<text class="name">{{ item.name }}</text>
|
<text class="price">¥{{ item.price }}起</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-bar">
|
<button class="action-btn outline" @tap="showConsult">在线咨询</button>
|
<button class="action-btn primary" @tap="makeAppointment">立即预约</button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 案例详情
|
const case_ = ref({
|
id: 1,
|
title: '颈椎病针灸治疗案例',
|
tag: '针灸治疗',
|
doctor: '张医生',
|
date: '2024-03-20',
|
image: '/static/tcm/case1.jpg',
|
patient: {
|
gender: '女',
|
age: 45,
|
symptoms: '颈部疼痛、头晕、手麻',
|
duration: '3个月'
|
},
|
process: `
|
<p style="text-indent: 2em; margin-bottom: 1em;">患者因长期伏案工作，出现颈部疼痛、头晕、双手发麻等症状，经检查诊断为颈椎病。</p>
|
<p style="text-indent: 2em; margin-bottom: 1em;">采用针灸配合推拿治疗，主要取穴包括风池、天柱、肩井等穴位，每次治疗约40分钟。</p>
|
`,
|
processImages: [
|
'/static/tcm/process1.jpg',
|
'/static/tcm/process2.jpg'
|
],
|
effect: `
|
<p style="text-indent: 2em; margin-bottom: 1em;">经过8次治疗，患者颈部疼痛明显缓解，头晕、手麻等症状基本消失，颈椎活动度明显改善。</p>
|
`,
|
beforeAfter: [
|
{
|
before: '/static/tcm/before1.jpg',
|
after: '/static/tcm/after1.jpg'
|
}
|
],
|
review: {
|
name: '张**',
|
avatar: '/static/avatar/user1.jpg',
|
time: '2024-03-20',
|
content: '张医生技术很好，态度也很亲切。经过治疗后，困扰我多时的颈椎问题得到了很大改善，现在工作生活都舒服多了。'
|
},
|
relatedProjects: [
|
{
|
id: 1,
|
name: '针灸治疗',
|
price: 300,
|
image: '/static/tcm/acupuncture.jpg'
|
},
|
{
|
id: 2,
|
name: '推拿理疗',
|
price: 200,
|
image: '/static/tcm/massage.jpg'
|
}
|
]
|
})
|
|
// 预览图片
|
const previewImage = (index, type) => {
|
const images = case_.value.processImages
|
uni.previewImage({
|
urls: images,
|
current: index
|
})
|
}
|
|
// 预览对比图片
|
const previewCompare = (index, type) => {
|
const images = case_.value.beforeAfter.map(item => item[type])
|
uni.previewImage({
|
urls: images,
|
current: index
|
})
|
}
|
|
// 查看项目详情
|
const viewProject = (project) => {
|
uni.navigateTo({
|
url: `/pages/featured/project?id=${project.id}`
|
})
|
}
|
|
// 在线咨询
|
const showConsult = () => {
|
uni.showModal({
|
title: '提示',
|
content: '是否开始在线咨询？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里处理在线咨询逻辑
|
}
|
}
|
})
|
}
|
|
// 立即预约
|
const makeAppointment = () => {
|
uni.navigateTo({
|
url: `/pages/appointment/department?type=tcm&case=${case_.value.id}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const { id } = page.$page?.options || {}
|
|
// 这里根据ID加载案例详情
|
console.log('加载案例详情:', id)
|
})
|
</script>
|
|
<style lang="scss">
|
.case-detail {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 120rpx;
|
|
.info-section {
|
position: relative;
|
|
.cover-image {
|
width: 100%;
|
height: 400rpx;
|
}
|
|
.info-card {
|
position: relative;
|
margin: -60rpx 30rpx 0;
|
padding: 30rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
box-shadow: $shadow-lg;
|
|
.title {
|
font-size: 36rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.meta {
|
display: flex;
|
align-items: center;
|
font-size: 24rpx;
|
color: $text-secondary;
|
|
.tag {
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
}
|
|
.doctor {
|
margin-right: 16rpx;
|
}
|
}
|
}
|
}
|
|
.section-card {
|
background: #fff;
|
margin: 20rpx 30rpx;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.more {
|
font-size: 28rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.patient-info {
|
.info-item {
|
display: flex;
|
margin-bottom: 16rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
width: 140rpx;
|
font-size: 28rpx;
|
color: $text-regular;
|
}
|
|
.value {
|
flex: 1;
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
}
|
}
|
|
rich-text {
|
font-size: 28rpx;
|
color: $text-regular;
|
line-height: 1.8;
|
}
|
|
.image-list {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 20rpx;
|
margin-top: 20rpx;
|
|
image {
|
width: 100%;
|
height: 200rpx;
|
border-radius: $radius-lg;
|
}
|
}
|
|
.compare-images {
|
margin-top: 20rpx;
|
|
.compare-item {
|
display: flex;
|
gap: 20rpx;
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.before,
|
.after {
|
flex: 1;
|
text-align: center;
|
|
image {
|
width: 100%;
|
height: 300rpx;
|
border-radius: $radius-lg;
|
margin-bottom: 8rpx;
|
}
|
|
.label {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.review-card {
|
.user-info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
margin-right: 16rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.rating {
|
.iconfont {
|
font-size: 24rpx;
|
color: $warning;
|
margin-left: 4rpx;
|
}
|
}
|
}
|
|
.content {
|
font-size: 28rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
|
.project-list {
|
white-space: nowrap;
|
|
.project-item {
|
display: inline-flex;
|
flex-direction: column;
|
width: 240rpx;
|
margin-right: 20rpx;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
.project-image {
|
width: 100%;
|
height: 180rpx;
|
border-radius: $radius-lg;
|
margin-bottom: 12rpx;
|
}
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
}
|
|
.price {
|
font-size: 26rpx;
|
color: $warning;
|
font-weight: bold;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-lg;
|
display: flex;
|
gap: 20rpx;
|
|
.action-btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
border-radius: $radius-xl;
|
|
&.outline {
|
color: $primary-color;
|
background: #fff;
|
border: 2rpx solid $primary-color;
|
}
|
|
&.primary {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
</style>
|
