<template>
|
<view class="consultation-container">
|
<!-- 顶部卡片 -->
|
<view class="header-card">
|
<view class="user-info">
|
<image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<text class="name">{{ userInfo.name }}</text>
|
<text class="desc">您好,有什么可以帮您?</text>
|
</view>
|
</view>
|
|
<!-- 快速入口 -->
|
<view class="quick-entry">
|
<view class="entry-item" @tap="goAIConsult">
|
<image src="/static/consultation/ai.png" mode="aspectFit" class="icon" />
|
<text>AI问诊</text>
|
<text class="tag">免费</text>
|
</view>
|
<view class="entry-item" @tap="goDoctorConsult">
|
<image src="/static/consultation/doctor.png" mode="aspectFit" class="icon" />
|
<text>医生问诊</text>
|
<text class="tag">¥20起</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 我的病历 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">我的病历</text>
|
<text class="more" @tap="viewAllRecords">查看全部</text>
|
</view>
|
<scroll-view scroll-x class="record-list" :show-scrollbar="false">
|
<view
|
class="record-item"
|
v-for="(record, index) in records"
|
:key="index"
|
@tap="selectRecord(record)"
|
>
|
<view class="ai-analyze" @tap.stop="analyzeRecord(record)">
|
<text class="iconfont icon-ai"></text>
|
<text>AI分析</text>
|
</view>
|
<text class="date">{{ record.date }}</text>
|
<text class="hospital">{{ record.hospital }}</text>
|
<text class="department">{{ record.department }}</text>
|
<text class="diagnosis">{{ record.diagnosis }}</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 检查报告 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">检查报告</text>
|
<text class="more" @tap="viewAllReports">查看全部</text>
|
</view>
|
<view class="report-list">
|
<view
|
class="report-item"
|
v-for="(report, index) in reports"
|
:key="index"
|
@tap="selectReport(report)"
|
>
|
<view class="ai-analyze" @tap.stop="analyzeReport(report)">
|
<text class="iconfont icon-ai"></text>
|
<text>AI分析</text>
|
</view>
|
<image :src="report.icon" mode="aspectFit" class="icon" />
|
<view class="info">
|
<text class="name">{{ report.name }}</text>
|
<text class="time">{{ report.time }}</text>
|
</view>
|
<text class="status" :class="report.status">{{ report.statusText }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 常见症状 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">常见症状</text>
|
</view>
|
<view class="symptom-grid">
|
<view
|
class="symptom-item"
|
v-for="(symptom, index) in symptoms"
|
:key="index"
|
@tap="consultSymptom(symptom)"
|
>
|
<image :src="symptom.icon" mode="aspectFit" class="icon" />
|
<text>{{ symptom.name }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 用户信息
|
const userInfo = ref({
|
avatar: '/static/avatar/default.jpg',
|
name: '张三'
|
})
|
|
// 病历记录
|
const records = ref([
|
{
|
date: '2024-03-20',
|
hospital: '青岛镜湖医院',
|
department: '内科',
|
diagnosis: '上呼吸道感染'
|
}
|
// ...更多记录
|
])
|
|
// 检查报告
|
const reports = ref([
|
{
|
icon: '/static/report/blood.png',
|
name: '血常规检查',
|
time: '2024-03-20',
|
status: 'normal',
|
statusText: '正常'
|
}
|
// ...更多报告
|
])
|
|
// 常见症状
|
const symptoms = ref([
|
{
|
icon: '/static/symptoms/fever.png',
|
name: '发热'
|
}
|
// ...更多症状
|
])
|
|
// 跳转到AI问诊
|
const goAIConsult = () => {
|
uni.navigateTo({
|
url: '/pages/consultation/ai'
|
})
|
}
|
|
// 跳转到医生问诊
|
const goDoctorConsult = () => {
|
uni.navigateTo({
|
url: '/pages/consultation/chat'
|
})
|
}
|
|
// AI分析病历
|
const analyzeRecord = (record) => {
|
uni.navigateTo({
|
url: '/pages/consultation/ai',
|
success: (res) => {
|
// 传递初始消息到AI问诊页面
|
const message = `请分析以下病历:\n医院: ${record.hospital}\n科室: ${record.department}\n诊断: ${record.diagnosis}`
|
if(res.eventChannel?.emit) {
|
res.eventChannel.emit('initMessage', { message })
|
}
|
}
|
})
|
}
|
|
// AI分析报告
|
const analyzeReport = (report) => {
|
uni.navigateTo({
|
url: '/pages/consultation/ai',
|
success: (res) => {
|
// 传递初始消息到AI问诊页面
|
const message = `请分析以下检查报告:\n检查项目: ${report.name}\n检查时间: ${report.time}\n检查结果: ${report.status}`
|
if(res.eventChannel?.emit) {
|
res.eventChannel.emit('initMessage', { message })
|
}
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.consultation-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 30rpx;
|
|
.header-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 30rpx;
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.avatar {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.quick-entry {
|
display: flex;
|
gap: 20rpx;
|
|
.entry-item {
|
flex: 1;
|
height: 160rpx;
|
background: $primary-light;
|
border-radius: $radius-lg;
|
padding: 20rpx;
|
position: relative;
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 12rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
color: $primary-color;
|
display: block;
|
}
|
|
.tag {
|
position: absolute;
|
right: 20rpx;
|
top: 20rpx;
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
background: rgba($primary-color, 0.1);
|
border-radius: $radius-sm;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
|
.section-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 30rpx;
|
|
.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: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.record-list {
|
white-space: nowrap;
|
|
.record-item {
|
display: inline-block;
|
width: 300rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
padding: 20rpx;
|
margin-right: 20rpx;
|
position: relative;
|
|
.ai-analyze {
|
position: absolute;
|
right: 20rpx;
|
top: 20rpx;
|
display: flex;
|
align-items: center;
|
padding: 8rpx 16rpx;
|
background: rgba($primary-color, 0.1);
|
border: 2rpx dashed $primary-color;
|
border-radius: $radius-xl;
|
|
.iconfont {
|
font-size: 28rpx;
|
color: $primary-color;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 24rpx;
|
color: $primary-color;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
|
.date {
|
font-size: 26rpx;
|
color: $text-secondary;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.hospital {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.department {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.diagnosis {
|
font-size: 26rpx;
|
color: $primary-color;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
|
.report-list {
|
.report-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid $border-color;
|
position: relative;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.ai-analyze {
|
position: absolute;
|
right: 20rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
display: flex;
|
align-items: center;
|
padding: 8rpx 16rpx;
|
background: rgba($primary-color, 0.1);
|
border: 2rpx dashed $primary-color;
|
border-radius: $radius-xl;
|
|
.iconfont {
|
font-size: 28rpx;
|
color: $primary-color;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 24rpx;
|
color: $primary-color;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.status {
|
font-size: 26rpx;
|
|
&.normal {
|
color: $success;
|
}
|
|
&.abnormal {
|
color: $warning;
|
}
|
}
|
|
&:active {
|
background: $bg-color;
|
}
|
}
|
}
|
|
.symptom-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20rpx;
|
|
.symptom-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 12rpx;
|
}
|
|
text {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
</style>
|
