1

src/views/dynamic/downparts/chat.vue

@@ -0,0 +1,264 @@
+<template>
+  <div id="chat">
+    <el-row class="chat">
+      <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 v-if="!isEmotion(i.content)"> {{ i.content }}</span>
+              <span v-else v-html="i.content"> </span>
+            </p>
+          </li>
+        </ul>
+        <!-- <div class="input" > -->
+        <el-row type="flex" :gutter="10" style="padding-top:20px;height:40px;line-height:40px;width:100%;background: transparent;">
+          <el-col :span="21">
+            <el-input v-model="text" size="mini"></el-input>
+          </el-col>
+          <el-col :span="3">
+            <el-button @click="send" size="mini" round type="primary" style="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 {
+      popover: false,
+      list: [],
+      fastWord: ['欢迎欢迎'],
+      text: '',
+      hand: require('@/assets/emotion/hand.gif'),
+      flower: require('@/assets/emotion/flower.gif'),
+      dock_id: '',
+    };
+  },
+  created() {
+    //回车事件
+    // this.enterListen();
+    this.$set(this, 'dock_id', '123456');
+    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.uid) {
+        this.$message.error('游客不能发言,请先注册');
+        return;
+      }
+      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('请输入信息后发送');
+    },
+    async fastSend(word) {
+      let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser, content: word, 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 || '发言失败');
+        this.popover = false;
+      }
+    },
+    async sendEmotion(type) {
+      let object = { sender_name: this.user.name ? this.user.name : this.user.adminuser, dock_id: this.dock_id };
+      let content = '';
+      content = `<img src='${_.get(this, `${type}`)}' style="width:30px;height:30px" />`;
+      object.content = content;
+      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 || '发言失败');
+      }
+    },
+    isEmotion(word) {
+      return word.startsWith('<img');
+    },
+    channel() {
+      this.$stomp({
+        [`/exchange/public_chat/${this.dock_id}`]: 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 #409eff;
+  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: #409eff;
+  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: 510px;
+  overflow: hidden;
+}
+
+.chat .chatList ul {
+  float: left;
+  width: 100%;
+  height: 435px;
+  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;
+  /deep/.el-button {
+    margin: 0 10px;
+  }
+}
+.nameColor {
+  color: red;
+}
+</style>

src/views/dynamic/downparts/zxzx.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="zxzx">
+    <el-row>
+      <el-col :span="24">
+        <chat></chat>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import chat from '../downparts/chat.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'zxzx',
+  props: {},
+  components: { chat },
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/dynamic/index.vue

@@ -23,6 +23,9 @@
     <el-dialog title="展会服务" :visible.sync="zhfwdialog" width="50%" :before-close="handleClose">
       <zhfw></zhfw>
     </el-dialog>
+    <el-dialog title="在线咨询" :visible.sync="zxzxdialog" width="30%" :before-close="handleClose">
+      <zxzx></zxzx>
+    </el-dialog>
     <el-dialog title="建言献策" :visible.sync="jyxcdialog" width="30%" :before-close="handleClose">
       <jyxc @handleClose="handleClose"></jyxc>
     </el-dialog>
@@ -43,6 +46,8 @@ import maps from './parts/map.vue';
 import gzcy from './parts/gzcy.vue';
 //展会服务
 import zhfw from './downparts/zhfw.vue';
+//在线咨询
+import zxzx from './downparts/zxzx.vue';
 // 建言献策
 import jyxc from './downparts/jyxc.vue';
 // 网上调查
@@ -53,7 +58,7 @@ import jbyx from './downparts/jbyx.vue';
 export default {
   name: 'index',
   props: {},
-  components: { userTwo, gzcy, maps, zhfw, jyxc, wsdc, jbyx },
+  components: { userTwo, gzcy, maps, zhfw, zxzx, jyxc, wsdc, jbyx },
   data: () => ({
     centerImage: require('@/assets/dynamic5.png'),
     // 公众参与
@@ -85,6 +90,8 @@ export default {
     ],
     // 展会服务
     zhfwdialog: false,
+    // 在线咨询
+    zxzxdialog: false,
     // 建言献策
     jyxcdialog: false,
     // 网上调查
@@ -102,6 +109,8 @@ export default {
         this.$router.push({ path: '/dynamic/product' });
       } else if (data.title == '建言献策') {
         this.jyxcdialog = true;
+      } else if (data.title == '在线咨询') {
+        this.zxzxdialog = true;
       } else if (data.title == '网上调查') {
         this.wsdcdialog = true;
       } else if (data.title == '举报邮箱') {
@@ -112,6 +121,8 @@ export default {
     handleClose() {
       // 展会服务
       this.zhfwdialog = false;
+      // 在线咨询
+      this.zxzxdialog = false;
       // 建言献策
       this.jyxcdialog = false;
       // 网上调查