update

package.json

@@ -19,7 +19,8 @@
     "vue": "^2.6.10",
     "vue-meta": "^2.3.3",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

src/components/pagination.vue

@@ -0,0 +1,50 @@
+<template>
+  <div id="pagination">
+    <el-row type="flex" align="middle" justify="end" style="padding-top:1rem">
+      <el-col :span="24" style="text-align:right;">
+        <el-pagination
+          background
+          layout="sizes, total, prev, pager, next"
+          :total="total"
+          :page-size="limit"
+          :current-page.sync="currentPage"
+          @current-change="changePage"
+        >
+        </el-pagination>
+        <!-- 
+          :page-sizes="[5, 10, 15, 20, 50, 100]"
+          @size-change="sizeChange"
+         -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'pagination',
+  props: {
+    total: { type: Number, default: 0 },
+  },
+  components: {},
+  data: () => {
+    return {
+      currentPage: 1,
+      limit: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : process.env.VUE_APP_LIMIT * 1,
+    };
+  },
+  created() {},
+  methods: {
+    changePage(page) {
+      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
+    },
+    sizeChange(limit) {
+      this.limit = limit;
+      this.$emit('query', { skip: 0, limit: this.limit });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/wang-editor.vue

@@ -0,0 +1,82 @@
+<template>
+  <div ref="editor" style="text-align:left;"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/chat/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.w-e-text-container {
+  height: 200px !important;
+}
+</style>

src/store/index.js

@@ -24,6 +24,7 @@ import tranaudit from './tranaudit';
 import chat from './chat';
 import dock from './dock';
 import apply from './apply';
+import room from './room';
 
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
@@ -56,6 +57,7 @@ export default new Vuex.Store({
     chat,
     dock,
     apply,
+    room,
   },
   state: { ...ustate },
   mutations: { ...umutations },

src/store/room.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/live/room`,
+};
+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/views/live/hall/hallDetail.vue

@@ -45,25 +45,31 @@
       <div class="w_0100">
         <div class="w_1200">
           <el-col :span="24" class="hallDetail">
-            <el-col :span="12" class="left">
+            <el-col :span="18" class="left">
               <el-col :span="24" class="top">
                 图文直播
               </el-col>
               <el-col :span="24" class="info">
-                直播画面
+                <template v-for="(i, index) in mainTalk">
+                  <span :key="`${index + new Date().getTime()}`">[{{ i.send_time }}]</span>
+                  <span v-html="i.content" :key="`${index + new Date().getTime()}`"></span>
+                </template>
               </el-col>
             </el-col>
-            <el-col :span="12" class="right">
+            <el-col :span="6" class="right">
               <el-col :span="24" class="top">
                 聊天记录
               </el-col>
               <el-col :span="24" class="info">
-                聊天记录列表
+                <template v-for="(i, index) in otherTalk">
+                  <span :key="`${index + new Date().getTime()}`">[{{ i.send_time }}]</span>
+                  <span v-html="i.content" :key="`${index + new Date().getTime()}`"></span>
+                </template>
               </el-col>
             </el-col>
-            <el-col :span="24" class="hallDetailInput">
-              <el-input placeholder="请输入内容"></el-input>
-              <el-button type="primary">发送</el-button>
+            <el-col :span="24" class="hallDetailInput" style="text-align:center">
+              <wang-editor v-model="content" style="height:130px;padding-bottom:120px"></wang-editor>
+              <el-button type="primary" @click="sendMessage">发送</el-button>
             </el-col>
           </el-col>
         </div>
@@ -96,14 +102,35 @@
 </template>
 
 <script>
+import wangEditor from '@/components/wang-editor.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'hallDetail',
   props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
-  methods: {},
+  components: { wangEditor },
+  data: () => ({
+    content: '',
+    mainTalk: [
+      {
+        sender_name: 'test main',
+        content: '<p>test test</p>',
+        send_time: '10:29:20',
+      },
+    ],
+    otherTalk: [
+      {
+        sender_name: 'test others',
+        content: '<p>test others</p>',
+        send_time: '11:05:10',
+      },
+    ],
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    sendMessage() {},
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {
@@ -119,12 +146,12 @@ export default {
 <style lang="less">
 @import '~@/style/style.css';
 .hallDetail {
-  height: 710px;
+  height: 800px;
   border: 1px solid red;
   margin: 0 0 20px 0;
 }
 .hallDetail .left {
-  height: 600px;
+  height: 450px;
   border: 1px solid #cccccc;
 }
 .hallDetail .left .top {
@@ -136,7 +163,7 @@ export default {
 }
 .hallDetail .right {
   border: 1px solid #ccc;
-  height: 600px;
+  height: 450px;
 }
 .hallDetail .right .top {
   height: 40px;
@@ -146,7 +173,7 @@ export default {
   border-bottom: 1px dashed #ccc;
 }
 .hallDetailInput {
-  padding: 31px 0 0 215px;
+  padding: 30px 100px 0px 100px;
 }
 .hallDetailInput .el-input {
   width: 70%;

src/views/live/hall/liveList.vue

@@ -53,11 +53,10 @@
               <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>
+                    <span>[{{ item.owner_name }}]</span>
+                    <span class="textOver">{{ item.title }}</span>
+                    <span></span>
+                    <span class="textOver"></span>
                   </li>
                 </ul>
               </el-col>
@@ -66,6 +65,9 @@
                 <p><span>指导单位:</span><span>吉林省计算机中心对接直播中心</span></p>
                 <p><span>技术支持:</span><span>长春福瑞科技有限公司</span></p>
               </el-col>
+              <el-col :span="24">
+                <page :total="total"></page>
+              </el-col>
             </el-col>
           </el-row>
         </div>
@@ -98,67 +100,30 @@
 </template>
 
 <script>
+import page from '@/components/pagination.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
 export default {
   name: 'liveList',
   props: {},
-  components: {},
+  components: { page },
   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: '长春市福瑞科技有限',
-      },
-    ],
+    liveList: [],
+    total: 0,
   }),
-  created() {},
-  methods: {},
+  created() {
+    this.search();
+  },
+  methods: {
+    ...room(['query']),
+    async search({ skip = 0, limit = 10 } = { skip: 0, limit: 10 }) {
+      let res = await this.query({ skip, limit, room_status: '1', live_status: '1' });
+      if (this.$checkRes(res)) {
+        this.$set(this, `liveList`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
     pageTitle() {