分享

1

src/styles/iconfont/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1645413076814') format('truetype');
+  src: url('iconfont.ttf?t=1645601707072') format('truetype');
 }
 
 .iconfont {
@@ -423,3 +423,7 @@
   content: "\e682";
 }
 
+.icon-bofang:before {
+  content: "\e683";
+}
+

src/views/liveClassManager/api.js

@@ -19,4 +19,53 @@ export const getLiveBroadcastList = data => {
   })
 }
 
-// imLiveBroadcastRoom/queryPage
+// 删除直播间
+export const delLiveBroadcast = data => {
+  return request({
+    url: '/api-web/imLiveBroadcastRoom/delete',
+    method: 'post',
+    data,
+    requestType: 'json',
+  })
+}
+
+// 关闭直播间
+export const closeLiveBroadcast = data => {
+  return request({
+    url: '/api-web/imLiveBroadcastRoom/delete',
+    method: 'post',
+    data,
+    requestType: 'json',
+  })
+}
+
+//查询房间信息
+// imLiveBroadcastRoom/queryRoom
+export const getLiveBroadcastRoomList= data => {
+  return request({
+    url: '/api-web/imLiveBroadcastRoom/queryRoom',
+    method: 'get',
+    data,
+  })
+}
+
+// 修改直播间
+
+export const resetLiveBroadcastRoomList= data => {
+  return request({
+    url: '/api-web/imLiveBroadcastRoom/update',
+    method: 'post',
+    data,
+    requestType: 'json',
+  })
+}
+
+
+// 获取群聊信息
+export const getImList= data => {
+  return request({
+    url: '/api-web/imGroup/queryGroupList',
+    method: 'get',
+    data,
+  })
+}

src/views/liveClassManager/index.vue

@@ -17,8 +17,9 @@
         :model="searchForm"
         @submit="search"
         @reset="onReSet"
+        ref="searchForm"
       >
-        <el-form-item>
+        <el-form-item prop="search">
           <el-input
             v-model.trim="searchForm.search"
             clearable
@@ -26,14 +27,15 @@
             placeholder="直播间编号/标题"
           ></el-input>
         </el-form-item>
-        <el-form-item prop="leaveVisitFlag">
+        <el-form-item prop="liveState">
           <el-select
             placeholder="直播状态"
-            v-model="searchForm.leaveVisitFlag"
+            v-model="searchForm.liveState"
             clearable
           >
-            <el-option label="是" value="1"></el-option>
-            <el-option label="否" value="0"></el-option>
+            <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 prop="timer">
@@ -82,22 +84,18 @@
             prop="liveStartTime"
             label="直播开始时间"
           >
-                <template slot-scope="scope">
-            <div>
-              {{scope.row.liveStartTime|dateForMinFormat}}
-            </div>
-          </template>
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.liveStartTime | dateForMinFormat }}
+              </div>
+            </template>
           </el-table-column>
-          <el-table-column
-            align="center"
-            prop="liveState"
-            label="直播状态"
-          >
-          <template slot-scope="scope">
-            <div>
-              {{scope.row.liveState|liveState}}
-            </div>
-          </template>
+          <el-table-column align="center" prop="liveState" label="直播状态">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.liveState | liveState }}
+              </div>
+            </template>
           </el-table-column>
           <el-table-column
             align="center"
@@ -107,15 +105,27 @@
           <el-table-column align="center" prop="studentId" label="操作">
             <template slot-scope="scope">
               <div>
-                <el-button type="text">关闭直播</el-button>
+                <el-button type="text" v-if="scope.row.liveState != 2"
+                  >关闭直播</el-button
+                >
                 <el-button type="text" @click="gotoDetail(scope.row)"
                   >直播详情</el-button
                 >
                 <el-button type="text" @click="shareLive(scope.row)"
                   >分享</el-button
                 >
-                <el-button type="text">修改</el-button>
-                <el-button type="text">删除</el-button>
+                <el-button
+                  type="text"
+                  v-if="scope.row.liveState == 0"
+                  @click="resetLive(scope.row)"
+                  >修改</el-button
+                >
+                <el-button
+                  type="text"
+                  v-if="scope.row.liveState == 0"
+                  @click="deteleLive(scope.row)"
+                  >删除</el-button
+                >
               </div>
             </template>
           </el-table-column>
@@ -137,7 +147,7 @@
       :visible.sync="shareVisible"
       v-if="shareVisible"
     >
-    <shareDetail :row="activeRow"/>
+      <shareDetail :row="activeRow" />
     </el-dialog>
   </div>
 </template>
@@ -145,16 +155,19 @@
 <script>
 import axios from "axios";
 import { getToken } from "@/utils/auth";
+import { getTimes } from "@/utils";
 import pagination from "@/components/Pagination/index";
-import shareDetail from "./modals/shareDetail.vue"
+import shareDetail from "./modals/shareDetail.vue";
 import load from "@/utils/loading";
-import {getLiveBroadcastList} from './api'
+import { getLiveBroadcastList,delLiveBroadcast } from "./api";
 export default {
-  components: { pagination,shareDetail },
+  components: { pagination, shareDetail },
   data() {
     return {
       searchForm: {
         search: null,
+        timer: [],
+        liveState: null,
       },
 
       tableList: [{}],
@@ -166,8 +179,8 @@ export default {
         total: 0, // 总条数
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
-      shareVisible:false,
-      activeRow:null
+      shareVisible: false,
+      activeRow: null,
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -180,34 +193,75 @@ export default {
   },
   methods: {
     init() {
-      this.getList()
+      this.getList();
+    },
+    async getList() {
+      const { timer, ...rest } = this.searchForm;
+      try {
+        const res = await getLiveBroadcastList({
+          ...rest,
+          ...getTimes(timer, ["startTime", "endTime"]),
+          rows: this.rules.limit,
+          page: this.rules.page,
+        });
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+      } catch (e) {
+        console.log(e);
+      }
     },
-   async getList() {
-     try{
-      const res = await getLiveBroadcastList({...this.searchForm,rows:this.rules.limit,page:this.rules.page})
-      this.tableList = res.data.rows;
-      this.rules.total = res.data.total
-     }catch(e){
-       console.log(e)
-     }
-   },
     search() {
       this.rules.page = 1;
       this.getList();
     },
-    onReSet() {},
+    onReSet() {
+      this.$refs.searchForm.resetFields();
+      this.search();
+    },
     newLiveClass() {
+      let params = {
+        path: "/business/createLiveClass",
+      };
+      this.$router.push(params, (route) => {
+        route.meta.title = "新建直播课";
+      });
       this.$router.push("/business/createLiveClass");
       //liveClassDetail
     },
     gotoDetail(row) {
-      this.$router.push("/business/liveClassDetail");
+      this.$router.push({path:"/business/liveClassDetail",  query: { ...row },});
     },
     shareLive(row) {
       this.activeRow = row;
-      this.activeRow.preTemplate =1
+      this.activeRow.preTemplate = 1;
       this.shareVisible = true;
     },
+    resetLive(row) {
+      let params = {
+        path: "/business/createLiveClass",
+        query: { ...row },
+      };
+      this.$router.push(params, (route) => {
+        route.meta.title = "修改直播课";
+      });
+    },
+    deteleLive(row) {
+      this.$confirm("您确定删除该直播间", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async() => {
+          try{
+            const res = await delLiveBroadcast({id:row.id})
+            this.$message.success('删除成功')
+            this.getList()
+          }catch(e){
+            console.log(e)
+          }
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>

src/views/liveClassManager/liveClassDetail.vue

@@ -5,13 +5,20 @@
     </h2>
     <div class="m-core">
       <div class="titleWrap">
-        <h2>2022大师直播第五期</h2>
-        <el-button type="primary">直播回放</el-button>
+        <h2 class="squrtTitle">
+          <div class="squrt"></div>
+          直播数据
+        </h2>
+        <el-row class="row">
+          <p class="teacherName">主讲人：<span>唐老师</span></p>
+          <p class="teacherName sub">主题:<span>2022大师直播第五期</span></p>
+          <el-button type="text" class="fontBtn">直播回放 <i class="el-icon-video-play"></i></el-button>
+        </el-row>
+        <p class="liveRemark">
+          直播内容：<span>如何在校管乐团中锻炼孩子的自我管理及团队协作意识</span>
+        </p>
       </div>
-      <p class="teacherName">主讲人：唐老师</p>
-      <p class="liveRemark">
-        直播内容：如何在校管乐团中锻炼孩子的自我管理及团队协作意识
-      </p>
+
       <div class="infoWrap">
         <statistic class="statistic" :cols="0">
           <statistic-item>
@@ -98,13 +105,14 @@
 </template>
 <script>
 import pagination from "@/components/Pagination/index";
+import {getLiveBroadcastRoomList} from './api'
 export default {
   components: { pagination },
   data() {
     return {
       searchForm: {},
       tableList: [],
-            rules: {
+      rules: {
         // 分页规则
         limit: 10, // 限制显示条数
         page: 1, // 当前页
@@ -113,32 +121,85 @@ export default {
       },
     };
   },
-  mounted() {},
+  mounted() {
+    this.getList()
+  },
   methods: {
-    onCancel() {},
+    onCancel() {
+      this.$router.push('/liveClassManager')
+        this.$store.dispatch("delVisitedViews", this.$route);
+    },
     search() {},
     onReSet() {},
-    getList(){}
+   async getList() {
+    try{
+      let obj = {rows:this.rules.limit,page:this.rules.page,roomUid:this.$route.query.roomUid,}
+      console.log(obj)
+      const res = await getLiveBroadcastRoomList(obj)
+      this.tableList = res.data.rows
+      this.rules.total = res.data.total;
+    }catch(e){
+      console.log(e)
+    }
+   },
   },
 };
 </script>
 <style lang="scss" scoped>
 .infoWrap {
-  width: 500px;
+  // width: 500px;
+}
+.sub.teacherName {
+  margin-right: 10px;
+}
+.fontBtn {
+  font-size: 18px;
 }
 .teacherName,
 .liveRemark {
+  font-size: 16px;
+  color: #222325;
   line-height: 30px;
+  font-weight: 600;
+  margin-right: 60px;
+  span {
+    color: #666666;
+    font-weight: 400;
+  }
 }
 .titleWrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  position: relative;
+  // display: flex;
+  // flex-direction: row;
+  // align-items: center;
+  padding: 5px;
   h2 {
     margin-right: 10px;
   }
+  .squrtTitle {
+    position: relative;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 600;
+    color: #222325;
+    line-height: 25px;
+    margin-bottom: 25px;
+    .squrt {
+      position: absolute;
+      left: -12px;
+      top: 5px;
+      width: 3px;
+      height: 16px;
+      background-color: var(--color-primary);
+    }
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 .statistic .statistic-content > span {
-  font-size: 18px;
+  font-size: 16px;
 }
 </style>

src/views/liveClassManager/modals/groupChat.vue

@@ -35,31 +35,32 @@
       </el-form-item>
     </el-form>
     <div class="tableWrap">
-      <el-checkbox-group v-model="checkList">
-        <div class="cell" @click="resectCheck">
-          <el-checkbox class="chioseBox" label="123456"><br /></el-checkbox>
-          <div class="dotle">乐团</div>
+      <el-checkbox-group v-model="checkList" >
+        <div class="cell" @click="resectCheck(item.id)" v-for="item in tableList" :key="item.id">
+          <el-checkbox class="chioseBox" :label="item.id" @change="resectCheck(item.id)"><br /></el-checkbox>
+          <div class="dotle">{{item.type=='MUSIC'?'乐团':'VIP'}}</div>
           <div class="teamInfo">
-            <p class="title">长笛声部1班</p>
-            <p class="subInfo">武汉第十一小学乐团（共15人）</p>
+            <p class="title">{{item.name}}</p>
+            <p class="subInfo">{{item.memo}}（共{{item.memberNum}}人）</p>
           </div>
         </div>
       </el-checkbox-group>
     </div>
-          <pagination
+    <!-- <pagination
           sync
           :total.sync="rules.total"
           :page.sync="rules.page"
           :limit.sync="rules.limit"
           :page-sizes="rules.page_size"
           @pagination="getList"
-        />
+        /> -->
   </div>
 </template>
 <script>
 import pagination from "@/components/Pagination/index";
+import { getImList } from "../api";
 export default {
-    components: { pagination },
+  components: { pagination },
   data() {
     return {
       searchForm: {
@@ -67,25 +68,39 @@ export default {
         search: "",
       },
       checkList: [],
-           rules: {
+      rules: {
         // 分页规则
         limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
+      tableList:[]
+
     };
   },
   mounted() {
     this.$store.dispatch("setBranchs");
+    this.getList();
   },
   methods: {
     onReSet() {},
     search() {},
-    resectCheck(e) {
-      console.log(e);
+    resectCheck(id,e) {
+      if(this.checkList.indexOf(id)==-1){
+        this.checkList.push(id)
+      }else{
+        this.checkList.splice(this.checkList.indexOf(id),1)
+      }
+
+    },
+
+    async getList() {
+      try {
+        const res = await getImList();
+        this.tableList = res.data;
+      } catch (e) {}
     },
-    getList(){},
   },
 };
 </script>
@@ -116,6 +131,7 @@ export default {
   flex-direction: row;
   align-items: center;
   cursor: pointer;
+  margin-bottom: 10px;
 }
 .dotle {
   width: 42px;
@@ -141,4 +157,8 @@ export default {
     line-height: 22px;
   }
 }
+.tableWrap {
+  max-height: 500px;
+  overflow-y: scroll;
+}
 </style>

src/views/liveClassManager/modals/shareDetail.vue

@@ -2,7 +2,7 @@
   <div>
     <el-form :model="form" ref="form" class="form">
       <el-form-item label="分享对象">
-        <el-radio v-model="form.shareTarget" label="1">主播</el-radio>
+        <el-radio v-model="form.shareTarget" label="1">主讲人</el-radio>
         <el-radio v-model="form.shareTarget" label="2">学员</el-radio>
       </el-form-item>
       <el-form-item label="分享方式" v-if="form.shareTarget == 2">
@@ -33,7 +33,8 @@
       </div>
       <div class="groupWrap" v-if="form.shareType == 3">
         <!-- im分享 -->
-        <groupChat />
+        <groupChat ref="groupChat" />
+        <div class="shareBtn" @click="shareChat">发送分享信息</div>
       </div>
     </div>
   </div>
@@ -42,10 +43,10 @@
 import { toPng } from "html-to-image";
 import copy from "copy-to-clipboard";
 import preview from "./preview";
-import groupChat from './groupChat'
+import groupChat from "./groupChat";
 export default {
   props: ["row"],
-  components: { preview,groupChat },
+  components: { preview, groupChat },
   data() {
     return {
       form: {
@@ -74,7 +75,7 @@ export default {
     shareImage() {
       var node = document.getElementById("preview");
       toPng(node)
-        .then( (dataUrl)=> {
+        .then((dataUrl) => {
           var img = new Image();
           img.src = dataUrl;
           // 在这里下载
@@ -89,6 +90,10 @@ export default {
           console.error("oops, something went wrong!", error);
         });
     },
+    shareChat() {
+      let checkList = this.$refs.groupChat.checkList;
+      console.log(checkList);
+    },
   },
 };
 </script>

src/views/liveClassManager/newLiveClass.vue

@@ -219,7 +219,7 @@
 import preview from "./modals/preview.vue";
 import axios from "axios";
 import { getToken, getTenantId } from "@/utils/auth";
-import { createLiveBroadcast } from "./api";
+import { createLiveBroadcast,resetLiveBroadcastRoomList } from "./api";
 export default {
   components: { preview },
   data() {
@@ -240,7 +240,16 @@ export default {
       checkList: [],
     };
   },
-  mounted() {},
+  mounted() {
+    if (this.$route.query.id) {
+      this.name = "修改直播间";
+      // console.log()
+      this.form = { ...this.$route.query };
+      this.form.roomConfig = JSON.parse(this.$route.query.roomConfig);
+      this.remoteMethod(this.$route.query.speakerName);
+      this.checkList.push(this.form.preTemplate * 1);
+    }
+  },
   methods: {
     onCancel() {
       this.$store.dispatch("delVisitedViews", this.$route);
@@ -257,12 +266,12 @@ export default {
     },
     setPreTemplate(index) {
       this.$set(this.form, "preTemplate", index);
-      if(this.checkList.indexOf(index)== -1){
-         this.checkList.push(index)
-      }else{
+      if (this.checkList.indexOf(index) == -1) {
+        this.checkList.push(index);
+      } else {
         this.checkList.splice(this.checkList.indexOf(index), 1);
       }
-      this.bindCheckBox()
+      this.bindCheckBox();
     },
     remoteMethod(query) {
       if (query !== "") {
@@ -323,16 +332,28 @@ export default {
       if (this.checkList.length > 1) {
         this.checkList.splice(0, 1);
       }
-        this.$set(this.form, "preTemplate", this.checkList[0]||null);
+      this.$set(this.form, "preTemplate", this.checkList[0] || null);
     },
-  async  submit() {
-      try {
-        const res = await createLiveBroadcast(this.form)
-        this.$message.success('创建成功')
-          this.$store.dispatch('delVisitedViews', this.$route)
-        this.$router.push('/liveClassManager')
-      }catch(e){
-        console.log(e)
+    async submit() {
+      if (this.$route.query.id) {
+        // 修改
+            try {
+          const res = await resetLiveBroadcastRoomList(this.form);
+          this.$message.success("修改成功");
+          this.$store.dispatch("delVisitedViews", this.$route);
+          this.$router.push("/liveClassManager");
+        } catch (e) {
+          console.log(e);
+        }
+      } else {
+        try {
+          const res = await createLiveBroadcast(this.form);
+          this.$message.success("创建成功");
+          this.$store.dispatch("delVisitedViews", this.$route);
+          this.$router.push("/liveClassManager");
+        } catch (e) {
+          console.log(e);
+        }
       }
       // createLiveBroadcast
     },