Merge branch 'master' of http://git.cc-lotus.info/service-platform/web-website

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^5.4.4",
     "axios": "^0.19.2",
     "core-js": "^3.4.3",
     "element-ui": "^2.13.1",

src/main.js

@@ -8,7 +8,8 @@ import '@/plugins/check-res';
 import '@/plugins/meta';
 import '@/plugins/filters';
 import '@/plugins/loading';
-
+import '@/plugins/setting';
+import InitStomp from '@/plugins/stomp';
 Vue.config.productionTip = false;
 
 new Vue({
@@ -16,3 +17,4 @@ new Vue({
   store,
   render: h => h(App),
 }).$mount('#app');
+InitStomp();

src/plugins/setting.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+
+Vue.config.weixin = {
+  // baseUrl: process.env.BASE_URL + 'weixin',
+  baseUrl: 'http://10.16.8.209:9005',
+};
+
+Vue.config.stomp = {
+  // brokerURL: 'ws://http://free.liaoningdoupo.com/ws',
+  brokerURL: '/ws', // ws://${location.host}/ws
+  connectHeaders: {
+    host: 'visit',
+    login: 'visit', //visit
+    passcode: 'visit', //visit123
+  },
+  // debug: true,
+  reconnectDelay: 5000,
+  heartbeatIncoming: 4000,
+  heartbeatOutgoing: 4000,
+};

src/store/chat.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/live/chat`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = undefined, ...info } = {}) {
+    const res = await this.$axios.$get(api.interface, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.interface}/${id}`, { ...info });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -21,6 +21,7 @@ import transaction from './transaction';
 import marketproduct from './marketproduct';
 import markettype from './markettype';
 import tranaudit from './tranaudit';
+import chat from './chat';
 
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
@@ -50,6 +51,7 @@ export default new Vuex.Store({
     marketproduct,
     markettype,
     tranaudit,
+    chat,
   },
   state: { ...ustate },
   mutations: { ...umutations },

src/store/user/mutations.js

@@ -7,12 +7,21 @@ export const setUser = (state, payload) => {
   } else {
     //已经登陆,切换路由时取出用户信息放在总store中
     let token = localStorage.getItem('token');
-    if (token) {
+    if (token && token !== 'guest') {
       state.user = jwt.decode(token);
+    } else if (token && token == 'guest') {
+      let user = localStorage.getItem('user');
+      state.user = JSON.parse(user);
     } else {
-      res = false;
-      state.user = undefined;
-      console.warn('用户未登录');
+      let timestamp = new Date().getTime();
+      let user = {
+        // id: `guest${timestamp}`,
+        name: `游客${timestamp}`,
+      };
+      state.user = user;
+      localStorage.setItem('token', 'guest');
+      localStorage.setItem('user', JSON.stringify(user));
+      console.warn('游客身份');
     }
   }
   return res;

src/views/live/hall/hall.vue

@@ -203,28 +203,7 @@
                 </div>
               </div>
               <div 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>
-                      <p><span>[10:00:00]</span><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span></p>
-                    </li>
-                    <li>
-                      <p>
-                        <span>[10:00:00]</span><span style="font-weight: bold;">测试人：</span
-                        ><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span>
-                      </p>
-                    </li>
-                  </ul>
-                  <div class="input">
-                    <input type="text" name="" id="" value="" />
-                    <button type="button">发送</button>
-                  </div>
-                </div>
+                <chat></chat>
               </div>
             </div>
           </div>
@@ -232,27 +211,7 @@
       </div>
     </div>
     <div class="pz_down">
-      <div class="w_0100">
-        <div class="superdown">
-          <div class="w_1200">
-            <p>版权所有：吉林省技术算中心</p>
-            <p>
-              <span>技术支持：长春福瑞科技有限公司</span>
-              &nbsp;&nbsp;&nbsp;&nbsp;
-              <span>邮编：130000</span>
-              &nbsp;&nbsp;&nbsp;&nbsp;
-              <span>传真：239823982</span>
-            </p>
-            <p>
-              <span>地址：吉林省长春市朝阳区前进大街1244号</span>
-              &nbsp;&nbsp;&nbsp;&nbsp;
-              <span>电话：0134-1234567</span>
-              &nbsp;&nbsp;&nbsp;&nbsp;
-              <span>邮箱：123456@163.com</span>
-            </p>
-          </div>
-        </div>
-      </div>
+      <live-foot></live-foot>
     </div>
     <div class="suspenInfo">
       <el-link :underline="false" @click="clickBtn()" target="_blank">直播中心</el-link>
@@ -261,6 +220,8 @@
 </template>
 
 <script>
+import chat from './parts/chat.vue';
+import liveFoot from '@/layout/live/foot.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapProduct } = createNamespacedHelpers('enterpriseproject');
 const { mapActions: market } = createNamespacedHelpers('market');
@@ -269,7 +230,7 @@ import _ from 'loadsh';
 export default {
   name: 'hall',
   props: {},
-  components: {},
+  components: { liveFoot, chat },
   data: () => ({
     img: {
       main1: require('@/assets/live/main1.png'),

src/views/live/hall/parts/chat.vue

@@ -0,0 +1,113 @@
+<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">发送</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.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/group_chat/1`]: 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></style>

vue.config.js

@@ -64,6 +64,16 @@ module.exports = {
         ws: true,
         // pathRewrite: { '^/api/affairs': '/api' },
       },
+      '/api/live': {
+        target: 'http://free.liaoningdoupo.com',
+        changeOrigin: true,
+        ws: true,
+        // pathRewrite: { '^/api/affairs': '/api' },
+      },
+      '/ws': {
+        target: 'http://free.liaoningdoupo.com',
+        ws: true,
+      },
     },
   },
 };