|
|
@@ -0,0 +1,134 @@
|
|
|
+<template>
|
|
|
+ <div id="chat">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info chat_frame" id="chat">
|
|
|
+ <template v-for="(i, index) in talk">
|
|
|
+ <template v-if="isSender(i, 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>
|
|
|
+ </template>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" style="text-align:right">
|
|
|
+ <el-button type="primary" size="mini" @click="sendMessage" style="margin-bottom:10px">发送</el-button>
|
|
|
+ <wang-editor v-model="content" ref="editor"></wang-editor>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import wangEditor from '@/components/wang-editor.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
|
|
|
+export default {
|
|
|
+ name: 'chat',
|
|
|
+ props: {
|
|
|
+ room: { type: Object },
|
|
|
+ },
|
|
|
+ components: { wangEditor },
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ content: '',
|
|
|
+ talk: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.channel();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...personalChat(['create', 'query']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.query({ personroom_id: this.room.id });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `talk`, res.data);
|
|
|
+ this.turnBottom();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async sendMessage() {
|
|
|
+ if (this.content != '') {
|
|
|
+ let obj = { personroom_id: this.room.id, content: this.content, sender_id: this.user.uid, sender_name: this.user.name, send_time: '13:00' };
|
|
|
+ let keys = Object.keys(this.room);
|
|
|
+ let fres = keys.filter(f => this.room[f] == this.user.uid);
|
|
|
+ obj.receiver_id = fres === 'buyer_id' ? this.room['seller_id'] : this.room['buyer_id'];
|
|
|
+ obj.receiver_name = fres === 'buyer_id' ? this.room['seller_name'] : this.room['buyer_name'];
|
|
|
+ let res = await this.create(obj);
|
|
|
+ this.$refs.editor.setContent();
|
|
|
+ this.$set(this, `content`, '');
|
|
|
+ this.$forceUpdate();
|
|
|
+ if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
|
|
|
+ this.talk.push(res.data);
|
|
|
+ this.turnBottom();
|
|
|
+ }
|
|
|
+ } else this.$message.error('请输入信息后发送');
|
|
|
+ },
|
|
|
+ channel() {
|
|
|
+ //TODO 修改订阅地址
|
|
|
+ if (!this.room.id) {
|
|
|
+ console.warn('未获取到房间id,无法进行订阅');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$stomp({
|
|
|
+ [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onMessage(message) {
|
|
|
+ let body = _.get(message, 'body');
|
|
|
+ if (body) {
|
|
|
+ body = JSON.parse(body);
|
|
|
+ console.log(body);
|
|
|
+ // let is_seller = this.sellerList.find(f => f.user_id == body.sender_id);
|
|
|
+ // if (is_seller) this.mainTalk.push({ id: body._id, sender_name: body.sender_name, send_time: body.send_time, content: body.content });
|
|
|
+ // else this.otherTalk.push({ id: body._id, sender_name: body.sender_name, send_time: body.send_time, content: body.content });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // document.getElementById('chatBuy').scrollTop = document.getElementById('chatBuy').scrollHeight + 150;
|
|
|
+ // document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight + 150;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ turnBottom() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isSender(data) {
|
|
|
+ return this.user.uid == data.sender_id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ room: {
|
|
|
+ handler(val) {
|
|
|
+ if (val.id) this.search();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.chat_frame {
|
|
|
+ height: 360px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+</style>
|
