<template>
|
<view class="doctor-chat">
|
<!-- 医生信息卡片 -->
|
<view class="doctor-card">
|
<view class="basic-info">
|
<image :src="doctor.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<view class="name-title">
|
<text class="name">{{ doctor.name }}</text>
|
<text class="title">{{ doctor.title }}</text>
|
</view>
|
<text class="hospital">{{ doctor.hospital }}</text>
|
<text class="specialty">{{ doctor.specialty }}</text>
|
</view>
|
</view>
|
<view class="consultation-info">
|
<text class="type">图文问诊</text>
|
<text class="price">¥{{ doctor.price }}/次</text>
|
</view>
|
</view>
|
|
<!-- 聊天内容区域 -->
|
<scroll-view
|
class="chat-content"
|
scroll-y
|
:scroll-top="scrollTop"
|
:scroll-with-animation="true"
|
@scrolltoupper="loadMoreHistory"
|
>
|
<!-- 系统提示 -->
|
<view class="system-message">
|
<text>温馨提示：医生将在24小时内回复您的问题</text>
|
</view>
|
|
<!-- 聊天记录 -->
|
<view class="message-list">
|
<view
|
class="message-item"
|
v-for="(msg, index) in messages"
|
:key="index"
|
:class="msg.type"
|
>
|
<!-- 用户消息 -->
|
<template v-if="msg.type === 'user'">
|
<view class="message-content">
|
<text>{{ msg.content }}</text>
|
<!-- 图片消息 -->
|
<view class="image-list" v-if="msg.images?.length">
|
<image
|
v-for="(img, idx) in msg.images"
|
:key="idx"
|
:src="img"
|
mode="aspectFill"
|
@tap="previewImage(msg.images, idx)"
|
/>
|
</view>
|
<!-- 病历/报告 -->
|
<view class="report-card" v-if="msg.report">
|
<image :src="msg.report.icon" mode="aspectFit" class="icon" />
|
<view class="info">
|
<text class="name">{{ msg.report.name }}</text>
|
<text class="time">{{ msg.report.time }}</text>
|
</view>
|
</view>
|
</view>
|
<image :src="userAvatar" mode="aspectFill" class="avatar" />
|
</template>
|
|
<!-- 医生消息 -->
|
<template v-else>
|
<image :src="doctor.avatar" mode="aspectFill" class="avatar" />
|
<view class="message-content">
|
<rich-text :nodes="formatMessage(msg.content)"></rich-text>
|
<!-- 处方信息 -->
|
<view class="prescription-card" v-if="msg.prescription">
|
<view class="header">
|
<image src="/static/icons/prescription.png" mode="aspectFit" class="icon" />
|
<text class="title">电子处方</text>
|
</view>
|
<view class="medicine-list">
|
<view
|
class="medicine-item"
|
v-for="(med, idx) in msg.prescription.medicines"
|
:key="idx"
|
>
|
<text class="name">{{ med.name }}</text>
|
<text class="usage">{{ med.usage }}</text>
|
</view>
|
</view>
|
<view class="footer">
|
<text class="time">开具时间：{{ msg.prescription.time }}</text>
|
<view class="action-btn" @tap="viewPrescription(msg.prescription)">
|
查看详情
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</view>
|
</view>
|
</scroll-view>
|
|
<!-- 底部输入区域 -->
|
<view class="input-area">
|
<!-- 工具栏 -->
|
<view class="toolbar">
|
<view class="tool-item" @tap="chooseImage">
|
<text class="iconfont icon-image"></text>
|
</view>
|
<view class="tool-item" @tap="chooseReport">
|
<text class="iconfont icon-report"></text>
|
</view>
|
<view class="tool-item" @tap="recordVoice">
|
<text class="iconfont icon-voice"></text>
|
</view>
|
</view>
|
|
<!-- 输入框 -->
|
<view class="input-box">
|
<textarea
|
v-model="inputContent"
|
:adjust-position="false"
|
:show-confirm-bar="false"
|
:cursor-spacing="20"
|
:maxlength="500"
|
placeholder="请详细描述您的症状..."
|
@focus="onFocus"
|
@blur="onBlur"
|
/>
|
<view class="send-btn" :class="{ active: inputContent }" @tap="sendMessage">
|
发送
|
</view>
|
</view>
|
</view>
|
|
<!-- 语音输入弹窗 -->
|
<uni-popup ref="voicePopup" type="bottom">
|
<view class="voice-popup">
|
<view class="title">按住说话</view>
|
<view
|
class="voice-btn"
|
:class="{ recording: isRecording }"
|
@touchstart="startRecord"
|
@touchend="stopRecord"
|
>
|
<text class="iconfont icon-mic"></text>
|
</view>
|
<text class="tip">{{ isRecording ? '松开结束' : '按住开始' }}</text>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, nextTick } from 'vue'
|
|
// 医生信息
|
const doctor = ref({
|
avatar: '/static/doctor/avatar.jpg',
|
name: '张医生',
|
title: '主任医师',
|
hospital: '青岛镜湖医院',
|
specialty: '擅长：呼吸系统疾病、慢性病管理',
|
price: 50
|
})
|
|
// 用户头像
|
const userAvatar = ref('/static/avatar/default.jpg')
|
|
// 聊天记录
|
const messages = ref([])
|
const scrollTop = ref(0)
|
|
// 输入内容
|
const inputContent = ref('')
|
const isRecording = ref(false)
|
|
// 发送消息
|
const sendMessage = async () => {
|
if (!inputContent.value.trim()) return
|
|
// 添加用户消息
|
messages.value.push({
|
type: 'user',
|
content: inputContent.value
|
})
|
|
// 清空输入框
|
inputContent.value = ''
|
|
// 滚动到底部
|
await nextTick()
|
scrollToBottom()
|
|
// 模拟医生回复
|
setTimeout(() => {
|
messages.value.push({
|
type: 'doctor',
|
content: '您好,根据您描述的症状...',
|
prescription: {
|
time: '2024-03-25 10:30',
|
medicines: [
|
{ name: '阿莫西林胶囊', usage: '一次1粒,一日3次' },
|
{ name: '布洛芬缓释胶囊', usage: '一次1粒,必要时服用' }
|
]
|
}
|
})
|
scrollToBottom()
|
}, 1000)
|
}
|
|
// 滚动到底部
|
const scrollToBottom = () => {
|
nextTick(() => {
|
const query = uni.createSelectorQuery()
|
query.select('.message-list').boundingClientRect()
|
query.exec(res => {
|
if (res[0]) {
|
scrollTop.value = res[0].height
|
}
|
})
|
})
|
}
|
|
// 格式化消息内容
|
const formatMessage = (content) => {
|
return content.replace(/\n/g, '<br>')
|
}
|
</script>
|
|
<style lang="scss">
|
.doctor-chat {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background: $bg-color;
|
|
.doctor-card {
|
background: #fff;
|
padding: 30rpx;
|
border-bottom: 1rpx solid $border-color;
|
|
.basic-info {
|
display: flex;
|
margin-bottom: 20rpx;
|
|
.avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name-title {
|
margin-bottom: 8rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 12rpx;
|
}
|
|
.title {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
|
.hospital {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.specialty {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.consultation-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-top: 20rpx;
|
border-top: 1rpx solid $border-color;
|
|
.type {
|
font-size: 26rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
}
|
|
.price {
|
font-size: 32rpx;
|
color: $warning;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.chat-content {
|
flex: 1;
|
padding: 30rpx;
|
overflow-y: auto;
|
|
.system-message {
|
text-align: center;
|
margin-bottom: 30rpx;
|
|
text {
|
font-size: 24rpx;
|
color: $text-secondary;
|
background: rgba($text-secondary, 0.1);
|
padding: 8rpx 24rpx;
|
border-radius: $radius-xl;
|
}
|
}
|
|
.message-list {
|
.message-item {
|
display: flex;
|
margin-bottom: 30rpx;
|
|
.avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
flex-shrink: 0;
|
}
|
|
.message-content {
|
max-width: 70%;
|
margin: 0 20rpx;
|
padding: 20rpx;
|
border-radius: $radius-lg;
|
font-size: 28rpx;
|
line-height: 1.5;
|
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10rpx;
|
margin-top: 16rpx;
|
|
image {
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: $radius-sm;
|
}
|
}
|
|
.report-card,
|
.prescription-card {
|
margin-top: 16rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
padding: 20rpx;
|
|
.header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 12rpx;
|
}
|
|
.title {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
}
|
|
.medicine-list {
|
.medicine-item {
|
margin-bottom: 12rpx;
|
|
.name {
|
font-size: 26rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.usage {
|
font-size: 24rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
|
.footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 16rpx;
|
padding-top: 16rpx;
|
border-top: 1rpx solid $border-color;
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
|
.action-btn {
|
font-size: 24rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 8rpx 20rpx;
|
border-radius: $radius-xl;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
|
&.user {
|
flex-direction: row-reverse;
|
|
.message-content {
|
background: $primary-color;
|
color: #fff;
|
}
|
}
|
|
&.doctor {
|
.message-content {
|
background: #fff;
|
color: $text-primary;
|
}
|
}
|
}
|
}
|
}
|
|
.input-area {
|
background: #fff;
|
padding: 20rpx 30rpx;
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
border-top: 1rpx solid $border-color;
|
|
.toolbar {
|
display: flex;
|
gap: 30rpx;
|
margin-bottom: 20rpx;
|
|
.tool-item {
|
.iconfont {
|
font-size: 48rpx;
|
color: $text-secondary;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.input-box {
|
display: flex;
|
align-items: flex-end;
|
gap: 20rpx;
|
|
textarea {
|
flex: 1;
|
height: 80rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
padding: 20rpx;
|
font-size: 28rpx;
|
line-height: 40rpx;
|
max-height: 160rpx;
|
}
|
|
.send-btn {
|
width: 120rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
font-size: 28rpx;
|
color: #fff;
|
background: $text-secondary;
|
border-radius: $radius-lg;
|
|
&.active {
|
background: $primary-gradient;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
