Etusivu Tutki Apua
Kirjaudu sisään
double-create
/
web-website
4
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

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

wuhongyuq 5 vuotta sitten
vanhempi
b9d2d44f84 c97dbb2fc1
commit
862c7d079f
26 muutettua tiedostoa jossa 942 lisäystä ja 284 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 1 0
      package.json
  2. 8 0
      public/static/css/style.css
  3. 140 0
      public/static/home.html
  4. BIN
      public/static/images/batb.png
  5. BIN
      public/static/images/bg2.png
  6. BIN
      public/static/images/bg_shop (1).png
  7. BIN
      public/static/images/bg_shop.png
  8. BIN
      public/static/images/logostbrain.png
  9. BIN
      public/static/images/people.png
  10. BIN
      public/static/images/zwfwlogo.png
  11. 11 0
      public/static/js/particles.min.js
  12. BIN
      src/assets/live/d10_fbb1.png
  13. 1 1
      src/layout/live/head.vue
  14. 3 1
      src/main.js
  15. 20 0
      src/plugins/setting.js
  16. 18 0
      src/router/index.js
  17. 39 0
      src/store/chat.js
  18. 2 0
      src/store/index.js
  19. 13 4
      src/store/user/mutations.js
  20. 3 3
      src/style/style.css
  21. 131 275
      src/views/live/hall/hall.vue
  22. 140 0
      src/views/live/hall/liveApply.vue
  23. 256 0
      src/views/live/hall/liveList.vue
  24. 113 0
      src/views/live/hall/parts/chat.vue
  25. 33 0
      src/views/live/home.vue
  26. 10 0
      vue.config.js

+ 1 - 0
package.json
Näytä tiedosto 

@@ -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",

+ 8 - 0
public/static/css/style.css
Näytä tiedosto 

@@ -2139,3 +2139,11 @@ th {
 
 	left: 10px;
 
 	top: -2px;
 
 }
 
+/* 首页 */
 
+.home{
 
+  width: 100vw; 
+  height: 100vh; 
+  background-color:aliceblue; 
+  background-image: url(../images/bg2.png);
 
+  background-size: cover;
 
+}

+ 140 - 0
public/static/home.html
Näytä tiedosto 

@@ -0,0 +1,140 @@
 
+<html>
 
+
 
+<head>
 
+  <title>科技平台</title>
 
+  <meta charset="utf-8" />
 
+  <meta name="renderer" content="webkit">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
 
+  <meta content="" name="description" />
 
+  <meta content="" name="author" />
 
+  <link rel="stylesheet" href="css/style.css">
 
+</head>
 
+
 
+<body style="margin: 0 !important;">
 
+  <div class="home">
 
+      
+  </div>
 
+  <div id="particles-js" style="position: fixed; height: 100%; width: 100%;top:0px">
 
+    <canvas class="particles-js-canvas-el"></canvas>
 
+  </div>
 
+  <script src="./js/particles.min.js" type="text/javascript" charset="utf-8"></script>
 
+  <script>
 
+
 
+    /* ---- particles.js config ---- */
 
+
 
+    particlesJS("particles-js", {
 
+      "particles": {
 
+        "number": {
 
+          "value": 80,
 
+          "density": {
 
+            "enable": true,
 
+            "value_area": 1200
 
+          }
 
+        },
 
+        "color": {
 
+          "value": "#ffffff"
 
+        },
 
+        "shape": {
 
+          "type": "circle",
 
+          "stroke": {
 
+            "width": 0,
 
+            "color": "#000000"
 
+          },
 
+          "polygon": {
 
+            "nb_sides": 5
 
+          },
 
+          "image": {
 
+            "src": "img/github.svg",
 
+            "width": 100,
 
+            "height": 100
 
+          }
 
+        },
 
+        "opacity": {
 
+          "value": 0.5,
 
+          "random": false,
 
+          "anim": {
 
+            "enable": false,
 
+            "speed": 1,
 
+            "opacity_min": 0.1,
 
+            "sync": false
 
+          }
 
+        },
 
+        "size": {
 
+          "value": 3,
 
+          "random": true,
 
+          "anim": {
 
+            "enable": false,
 
+            "speed": 40,
 
+            "size_min": 0.1,
 
+            "sync": false
 
+          }
 
+        },
 
+        "line_linked": {
 
+          "enable": true,
 
+          "distance": 150,
 
+          "color": "#ffffff",
 
+          "opacity": 0.4,
 
+          "width": 1
 
+        },
 
+        "move": {
 
+          "enable": true,
 
+          "speed": 3,
 
+          "direction": "none",
 
+          "random": false,
 
+          "straight": false,
 
+          "out_mode": "out",
 
+          "bounce": false,
 
+          "attract": {
 
+            "enable": false,
 
+            "rotateX": 600,
 
+            "rotateY": 1200
 
+          }
 
+        }
 
+      },
 
+      "interactivity": {
 
+        "detect_on": "canvas",
 
+        "events": {
 
+          "onhover": {
 
+            "enable": false,
 
+            "mode": "grab"
 
+          },
 
+          "onclick": {
 
+            "enable": false,
 
+            "mode": "push"
 
+          },
 
+          "resize": true
 
+        },
 
+        "modes": {
 
+          "grab": {
 
+            "distance": 140,
 
+            "line_linked": {
 
+              "opacity": 1
 
+            }
 
+          },
 
+          "bubble": {
 
+            "distance": 400,
 
+            "size": 40,
 
+            "duration": 2,
 
+            "opacity": 8,
 
+            "speed": 3
 
+          },
 
+          "repulse": {
 
+            "distance": 200,
 
+            "duration": 0.4
 
+          },
 
+          "push": {
 
+            "particles_nb": 4
 
+          },
 
+          "remove": {
 
+            "particles_nb": 2
 
+          }
 
+        }
 
+      },
 
+      "retina_detect": true
 
+    });
 
+
 
+  </script>
 
+</body>
 
+
 
+</html>

BIN
public/static/images/batb.png
Näytä tiedosto


BIN
public/static/images/bg2.png
Näytä tiedosto


BIN
public/static/images/bg_shop (1).png
Näytä tiedosto


BIN
public/static/images/bg_shop.png
Näytä tiedosto


BIN
public/static/images/logostbrain.png
Näytä tiedosto


BIN
public/static/images/people.png
Näytä tiedosto


BIN
public/static/images/zwfwlogo.png
Näytä tiedosto


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 11 - 0
public/static/js/particles.min.js


BIN
src/assets/live/d10_fbb1.png
Näytä tiedosto


+ 1 - 1
src/layout/live/head.vue
Näytä tiedosto 

@@ -31,7 +31,7 @@
 
           <div class="info">
 
             <ul>
 
               <li :class="isTab('index') ? 'active' : ''">
 
-                <a @click="turnTo('index')" target="">首页</a>
 
+                <a @click="turnTo('home')" target="">首页</a>
 
               </li>
 
               <li class="">
 
                 <a @click="turnTo('hall_index')">直播大厅</a>

+ 3 - 1
src/main.js
Näytä tiedosto 

@@ -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();

+ 20 - 0
src/plugins/setting.js
Näytä tiedosto 

@@ -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,
 
+};

+ 18 - 0
src/router/index.js
Näytä tiedosto 

@@ -52,6 +52,12 @@ const live = [
 
         name: 'live_technical',
 
         component: () => import('../views/live/technical/index.vue'),
 
       },
 
+      {
 
+        path: '/live/liveApply',
 
+        meta: { title: '项目申请', subSite: true },
 
+        name: 'live_apply',
 
+        component: () => import('../views/live/hall/liveApply.vue'),
 
+      },
 
     ],
 
   },
 
   {
 
@@ -66,6 +72,18 @@ const live = [
 
     name: 'live_hall',
 
     component: () => import('../views/live/hall/hall.vue'),
 
   },
 
+  {
 
+    path: '/live/liveList',
 
+    meta: { title: '直播中心', subSite: true },
 
+    name: 'live_list',
 
+    component: () => import('../views/live/hall/liveList.vue'),
 
+  },
 
+  {
 
+    path: '/live/home',
 
+    meta: { title: '直播首页', subSite: true },
 
+    name: 'live_home',
 
+    component: () => import('../views/live/home.vue'),
 
+  },
 
 ];
 
 
 const routes = [

+ 39 - 0
src/store/chat.js
Näytä tiedosto 

@@ -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,
 
+};

+ 2 - 0
src/store/index.js
Näytä tiedosto 

@@ -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 },

+ 13 - 4
src/store/user/mutations.js
Näytä tiedosto 

@@ -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;

+ 3 - 3
src/style/style.css
Näytä tiedosto 

@@ -335,9 +335,9 @@ p {
 
 }
 
 
 .livemain .liveMainImage {
 
-	height: 140px;
 
-	overflow: hidden;
 
-	margin: 0 0 15px 0;
 
+  height: 175px;
 
+  overflow: hidden;
 
+  margin: 0 0 15px 0;
 
 }
 
 
 .livemain .gongqiu {

+ 131 - 275
src/views/live/hall/hall.vue
Näytä tiedosto 

@@ -68,125 +68,57 @@
 
               </div>
 
             </div>
 
             <div class="liveMainImage">
 
-              <img :src="img.main1" />
 
+              <!-- <img :src="img.main1" /> -->
 
+              <el-carousel :interval="4000" type="card" height="150px">
 
+                <el-carousel-item class="liveMainImageList" v-for="(item, index) in liveMainImageList" :key="index">
 
+                  <el-image :src="item.pic"></el-image>
 
+                  <el-col :span="24" class="btn">
 
+                    <el-button @click="apply()">立即申请</el-button>
 
+                  </el-col>
 
+                </el-carousel-item>
 
+              </el-carousel>
 
             </div>
 
             <div class="gongqiu">
 
               <div class="gongqiuTop">
 
                 <img :src="img.main2" />
 
               </div>
 
               <div class="gongqiuInfo">
 
-                <!-- <div id="tab">
 
-                  <div class="tabList">
 
-                    <ul>
 
-                      <li class="cur">找技术</li>
 
-                      <li>找需求</li>
 
-                      <li>找服务</li>
 
-                      <li>找专家</li>
 
-                    </ul>
 
-                  </div>
 
-                  <div class="tabCon">
 
-                    <div class="cur cur_1">
 
-                      <ul class="tabConList">
 
-                        <li class="oneLi" v-for="i in 4" :key="i">
 
-                          <p class="oneLiLeft">
 
-                            <span class="name">技术名称</span>
 
-                            <span class="user"><i class="iconfont icon-ren" style="color:#FFA500;margin: 0 5px 0 0;"></i>技术人</span>
 
-                            <span class="user"><i class="iconfont icon-address" style="color:#FFA500;margin: 0 5px 0 0;"></i>吉林省长春市</span>
 
-                            <span class="type">类型：实用类型</span>
 
-                            <span class="type">成熟度：正在研发</span>
 
-                            <span class="type">交易方式：许可转让</span>
 
-                            <span class="type">交易价格：面议</span>
 
-                          </p>
 
-                          <p class="oneLiRight">
 
-                            <span
 
-                              >摘要：本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0</span
 
-                            >
 
-                          </p>
 
-                        </li>
 
-                      </ul>
 
-                    </div>
 
-                    <div>
 
-                      <ul class="tabConList">
 
-                        <li class="twoLi" v-for="i in 6" :key="i">
 
-                          <a href="">
 
-                            <p>寻求疫后创伤抗抑郁药药物的需求</p>
 
-                            <p>
 
-                              <span>行业分类：医药与医疗-生物医药</span>
 
-                              <span>发布时间：2020-03-31</span>
 
-                            </p>
 
-                            <p>
 
-                              <span>需求类型：技术难题解决</span>
 
-                              <span>吉林省长春市</span>
 
-                            </p>
 
-                          </a>
 
-                        </li>
 
-                      </ul>
 
-                    </div>
 
-                    <div class="cur_3">
 
-                      <ul class="tabConList">
 
-                        <li class="threeLi" v-for="i in 6" :key="i">
 
-                          <p>长春福瑞科技有限公司</p>
 
-                          <p>
 
-                            <img :src="img.logo20" />
 
-                            <button type="button">立即咨询</button>
 
-                            <span>服务类型：</span>
 
-                            <span class="type">科技服务</span>
 
-                          </p>
 
-                          <a href="">进入主页</a>
 
-                        </li>
 
-                      </ul>
 
-                    </div>
 
-                    <div>
 
-                      <ul class="tabConList">
 
-                        <li class="fourLi" v-for="i in 6" :key="i">
 
-                          <img :src="img.img" />
 
-                          <p>
 
-                            <span class="name">万能通</span>
 
-                            <span><i class="iconfont icon-address" style="color: #FFA500;"></i>吉林省长春市</span>
 
-                          </p>
 
-                          <p>从事领域：计算机，电脑，啥都有</p>
 
-                          <p>擅长能力：全能，啥都会，没有他不会的</p>
 
-                        </li>
 
-                      </ul>
 
-                    </div>
 
-                  </div>
 
-                </div> -->
 
                 <el-tabs type="border-card">
 
                   <el-tab-pane label="找技术">
 
                     <el-col :span="24">
 
                       <ul class="technology">
 
                         <li class="technologyList" v-for="(item, index) in technologyList" :key="index">
 
                           <el-col :span="14" class="left">
 
-                            <p>{{ item.title }}</p>
 
+                            <p>{{ item.name }}</p>
 
                             <p>
 
-                              <span><i class="el-icon-user-solid" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.name }}</span>
 
-                              <span><i class="el-icon-location" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.address }}</span>
 
+                              <span><i class="el-icon-user-solid" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.contact_user }}</span>
 
+                              <span><i class="el-icon-phone" style="color:#FFA500;margin:0 5px 0 0;"></i>{{ item.contact_tel }}</span>
 
                             </p>
 
                             <p>
 
-                              <span>类型：{{ item.type }}</span>
 
-                              <span>成熟度：{{ item.chengshu }}</span>
 
-                              <span>交易方式：{{ item.fanngshi }}</span>
 
-                              <span>交易价格：{{ item.money }}</span>
 
+                              <span>类型：{{ item.product_type_name }}</span>
 
+                              <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
 
+                              <span>交易方式：{{ item.business == '0' ? '公用' : item.business == '1' ? '转让' : '竞价' }}</span>
 
+                              <span>交易价格：{{ item.price }}{{ item.priceunit }}</span>
 
                             </p>
 
                           </el-col>
 
                           <el-col :span="10" class="right">
 
-                            <p>摘要:{{ item.intro }}</p>
 
+                            <p>摘要:{{ item.introduction }}</p>
 
                           </el-col>
 
                         </li>
 
                       </ul>
 
                     </el-col>
 
                   </el-tab-pane>
 
-                  <el-tab-pane label="找需求">
 
+                  <el-tab-pane label="找产品">
 
                     <el-col :span="24">
 
                       <ul class="demand">
 
                         <li class="demandList" v-for="(item, index) in demandList" :key="index">
 
-                          <p>{{ item.title }}</p>
 
+                          <p>{{ item.name }}</p>
 
                           <p>
 
-                            <span>行业分类：{{ item.hyfl }}</span>
 
-                            <span>发布时间：{{ item.date }}</span>
 
+                            <span>研发阶段：{{ item.phase == '0' ? '阶段成果' : '最终成果' }}</span>
 
+                            <span>发布时间：{{ item.meta | getDate }}</span>
 
                           </p>
 
                           <p>
 
-                            <span>需求类型：{{ item.xqlx }}</span>
 
+                            <span>需求类型：{{ item.product_type_name }}</span>
 
                             <span>{{ item.address }}</span>
 
                           </p>
 
                         </li>
 
@@ -197,13 +129,13 @@
 
                     <el-col :span="24">
 
                       <ul class="service">
 
                         <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
 
-                          <p class="company">{{ item.company }}</p>
 
+                          <p class="company">{{ item.companyName }}</p>
 
                           <div class="serviceDown">
 
-                            <el-image :src="item.logo"></el-image>
 
+                            <el-image :src="item.image[0].url"></el-image>
 
                             <p>
 
                               <button>立即咨询</button>
 
                               <span class="type1">服务类型：</span>
 
-                              <span class="type2">{{ item.type }}</span>
 
+                              <span class="type2">{{ item.product_type_name }}</span>
 
                             </p>
 
                           </div>
 
                           <button class="btn">进入主页</button>
 
@@ -271,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>
 
@@ -300,38 +211,26 @@
 
       </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>
 
     </div>
 
   </div>
 
 </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');
 
+
 
+import _ from 'loadsh';
 
 export default {
 
   name: 'hall',
 
   props: {},
 
-  components: {},
 
+  components: { liveFoot, chat },
 
   data: () => ({
 
     img: {
 
       main1: require('@/assets/live/main1.png'),
 
@@ -339,145 +238,23 @@ export default {
 
       logo20: require('@/assets/live/logo20.png'),
 
       img: require('@/assets/live/测试图片.jpg'),
 
     },
 
-    // 找技术
 
-    technologyList: [
 
-      {
 
-        title: '产品名称',
 
-        name: '技术人',
 
-        address: '吉林省 长春市',
 
-        type: '常用类型',
 
-        chengshu: '正在研发',
 
-        fanngshi: '许可方式',
 
-        money: '面议',
 
-        intro:
 
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
 
-      },
 
-      {
 
-        title: '产品名称',
 
-        name: '技术人',
 
-        address: '吉林省 长春市',
 
-        type: '常用类型',
 
-        chengshu: '正在研发',
 
-        fanngshi: '许可方式',
 
-        money: '面议',
 
-        intro:
 
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
 
-      },
 
-      {
 
-        title: '产品名称',
 
-        name: '技术人',
 
-        address: '吉林省 长春市',
 
-        type: '常用类型',
 
-        chengshu: '正在研发',
 
-        fanngshi: '许可方式',
 
-        money: '面议',
 
-        intro:
 
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
 
-      },
 
-      {
 
-        title: '产品名称',
 
-        name: '技术人',
 
-        address: '吉林省 长春市',
 
-        type: '常用类型',
 
-        chengshu: '正在研发',
 
-        fanngshi: '许可方式',
 
-        money: '面议',
 
-        intro:
 
-          '本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0',
 
-      },
 
-    ],
 
-    // 找需求
 
-    demandList: [
 
-      {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
-      },
 
-      {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
-      },
 
-      {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
-      },
 
-      {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
-      },
 
+    liveMainImageList: [
 
       {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
+        pic: require('@/assets/live/main1.png'),
 
       },
 
       {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
+        pic: require('@/assets/live/main1.png'),
 
       },
 
       {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
-      },
 
-      {
 
-        title: '寻求以后创伤抗抑郁药药物的绣球',
 
-        hyfl: '医药与医疗-生物医药',
 
-        date: '2020-02-01',
 
-        xqlx: '技术难题解决',
 
-        address: '吉林省长春市',
 
+        pic: require('@/assets/live/main1.png'),
 
       },
 
     ],
 
+    // 找技术
 
+    technologyList: [],
 
+    // 找产品
 
+    demandList: [],
 
     // 找服务
 
-    serviceList: [
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-      {
 
-        company: '长春福瑞科技有限公司',
 
-        logo: require('@/assets/live/logo20.png'),
 
-        type: '科技服务',
 
-      },
 
-    ],
 
+    serviceList: [],
 
     // 找专家
 
     expertList: [
 
       {
 
@@ -608,9 +385,42 @@ export default {
 
   },
 
   methods: {
 
     ...mapProduct({ mapProductQuery: 'query' }),
 
+    ...market({ marketFetch: 'fetch' }),
 
     async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
 
-      const res = await this.mapProductQuery({ skip, limit, ...info });
 
-      console.log(res);
 
+      let res = await this.mapProductQuery({ skip, limit, totaltype: 0, ...info });
 
+      if (res.errcode === 0) {
 
+        this.$set(this, `technologyList`, res.data);
 
+      }
 
+      res = await this.mapProductQuery({ skip, limit, totaltype: 1, ...info });
 
+      if (res.errcode === 0) {
 
+        this.$set(this, `demandList`, res.data);
 
+      }
 
+      res = await this.mapProductQuery({ skip, limit, totaltype: 2, ...info });
 
+      if (res.errcode === 0) {
 
+        for (const val of res.data) {
 
+          const userInfo = await this.marketFetch(val.userid);
 
+          val.companyName = userInfo.data.institution_name;
 
+        }
 
+        this.$set(this, `serviceList`, res.data);
 
+      }
 
+    },
 
+    // 实况直播
 
+    clickBtn() {
 
+      this.$router.push({ path: '/live/liveList' });
 
+    },
 
+    // 申请
 
+    apply() {
 
+      this.$router.push({ path: '/live/liveApply' });
 
+    },
 
+  },
 
+  filters: {
 
+    getDate(meta) {
 
+      let createdAt = _.get(meta, `createdAt`);
 
+      let date = new Date(createdAt)
 
+        .toLocaleDateString()
 
+        .replace('/', '-')
 
+        .replace('/', '-');
 
+      return date;
 
     },
 
   },
 
   computed: {
 
@@ -628,8 +438,12 @@ export default {
 
 <style lang="less" scoped>
 
 @import '~@/style/style.css';
 
 // 找技术
 
-// .technology {
 
-// }
 
+.technology {
 
+  float: left;
 
+  width: 100%;
 
+  height: 518px;
 
+  overflow: hidden;
 
+}
 
 .technology .technologyList {
 
   float: left;
 
   width: 100%;
 
@@ -686,7 +500,7 @@ export default {
 
   line-height: 24px;
 
   overflow: hidden;
 
 }
 
-// 找需求
 
+// 找产品
 
 // .demand {
 
 // }
 
 .demand .demandList {
 
@@ -738,8 +552,12 @@ export default {
 
   text-align: left;
 
 }
 
 // 找服务
 
-// .service{
 
-// }
 
+.service {
 
+  float: left;
 
+  height: 518px;
 
+  width: 100%;
 
+  overflow: hidden;
 
+}
 
 .service .serviceList {
 
   float: left;
 
   width: 30%;
 
@@ -854,4 +672,42 @@ export default {
 
   color: #666;
 
   padding: 5px 0 0 0;
 
 }
 
+.suspenInfo {
 
+  position: fixed;
 
+  background: #0279d5;
 
+  width: 100px;
 
+  height: 100px;
 
+  z-index: 999;
 
+  left: 13%;
 
+  top: 60%;
 
+  border-radius: 20px;
 
+  box-shadow: 2px 2px 2px #055c9f;
 
+  text-align: center;
 
+  line-height: 100px;
 
+}
 
+/deep/.suspenInfo .el-link {
 
+  font-size: 20px;
 
+  color: #fff;
 
+  font-weight: bold;
 
+}
 
+.suspenInfo:hover {
 
+  background: #f60;
 
+}
 
+.liveMainImageList .el-image {
 
+  height: 150px;
 
+  position: absolute;
 
+}
 
+.liveMainImageList .btn {
 
+  position: absolute;
 
+  width: 100%;
 
+  text-align: center;
 
+  bottom: 50px;
 
+}
 
+.liveMainImageList .btn .el-button {
 
+  border: none;
 
+  background: #ffff009f;
 
+  color: #fff;
 
+  border-radius: 25px;
 
+  font-weight: bold;
 
+}
 
 </style>

+ 140 - 0
src/views/live/hall/liveApply.vue
Näytä tiedosto 

@@ -0,0 +1,140 @@
 
+<template>
 
+  <div id="liveApply">
 
+    <div class="w_0100">
 
+      <div class="w_1200">
 
+        <div class="liveApply">
 
+          <el-col :span="24" class="liveApplyTop">
 
+            <el-col :span="3">
 
+              <el-image :src="logo" style="width:105px;height:105px;"></el-image>
 
+            </el-col>
 
+            <el-col :span="20">
 
+              <p>温馨提示：</p>
 
+              <p>1、为了保证您的信息能顺利通过我们的审核，请将信息的真实情况尽可能全面的发布出来！</p>
 
+              <p>
 
+                2、根据我们的长期跟踪统计，信息完整度越高，越容易获得目标客户的关注！3、信息完整度越高，将在我们的平台搜索结果排序靠前、获得推荐机会，以及享受增值服务试用机会！
 
+              </p>
 
+            </el-col>
 
+          </el-col>
 
+          <el-col :span="24" class="liveApplyInfo">
 
+            <el-form ref="form" :model="form" label-width="120px">
 
+              <el-form-item label="技术名称">
 
+                <el-input v-model="form.name"></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="行业类别">
 
+                <el-select v-model="form.region" placeholder="请选择行业类别">
 
+                  <el-option label="类别一" value="0"></el-option>
 
+                  <el-option label="类别二" value="1"></el-option>
 
+                </el-select>
 
+              </el-form-item>
 
+              <el-form-item label="是否专利技术">
 
+                <el-radio-group v-model="form.resource">
 
+                  <el-radio label="是专利技术"></el-radio>
 
+                  <el-radio label="非专利技术"></el-radio>
 
+                </el-radio-group>
 
+              </el-form-item>
 
+              <el-form-item label="技术简介">
 
+                <el-input type="textarea" v-model="form.desc"></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="转让方式">
 
+                <el-select v-model="form.business" placeholder="请选择转让方式">
 
+                  <el-option label="公用" value="0"></el-option>
 
+                  <el-option label="转用" value="1"></el-option>
 
+                  <el-option label="竞价" value="2"></el-option>
 
+                </el-select>
 
+              </el-form-item>
 
+              <el-form-item label="研发阶段">
 
+                <el-select v-model="form.phase" placeholder="请选择研发阶段">
 
+                  <el-option label="阶段成果" value="1"></el-option>
 
+                  <el-option label="最终成果" value="2"></el-option>
 
+                </el-select>
 
+              </el-form-item>
 
+              <el-form-item label="技术图片">
 
+                <upload :limit="1" :data="form.image.url" type="url" :url="'/files/image/upload'" @upload="uploadSuccess"></upload>
 
+              </el-form-item>
 
+              <el-form-item label="联系人">
 
+                <el-input v-model="form.name"></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="联系电话">
 
+                <el-input v-model="form.name"></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="电子邮箱">
 
+                <el-input v-model="form.name"></el-input>
 
+              </el-form-item>
 
+              <el-form-item label="单位名称">
 
+                <el-input v-model="form.name"></el-input>
 
+              </el-form-item>
 
+              <el-row style="text-align:center">
 
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
 
+                <el-button>取消</el-button>
 
+              </el-row>
 
+            </el-form>
 
+          </el-col>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { mapState, createNamespacedHelpers } from 'vuex';
 
+import upload from '@/components/upload.vue';
 
+export default {
 
+  name: 'liveApply',
 
+  props: {},
 
+  components: {
 
+    upload,
 
+  },
 
+  data: () => ({
 
+    form: {
 
+      image: {},
 
+    },
 
+    logo: require('@/assets/live/d10_fbb1.png'),
 
+  }),
 
+  created() {},
 
+  methods: {
 
+    onSubmit() {
 
+      console.log(this.form);
 
+    },
 
+    uploadSuccess({ type, data }) {
 
+      this.$set(this.form, `${type}`, data.uri);
 
+    },
 
+  },
 
+  computed: {
 
+    ...mapState(['user']),
 
+    pageTitle() {
 
+      return `${this.$route.meta.title}`;
 
+    },
 
+  },
 
+  metaInfo() {
 
+    return { title: this.$route.meta.title };
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.liveApply {
 
+  float: left;
 
+  margin: 30px 0;
 
+}
 
+.liveApply .liveApplyTop {
 
+  float: left;
 
+  background: #f3faff;
 
+  padding: 15px;
 
+  border: 1px solid #ccc;
 
+  margin: 0 0 15px 0;
 
+}
 
+.liveApplyTop p:first-child {
 
+  font-size: 14px;
 
+  font-weight: bold;
 
+}
 
+.liveApplyTop p:nth-child(2n) {
 
+  font-size: 12px;
 
+  padding: 15px 0;
 
+}
 
+.liveApplyTop p:last-child {
 
+  font-size: 12px;
 
+}
 
+.liveApplyInfo {
 
+  padding: 0 100px;
 
+}
 
+</style>

+ 256 - 0
src/views/live/hall/liveList.vue
Näytä tiedosto 

@@ -0,0 +1,256 @@
 
+<template>
 
+  <div id="liveList">
 
+    <div class="pz_top">
 
+      <div class="w_0100">
 
+        <div class="livetop">
 
+          <div class="w_1200">
 
+            <div class="title">
 
+              吉林省计算机中心对接直播中心
 
+            </div>
 
+            <div class="zhuban">
 
+              <span>主办方:</span>
 
+              <span>吉林省计算机中心直播大厅</span>
 
+            </div>
 
+            <div class="num">
 
+              <p>
 
+                <span>同时在线</span>
 
+                <span>1人</span>
 
+              </p>
 
+              <p>
 
+                <span>特邀嘉宾</span>
 
+                <span>1人</span>
 
+              </p>
 
+              <p>
 
+                <span>洽谈合作</span>
 
+                <span>1人</span>
 
+              </p>
 
+              <p>
 
+                <span>达成意愿</span>
 
+                <span>1人</span>
 
+              </p>
 
+              <p>
 
+                <span>展示成果</span>
 
+                <span>1人</span>
 
+              </p>
 
+              <p>
 
+                <span>发布需求</span>
 
+                <span>1人</span>
 
+              </p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <div class="pz_main">
 
+      <div class="w_0100">
 
+        <div class="w_1200">
 
+          <el-row class="liveList">
 
+            <el-col class="liveListInfo">
 
+              <el-col :span="24" class="liveLisTop">
 
+                <span>吉林省计算机中心对接直播中心</span>
 
+                <span>实况直播</span>
 
+              </el-col>
 
+              <el-col :span="24" class="liveLisMain">
 
+                <ul>
 
+                  <li v-for="(item, index) in liveList" :key="index">
 
+                    <span>[{{ item.date }}]</span>
 
+                    <span class="textOver">{{ item.company1 }}</span>
 
+                    <span>与</span>
 
+                    <span class="textOver">{{ item.company2 }}</span>
 
+                    <span>实现对接</span>
 
+                  </li>
 
+                </ul>
 
+              </el-col>
 
+              <el-col :span="24" class="liveLisDown">
 
+                <p><span>主办单位:</span><span>吉林省计算机中心对接直播中心</span></p>
 
+                <p><span>指导单位:</span><span>吉林省计算机中心对接直播中心</span></p>
 
+                <p><span>技术支持:</span><span>长春福瑞科技有限公司</span></p>
 
+              </el-col>
 
+            </el-col>
 
+          </el-row>
 
+        </div>
 
+      </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>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { mapState, createNamespacedHelpers } from 'vuex';
 
+export default {
 
+  name: 'liveList',
 
+  props: {},
 
+  components: {},
 
+  data: () => ({
 
+    liveList: [
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+      {
 
+        date: '10:10:10',
 
+        company1: '长春市福瑞科技有限',
 
+        company2: '长春市福瑞科技有限',
 
+      },
 
+    ],
 
+  }),
 
+  created() {},
 
+  methods: {},
 
+  computed: {
 
+    ...mapState(['user']),
 
+    pageTitle() {
 
+      return `${this.$route.meta.title}`;
 
+    },
 
+  },
 
+  metaInfo() {
 
+    return { title: this.$route.meta.title };
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less">
 
+@import '~@/style/style.css';
 
+// 直播中心
 
+.liveList {
 
+  min-height: 800px;
 
+  background: #8e2321;
 
+  float: left;
 
+  width: 100%;
 
+  margin: 0 0 20px 0;
 
+  position: relative;
 
+  top: -50px;
 
+}
 
+.liveList .liveListInfo {
 
+  position: absolute;
 
+  top: 50px;
 
+}
 
+.liveListInfo .liveLisTop {
 
+  width: 100%;
 
+  text-align: center;
 
+  padding: 34px 0;
 
+  font-size: 40px;
 
+  color: #fff;
 
+}
 
+.liveListInfo .liveLisTop span:first-child {
 
+  font-size: 40px;
 
+  font-weight: bold;
 
+}
 
+.liveListInfo .liveLisTop span:last-child {
 
+  padding: 0 0 0 15px;
 
+  color: yellow;
 
+  font-family: monospace;
 
+  font-weight: bold;
 
+}
 
+.liveLisMain {
 
+  float: left;
 
+  width: 100%;
 
+  height: 470px;
 
+  overflow: hidden;
 
+}
 
+.liveLisMain ul li {
 
+  float: left;
 
+  border-bottom: 1px dashed #ccc;
 
+  width: 98%;
 
+  font-size: 20px;
 
+  padding: 10px 0;
 
+  margin: 0 10px;
 
+  color: #fff;
 
+}
 
+.liveLisMain ul li span:first-child {
 
+  color: #ffff00;
 
+  padding: 0 15px 0 0;
 
+  display: inline-block;
 
+}
 
+.liveLisMain ul li span:nth-child(2) {
 
+  display: inline-block;
 
+  width: 420px;
 
+}
 
+.liveLisMain ul li span:nth-child(3) {
 
+  display: inline-block;
 
+  width: 100px;
 
+}
 
+.liveLisMain ul li span:nth-child(4) {
 
+  display: inline-block;
 
+  width: 420px;
 
+}
 
+.liveLisDown {
 
+  float: left;
 
+  width: 100%;
 
+  height: 160px;
 
+  font-size: 16px;
 
+  padding: 25px 0 0 0;
 
+}
 
+.liveLisDown p {
 
+  padding: 10px 0 5px 10px;
 
+}
 
+.liveLisDown p span:first-child {
 
+  color: #fc3;
 
+  letter-spacing: 15px;
 
+}
 
+.liveLisDown p span:last-child {
 
+  color: #fff;
 
+}
 
+</style>

+ 113 - 0
src/views/live/hall/parts/chat.vue
Näytä tiedosto 

@@ -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>

+ 33 - 0
src/views/live/home.vue
Näytä tiedosto 

@@ -0,0 +1,33 @@
 
+<template>
 
+  <div id="home">
 
+    <iframe width="100%" style="height:99vh;" frameborder="0" src="/static/home.html"></iframe>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import { mapState, createNamespacedHelpers } from 'vuex';
 
+export default {
 
+  name: 'home',
 
+  props: {},
 
+  components: {},
 
+  data: () => ({}),
 
+  created() {},
 
+  methods: {},
 
+  computed: {
 
+    ...mapState(['user']),
 
+    pageTitle() {
 
+      return `${this.$route.meta.title}`;
 
+    },
 
+  },
 
+  metaInfo() {
 
+    return { title: this.$route.meta.title };
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.w_1200 {
 
+  width: 1200px;
 
+  margin: 0 auto;
 
+}
 
+</style>

+ 10 - 0
vue.config.js
Näytä tiedosto 

@@ -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,
 
+      },
 
     },
 
   },
 
 };