117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="forward-message" @click="catForwardRecords">
|
|||
|
|
<div class="title">{{ title }}</div>
|
|||
|
|
<div v-for="(record, index) in records" :key="index" class="lists">
|
|||
|
|
<p>
|
|||
|
|
<span>{{ record.nickname }}：</span>
|
|||
|
|
<span>{{ record.text }}</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer">
|
|||
|
|
<span>转发：聊天会话记录 ({{ num }}条)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 会话记录查看器 -->
|
|||
|
|
<talk-forward-record ref="forwardRecordsRef" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import TalkForwardRecord from '@/components/chat/TalkForwardRecord'
|
|||
|
|
export default {
|
|||
|
|
name: 'ForwardMessage',
|
|||
|
|
components: {
|
|||
|
|
TalkForwardRecord,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
forward: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true,
|
|||
|
|
},
|
|||
|
|
record_id: {
|
|||
|
|
type: Number,
|
|||
|
|
required: true,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
title: '',
|
|||
|
|
records: [],
|
|||
|
|
num: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
catForwardRecords() {
|
|||
|
|
this.$refs.forwardRecordsRef.open(this.record_id)
|
|||
|
|
},
|
|||
|
|
getForwardTitle(list) {
|
|||
|
|
let arr = [...new Set(list.map(v => v.nickname))]
|
|||
|
|
return arr.join('、') + '的会话记录'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
let forward = this.forward
|
|||
|
|
|
|||
|
|
this.num = forward.num
|
|||
|
|
this.records = forward.list
|
|||
|
|
this.title = this.getForwardTitle(this.records)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
/* 会话记录消息 */
|
|||
|
|
.forward-message {
|
|||
|
|
width: 250px;
|
|||
|
|
min-height: 95px;
|
|||
|
|
max-height: 150px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 3px 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
box-shadow: 0 0 5px 0px #e8e4e4;
|
|||
|
|
text-align: left;
|
|||
|
|
user-select: none;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #565353;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lists p {
|
|||
|
|
height: 18px;
|
|||
|
|
line-height: 18px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #aaa9a9;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-weight: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 35px;
|
|||
|
|
color: #858282;
|
|||
|
|
border-top: 1px solid #f1ebeb;
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
font-weight: 300;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 0 5px 0px #cac6c6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|