peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 刷新,聊天记录展示问题修复

Browse Source
This commit is contained in:
x ronger 2020-08-11 23:41:32 +08:00
parent 0864acb9b5
commit dce515dc34
1 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
pages/chats/_nickname.vue
View File

@ -1,32 +1,38 @@
<template> <template>
<el-row class="wrapper"> <client-only>
<el-col> <el-row class="wrapper" v-if="user">
<div id="contentEditor"></div> <el-col>
</el-col> <div id="contentEditor"></div>
<el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;"> </el-col>
<el-button type="primary" :loading="loading" @click="send">发送</el-button> <el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
</el-col> <el-button type="primary" :loading="loading" @click="send">发送</el-button>
<el-col style="margin-top: 2rem;"> </el-col>
<el-col v-for="message in messages" :key="message.dataId"> <el-col style="margin-top: 2rem;" id="messagesContent">
<el-col v-if="message.from === user.nickname"> <el-col v-for="message in Array.prototype.reverse.call(messages)" :key="message.dataId">
<el-col :span="22" style="text-align: right;"> <el-col v-if="message.from === user.nickname">
<div class="from-message">{{message.content}}</div> <el-col :span="22" style="text-align: right;">
<div class="from-message">
<div v-html="message.content"></div>
</div>
</el-col>
<el-col :span="2" style="text-align: right;">
<el-avatar :src="user.avatarURL"></el-avatar>
</el-col>
</el-col> </el-col>
<el-col :span="2" style="text-align: right;"> <el-col v-else>
<el-avatar :src="user.avatarURL"></el-avatar> <el-col :span="2">
</el-col> <el-avatar :src="to.avatarURL"></el-avatar>
</el-col> </el-col>
<el-col v-else> <el-col :span="22" style="text-align: left;">
<el-col :span="2"> <div class="to-message">
<el-avatar :src="to.avatarURL"></el-avatar> <div v-html="message.content"></div>
</el-col> </div>
<el-col :span="22" style="text-align: left;"> </el-col>
<div class="to-message">{{message.content}}</div>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-row>
</el-row> </client-only>
</template> </template>
<script> <script>
@ -158,14 +164,14 @@
placeholder: data.placeholder, placeholder: data.placeholder,
}) })
}, },
send() { async send() {
let _ts = this; let _ts = this;
const message = { const message = {
to: _ts.to.nickname, to: _ts.to.nickname,
from: _ts.user.nickname, from: _ts.user.nickname,
dataType: 1, dataType: 1,
dataId: new Date().getTime(), dataId: new Date().getTime(),
content: _ts.contentEditor.getValue() content: await _ts.contentEditor.getHTML()
} }
_ts.messages.push(message); _ts.messages.push(message);
_ts.contentEditor.setValue('') _ts.contentEditor.setValue('')
@ -175,6 +181,13 @@
async mounted() { async mounted() {
let _ts = this; let _ts = this;
_ts.$store.commit('setActiveMenu', 'post-article'); _ts.$store.commit('setActiveMenu', 'post-article');
let to = {
nickname: _ts.$route.params?.nickname
}
_ts.$set(_ts, 'to', to);
if (_ts.user) { if (_ts.user) {
const responseData = await _ts.$axios.$get('/api/upload/token'); const responseData = await _ts.$axios.$get('/api/upload/token');
if (responseData) { if (responseData) {
@ -198,12 +211,6 @@
}); });
}, 500); }, 500);
} }
let to = {
nickname: _ts.$route.params.nickname,
avatarURL: _ts.$route.params.avatarURL,
}
_ts.$set(_ts, 'to', to);
} }
} }
</script> </script>
@ -213,7 +220,7 @@
.from-message { .from-message {
float: right; float: right;
width: 200px; width: auto;
min-height: 40px; min-height: 40px;
margin: 10px; margin: 10px;
background-color: skyblue; background-color: skyblue;
@ -231,7 +238,7 @@
.to-message { .to-message {
float: left; float: left;
width: 200px; width: auto;
min-height: 40px; min-height: 40px;
margin: 10px; margin: 10px;
background-color: skyblue; background-color: skyblue;