web-website/src/layout/enterprise/parts/chat.vue

<template>
  <div id="chats">
    <el-row :span="24" class="chat">
      <el-col :span="24" class="chatInfo" id="chatBorder" ref="chatBorder">
        <template v-for="(i, index) in talk">
          <template v-if="isSender(i)">
            <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" class="chatBtn">
        <wang-editor v-model="content" style="height:130px;padding-bottom:120px" ref="editor"></wang-editor>
        <el-button type="primary" @click="chatClick">发送</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import wangEditor from '@/components/wang-editor.vue';
const { mapActions: personalChat } = createNamespacedHelpers('personalchat');
export default {
  name: 'chats',
  props: {
    room: { type: Object, default: () => {} },
  },
  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 chatClick() {
      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('请输入信息后发送');
    },
    turnBottom() {
      this.$nextTick(() => {
        document.getElementById('chatBorder').scrollTop = document.getElementById('chatBorder').scrollHeight + 150;
      });
    },
    isSender(data) {
      return this.user.uid == data.sender_id;
    },
    channel() {
      //TODO 修改订阅地址
      if (!this.room.id) {
        console.warn('未获取到房间id,无法进行订阅');
        return;
      }
      this.$stomp({
        [`/exchange/person_chat/${this.room.id}_${this.user.uid}`]: this.onMessage,
      });
    },
  },
  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 {
  float: left;
  width: 100%;
  padding: 30px;
}
.chat .chatInfo {
  float: left;
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: 1px solid #ccc;
  margin: 0 0 30px 0;
  overflow-y: auto;
}
.chatBtn {
  float: left;
  width: 100%;
  text-align: center;
}
/deep/.chatBtn .el-button {
  padding: 10px 80px;
  font-size: 20px;
}
</style>