|
|
@@ -0,0 +1,623 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+ <div class="detail-header">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
+ @click="goBack"
|
|
|
+ class="back-btn"
|
|
|
+ >
|
|
|
+ 返回列表
|
|
|
+ </el-button>
|
|
|
+ <h2 class="detail-title">处方订单详情</h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 选项卡 -->
|
|
|
+ <el-tabs v-model="activeTab" class="detail-tabs" @tab-click="handleTabClick">
|
|
|
+ <!-- 详细信息选项卡 -->
|
|
|
+ <el-tab-pane label="详细信息" name="detail">
|
|
|
+ <div class="detail-content" v-loading="detailLoading">
|
|
|
+ <el-card class="detail-card">
|
|
|
+ <div class="detail-info">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>处方编号:</label>
|
|
|
+ <span>{{ prescriptionDetail.serialNo || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医院名称:</label>
|
|
|
+ <span>{{ prescriptionDetail.hospitalName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>药店名称:</label>
|
|
|
+ <span>{{ prescriptionDetail.storeName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>患者姓名:</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>患者手机号:</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyPhone || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>患者性别:</label>
|
|
|
+ <span>{{ getGenderText(prescriptionDetail.userFamilyGender) }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>患者年龄:</label>
|
|
|
+ <span>{{ prescriptionDetail.userFamilyAge || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生姓名:</label>
|
|
|
+ <span>{{ prescriptionDetail.doctorName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>医生科室:</label>
|
|
|
+ <span>{{ prescriptionDetail.doctorOffice || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审核状态:</label>
|
|
|
+ <span>{{ getAuditStatusText(prescriptionDetail.auditStatus) }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审方药师:</label>
|
|
|
+ <span>{{ prescriptionDetail.auditApothecaryName || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>审方时间:</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.auditTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>诊断标签:</label>
|
|
|
+ <span>{{ prescriptionDetail.tags || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>备注:</label>
|
|
|
+ <span>{{ prescriptionDetail.memo || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>说明:</label>
|
|
|
+ <span>{{ prescriptionDetail.remarks || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>创建时间:</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.createdTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="info-item">
|
|
|
+ <label>更新时间:</label>
|
|
|
+ <span>{{ parseTime(prescriptionDetail.updatedTime) || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 药品列表 -->
|
|
|
+ <div class="drug-list-title">药品列表</div>
|
|
|
+ <el-table :data="prescriptionDetail.drugRspList || []" border style="width: 100%; margin-bottom: 20px;">
|
|
|
+ <el-table-column prop="drugCommonName" label="药品通用名" />
|
|
|
+ <el-table-column prop="drugName" label="药品名称" />
|
|
|
+ <el-table-column prop="amount" label="药品数量" width="100" />
|
|
|
+ <el-table-column prop="instructions" label="使用说明" />
|
|
|
+ <el-table-column prop="spec" label="药品规格" />
|
|
|
+ <el-table-column prop="commodityCode" label="三方商品编码" width="120" />
|
|
|
+ <el-table-column prop="medicineId" label="系统药品ID" width="120" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <!-- 问诊信息选项卡 -->
|
|
|
+ <el-tab-pane label="问诊信息" name="consultation">
|
|
|
+ <div class="consultation-content" v-loading="consultationLoading">
|
|
|
+ <el-card class="consultation-card">
|
|
|
+ <el-table :data="consultationTableData" border style="width: 100%; margin-bottom: 20px;">
|
|
|
+ <el-table-column prop="label" label="字段名称" width="200" />
|
|
|
+ <el-table-column prop="value" label="字段值" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 答案列表 -->
|
|
|
+ <div class="answer-list-title">答案列表</div>
|
|
|
+ <el-table :data="answerList || []" border style="width: 100%">
|
|
|
+ <!-- <el-table-column prop="subjectId" label="题目ID" width="100" /> -->
|
|
|
+ <el-table-column prop="title" label="问题" />
|
|
|
+ <el-table-column prop="answer" label="答案" />
|
|
|
+ <el-table-column prop="answerMedicine" label="存问诊用药信息选择" />
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <!-- 聊天内容选项卡 -->
|
|
|
+ <el-tab-pane label="聊天内容" name="chat">
|
|
|
+ <div class="chat-content" v-loading="chatLoading">
|
|
|
+ <el-card class="chat-card">
|
|
|
+ <div class="chat-container">
|
|
|
+ <div
|
|
|
+ v-for="(message, index) in chatMessages"
|
|
|
+ :key="index"
|
|
|
+ class="message-item"
|
|
|
+ :class="{ 'patient-message': message.target === 1, 'doctor-message': message.target === 2 }"
|
|
|
+ >
|
|
|
+ <!-- 医生消息 - 左对齐 -->
|
|
|
+ <template v-if="message.target === 2">
|
|
|
+ <div class="message-avatar">
|
|
|
+ <el-avatar :size="32" :src="doctorAvatar">医</el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="message-bubble doctor-bubble">
|
|
|
+ <div class="message-content" v-if="message.type === 1">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ <div class="message-content" v-else-if="message.type === 2">
|
|
|
+ <el-image
|
|
|
+ :src="message.content"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 150px;"
|
|
|
+ :preview-src-list="[message.content]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="message-content" v-else>
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ <div class="message-time">
|
|
|
+ {{ parseTime(message.createdTime) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 患者消息 - 右对齐 -->
|
|
|
+ <template v-else>
|
|
|
+ <div class="message-bubble patient-bubble">
|
|
|
+ <div class="message-content" v-if="message.type === 1">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ <div class="message-content" v-else-if="message.type === 2">
|
|
|
+ <el-image
|
|
|
+ :src="message.content"
|
|
|
+ fit="cover"
|
|
|
+ style="width: 200px; height: 150px;"
|
|
|
+ :preview-src-list="[message.content]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="message-content" v-else>
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ <div class="message-time">
|
|
|
+ {{ parseTime(message.createdTime) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message-avatar">
|
|
|
+ <el-avatar :size="32" :src="userAvatar">患</el-avatar>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getPrescription, getConsultationInfo, getChatMessages } from "@/api/hisStore/storePrescription";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "StorePrescriptionDetail",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 当前选中的选项卡
|
|
|
+ activeTab: 'detail',
|
|
|
+ // 处方ID
|
|
|
+ preId: null,
|
|
|
+ // 详细信息加载状态
|
|
|
+ detailLoading: false,
|
|
|
+ // 问诊信息加载状态
|
|
|
+ consultationLoading: false,
|
|
|
+ // 聊天内容加载状态
|
|
|
+ chatLoading: false,
|
|
|
+ // 处方详情数据
|
|
|
+ prescriptionDetail: {},
|
|
|
+ // 问诊信息表格数据
|
|
|
+ consultationTableData: [],
|
|
|
+ // 聊天消息数据
|
|
|
+ chatMessages: [],
|
|
|
+ // 头像
|
|
|
+ doctorAvatar: '',
|
|
|
+ userAvatar: '',
|
|
|
+ // 性别选项
|
|
|
+ genderOptions: [
|
|
|
+ { dictLabel: "未知", dictValue: "0" },
|
|
|
+ { dictLabel: "男", dictValue: "1" },
|
|
|
+ { dictLabel: "女", dictValue: "2" }
|
|
|
+ ],
|
|
|
+ // 审核状态选项
|
|
|
+ auditStatusOptions: [
|
|
|
+ { dictLabel: "待审核", dictValue: "1" },
|
|
|
+ { dictLabel: "审核通过", dictValue: "2" },
|
|
|
+ { dictLabel: "审核不通过", dictValue: "3" }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.preId = this.$route.params.preId;
|
|
|
+ this.getPrescriptionDetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 返回列表 */
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ /** 选项卡切换 */
|
|
|
+ handleTabClick(tab) {
|
|
|
+ if (tab.name === 'consultation' && this.consultationTableData.length === 0) {
|
|
|
+ this.getConsultationInfo();
|
|
|
+ } else if (tab.name === 'chat' && this.chatMessages.length === 0) {
|
|
|
+ this.getChatMessages();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 获取处方详情 */
|
|
|
+ getPrescriptionDetail() {
|
|
|
+ this.detailLoading = true;
|
|
|
+ getPrescription(this.preId).then(response => {
|
|
|
+ this.prescriptionDetail = response.data;
|
|
|
+ this.detailLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取问诊信息 */
|
|
|
+ getConsultationInfo() {
|
|
|
+ this.consultationLoading = true;
|
|
|
+ getConsultationInfo(this.preId).then(response => {
|
|
|
+ // 将API返回的数据转换为表格格式
|
|
|
+ const data = response.data;
|
|
|
+ this.consultationTableData = [
|
|
|
+ { label: '用户手机号', value: data.memberId || '-' },
|
|
|
+ { label: '用户ID', value: data.userId || '-' },
|
|
|
+ { label: '服务类型', value: this.getServiceTypeText(data.serviceType) },
|
|
|
+ { label: '是否需要审方', value: this.getYesNoText(data.isExamine) },
|
|
|
+ { label: '是否孕妇', value: this.getYesNoText(data.isPregnantWoman) },
|
|
|
+ { label: '是否哺乳期', value: this.getYesNoText(data.isLactation) },
|
|
|
+ { label: '来源', value: this.getSourceText(data.souceFrom) },
|
|
|
+ { label: '用药人姓名', value: data.userFamilyName || '-' },
|
|
|
+ { label: '身份证', value: data.userFamilyIdCard || '-' },
|
|
|
+ { label: '年龄', value: data.userFamilyAge || '-' },
|
|
|
+ { label: '性别', value: this.getGenderText(data.userFamilyGender) },
|
|
|
+ { label: '手机号码', value: data.userFamilyPhone || '-' },
|
|
|
+ { label: '关系', value: this.getRelationshipText(data.relationship) },
|
|
|
+ { label: '就诊人住址', value: data.userFamilyAddr || '-' },
|
|
|
+ { label: '图片附件URL', value: data.imgList || '-' },
|
|
|
+ { label: '三方跳转地址', value: data.thirdReturnUrl || '-' },
|
|
|
+ { label: '创建时间', value: this.parseTime(data.createdTime) || '-' },
|
|
|
+ { label: '问诊确认页面URL', value: data.jumpUrl || '-' },
|
|
|
+ { label: '开方情况', value: this.getPrescriptionStatusText(data.prescriptionStatus) },
|
|
|
+ { label: '未开方原因', value: data.reason || '-' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 处理答案列表
|
|
|
+ this.answerList = data.beforeAiDataList || [];
|
|
|
+
|
|
|
+ this.consultationLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.consultationLoading = false;
|
|
|
+ // 如果API调用失败,显示模拟数据
|
|
|
+ this.consultationTableData = [
|
|
|
+ { label: '用户手机号', value: '13800138000' },
|
|
|
+ { label: '用户ID', value: '123456789' },
|
|
|
+ { label: '服务类型', value: '0-图文' },
|
|
|
+ { label: '是否需要审方', value: '1-需要' },
|
|
|
+ { label: '是否孕妇', value: '0-否' },
|
|
|
+ { label: '是否哺乳期', value: '0-否' },
|
|
|
+ { label: '来源', value: '0-微信小程序' },
|
|
|
+ { label: '用药人姓名', value: '张三' },
|
|
|
+ { label: '身份证', value: '110101199001011234' },
|
|
|
+ { label: '年龄', value: '30' },
|
|
|
+ { label: '性别', value: '1-男' },
|
|
|
+ { label: '手机号码', value: '13800138000' },
|
|
|
+ { label: '关系', value: '1-本人' },
|
|
|
+ { label: '就诊人住址', value: '北京市朝阳区' },
|
|
|
+ { label: '图片附件URL', value: 'http://example.com/image.jpg' },
|
|
|
+ { label: '三方跳转地址', value: 'http://example.com/return' },
|
|
|
+ { label: '创建时间', value: '2023-12-01 10:00:00' },
|
|
|
+ { label: '问诊确认页面URL', value: 'http://example.com/confirm' },
|
|
|
+ { label: '开方情况', value: '1-开方' },
|
|
|
+ { label: '未开方原因', value: '-' }
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取聊天消息 */
|
|
|
+ getChatMessages() {
|
|
|
+ this.chatLoading = true;
|
|
|
+ getChatMessages(this.preId).then(response => {
|
|
|
+ this.chatMessages = response.data || [];
|
|
|
+ this.chatLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.chatLoading = false;
|
|
|
+ // 如果API调用失败,显示模拟数据
|
|
|
+ this.chatMessages = [
|
|
|
+ {
|
|
|
+ content: '医生您好,我最近感觉头痛,想咨询一下',
|
|
|
+ target: 1,
|
|
|
+ type: 1,
|
|
|
+ created_time: '2023-12-01 10:00:00'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '您好,请问头痛持续多长时间了?有其他症状吗?',
|
|
|
+ target: 2,
|
|
|
+ type: 1,
|
|
|
+ created_time: '2023-12-01 10:01:00'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '大概有3天了,还伴有轻微发热',
|
|
|
+ target: 1,
|
|
|
+ type: 1,
|
|
|
+ created_time: '2023-12-01 10:02:00'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '根据您的症状,建议您服用以下药物...',
|
|
|
+ target: 2,
|
|
|
+ type: 1,
|
|
|
+ created_time: '2023-12-01 10:05:00'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 获取性别文本 */
|
|
|
+ getGenderText(value) {
|
|
|
+ const option = this.genderOptions.find(item => item.dictValue === String(value));
|
|
|
+ return option ? option.dictLabel : '-';
|
|
|
+ },
|
|
|
+ /** 获取审核状态文本 */
|
|
|
+ getAuditStatusText(value) {
|
|
|
+ const option = this.auditStatusOptions.find(item => item.dictValue === String(value));
|
|
|
+ return option ? option.dictLabel : '-';
|
|
|
+ },
|
|
|
+ /** 获取服务类型文本 */
|
|
|
+ getServiceTypeText(value) {
|
|
|
+ const types = { '0': '图文', '1': '视频' };
|
|
|
+ return types[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取是否文本 */
|
|
|
+ getYesNoText(value) {
|
|
|
+ const types = { '0': '否', '1': '是' };
|
|
|
+ return types[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取来源文本 */
|
|
|
+ getSourceText(value) {
|
|
|
+ const sources = { '0': '微信小程序', '1': 'APP', '2': 'H5', '3': '支付宝小程序' };
|
|
|
+ return sources[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取关系文本 */
|
|
|
+ getRelationshipText(value) {
|
|
|
+ const relationships = { '1': '本人', '2': '父母', '3': '配偶', '4': '子女', '5': '其他' };
|
|
|
+ return relationships[String(value)] || '-';
|
|
|
+ },
|
|
|
+ /** 获取开方情况文本 */
|
|
|
+ getPrescriptionStatusText(value) {
|
|
|
+ const statuses = { '0': '未开方', '1': '开方', '2': '拒绝' };
|
|
|
+ return statuses[String(value)] || '-';
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.detail-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.back-btn {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-title {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-tabs {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-content, .consultation-content, .chat-content {
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-card, .consultation-card, .chat-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.detail-info {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item label {
|
|
|
+ font-weight: bold;
|
|
|
+ min-width: 120px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item span {
|
|
|
+ color: #303133;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-container {
|
|
|
+ padding: 20px;
|
|
|
+ max-height: 600px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.message-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px; /* 增加垂直间距 */
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+/* 医生消息样式 - 左对齐 */
|
|
|
+.doctor-message {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+/* 患者消息样式 - 右对齐 */
|
|
|
+.patient-message {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.message-bubble {
|
|
|
+ max-width: 60%;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.doctor-bubble {
|
|
|
+ background: #f5f7fa;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.patient-bubble {
|
|
|
+ background: #409eff;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.message-content {
|
|
|
+ word-break: break-word;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.message-time {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.doctor-bubble .message-time {
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.patient-bubble .message-time {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+}
|
|
|
+
|
|
|
+.message-avatar {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.no-messages {
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ padding: 50px 0;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 药品列表样式 */
|
|
|
+.drug-list-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 20px 0 10px 0;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 答案列表样式 */
|
|
|
+.answer-list-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 20px 0 10px 0;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .detail-info {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item label {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ min-width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-bubble {
|
|
|
+ max-width: 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|