mobile-official/src/components/parts/chat.vue

<template>
  <div id="chat">
    <el-row class="main">
      <div class="chat">
        <el-col :span="24" class="chatlist">
          <el-col :span="24" class="list" v-for="(i, index) in list" :key="index">
            <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
            <span v-if="!isEmotion(i.content)"> {{ i.content }}</span>
            <span v-else v-html="i.content"> </span>
          </el-col>
        </el-col>
        <el-col :span="24" class="send">
          <el-col :span="19">
            <el-input v-model="text" size="mini"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button @click="send" size="mini" type="primary">发送</el-button>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: chat } = createNamespacedHelpers('chat');
var moment = require('moment');
export default {
  name: 'chat',
  props: {},
  components: {},
  data: () => {
    return {
      list: [],
      text: '',
      dock_id: '',
    };
  },
  created() {
    //回车事件
    // this.enterListen();
    this.$set(this, 'dock_id', this.$route.query.id);
    this.search();
  },
  mounted() {
    this.channel();
  },
  methods: {
    ...chat(['query', 'create']),
    async search() {
      const res = await this.query({ skip: 0, limit: 10, dock_id: this.dock_id });
      if (this.$checkRes(res)) this.$set(this, `list`, _.reverse(res.data));
    },
    async send() {
      if (!this.user) {
        this.$notify({
          message: '游客不能发言',
          type: 'danger',
        });
        return;
      } else {
        if (this.text != '') {
          let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser, content: this.text, dock_id: this.dock_id };
          if (this.user.uid) {
            object.sender_id = this.user.uid;
            object.role = this.user.role;
          }
          let res = await this.create(object);
          this.$checkRes(res, null, res.errmsg || '发言失败');
        } else this.$message.error('请输入信息后发送');
      }
    },
    isEmotion(word) {
      return word.startsWith('<img');
    },
    channel() {
      this.$stomp({
        [`/exchange/public_chat/${this.dock_id}`]: this.onMessage,
      });
    },
    onMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.list.push(body);
        this.text = '';
      }
    },
    enterListen() {
      var lett = this;
      document.onkeydown = function(e) {
        var key = window.event.keyCode;
        if (key == 13) {
          lett.send();
        }
      };
    },
  },
  filters: {
    getTime(date) {
      if (!date) return '很久以前';
      let today = moment().format('YYYY-MM-DD');
      let dd = moment(date).format('YYYY-MM-DD');
      let time;
      if (today == dd) time = moment(date).format('HH:mm:ss');
      else time = moment(date).format('YYYY-MM-DD HH:mm:ss');
      return time;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 360px;
  overflow: hidden;
  padding: 0 16px;
  .chat {
    height: 359px;
    overflow: hidden;
    border-left: 1px dashed #f1f1f1;
    border-right: 1px dashed #f1f1f1;
    border-bottom: 1px dashed #f1f1f1;
    .chatlist {
      height: 320px;
      overflow-y: auto;
      .list {
        padding: 5px 5px;
      }
    }
    .send {
      height: 40px;
      line-height: 38px;
      padding: 0 0 0 12px;
    }
  }
}
.nameColor {
  color: red;
}
</style>