Skip to content

P
pica-admin-consultation
提交 a89ddb34 编写于 作者: 张磊's avatar 张磊
浏览文件
操作

im chat ui

上级 dc935c08
显示空白字符变更
内嵌 并排
正在显示 包含 179 行增加 和 204 行删除
src/App.vue
浏览文件 @ a89ddb34
......@@ -46,7 +46,7 @@ export default {
userName: "",
authList: [],
systemType: 0,
showChat:false
showChat:true
};
},
computed: {
......
src/components/IM/chat.scss
浏览文件 @ a89ddb34
......@@ -2,65 +2,59 @@
position: absolute;
top: 20px;
right: 20px;
//min-height: 900px;
min-width: 700px;
z-index: 1000;
border: 1px solid #8fa4ac;
width: 640px;
height: 733px;
background: #ffffff;
box-shadow: 10px 10px 50px 0px #D9D9D9;
overflow: hidden;
border-radius: 18px;
.component-content {
display: flex;
flex-direction: row;
// min-width: 1200px;
background: none !important;
font-size: 14px;
height: 100%;
.center {
//margin-left: 10%;
//margin-right: 10%;
flex: 1;
background: #fff;
.c-header {
padding: 0 25px;
height: 56px;
//height: 40px;
padding: 15px 24px;
.header-line {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f5f5f5;
& > .c-header-l {
flex: 1;
}
.c-header-l {
color: #063948;
.num{
font-size: 28px;
}
.dep{
font-size: 20px;
}
}
.c-header-edit{
display: flex;
flex-direction: row;
align-items: center;
& > img {
display: inline-block;
min-width: 111px;
justify-content: space-around;
.edit-img{
width: 24px;
height: 24px;
border-radius: 12px;
margin-right: 8px;
}
& > .name {
margin-right: 25px;
color: #333333;
}
& > .time-tip {
font-size: 12px;
color: #999999;
img{
width: 100%;
height: 100%;
}
}
.close-btn {
width: 100px;
color: #c7c8c9;
cursor: pointer;
}
}
.msg-content {
// width: 100%;
// height: 650px;
background: #F0F2F5;
word-break: break-all;
overflow: scroll;
display: flex;
flex-direction: column;
margin: 10px 20px;
margin-top: 10px;
.msg-item {
display: flex;
flex-direction: row;
......
src/components/IM/chat.vue
浏览文件 @ a89ddb34
......@@ -6,13 +6,28 @@
v-loadmore="getOldMSGHistory"
>
<section class="c-header">
<div class="header-line">
<div class="c-header-l">
<img :src="doctorImg" alt />
<span class="name">{{doctorName}}医生的问诊群聊</span>
<span class="num">3519</span>
<span class="dep">&nbsp;内科</span>
</div>
<div class="c-header-edit">
<span class="edit-img">
<img src="../../assets/image/IM/im_close.png" alt />
</span>
<span class="edit-img">
<img src="../../assets/image/IM/im_close2.png" alt />
</span>
<span class="edit-img">
<img src="../../assets/image/IM/im_small.png" alt />
</span>
</div>
</div>
<div class="header-line">
</div>
</section>
<p class="refreshText"></p>
<diagnosis-Live></diagnosis-Live>
<diagnosis-Live :doctorImg="doctorImg"></diagnosis-Live>
<section id="msgContentId" class="msg-content scroll-box">
<article
v-for="(item, index) in messageList"
......@@ -187,7 +202,7 @@
import BreadCrumb from "@/components/breadcrumb.vue";
import diagnosisLive from "./diagnosis-live";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, betaHandle, bindDragHeader } from "@/utils/utils";
import { openLoading, closeLoading, betaHandle } from "@/utils/utils";
import { getPicaKFAccid, getPhomeDemain } from "@/utils";
const CONTAINER_HEIGHT = 700;
let forwardMsgIntervalId = null,
......@@ -309,7 +324,7 @@ export default {
this.$nextTick(() => {
_this.containerHeight = document.body.clientHeight - 80;
// _this.getElmByID("screenSet").style.height = _this.containerHeight - 76 + "px";
_this.getElmByID("msgContentId").style.height = _this.containerHeight - 211 + "px";
_this.getElmByID("msgContentId").style.height = "400px";
});
},
......
src/components/IM/diagnosis-live.vue
浏览文件 @ a89ddb34
......@@ -2,23 +2,19 @@
<div class="livebox">
<div class="top">
<div class="top-left">
<h1 class="title">{{ title }}</h1>
<div class="time-message">
<div class="time-message ">
<p class="msg-img">
<img :src="im_text" alt />
</p>
<span>{{ title }}</span>
</div>
<div class="time-message ml10">
<p class="msg-img"> <img :src="im_time" alt /></p>
<p>设定时长: {{ time }}分钟</p>
<p v-if="startTime && endTime">总时长: {{ useTime }}</p>
<p v-if="startTime && endTime">剩余时长: {{ loseTime }}</p>
</div>
</div>
<div class="top-right">
<img
:src="isMicOn ? voiceSmallImg : voiceCloseImg"
alt=""
srcset=""
class="icon"
@click="taggleM"
/>
<div class="close" @click="overFn">结束会话</div>
</div>
</div>
<div class="main">
<div
......@@ -27,74 +23,30 @@
:key="index"
>
<div class="text">
<p>{{ item.name }}</p>
<p>{{ item.role == 1 ? "问诊医生" : "接诊医生" }}:</p>
<div class="text-left">
<img :src="doctorImg" alt />
</div>
<div class="viedo">
<div
:id="rtc.viewslist[index].id"
v-if="rtc && rtc.viewslist[index]"
></div>
<!-- 用户声音icon -->
<img
:src="
rtc && rtc.viewslist[index] && rtc.viewslist[index].vioce
? voiceSmallImg
: voiceCloseImg
"
alt=""
srcset=""
class="user-icon"
v-if="item.status == 2"
/>
<img
:src="setImg(item.status)"
alt=""
srcset=""
class="video-icon"
v-else
/>
<div
class="mask"
v-if="rtc && rtc.viewslist[index] && rtc.viewslist[index].mask"
>
<img
:src="type == 1 ? voiceImg : noCameraImg"
alt=""
:class="{ vocie: type == 1 }"
/>
<div class="text-right">
<p>
<span class="text-name">{{ item.name }}</span>
<span class="text-dep">{{ item.role == 1 ? "问诊医生" : "接诊医生" }}</span>
</p>
<p class="text-num">123123123</p>
</div>
</div>
<div class="time">
<!-- //等待连接还是已经下麦 1为等待 2为进行中 3为下麦 -->
<div class="time-content">
<el-button
class="call-btn"
size="mini"
:disabled="item.status == 2 && item.timeleft == 0"
type="primary"
:loading="item.timeleft > 0"
@click="drivingCall(item)"
>
<span v-if="item.timeleft == 0"
>呼叫{{ item.role == 1 ? "问诊医生" : "接诊医生" }}</span
>
<time-left
@setItem="setItem($event, item)"
v-else
:timeleft="item.timeleft"
></time-left>
</el-button>
<span>
{{ showText(item.status, item.role, item) }}
</span>
<div class="viedo">
<el-button class="call-btn"> 已接入</el-button>
</div>
</div>
<div class="vedio-man">
<p class="man-img">
<img :src="im_man1" alt />
</p>
<p class="man-txt">
已接入
</p>
</div>
</div>
<div class="out" @click="leave">退出</div>
<alert ref="alert"></alert>
</div>
</template>
......@@ -115,6 +67,12 @@ export default {
alert,
timeLeft,
},
props: {
doctorImg: {
type: String | Number,
default: ''
}
},
data() {
return {
closeCallImg: require("../../assets/image/live/close-call.png"),
......@@ -123,6 +81,11 @@ export default {
voiceImg: require("../../assets/image/live/voice.png"),
waitingCallImg: require("../../assets/image/live/waiting-call.png"),
noCameraImg: require("../../assets/image/live/no-camera.png"),
im_text: require("../../assets/image/IM/im_text.png"),
im_video: require("../../assets/image/IM/im_video.png"),
im_time: require("../../assets/image/IM/im_time.png"),
im_man1: require("../../assets/image/IM/im_man1.png"),
im_man2: require("../../assets/image/IM/im_man2.png"),
roleAnchor: "anchor", // 主播
rtc: null,
roomId: "",
......@@ -607,39 +570,34 @@ export default {
.livebox {
display: flex;
flex-direction: column;
//position: absolute;
//top: 0;
//left: 0;
//right: 0;
//bottom: 0;
background: #000000;
background: #ffffff;
padding: 15px 24px;
padding-top: 0px;
.top {
display: flex;
margin-top: 5%;
justify-content: space-between;
.top-left {
margin-left: 24px;
.title {
width: 72px;
height: 22px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 700;
color: #ffffff;
line-height: 22px;
}
text-align: left;
display: flex;
.time-message {
margin-top: 20px;
display: flex;
height: 20px;
height: 24px;
line-height: 24px;
background: #F0F2F5;
border-radius: 23px;
color: #6A7990;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 20px;
p {
margin-right: 20px;
padding: 0px 15px;
.msg-img{
width: 12px;
height: 12px;
margin-right: 10px;
img{
width: 100%;
height: 100%;
}
}
}
.ml10{
margin-left: 10px;
}
}
.top-right {
......@@ -669,24 +627,46 @@ export default {
}
}
.main {
margin-top: 24px;
margin-top: 25px;
display: flex;
flex: 1;
.viedo-wrapper {
display: flex;
width: 49%;
height: 50vh;
background: #2d2d2d;
&:first-of-type {
width: 224px;
height: 120px;
background: #F0F2F5;
border-radius: 18px;
padding: 15px;
margin-right: 2%;
}
.text {
display: flex;
flex-direction: column-reverse;
width: 112px;
margin-left: 24px;
color: #fff;
padding-bottom: 20px;
.text-left{
width: 36px;
height: 36px;
background: #DDDDDD;
border-radius: 36px;
img {
width: 100%;
height: 100%;
}
}
.text-right {
margin-left: 5px;
text-align: left;
.text-name{
font-size: 18px;
color: #063948;
font-weight: bold;
}
.text-dep{
margin-left: 5px;
font-size: 14px;
color: #063948;
}
.text-num{
font-size: 14px;
color: #6A7990;
}
}
}
.time {
display: flex;
......@@ -712,52 +692,38 @@ export default {
}
}
.viedo {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.user-icon {
position: absolute;
right: 0;
bottom: 20px;
display: block;
width: 32px;
height: 32px;
z-index: 100;
}
& > div {
height: 100%;
width: 100%;
video {
width: 100%;
height: 100%;
}
}
.video-icon {
width: 96px;
height: 96px;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2d2d2d;
display: flex;
justify-content: center;
align-items: center;
.call-btn{
width: 173px;
height: 38px;
background: #449284;
border-radius: 23px;
color: #ffffff;
margin-top: 15px;
border: none;
}
}
}
.vedio-man{
width: 120px;
height: 120px;
background: #F0F2F5;
border-radius: 18px;
padding: 9px;
.man-img{
width: 61px;
height: 61px;
border-radius: 61px;
background: #449284;
text-align: center;
margin: 0 auto;
img {
display: block;
width: 93px;
height: 125px;
}
.vocie {
width: 93px;
height: 93px;
width: 100%;
}
}
.man-txt{
margin-top: 18px;
color: #449284;
font-size: 14px;
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或