web-test/src/components/parts/chat.vue

<template>
  <div id="chat">
    <el-row class="chat">
      <p class="luyanTop">
        <span>公共聊天</span>
        <!-- <span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
      <span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>发贺信</span> -->
      </p>
      <div class="chatList">
        <ul>
          <li v-for="(i, index) in list" :key="index">
            <p>
              <span>[{{ i.send_time | getTime }}]</span><span style="font-weight: bold;" :class="i.role == '8' ? 'nameColor' : ''">{{ i.sender_name }}：</span>
              <span> {{ i.content }}</span>
            </p>
          </li>
        </ul>
        <!-- <div class="input" > -->
        <el-row type="flex" :gutter="10" style="padding-top:20px;height:40px;line-height:40px">
          <el-col :span="20">
            <el-input v-model="text" size="mini"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button @click="send" size="mini" round style="background: #ff8500;color: #fff;">发送</el-button>
          </el-col>
        </el-row>
        <!-- </div> -->
      </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: '',
    };
  },
  created() {
    //回车事件
    // this.enterListen();
    this.search();
  },
  mounted() {
    this.channel();
  },
  methods: {
    ...chat(['query', 'create']),
    async search() {
      const res = await this.query({ skip: 0, limit: 10 });
      if (this.$checkRes(res)) this.$set(this, `list`, _.reverse(res.data));
    },
    async send() {
      if (!this.user.uid) {
        this.$message.error('游客不能发言,请先注册');
        return;
      }
      if (this.text != '') {
        let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser, content: this.text };
        if (this.user.uid) {
          object.sender_id = this.user.uid;
          object.role = this.user.role;
        }
        //TODO接口
        let res = await this.create(object);
        this.$checkRes(res, null, res.errmsg || '发言失败');
      } else this.$message.error('请输入信息后发送');
    },
    channel() {
      console.log('in function:');
      this.$stomp({
        [`/exchange/public_chat`]: this.onMessage,
      });
    },
    onMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.list.push(body);
        this.text = '';
      }
      // const { content, contenttype, sendid, sendname, icon, groupid, sendtime, type } = message.headers;
      // let object = { content, contenttype, sendid, sendname, icon, groupid, sendtime, type };
      // this.list.push(object);
    },
    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>
.chat {
  float: left;
  width: 100%;
  height: 515px;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 0px 0 3px;
}

.chat .luyanTop {
  height: 30px;
  line-height: 30px;
}

.chat .luyanTop span:first-child {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  color: #fff;
  background-color: #ff8500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.chat .luyanTop .icon {
  float: right;
  background: #f2f4f5;
  border-radius: 20px;
  color: #666;
  padding: 0 5px;
  margin: 0 0 0 5px;
}

.chat .luyanTop .icon {
  cursor: pointer;
}

.chat .chatList {
  background: #fff;
  float: left;
  width: 100%;
  height: 480px;
  overflow: hidden;
}

.chat .chatList ul {
  float: left;
  width: 100%;
  height: 405px;
  padding: 5px 0 0 0;
  overflow: auto;
  margin: 10px 0 0 0;
}

.chat .chatList ul li {
  padding: 0 10px;
  margin: 0 0 5px 0;
}

.chat .chatList ul li span:first-child {
  color: #666;
  padding: 0 5px 0 0;
}

.chat .chatList .input {
  height: 40px;
  line-height: 40px;
  float: left;
  width: 100%;
}

.chat .chatList .input input[data-v-5189f7b7] {
  border: 1px solid #ccc;
  float: left;
  height: 33px;
  width: 75%;
  margin: 19px 3% 0 0;
}
.chat .chatList .input button {
  float: left;
  background: #ff8500;
  color: #fff;
  height: 34px;
  width: 21%;
  max-width: 109px;
  border-radius: 5px;
}
.jiabinlist ul {
  margin: 0;
  padding: 0;
}

.anniu {
  float: left;
  background: #ff8500;
  color: #fff;
  height: 34px;
  width: 21%;
  max-width: 109px;
  margin: 20px 0 0 0;
  border-radius: 5px;
}
.nameColor {
  color: red;
}
</style>