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

<template>
  <div id="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;">{{ i.sender_name }}：</span>
            <span> {{ i.content }}</span>
          </p>
        </li>
      </ul>
      <div class="input">
        <input v-model="text" />
        <button type="button" @click="send" class="anniu">发送</button>
      </div>
    </div>
  </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, content: this.text };
        if (this.user.id) object.sender_id = this.user.id;
        //TODO接口
        let res = await this.create(object);
        this.$checkRes(res, null, res.errmsg || '发言失败');
      } else this.$message.error('请输入信息后发送');
    },
    channel() {
      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>
.fangtan .chat {
  float: left;
  width: 30%;
  height: 545px;
  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 {
  height: 505px;
  background: #fff;
}

.chat .chatList ul {
  float: left;
  width: 100%;
  height: 454px;
  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%;
  padding: 55px 0 0 0;
}

.chat .chatList .input input {
  border: 1px solid #ccc;
  float: left;
  height: 54px;
  width: 75%;
  margin-right: 3%;
}

.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;
}
</style>