355 lines
9.3 KiB
Vue
355 lines
9.3 KiB
Vue
<template>
|
||
<div class="phone">
|
||
<div class="phonecont" v-if="chatlist.length>0">
|
||
<a-button class="more" v-if="showMore" @click="loadMore">点击加载更多</a-button>
|
||
<div class="nomore" v-else>---没有更多了---</div>
|
||
|
||
<div
|
||
class="msgbox"
|
||
:class="
|
||
user_doctor.user_id == item.from_user_id
|
||
? 'patientmsg'
|
||
: ''
|
||
"
|
||
v-for="item in chatlist"
|
||
:key="item.message_id"
|
||
>
|
||
<a-avatar v-if="user_doctor.user_id == item.from_user_id && (item.message_type!='TIMCustomElem' || (item.message_type=='TIMCustomElem' && JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 7))">
|
||
<img
|
||
|
||
class="chatAvater"
|
||
:src="user_doctor.avatar"
|
||
alt=""
|
||
/>
|
||
|
||
</a-avatar>
|
||
|
||
<a-avatar v-if="user_doctor.user_id != item.from_user_id && item.message_type!='TIMCustomElem'">
|
||
<img
|
||
|
||
class="chatAvater"
|
||
src="https://img.applets.igandanyiyuan.com/basic/file/patient_avatar.png"
|
||
|
||
alt=""
|
||
/>
|
||
</a-avatar>
|
||
<div class="msgcon" :class="item.message_type=='TIMCustomElem'?'tipcon':''"
|
||
:style="(item.message_type=='TIMCustomElem'&& JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 7)?'margin:6px;':''">
|
||
<div class="msgtext" v-if="item.message_type == 'TIMTextElem'">
|
||
{{ JSON.parse(item.message_content).Text }}
|
||
</div>
|
||
<div class="msgtext" v-if="item.message_type == 'TIMImageElem'">
|
||
|
||
<a-image width="200" :src="(JSON.parse(item.message_content).ImageInfoArray)[0].URL" :preview-props="{
|
||
actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
|
||
}" />
|
||
</div>
|
||
<div
|
||
class="msgtext"
|
||
v-else-if="item.message_type == 'TIMCustomElem'"
|
||
:class="JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 7?'otherColor':''"
|
||
>
|
||
<div
|
||
v-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 1
|
||
"
|
||
class="text"
|
||
>
|
||
{{ JSON.parse(JSON.parse(item.message_content).Data)
|
||
.title}}
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 2
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送评价消息
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 3
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送医生端系统通知
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 4
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送医生端服务通知
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 5
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送患者端系统消息
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 6
|
||
"
|
||
class="text"
|
||
>
|
||
药师审核中
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 7
|
||
"
|
||
class="text"
|
||
>
|
||
<div class="chufangbox">
|
||
<div class="title">处方已开具</div>
|
||
<div class="productbox">
|
||
<div class="row">
|
||
<div class="name">RP：</div>
|
||
<div class="desc">{{ JSON.parse(JSON.parse(item.message_content).Data)
|
||
.data.product_name }}</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="name">开方日期：</div>
|
||
<div class="desc">{{JSON.parse(JSON.parse(item.message_content).Data)
|
||
.data.pharmacist_verify_time}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 10
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送糖组检测报告
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 11
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送患者病例
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
JSON.parse(JSON.parse(item.message_content).Data)
|
||
.message_type == 11
|
||
"
|
||
class="text"
|
||
>
|
||
系统推送患者信息
|
||
</div>
|
||
</div>
|
||
<div class="date" v-if="item.message_type != 'TIMCustomElem'">{{ parseTime(item.message_send_time) }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="phonecont" v-else>
|
||
<a-empty />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, toRefs, reactive, watch,nextTick } from 'vue';
|
||
import {getIm } from '@/api/order/list';
|
||
const props = defineProps({
|
||
id:{
|
||
type: String,
|
||
default:'',
|
||
},
|
||
user_doctor:{
|
||
type:Object
|
||
}
|
||
|
||
});
|
||
const {user_doctor}=toRefs(props);
|
||
const firstIn=ref(false);
|
||
const pager = reactive({
|
||
page: 1,
|
||
page_size: 10,
|
||
});
|
||
const chatlist = ref([]);
|
||
const showMore = ref(true);
|
||
const HandleGetIm = async (params = {}) => {
|
||
const { code, data } = await getIm(params);
|
||
if (code == 200) {
|
||
|
||
if ( data.data.length < 10) {
|
||
showMore.value = false;
|
||
}else{
|
||
showMore.value = true;
|
||
}
|
||
chatlist.value = data.data.reverse().concat(chatlist.value);
|
||
if(!firstIn.value){
|
||
nextTick(() => {
|
||
// 要放在对响应式数据修改之后
|
||
let ele = document.querySelector('.phonecont');
|
||
ele.scrollTop = ele.scrollHeight;
|
||
});
|
||
}
|
||
|
||
firstIn.value=true
|
||
}
|
||
};
|
||
watch(()=>props.id,(newVal,oldVal)=>{
|
||
if(newVal){
|
||
firstIn.value=false;
|
||
chatlist.value=[];
|
||
pager.page=1;
|
||
pager.order_inquiry_id=newVal;
|
||
HandleGetIm({ ...pager });
|
||
}
|
||
},{immediate:true,deep:true})
|
||
|
||
|
||
const loadMore=()=>{
|
||
pager.page= pager.page+1;
|
||
pager.order_inquiry_id=props.id;
|
||
HandleGetIm({ ...pager });
|
||
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.more {
|
||
display: flex;
|
||
margin: 20px auto 10px;
|
||
}
|
||
.nomore {
|
||
font-size: 12px;
|
||
color: #666;
|
||
text-align: center;
|
||
margin: 20px auto 10px;
|
||
}
|
||
.phone {
|
||
margin-top: 35px;
|
||
position: relative;
|
||
background: #111;
|
||
border-radius: 55px;
|
||
box-shadow: 0px 0px 0px 2px #aaa;
|
||
width: 360px;
|
||
height: 480px;
|
||
padding: 105px 25px 60px;
|
||
-webkit-box-sizing: content-box;
|
||
box-sizing: content-box;
|
||
}
|
||
.phone:before {
|
||
content: '';
|
||
width: 60px;
|
||
height: 10px;
|
||
border-radius: 10px;
|
||
position: absolute;
|
||
left: 50%;
|
||
margin-left: -30px;
|
||
background: #333;
|
||
top: 50px;
|
||
}
|
||
.phonecont {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: scroll;
|
||
background: #fff;
|
||
}
|
||
.chatAvater {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
}
|
||
.msgbox {
|
||
display: flex;
|
||
margin: 4px 12px 12px;
|
||
|
||
flex-direction: row-reverse;
|
||
}
|
||
.patientmsg {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.phonecont .msgtext {
|
||
max-width: 80vw;
|
||
border-radius: 5px;
|
||
padding: 5px 8px;
|
||
word-break: break-all;
|
||
color: var(--color-text-1);
|
||
background: #efefef;
|
||
|
||
}
|
||
.patientmsg .msgtext{
|
||
background: #3CC7C0;
|
||
color:#fff;
|
||
|
||
|
||
}
|
||
|
||
.msgbox .msgcon {
|
||
margin-right: 6px;
|
||
}
|
||
.patientmsg .msgcon {
|
||
margin-left: 6px;
|
||
}
|
||
.date {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
.patientmsg .tipcon{
|
||
width:88%;
|
||
margin:0 auto;
|
||
text-align: center;
|
||
|
||
}
|
||
.tipcon .msgtext{
|
||
color: var(--color-text-1);
|
||
background: #efefef;
|
||
}
|
||
.phonecont .otherColor{
|
||
background: #3CC7C0;
|
||
color:#fff;
|
||
}
|
||
|
||
.tipcon .msgtext{
|
||
padding:0px;
|
||
font-size: 15px;
|
||
}
|
||
.chufangbox{
|
||
margin:0 20px;
|
||
}
|
||
.productbox .row{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.chufangbox .title{
|
||
padding: 8px 0;
|
||
border-bottom:1px solid #E7E7E7;;
|
||
}
|
||
.productbox{
|
||
padding: 8px 0;
|
||
}
|
||
.productbox .row .name{
|
||
color:#fff;
|
||
}
|
||
.desc{
|
||
line-height: 28px;
|
||
color:#fff;
|
||
font-size: 15px;
|
||
}
|
||
</style> |