提交 401188a6 编写于 作者: guangjun.yang's avatar guangjun.yang

当前会话

上级 62ae09f6
<template>
<section class="user-info-wrapper">
<div class="user-avt">
<img src="../../assets/image/img.jpg" alt />
</div>
<p class="user-name">{{userInfo.name}}</p>
<p class="user-mb">{{userInfo.mobilePhone}}</p>
<p>
<el-button
style="width: 100px;"
v-if="userInfo.isShowCopyBtn"
type="primary"
size="small"
@click="copy()"
>复制手机号</el-button>
</p>
<section class="other-info-wrapper">
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
</div>
<span class="desc">医生</span>
</article>
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
</div>
<span class="desc">无机构</span>
</article>
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
</div>
<span class="desc">无小店</span>
</article>
</section>
<section class="qt-wrapper">
<p class="title">问题归类</p>
<el-select style="width:100%;" multiple v-model="questionType" size="mini" placeholder="请选择问题分类">
<el-option
v-for="(item, index) in questionTypeOptions"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</section>
</section>
</template>
<script>
export default {
props: {
userInfo: {
type: Object,
default: () => {
return {
name: " ",
mobilePhone: " ",
isShowCopyBtn: true
};
}
}
},
data() {
return {
questionType: '',
questionTypeOptions: [
{
label: '未选中1',
value: 1
},
{
label: '未选中2',
value: 2
},
{
label: '未选中3',
value: 3
},
{
label: '未选中4',
value: 4
},
]
};
},
methods: {
// 执行粘贴操作
copy() {}
}
};
</script>
<style lang="scss" scoped>
.user-info-wrapper {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
.user-avt {
margin: 24px 0 10px;
& > img {
display: inline-block;
width: 64px;
height: 64px;
border-radius: 32px;
}
}
.user-name {
height: 28px;
line-height: 1;
font-size: 20px;
font-weight: 700;
}
.user-mb {
height: 20px;
line-height: 1;
margin: 4px 0;
font-size: 14px;
color: #666666;
}
.other-info-wrapper {
margin: 20px 24px 50px;
.other-info {
display: flex;
flex-direction: row;
margin: 10px 0;
// align-items: center;
.icon {
margin-right: 6px;
& > img {
width: 12px;
height: 12px;
}
}
.desc {
height: 14px;
line-height: 1;
color: #000000;
opacity: 0.65;
}
}
}
.qt-wrapper {
margin: 0 25px;
.title {
text-align: left;
font-weight: 700;
margin-bottom: 10px;
color: #333333;
}
}
}
</style>
......@@ -25,7 +25,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.bread-crumb {
position: fixed;
left: 255px;
......
......@@ -3,37 +3,65 @@
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<section class="component-content screenSet" id="screenSet">
<article class="left">
<div class="header">
<div class="l-header">
<span>我的任务(3)</span>
<span>再来一个</span>
</div>
<p class="c-num">当前等待会话:4个</p>
<ul class="session-list">
<li class="item">
<div class="left">
<li class="item current">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt="">
<div class="num-wrapper"><span class="num">222</span></div>
</div>
<div class="right">
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time">19:20</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
<li class="item">
</li>
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt="">
<div class="num-wrapper"><span class="num">222</span></div>
</div>
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
<li class="item">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt="">
<div class="num-wrapper"><span class="num">222</span></div>
</div>
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
</ul>
</article>
<article class="center">
<div class="c-header">
<div class="c-header-l">
<img src="../../../assets/image/img.jpg" alt="">
<span class="name">这是一个用户名</span>
<span class="time-tip">当前会话时长:3分08秒</span>
</div>
<span class="close-btn">结束会话</span>
</div>
</article>
<article class="right">
<UserInfo :userInfo="userInfo"></UserInfo>
</article>
</section>
</div>
......@@ -44,18 +72,35 @@ import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { validateWord } from "@/utils/validate.js";
import { openLoading, closeLoading } from "@/utils/utils";
import * as commonUtil from "@/utils/utils";
import UserInfo from "@/components/IM/user-info.vue";
let vm = null;
export default {
components: {
BreadCrumb
BreadCrumb,
UserInfo
},
data() {
return {
curmbFirst: "云鹊客服",
curmbSecond: "当前会话",
userInfo: {
name: "杨Song",
mobilePhone: '138****7261',
isShowCopyBtn: true,
},
// 消息列表
messageList: [
{
type: 1,
from: ''
}
]
};
},
computed: {},
computed: {
},
created() {
},
......@@ -81,7 +126,7 @@ export default {
width: 270px;
// padding: 0 25px 15px;
border-right: 2px solid #F5F5F5;
.header {
.l-header {
display: flex;
flex-direction: row;
height: 52px;
......@@ -105,33 +150,114 @@ export default {
.session-list {
width: 100%;
& > .item {
width: 100%;
display: flex;
height: 72px;
flex-direction: row;
align-items: center;
.left {
padding: 0 25px;
cursor: pointer;
.img-wrapper {
position: relative;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.num-wrapper {
position: absolute;
top: 0;
right: -5px;
// padding: 2px 3px;
min-width: 14px;
height: 14px;
line-height: 14px;
.num {
display: inline-block;
min-width: 16px;
padding: 2px 3px;
border-radius: 8px;
text-align: center;
color: #FFFFFF;
background: #FF4D4F;
}
}
}
.right {
}
& > .desc {
flex: 1;
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
.name {
}
}
.bottom {
font-size: 12px;
color: #999999;
}
}
&.current {
background: #F8F9FA;
}
}
}
}
.center {
flex: 1;
.c-header {
padding: 0 25px;
height: 56px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #F5F5F5;
& > .c-header-l {
flex: 1;
display: flex;
flex-direction: row;
& > img {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 12px;
margin-right: 8px;
}
& > .name {
margin-right: 25px;
color: #333333;
}
& > .time-tip {
font-size: 12px;
color: #999999;
}
}
.close-btn {
width: 100px;
color: #C7C8C9;
cursor: pointer;
}
}
}
.right {
width: 240px;
border-left: 2px solid #F5F5F5;
}
background: #fff;
.time {
color: #999999;
}
.small {
font-size: 12px;
}
}
}
</style>
\ No newline at end of file
......@@ -402,7 +402,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.discuss-opt{
padding:20px;
.btn-box{
......
......@@ -402,7 +402,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.discuss-opt{
padding:20px;
.btn-box{
......
......@@ -12,7 +12,7 @@
<el-table-column prop="category" label="用户类型" min-width="50" align="center"></el-table-column>
<el-table-column prop="remark" label="认证状况" min-width="100" align="center"></el-table-column>
<el-table-column prop="createdusername" label="所属机构" min-width="50" align="center"></el-table-column>
<el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column>
<!-- <el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column> -->
<div slot="empty">
<div class="table-empty">
<img src="@/assets/image/no-content1.png" />
......
......@@ -20,7 +20,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.blank-wrap {
background: #fff;
margin: 20px !important;
......
......@@ -401,7 +401,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.discuss-opt{
padding:20px;
.btn-box{
......
......@@ -310,7 +310,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.item-component-wrap {
.component-content {
padding: 10px;
......
......@@ -93,7 +93,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.home-wrap {
.message-content {
.visitor {
......
......@@ -10,7 +10,7 @@
<script>
export default {};
</script>
<style lang="scss">
<style lang="scss" scoped>
.footer-wrap {
text-align: center;
height: 75px;
......
......@@ -120,7 +120,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.header-container {
position: relative;
left: 0;
......
......@@ -66,27 +66,27 @@ export default {
// TODO 开发调试时写死, 发布时去掉
vueMenuDtos = [{
icon: null,
icon: 'el-icon-setting',
index: "waiting-session-list",
subs: [],
title: "等待会话"
},{
icon: null,
icon: 'el-icon-setting',
index: "current-session-index",
subs: [],
title: "当前会话"
},{
icon: null,
icon: 'el-icon-setting',
index: "search-message-list",
subs: [],
title: "消息查询"
},{
icon: null,
icon: 'el-icon-setting',
index: "waiting-session-list-3",
subs: [],
title: "我要群发"
},{
icon: null,
icon: 'el-icon-setting',
index: "waiting-session-list-4",
subs: [],
title: "历史群发"
......@@ -125,7 +125,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.slidebar-container {
display: block;
position: absolute;
......
......@@ -283,7 +283,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.item-component-wrap {
.component-content {
padding: 10px;
......
......@@ -240,7 +240,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.item-component-wrap {
.component-content {
padding: 10px;
......
......@@ -284,7 +284,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.topicOpt{
.el-form-item__content{
width:80%;
......
......@@ -351,7 +351,7 @@ export default {
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.item-component-wrap {
.component-content {
padding: 10px;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册