更新直播管理

src/App.vue

@@ -30,4 +30,8 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+p {
+  padding: 0;
+  margin: 0;
+}
 </style>

src/layout/live/liveList.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24">
+        <el-col
+          :span="8"
+          class="list"
+          v-for="(item, index) in list"
+          :key="index"
+          @click.native="$router.push({ path: '/live/detail', query: { id: item.id, name: item.name } })"
+        >
+          <el-image class="image" :src="item.filedir"></el-image>
+          <el-col :span="24" class="info">
+            <p class="textOver">
+              <span>[房间号:{{ item.name }}]</span>{{ item.title }}
+            </p>
+            <p>
+              <span><i class="iconfont iconicon-person"></i>{{ item.username }}</span>
+              <span><i class="iconfont iconzhuangtai"></i>{{ item.status == '0' ? '待开始' : '开始' }}</span>
+            </p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {
+    list: null,
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.list {
+  width: 31%;
+  margin: 0 15px 15px 15px;
+  border-radius: 10px;
+  box-shadow: 0 0 4px #ccc;
+  .info {
+    padding: 0 10px;
+    p {
+      padding: 0 0 10px 0;
+      font-size: 14px;
+      color: #000;
+    }
+    p:last-child {
+      color: #888;
+      span {
+        display: inline-block;
+        width: 50%;
+        i {
+          margin: 0 5px 0 0;
+        }
+      }
+      span:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+/deep/.el-image {
+  width: 100%;
+  height: 300px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+/deep/.el-image__inner {
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s linear;
+  -o-transition: all 0.3s linear;
+  transition: all 0.3s linear;
+}
+/deep/.el-image:hover {
+  cursor: pointer;
+}
+/deep/.el-image:hover .el-image__inner {
+  transform: scale(1.09, 1.09);
+  -ms-transform: scale(1.09, 1.09);
+  -webkit-transform: scale(1.09, 1.09);
+  -o-transform: scale(1.09, 1.09);
+  -moz-transform: scale(1.09, 1.09);
+}
+</style>

src/layout/room/detailInfo.vue

@@ -4,26 +4,26 @@
       <el-col :span="24">
         <el-col :span="24" class="messgae">
           <el-form ref="form" :model="form" label-width="120px" :rules="rules">
-            <el-form-item label="名称" prop="name">
-              <el-input v-model="form.name"></el-input>
+            <el-form-item label="标题" prop="title">
+              <el-input v-model.number="form.title" placeholder="请输入房间标题"></el-input>
+            </el-form-item>
+            <el-form-item label="房间号" prop="name">
+              <el-input v-model.number="form.name" placeholder="房间号必须是数字"></el-input>
             </el-form-item>
-
             <el-form-item label="主播" prop="anchorid">
               <el-select v-model="form.anchorid" placeholder="请选择主播" filterable>
                 <el-option v-for="item in newlist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
               </el-select>
             </el-form-item>
-
             <el-form-item label="类型" prop="type">
               <el-radio v-model="form.type" label="0">直播</el-radio>
               <el-radio v-model="form.type" label="1">会议</el-radio>
             </el-form-item>
-
             <el-form-item label="封面图片" prop="filedir">
               <upload :limit="1" :data="form.filedir" type="filedir" :url="'/files/filedir/upload'" @upload="uploadSuccess"></upload>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="onSubmit()">提交</el-button>
+              <el-button type="primary" @click="onSubmit('form')">提交</el-button>
             </el-form-item>
           </el-form>
         </el-col>
@@ -45,11 +45,14 @@ export default {
   },
   data: () => ({
     rules: {
-      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+      title: [{ required: true, message: '请输入房间标题', trigger: 'blur' }],
+      name: [
+        { required: true, message: '请输入房间号', trigger: 'blur' },
+        // { type: 'number', message: '房间号必须为数字值' },
+      ],
       anchorid: [{ required: true, message: '请选择主播', trigger: 'change' }],
       filedir: [{ required: true, message: '请选择头像图片', trigger: 'blur' }],
       type: [{ required: true, message: '请选择类型', trigger: 'change' }],
-      // type: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
     },
   }),
   created() {},
@@ -59,7 +62,7 @@ export default {
       this.$set(this.form, `${type}`, data.uri);
     },
     onSubmit() {
-      this.$emit('submitDate', { data: this.form, id: this.form.id });
+      this.$emit('submitDate', { data: this.form });
     },
   },
 };

src/layout/room/detailStatusInfo.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="messgae">
+          <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+            <el-form-item label="房间标题" prop="title">
+              <el-input v-model="form.title" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="房间号" prop="name">
+              <el-input v-model="form.name" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="主播" prop="username">
+              <el-input v-model="form.username" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="类型" prop="type">
+              <el-radio v-model="form.type" label="0" disabled>直播</el-radio>
+              <el-radio v-model="form.type" label="1" disabled>会议</el-radio>
+            </el-form-item>
+            <el-form-item label="封面图片" prop="filedir">
+              <upload :limit="1" :data="form.filedir" type="filedir" :url="'/files/filedir/upload'" @upload="uploadSuccess"></upload>
+            </el-form-item>
+            <el-form-item label="直播状态" prop="status">
+              <el-radio v-model="form.status" label="1">开启</el-radio>
+              <el-radio v-model="form.status" label="2">结束</el-radio>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit()">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/upload.vue';
+export default {
+  name: 'detail',
+  props: {
+    form: null,
+  },
+  components: {
+    upload,
+  },
+  data: () => ({
+    rules: {
+      name: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
+      anchorid: [{ required: true, message: '请选择主播', trigger: 'change' }],
+      filedir: [{ required: true, message: '请选择头像图片', trigger: 'blur' }],
+      type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+      status: [{ required: true, message: '请选择直播状态', trigger: 'change' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.form });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  padding: 15px 0;
+}
+.top .topTitle {
+  text-align: left;
+}
+.top .topBtn {
+  text-align: right;
+  padding: 0 5px;
+}
+</style>

src/router/index.js

@@ -37,17 +37,26 @@ const routes = [
     meta: { title: '直播管理' },
     component: () => import('../views/live/index.vue'),
   },
+  {
+    path: '/live/detail',
+    meta: { title: '直播详情' },
+    component: () => import('../views/live/detail.vue'),
+  },
   {
     path: '/room/index',
     meta: { title: '房间管理' },
     component: () => import('../views/room/index.vue'),
   },
-
   {
     path: '/room/detail',
     meta: { title: '房间详情' },
     component: () => import('../views/room/detail.vue'),
   },
+  {
+    path: '/room/detailStatus',
+    meta: { title: '房间状态审核' },
+    component: () => import('../views/room/detailStatus.vue'),
+  },
   {
     path: '/stat/index',
     meta: { title: '统计管理' },

src/views/live/detail.vue

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

src/views/live/index copy.vue

@@ -0,0 +1,174 @@
+<template>
+  <div id="index">
+    <p>直播管理</p>
+    <el-button @click="liveon">直播</el-button>
+    <el-button @click="shareon">分享</el-button>
+    <el-button @click="lookon">观看</el-button>
+    <div id="room-root" class="col-div">
+      <div id="share-video" class="video-box col-div" style="justify-content: flex-end"></div>
+      <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
+    </div>
+    <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import TRTC from 'trtc-js-sdk';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      client_: null,
+      localStream_: null,
+      sdkAppId_: '1400380125',
+      userId_: 'test1',
+      userSig_:
+        'eJw1zMEKgkAUheF3udtC7oxOmdAmqk1FVGrrbG5xGZPJmUSI3j3RWp7vh-OGdHsKGqohARkgjPvNmirPN*7Zk-PiF5w2F2tZQyIixDBGIdVQPD*oUzUTKpZTxEGptVz3rpTEvzq*d7-5ZHTIl6*GVHQ21m2u7rgWbbqST2Kx2y-KLMSiyCoszRw*XweDMRU_',
+    };
+  },
+  created() {
+    this.initclient();
+  },
+  methods: {
+    async initclient() {
+      this.client_ = TRTC.createClient({
+        mode: 'live',
+        sdkAppId: this.sdkAppId_,
+        userId: this.userId_,
+        userSig: this.userSig_,
+      });
+    },
+    async liveon() {
+      await this.client_.join({ roomId: 8888, role: 'anchor' });
+      const localStream_ = TRTC.createStream({
+        audio: true,
+        video: true,
+        userId: this.userId_,
+      });
+      await localStream_.initialize();
+      console.log('initialize local stream success');
+      // publish the local stream
+      await this.client_.publish(localStream_);
+      localStream_.play('main-video');
+      //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
+    },
+    async shareon() {
+      const shareId = 'share-userId';
+      const shareClient = TRTC.createClient({
+        mode: 'videoCall',
+        sdkAppId: this.sdkAppId_,
+        userId: shareId,
+        userSig:
+          'eJwtzMEKgkAUheF3mW0ld8yZVGgRFFFMFFiQ7sS52iUUm9GKondP1OX5DvxfdlaR80TDQuY6wKb9Jo1VQzn1bG*pwVlr0ez0*Ft9T*uaNAu5BzD3gbtieBoqsVMRcBn4HshB8V2T6V0IFwDGChVdXp3i-epVtdEky7DgpV0HR4nSs49FJD9XlSg85Je03G7iJfv9AdKzNAI_',
+      });
+      shareClient.setDefaultMuteRemoteStreams(true);
+      await shareClient.join({ roomId: 8888 });
+      const localStream = TRTC.createStream({ audio: false, screen: true });
+      await localStream.initialize();
+      console.log('initialize share stream success');
+      await shareClient.publish(localStream);
+      this.client_.on('stream-added', event => {
+        const remoteStream = event.stream;
+        const remoteUserId = remoteStream.getUserId();
+        if (remoteUserId === shareId) {
+          // 取消订阅自己的屏幕分享流
+          client.unsubscribe(remoteStream);
+        } else {
+          // 订阅其他一般远端流
+          client.subscribe(remoteStream);
+        }
+      });
+    },
+    async lookon() {
+      const client = TRTC.createClient({
+        mode: 'live',
+        sdkAppId: this.sdkAppId_,
+        userId: 'test2',
+        userSig:
+          'eJwtzF0LgjAUxvHvsttCzpZLJ3QTvZBJVCpRd5JHOYzF0CFC9N0T9fL5PfD-sixJvQ4bFjHhAVuOm0r8OKpoZIetE-PRlrqwlkoWcR9gFQIXcnocGRxUKr5WAfBwUuwtNaNLKQBgrlA9dDHpYpOebotqf81Vcdc9xrbzg8fxotXTnA-1Ns126mWz94b9-hIRMTw_',
+      });
+      await client.join({ roomId: 8888, role: 'anchor' });
+      client.on('stream-subscribed', event => {
+        const remoteStream = event.stream;
+        // 远端流订阅成功，播放远端音视频流
+        remoteStream.play('look-video');
+      });
+      // 监听远端流增加事件
+      client.on('stream-added', event => {
+        const remoteStream = event.stream;
+        // 订阅远端音频和视频流
+        client.subscribe(remoteStream, { audio: true, video: true, screen: true }).catch(e => {
+          console.error('failed to subscribe remoteStream');
+        });
+
+        // 仅订阅音频数据
+        // client.subscribe(remoteStream, { audio: true, video: false }).catch(e => {
+        //  console.error('failed to subscribe remoteStream');
+        // });
+      });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#room-root {
+  width: 100%;
+  height: 100%;
+  min-width: 1500px;
+  min-height: 700px;
+  align-items: flex-start;
+  background-color: #f0f0f0;
+}
+#main-video {
+  float: left;
+  width: 32%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+#share-video {
+  float: left;
+  width: 40%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+#look-video {
+  width: 80%;
+  height: 420px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  grid-area: 1/1/3/4;
+}
+.video-box {
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  font-size: 14px;
+  color: #888888;
+  z-index: 9;
+  justify-content: center;
+}
+div[id^='player'] {
+  background-color: #d8d8d8 !important;
+}
+</style>

src/views/live/index.vue

@@ -1,114 +1,46 @@
 <template>
   <div id="index">
-    <p>直播管理</p>
-    <el-button @click="liveon">直播</el-button>
-    <el-button @click="shareon">分享</el-button>
-    <el-button @click="lookon">观看</el-button>
-    <div id="room-root" class="col-div">
-      <div id="share-video" class="video-box col-div" style="justify-content: flex-end"></div>
-      <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
-    </div>
-    <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
+    <el-row>
+      <el-col :span="24" class="index">
+        <el-col :span="24" class="top">
+          <topInfo :topTitle="pageTitle"></topInfo>
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="info">
+        <liveList :list="list"></liveList>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-import TRTC from 'trtc-js-sdk';
+import topInfo from '@/layout/public/top.vue';
+import liveList from '@/layout/live/liveList.vue';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    topInfo,
+    liveList,
+  },
   data: function() {
     return {
-      client_: null,
-      localStream_: null,
-      sdkAppId_: '1400380125',
-      userId_: 'test1',
-      userSig_:
-        'eJw1zMEKgkAUheF3udtC7oxOmdAmqk1FVGrrbG5xGZPJmUSI3j3RWp7vh-OGdHsKGqohARkgjPvNmirPN*7Zk-PiF5w2F2tZQyIixDBGIdVQPD*oUzUTKpZTxEGptVz3rpTEvzq*d7-5ZHTIl6*GVHQ21m2u7rgWbbqST2Kx2y-KLMSiyCoszRw*XweDMRU_',
+      list: [],
     };
   },
   created() {
-    this.initclient();
+    this.searchInfo();
   },
   methods: {
-    async initclient() {
-      this.client_ = TRTC.createClient({
-        mode: 'live',
-        sdkAppId: this.sdkAppId_,
-        userId: this.userId_,
-        userSig: this.userSig_,
-      });
-    },
-    async liveon() {
-      await this.client_.join({ roomId: 8888, role: 'anchor' });
-      const localStream_ = TRTC.createStream({
-        audio: true,
-        video: true,
-        userId: this.userId_,
-      });
-      await localStream_.initialize();
-      console.log('initialize local stream success');
-      // publish the local stream
-      await this.client_.publish(localStream_);
-      localStream_.play('main-video');
-      //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
-    },
-    async shareon() {
-      const shareId = 'share-userId';
-      const shareClient = TRTC.createClient({
-        mode: 'videoCall',
-        sdkAppId: this.sdkAppId_,
-        userId: shareId,
-        userSig:
-          'eJwtzMEKgkAUheF3mW0ld8yZVGgRFFFMFFiQ7sS52iUUm9GKondP1OX5DvxfdlaR80TDQuY6wKb9Jo1VQzn1bG*pwVlr0ez0*Ft9T*uaNAu5BzD3gbtieBoqsVMRcBn4HshB8V2T6V0IFwDGChVdXp3i-epVtdEky7DgpV0HR4nSs49FJD9XlSg85Je03G7iJfv9AdKzNAI_',
-      });
-      shareClient.setDefaultMuteRemoteStreams(true);
-      await shareClient.join({ roomId: 8888 });
-      const localStream = TRTC.createStream({ audio: false, screen: true });
-      await localStream.initialize();
-      console.log('initialize share stream success');
-      await shareClient.publish(localStream);
-      this.client_.on('stream-added', event => {
-        const remoteStream = event.stream;
-        const remoteUserId = remoteStream.getUserId();
-        if (remoteUserId === shareId) {
-          // 取消订阅自己的屏幕分享流
-          client.unsubscribe(remoteStream);
-        } else {
-          // 订阅其他一般远端流
-          client.subscribe(remoteStream);
-        }
-      });
-    },
-    async lookon() {
-      const client = TRTC.createClient({
-        mode: 'live',
-        sdkAppId: this.sdkAppId_,
-        userId: 'test2',
-        userSig:
-          'eJwtzF0LgjAUxvHvsttCzpZLJ3QTvZBJVCpRd5JHOYzF0CFC9N0T9fL5PfD-sixJvQ4bFjHhAVuOm0r8OKpoZIetE-PRlrqwlkoWcR9gFQIXcnocGRxUKr5WAfBwUuwtNaNLKQBgrlA9dDHpYpOebotqf81Vcdc9xrbzg8fxotXTnA-1Ns126mWz94b9-hIRMTw_',
-      });
-      await client.join({ roomId: 8888, role: 'anchor' });
-      client.on('stream-subscribed', event => {
-        const remoteStream = event.stream;
-        // 远端流订阅成功，播放远端音视频流
-        remoteStream.play('look-video');
-      });
-      // 监听远端流增加事件
-      client.on('stream-added', event => {
-        const remoteStream = event.stream;
-        // 订阅远端音频和视频流
-        client.subscribe(remoteStream, { audio: true, video: true, screen: true }).catch(e => {
-          console.error('failed to subscribe remoteStream');
-        });
-
-        // 仅订阅音频数据
-        // client.subscribe(remoteStream, { audio: true, video: false }).catch(e => {
-        //  console.error('failed to subscribe remoteStream');
-        // });
-      });
+    ...room(['query', 'delete', 'update', 'fetch']),
+    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, anchorid: this.user.uid, ...info });
+      if (this.$checkRes(res)) {
+        var arr = res.data.filter(item => item.status != '2');
+        this.$set(this, `list`, arr);
+      }
     },
   },
   computed: {
@@ -123,52 +55,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-#room-root {
-  width: 100%;
-  height: 100%;
-  min-width: 1500px;
-  min-height: 700px;
-  align-items: flex-start;
-  background-color: #f0f0f0;
-}
-#main-video {
-  float: left;
-  width: 32%;
-  height: 420px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  grid-area: 1/1/3/4;
-}
-#share-video {
-  float: left;
-  width: 40%;
-  height: 420px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  grid-area: 1/1/3/4;
-}
-#look-video {
-  width: 80%;
-  height: 420px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  grid-area: 1/1/3/4;
-}
-.video-box {
-  width: 100%;
-  height: 100%;
-}
-.mask {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  font-size: 14px;
-  color: #888888;
-  z-index: 9;
-  justify-content: center;
-}
-div[id^='player'] {
-  background-color: #d8d8d8 !important;
-}
-</style>
+<style lang="less" scoped></style>

src/views/room/detailStatus.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="detailStatus">
+    <el-row>
+      <el-col :span="24" class="top">
+        <topInfo :topTitle="pageTitle"></topInfo>
+      </el-col>
+      <el-col :span="24" class="main">
+        <detailStatusInfo :form="form" @onSubmit="onSubmit"></detailStatusInfo>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/public/top.vue';
+import detailStatusInfo from '@/layout/room/detailStatusInfo.vue';
+import { createNamespacedHelpers, mapState } from 'vuex';
+const { mapActions: room } = createNamespacedHelpers('room');
+export default {
+  name: 'detailStatus',
+  props: {},
+  components: {
+    detailStatusInfo,
+    topInfo,
+  },
+  data: () => ({
+    form: {},
+  }),
+  created() {
+    this.search();
+  },
+  methods: {
+    ...room({ roomquery: 'query', roomfetch: 'fetch', roomupdate: 'update', roomcreate: 'create' }),
+    async search() {
+      if (this.id) {
+        const val = await this.roomfetch(this.id);
+        this.$set(this, `form`, val.data);
+      }
+    },
+    async onSubmit({ data }) {
+      const res = await this.roomupdate(data);
+      if (data.status == '1') {
+        this.$checkRes(res, '直播开始成功', '直播开始失败');
+      } else {
+        this.$checkRes(res, '直播結束成功', '直播結束失败');
+      }
+      this.$router.push({ path: '/room/index' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  padding: 20px;
+  margin: 10px 20px;
+  border: 1px solid #ccc;
+  width: 96%;
+}
+</style>

src/views/room/index.vue

@@ -10,7 +10,17 @@
         </el-col>
       </el-col>
       <el-col :span="24" class="info">
-        <data-table :fields="fields" @delete="toDelete" :data="list" :opera="opera" @edit="toEdit" :total="total" @query="search" :toFormat="toFormat">
+        <data-table
+          :fields="fields"
+          @edit="toEdit"
+          @delete="toDelete"
+          @order="order"
+          :data="list"
+          :opera="opera"
+          :total="total"
+          @query="search"
+          :toFormat="toFormat"
+        >
           <template #options="{item}">
             <template v-if="item.prop === 'anchorid'">
               <el-option v-for="(i, index) in clientList" :key="index" :label="i.name" :value="i.id"></el-option>
@@ -38,10 +48,21 @@ export default {
   data: () => ({
     clientList: [],
     opera: [
+      {
+        label: '审核',
+        icon: 'el-icon-s-order',
+        method: 'order',
+        display: item => {
+          return item.status == '0' ? true : item.status == '1' ? true : false;
+        },
+      },
       {
         label: '编辑',
         icon: 'el-icon-edit',
         method: 'edit',
+        display: item => {
+          return item.status == '0' ? true : false;
+        },
       },
       {
         label: '删除',
@@ -51,7 +72,8 @@ export default {
       },
     ],
     fields: [
-      { label: '房间名称', prop: 'name', filter: 'index' },
+      { label: '标题', prop: 'title' },
+      { label: '房间号', prop: 'name', filter: 'index' },
       { label: '房间类型', prop: 'type', format: i => (i == '0' ? '直播' : i == '1' ? '会议' : '临时用户') },
       {
         label: '主播',
@@ -59,6 +81,7 @@ export default {
         filter: 'select',
         format: true,
       },
+      { label: '房间状态', prop: 'status', format: i => (i == '0' ? '未开始' : i == '1' ? '开始' : '结束') },
     ],
     list: [],
     total: 0,
@@ -75,12 +98,10 @@ export default {
       this.$set(this, `list`, res.data);
       this.$set(this, `total`, res.total);
     },
-
     async searchinfo() {
       let res = await this.roomuserquery({ skip: 0, limit: 100000, role: 3 });
       this.$set(this, `clientList`, res.data);
     },
-
     toFormat(data) {
       let { model, value } = data;
       let res = '';
@@ -93,12 +114,15 @@ export default {
     toEdit({ data }) {
       this.$router.push({ path: './detail', query: { id: data.id } });
     },
-
     async toDelete({ data }) {
       const res = await this.delete(data.id);
       this.$checkRes(res, '删除成功', '删除失败');
       this.search();
     },
+    // 审核
+    async order({ data }) {
+      this.$router.push({ path: './detailStatus', query: { id: data.id } });
+    },
   },
   computed: {
     ...mapState(['user']),