This commit is contained in:
yanran200730
2023-06-09 11:14:47 +08:00

View File

@@ -12,9 +12,11 @@
<div class="addressBook-left__list--title"> <div class="addressBook-left__list--title">
<el-input <el-input
size="mini" size="mini"
placeholder="请输入联系人姓名" :placeholder="tabIndex == 1 ? '请输入群聊名称' : '请输入联系人姓名'"
v-model="searchName" v-model="searchName"
clearable clearable
@clear="current = 1, searchName = '', getListInit()"
v-throttle="() => {(current = 1), getListInit();}"
suffix-icon="iconfont iconSearch"> suffix-icon="iconfont iconSearch">
</el-input> </el-input>
</div> </div>
@@ -56,7 +58,8 @@
<div class="content-right-info"> <div class="content-right-info">
<div v-for="(item, index) in msgList" :key="index"> <div v-for="(item, index) in msgList" :key="index">
<div class="item" :class="item.userId == id ? 'item-right' : 'item-left'"> <div class="item" :class="item.userId == id ? 'item-right' : 'item-left'">
<p class="time" v-if="index == 0">{{item.createTime}}</p> <!-- <p class="time" v-if="index == 0">{{item.msgSendTime}}</p> -->
<p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
<div class="item-content-flex"> <div class="item-content-flex">
<!-- <i class="el-icon-warning" v-if="item.userId == id"></i> --> <!-- <i class="el-icon-warning" v-if="item.userId == id"></i> -->
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != id"> <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != id">
@@ -84,6 +87,24 @@
<div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div> <div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}{{item.msgSendTime.substring(0, 16)}}撤回了一条消息</div>
<div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容你将无法继续提供服务</div>
<div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容你可以继续提供服务</div>
<div class="card-info" v-if="item.msgType == 'card'">
<div class="top">
<div class="card-left">
<h3>{{item.cardCorpName}}</h3>
<p>{{item.cardUserName}}</p>
<div>{{item.cardUserId}}</div>
</div>
<div class="card-right">
<img src="./img/user-img.png" alt="">
</div>
</div>
<!-- <div class="bottom">个人名片</div> -->
</div>
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id"> <img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == id">
<!-- <i class="el-icon-warning" v-if="item.userId != id"></i> --> <!-- <i class="el-icon-warning" v-if="item.userId != id"></i> -->
</div> </div>
@@ -135,7 +156,7 @@
{name: '文件', value: 'file'}, {name: '文件', value: 'file'},
], ],
searchMsg: '', searchMsg: '',
id: '' id: 'LiuYe'
} }
}, },
computed: { computed: {
@@ -147,6 +168,7 @@
this.id = this.params.id this.id = this.params.id
this.getList() this.getList()
} }
// this.getList()
}, },
methods: { methods: {
@@ -187,7 +209,7 @@
params: { params: {
userId: this.id, userId: this.id,
type: this.tabIndex, type: this.tabIndex,
size: 20, size: 8,
current: this.msgCurrent, current: this.msgCurrent,
msgType: this.msgTypeList[this.msgType].value, msgType: this.msgTypeList[this.msgType].value,
// msgType: 'file', // msgType: 'file',
@@ -207,6 +229,9 @@
}) })
this.msgList = res.data.records this.msgList = res.data.records
this.msgTotal = res.data.total || 0 this.msgTotal = res.data.total || 0
this.$nextTick(() => {
document.querySelector('.content-right-info').scrollTo(0, 999999999)
})
} }
this.isLoading = false this.isLoading = false
}).catch(() => { }).catch(() => {
@@ -403,11 +428,16 @@
overflow-y: scroll; overflow-y: scroll;
.item { .item {
margin-bottom: 48px; margin-bottom: 48px;
.time { .user-name {
color: #999; color: #666;
font-size: 14px; font-size: 12px;
line-height: 44px; line-height: 20px;
text-align: center; padding:0 0 0 64px;
span {
display: inline-block;
margin: 0 12px;
color: #999;
}
} }
.item-content-flex { .item-content-flex {
display: flex; display: flex;
@@ -442,8 +472,8 @@
} }
.img-list { .img-list {
img { img {
width: 200px; width: 400px;
height: 200px; height: 400px;
} }
} }
.voice-info { .voice-info {
@@ -464,6 +494,52 @@
color: #999; color: #999;
margin-top: 4px; margin-top: 4px;
} }
.card-info {
width: 300px;
position: relative;
border-radius: 8px;
background-color: #fff;
border: 1px solid #eee;
.top {
display: flex;
padding: 16px;
.card-left {
width: calc(100% - 60px);
h3 {
line-height: 60px;
font-size: 24px;
font-weight: 500;
color: #333;
margin-bottom: 10px;
}
p {
color: #000;
line-height: 24px;
font-size: 18px;
}
div {
color: #666;
font-size: 14px;
line-height: 24px;
}
}
.card-right {
img {
width: 50px;
height: 50px;
border-radius: 4px;
}
}
}
.bottom {
padding-left: 16px;
line-height: 44px;
font-size: 16px;
color: #666;
border-top: 1px solid #eee;
}
}
} }
} }
.item-left { .item-left {
@@ -486,6 +562,10 @@
.item-right { .item-right {
width: 100%; width: 100%;
justify-content: right; justify-content: right;
.user-name {
text-align: right;
padding: 0 52px 0 0;
}
.item-content-flex { .item-content-flex {
justify-content: end; justify-content: end;
.user-img { .user-img {