|
@@ -4,12 +4,16 @@
|
|
<el-col :span="24" class="info chat_frame" id="chat">
|
|
<el-col :span="24" class="info chat_frame" id="chat">
|
|
<template v-for="(i, index) in talk">
|
|
<template v-for="(i, index) in talk">
|
|
<template v-if="isSender(i, index)">
|
|
<template v-if="isSender(i, index)">
|
|
- <span style="text-align:right" :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
|
|
|
|
- <span style="text-align:right" v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
|
|
|
+ <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
|
|
|
|
+ <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
|
|
|
|
+ <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
|
+ </el-col>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
- <span :key="`receverTime${i.id}${index}`">[{{ i.send_time }}] {{ i.receiver_name }}</span>
|
|
|
|
- <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
|
|
|
+ <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
|
|
|
|
+ <span :key="`receverTime${i.id}${index}`"> {{ i.receiver_name }} [{{ i.send_time }}]</span>
|
|
|
|
+ <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
|
+ </el-col>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</el-col>
|
|
</el-col>
|
|
@@ -62,7 +66,6 @@ export default {
|
|
this.$set(this, `content`, '');
|
|
this.$set(this, `content`, '');
|
|
this.$forceUpdate();
|
|
this.$forceUpdate();
|
|
if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
|
|
if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
|
|
- console.log(`in 交易 chat`);
|
|
|
|
this.talk.push(res.data);
|
|
this.talk.push(res.data);
|
|
this.turnBottom();
|
|
this.turnBottom();
|
|
}
|
|
}
|
|
@@ -74,15 +77,11 @@ export default {
|
|
console.warn('未获取到房间id,无法进行订阅');
|
|
console.warn('未获取到房间id,无法进行订阅');
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- console.log(`this.user.uid`);
|
|
|
|
- console.log(this.user.uid);
|
|
|
|
- console.log(`${this.room.id}_${this.user.uid}`);
|
|
|
|
this.$stomp({
|
|
this.$stomp({
|
|
[`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
|
|
[`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
|
|
});
|
|
});
|
|
},
|
|
},
|
|
onMessage(message) {
|
|
onMessage(message) {
|
|
- console.log(`in 交易 message`);
|
|
|
|
let body = _.get(message, 'body');
|
|
let body = _.get(message, 'body');
|
|
if (body) {
|
|
if (body) {
|
|
body = JSON.parse(body);
|
|
body = JSON.parse(body);
|
|
@@ -127,7 +126,31 @@ export default {
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
-p {
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
+.info {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 15px;
|
|
|
|
+}
|
|
|
|
+/deep/.info p {
|
|
|
|
+ margin: 0 !important;
|
|
|
|
+ padding: 0 !important;
|
|
|
|
+}
|
|
|
|
+.senderTime {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
|
|
+.receverTime {
|
|
|
|
+ float: right;
|
|
|
|
+ width: 100%;
|
|
|
|
+}
|
|
|
|
+.receverTime span:first-child {
|
|
|
|
+ float: right;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: right;
|
|
|
|
+}
|
|
|
|
+.receverTime span:last-child {
|
|
|
|
+ float: right;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: right;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|