直播管理

src/views/yqrange/live-manage.vue

@@ -60,7 +60,7 @@
             <el-button @click="liveLink(scope.row)" type="text" size="small">直播链接</el-button>
             <el-button @click="countLive(scope.row)" type="text" size="small">数据统计</el-button>
             <el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
-            <el-button @click="deleteLive(scope.row)" type="text" size="small">删除</el-button>
+            <!-- <el-button @click="deleteLive(scope.row)" type="text" size="small">删除</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -82,17 +82,48 @@
         :visible.sync="dialogStatisticsVisible"
         width="500px"
         :close-on-click-modal="false"
-        @close="handleTypeClose"
+        @close="handleStatisticsClose"
         center
       >
-        <!-- <el-table-column prop="peopleNum" label="观看人次" min-width="50" align="center"></el-table-column>
-        <el-table-column prop="liveDuration" label="直播时长" min-width="50" align="center"></el-table-column>-->
-
         <el-table :data="dialogStatisticsData" align="center">
           <el-table-column property="peopleNum" label="观看人次" align="center"></el-table-column>
           <el-table-column property="liveDuration" label="直播时长" align="center"></el-table-column>
         </el-table>
       </el-dialog>
+
+      <el-dialog
+        title="直播链接"
+        :visible.sync="dialogLivelinkVisible"
+        width="500px"
+        :close-on-click-modal="false"
+        @close="handleLivelinkClose"
+        center
+      >
+        <input type="text" id="copyInput" class="hidden-input" />
+
+        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
+          <div class="href_style">讲师链接 {{lecturerUrl}}</div>
+          <el-col>
+            <el-link type="primary" @click="copyTxt(1)" size="small" class="href_button_style">复制</el-link>
+            <el-link type="primary" @click="jumpUrl(1)" size="small">进入直播</el-link>
+          </el-col>
+        </div>
+
+        <div class="live_url_style" v-if="this.liveStatus==1 || this.liveStatus==2">
+          <el-col class="href_style">嘉宾链接 {{guestUrl}}</el-col>
+          <el-col>
+            <el-link type="primary" @click="copyTxt(2)" size="small" class="href_button_style">复制</el-link>
+            <el-link type="primary" @click="jumpUrl(2)" size="small">进入直播</el-link>
+          </el-col>
+        </div>
+
+        <div class="live_url_style" v-if="this.liveScope==2">
+          <div class="href_style">观众链接 {{audienceUrl}}</div>
+          <el-col>
+            <el-link type="primary" @click="copyTxt(3)" size="small" class="href_button_style">复制</el-link>
+          </el-col>
+        </div>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -108,6 +139,7 @@ export default {
       curmbFirst: "云鹊小圈",
       curmbSecond: "直播管理",
       dialogStatisticsVisible: false,
+      dialogLivelinkVisible: false,
       searchForm: {
         liveName: "",
         liveStatus: "",
@@ -125,18 +157,19 @@ export default {
           label: "直播中"
         },
         {
-          value: "3",
+          value: "4",
           label: "已结束"
         }
       ],
       tableData: [
         {
           liveName: "浙江医学大会第二场",
-          liveStatus: 3,
+          liveScope: 1, //直播范围 1-非公开 2-公开
+          liveStatus: 1, //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
           createTime: "",
           startTime: "",
           endTime: "",
-          rtcId: 0,
+          rtcId: 0
         }
       ],
       dialogStatisticsData: [
@@ -145,6 +178,13 @@ export default {
           liveDuration: "38分钟"
         }
       ],
+      liveScope: 1,
+      liveStatus: 1,
+
+      lecturerUrl: "https://dev.yunxin.163.com/",
+      guestUrl: "https://www.cnblogs.com/",
+      audienceUrl: "https://www.soho.com",
+
       circleId: null
     };
   },
@@ -159,7 +199,10 @@ export default {
       this.getLiveList(this.searchForm.liveName, this.searchForm.liveStatus);
     },
     resetForm() {
-      console.log("重置");
+      console.log("重置alex");
+      // this.$router.push({
+      //   path: '/role-manage',
+      // })
     },
     //新建直播
     createLive() {
@@ -167,21 +210,45 @@ export default {
         path: "/create-live"
       });
     },
-    //直播链接
-    liveLink(row) {},
+    //弹出直播链接弹窗
+    liveLink(row) {
+      // this.dialogLivelinkVisible = true;
+      this.liveScope = row.liveScope;
+      this.liveStatus = row.liveStatus;
+
+      let req = {
+        rtcId: row.rtcId
+      };
+      vm.GET("rtc/liveAdmin/url", req).then(res => {
+        if (res.code == "000000") {
+          let listData = [];
+          let obj = {
+            peopleNum: res.data.viewedPersonTime,
+            liveDuration: res.data.liveDuration
+          };
+          this.lecturerUrl = res.data.lecturerUrl
+          this.guestUrl = res.data.guestUrl
+          this.audienceUrl = res.data.audienceUrl
+          this.dialogLivelinkVisible = true;
+        } else {
+          //
+        }
+      });
+    },
+    //关闭直播链接弹窗
+    handleLivelinkClose() {
+      this.dialogLivelinkVisible = false;
+    },
     //回放
     reviewLive(row) {},
     //数据统计
     countLive(row) {
       this.dialogStatisticsVisible = true;
-      this.getStatisticsData();
-    },
-    getStatisticsData() {
       console.log("getStatisticsData() : this.circleId = " + this.circleId);
       let req = {
-        rtcId: this.circleId
+        rtcId: row.rtcId
       };
-      vm.GET("liveAdmin/data", req).then(res => {
+      vm.GET("rtc/liveAdmin/data", req).then(res => {
         if (res.code == "000000") {
           let listData = [];
           let obj = {
@@ -195,6 +262,9 @@ export default {
         }
       });
     },
+    handleStatisticsClose() {
+      this.dialogStatisticsVisible = false;
+    },
     //编辑直播
     editLive(row) {
       this.$router.push({
@@ -216,48 +286,34 @@ export default {
         .then(() => {
           //  confirm
           let req = {
-            rtcId: row.rtcId,
+            rtcId: row.rtcId
           };
-          vm.DELETE("liveAdmin", req).then(res => {
+          vm.DELETE("rtc/liveAdmin", req).then(res => {
             if (res.code == "000000") {
               vm.$message({
-                  type: "success",
-                  message: "删除成功"
-                });
-              this.getLiveList("", "")
+                type: "success",
+                message: "删除成功"
+              });
+              this.getLiveList("", "");
             } else {
               vm.$message({
-                  type: "success",
-                  message: "删除失败"
-                });
+                type: "success",
+                message: "删除失败"
+              });
             }
           });
         })
-        .catch(() => {
-        })
-      },
-      //编辑直播
-      editLive(row) {
-        this.$router.push({
-          path: '/create-live',
-          query: {
-            // rtcId: "16"
-            rtcId: row.id
-          }
-        })
-      },
-      //删除直播
-      deleteLive(row) {
-        this.$confirm(`确定删除“${row.liveName}”吗？`, '', {
-          confirmButtonText: '删除',
-          cancelButtonText: '取消',
-          type: 'warning',
-          customClass: 'range-make-box',
-        }).then(() => {
-          //  confirm
-        }).catch(() => {
-          //  cancel
-        });
+        .catch(() => {});
+    },
+    //编辑直播
+    editLive(row) {
+      this.$router.push({
+        path: "/create-live",
+        query: {
+          // rtcId: "16"
+          rtcId: row.id
+        }
+      });
     },
     handleSizeChange(val) {
       this.searchForm.pageSize = val;
@@ -268,27 +324,29 @@ export default {
       this.searchForm.pageNo = val;
       this.searchList();
     },
+    //查询直播列表
     getLiveList(name, status) {
       let req = {
         circleId: this.circleId,
         name: name,
         liveStatus: status,
         pageNo: 1,
-        pageSize: 30
+        pageSize: 10
       };
       console.log("alex name = " + name + ", status = " + status);
-      vm.GET("liveAdmin/list", req).then(res => {
+      vm.POST("rtc/liveAdmin/list", req).then(res => {
         if (res.code == "000000") {
           // console.log(res);
           let listData = [];
-          for (let i = 0; i < data.length; i++) {
+          for (let i = 0; i < res.data.length; i++) {
             let obj = {
               liveName: res.data.pageContents[i].name,
+              liveScope: res.data.pageContents[i].scope,
               liveStatus: res.data.pageContents[i].liveStatus,
               createTime: res.data.pageContents[i].createdTime,
               startTime: res.data.pageContents[i].openTime,
               endTime: res.data.pageContents[i].endTime,
-              rtcId: res.data.pageContents[i].rtcIntroduces[0].rtcId,
+              rtcId: res.data.pageContents[i].id
             };
             listData.push(obj);
           }
@@ -297,6 +355,27 @@ export default {
           this.tableData = [];
         }
       });
+    },
+    copyTxt(type) {
+      let txt = document.getElementById("copyInput");
+      if (type == 1) {
+        txt.value = this.lecturerUrl;
+      } else if (type == 2) {
+        txt.value = this.guestUrl;
+      } else {
+        txt.value = this.audienceUrl;
+      }
+      txt.select(); //选择对象
+      document.execCommand("copy");
+    },
+    jumpUrl(type) {
+      var url;
+      if (type == 1) {
+        url = this.lecturerUrl;
+      } else if (type == 2) {
+        url = this.guestUrl;
+      }
+      window.open(url);
     }
   }
 };
@@ -335,4 +414,19 @@ export default {
     }
   }
 }
+.live_url_style {
+  display: flex;
+  padding: 10px;
+}
+.href_style {
+  width: 1000px;
+  background-color: #d8d8d8;
+  margin-left: -15px;
+}
+.href_button_style {
+  margin-left: 35px;
+}
+.hidden-input {
+  height: 0;
+}
 </style>