讨论区间

src/assets/css/m-account.css

@@ -119,3 +119,42 @@
   filter: alpha(opacity=0);
   text-indent: -999px;
 }
+/*  */
+.m-account .account-tit2 {
+  height: 30px;
+  margin-left: 20px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 10px;
+  box-sizing: content-box;
+}
+.m-account .account-tit2 a {
+  font-weight: 700;
+  font-size: 16px;
+  display: inline-block;
+  line-height: 29px;
+  margin-right: 10px;
+  padding: 0 10px 5px;
+}
+.m-account .account-tit2 a.white {
+   color: white;
+}
+
+.m-account .account-tit2 a:hover {
+  color: #3290d4;
+  text-decoration: none;
+}
+.m-account .account-tit2 .current {
+  color: #3290d4;
+  border-bottom: 3px solid #3290d4;
+}
+.m-account .account-tit2 .ui-btn {
+  height: 28px;
+  line-height: 28px;
+  padding: 0 15px;
+  margin-right: 0;
+  font-size: 14px;
+}
+.m-account .account-tit2 .ui-btn:hover {
+  color: #fff;
+}

src/containers/center/play/components/iMedia.vue

@@ -6,36 +6,43 @@
       <span>{{media.duration|useTime}}</span>
     </h2>
     <el-row style="width: 1100px;">
-      <el-col :span="18" style="width: 700px;">
-        <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true" @pause="onPlayerPause($event)"
-          @play="onPlayerStart($event)" @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)"
-          :globalOptions="{controls:true}" :options="options">
+      <el-col :span="18" style="width:680px;">
+        <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true"
+          @pause="onPlayerPause($event)" @play="onPlayerStart($event)" @ready="playerReadied"
+          @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)" :globalOptions="{controls:true}"
+          :options="options">
         </video-player>
+
+
       </el-col>
 
-      <el-col :span="6" style="width: 400px;float:right;">
-        <div class="account-tit" style="align-items: center;width: 360px;margin-left: 30px">
-          <a :class="{'current':required===1}"  @click="required=1" class="">必修课程</a>
-          <a :class="{'current':required===0}"  @click="required=0" class="">选修课程</a>
+      <el-col :span="6" style="width: 420px;float:right;">
+        <div class="account-tit2">
+          <a :class="{'current':required===1}" @click="required=1" style="width: 100px;">必修课程</a>
+          <a :class="{'current':required===0}" @click="required=0" style="width: 100px;">选修课程</a>
+          <a :class="{'current':required===2}" @click="required=2" style="width: 100px;">讨论区</a>
         </div>
 
 
         <el-menu v-if="required==1" style="width: 400px;font-size: 10px;">
           <ul class="m-chapter-list">
-            <li v-for="(item, index) in chapter.required" :key="index"  :class="{'current':item.name==activeChapter}">
-              <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)"
-                class="ng-binding"> {{parseInt(item.xs/10)}}学时 {{item.name}}</a>
+            <li v-for="(item, index) in chapter.required" :key="index" :class="{'current':item.name==activeChapter}">
+              <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)" class="ng-binding">
+                {{parseInt(item.xs/10)}}学时 {{item.name}}</a>
 
-              <div class="sub-list" v-if="item.name==activeChapter" >
+              <div class="sub-list" v-if="item.name==activeChapter">
                 <a v-for="(subItem,index)  in list" :key="subItem.id" v-if="subItem.chapterName == activeChapter"
                   @click="goSubState(subItem, index)" :class="{'current':subItem.name==activeName}">
                   <span style="width: 8px;height: 8px;">
-                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"  :format="()=>{return ''}" v-if="subItem.percent>=100" color="green"></el-progress>
-                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16" :format="()=>{return ''}" v-else-if="subItem.percent>=50" color="cyan"></el-progress>
-                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16" :format="()=>{return ''}" v-else></el-progress>
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-if="subItem.percent>=100" color="green"></el-progress>
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-else-if="subItem.percent>=50" color="cyan"></el-progress>
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-else></el-progress>
                   </span>
                   <span style="margin-left: 16px;"> {{subItem.name}} </span>
-                  </a>
+                </a>
               </div>
             </li>
           </ul>
@@ -43,31 +50,40 @@
 
         <el-menu v-if="required==0">
           <ul class="m-chapter-list" style="width: 400px;font-size: 10px;">
-            <li v-for="(item, index) in chapter.normal" :key="index"  :class="{'current':item.name==activeChapter}">
+            <li v-for="(item, index) in chapter.normal" :key="index" :class="{'current':item.name==activeChapter}">
               <a href="javascript:void(0)" style="text-decoration: none" @click="goState(item)"
                 class="ng-binding">{{parseInt(item.xs/10)}}学时 {{item.name}}</a>
 
-              <div class="sub-list pt10" v-if="item.name==activeChapter" >
+              <div class="sub-list pt10" v-if="item.name==activeChapter">
                 <a v-for="(subItem,index) in list" :key="subItem.id" v-if="subItem.chapterName == activeChapter"
                   @click="goSubState(subItem, index)" :class="{'current':subItem.name==activeName}">
-                    <span style="width: 8px;height: 8px;">
-                      <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"  :format="()=>{return ''}" v-if="subItem.percent>=100" color="green"></el-progress>
-                      <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16" :format="()=>{return ''}" v-else-if="subItem.percent>=50" color="cyan"></el-progress>
-                      <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16" :format="()=>{return ''}" v-else></el-progress>
-                    </span>
-                    <span style="margin-left: 16px;"> {{subItem.name}} </span>
-                  </a>
+                  <span style="width: 8px;height: 8px;">
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-if="subItem.percent>=100" color="green"></el-progress>
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-else-if="subItem.percent>=50" color="cyan"></el-progress>
+                    <el-progress :percentage="subItem.percent" type="circle" :width="16" :height="16"
+                      :format="()=>{return ''}" v-else></el-progress>
+                  </span>
+                  <span style="margin-left: 16px;"> {{subItem.name}} </span>
+                </a>
                 </a>
               </div>
             </li>
           </ul>
-            <!-- <el-menu-item v-for="item in chapter.normal" :key="item">{{item}}</el-menu-item> -->
+          <!-- <el-menu-item v-for="item in chapter.normal" :key="item">{{item}}</el-menu-item> -->
         </el-menu>
+
+        <div v-if="required==2">
+          <i-message :media-id="media.mediaId"></i-message>
+        </div>
+
       </el-col>
+
     </el-row>
     <div class="left-float" v-if="!closeFace" v-drag>
-        <video ref="video" v-show="isnotbtn" width="240" height="180" autoplay></video>
-        <canvas ref="canvas" v-show="ontakebtn" width="240" height="180"></canvas>
+      <video ref="video" v-show="isnotbtn" width="240" height="180" autoplay></video>
+      <canvas ref="canvas" v-show="ontakebtn" width="240" height="180"></canvas>
     </div>
 
   </div>
@@ -83,6 +99,7 @@
   import {
     videoPlayer
   } from 'vue-video-player';
+  import IMessage from './iMessage.vue'
   import 'video.js/dist/video-js.css'
   // import html2canvas from "html2canvas";
   import {
@@ -93,14 +110,14 @@
     data() {
       return {
         timer: false,
-        required:1,
+        required: 1,
         tickNum: 0,
         prevTime: 0,
         isReady: false,
         isnotbtn: false,
         ontakebtn: false,
-        activeChapter:'',
-        activeName:'',
+        activeChapter: '',
+        activeName: '',
         curTimes: 0,
         errMsg: '',
         errCount: 0,
@@ -108,9 +125,10 @@
       }
     },
     components: {
-      videoPlayer
+      videoPlayer,
+      IMessage
     },
-    props: [ 'media', 'options', 'heartbeat', 'maxErrorCount', 'collectBeat','closeFace', 'chapter', 'list'],
+    props: ['media', 'options', 'heartbeat', 'maxErrorCount', 'collectBeat', 'closeFace', 'chapter', 'list'],
     filters: {
       useTime(val) {
         let timestr = ""
@@ -132,7 +150,7 @@
         el.onmousedown = function(e) {
           var disx = e.pageX - el.offsetLeft
           var disy = e.pageY - el.offsetTop
-          document.onmousemove = function (e) {
+          document.onmousemove = function(e) {
             el.style.left = e.pageX - disx + 'px'
             el.style.top = e.pageY - disy + 'px'
           }
@@ -157,11 +175,11 @@
       this.activeChapter = this.media.chapterName;
       this.activeName = this.media.name
     },
-    watch:{
-      "media.name"(){
+    watch: {
+      "media.name"() {
         console.log("media.name")
-         this.activeChapter = this.media.chapterName;
-         this.activeName = this.media.name
+        this.activeChapter = this.media.chapterName;
+        this.activeName = this.media.name
       }
     },
     methods: {
@@ -198,19 +216,19 @@
       destroyTimer() {
         if (this.timer) clearInterval(this.timer);
       },
-      goState(item){
-        if( item.name == this.activeChapter){
+      goState(item) {
+        if (item.name == this.activeChapter) {
           this.activeChapter = ""
-        }else{
+        } else {
           this.activeChapter = item.name;
         }
       },
-      goSubState(item, index){
+      goSubState(item, index) {
         this.$emit('loadMedia', item, index)
       },
       callCamera() {
         // H5调用电脑摄像头API
-        if( this.closeFace){
+        if (this.closeFace) {
           this.isnotbtn = true;
           return;
         }
@@ -377,12 +395,12 @@
         if (this.tickNum % this.heartbeat != 1) {
           return;
         }
-        let heartBeat = parseInt( this.tickNum / this.heartbeat);
+        let heartBeat = parseInt(this.tickNum / this.heartbeat);
         // 异常 10秒检查
-        if( !this.closeFace ){
-          if (this.errCount > 0 ) {
+        if (!this.closeFace) {
+          if (this.errCount > 0) {
             this.photograph()
-          } else if ( heartBeat % this.collectBeat == 1) {
+          } else if (heartBeat % this.collectBeat == 1) {
             this.photograph()
           }
         }
@@ -437,7 +455,8 @@
 </script>
 
 <style>
-   @import url("./imedia.css");
+  @import url("./imedia.css");
+
   .video-js {
     .vjs-control-bar {
       .vjs-icon-custombutton {
@@ -453,18 +472,20 @@
       }
     }
   }
+
   .left-float {
-      width: 240px;
-      height: 180px;
-      background-color: #8bbdf5;
-      position: fixed;
-      transition: bottom ease .9s;
-      z-index: 0;
-      left: 60px;
-      top: 120px;
-      text-align: center;
-      border-radius: 5px;
+    width: 240px;
+    height: 180px;
+    background-color: #8bbdf5;
+    position: fixed;
+    transition: bottom ease .9s;
+    z-index: 0;
+    left: 60px;
+    top: 120px;
+    text-align: center;
+    border-radius: 5px;
   }
+
   .p-process {
     width: 100%;
     margin: 20px auto;

src/containers/center/play/components/iMessage.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="message">
+    <div class="input-msg">
+      <textarea name="" id="msg" cols="50" rows="5" v-model.trim="title" @keyup.enter="sendMsg"
+        placeholder="请输入讨论内容"></textarea>
+      <el-button @click="sendMsg" type="primary" size="medium" > 发送信息 </el-button>
+    </div>
+    <div class="history">
+      <div class="msg-item" v-for="msg in msgList" :key="msg.id">
+        <div>
+          <h3>用户：{{msg.author}}</h3>
+          <p><small>{{msg.createTime | formatTime}}</small></p>
+          <p class="cont">{{msg.title}}</p>
+
+          <block v-if="msg.replyTime>0 && msg.reply!=''">
+            <h3 style="color: red;">官方答复</h3>
+            <p><small>{{msg.replyTime | formatTime}}</small></p>
+            <p class="cont">{{msg.reply}}</p>
+          </block>
+
+          <p class="control" v-if="msg.userId==userInfo.uid">
+            <el-button @click="delMsg(msg.postId)" type="danger" size="mini"> 删除  </el-button>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
+  import { mapGetters } from "vuex";
+  import { MessageBox } from "element-ui";
+  export default {
+    created() {
+      this.loadData()
+    },
+    data() {
+      return {
+        page: 1,
+        size: 6,
+        total: 0,
+        title: "",
+        msgList: [],
+
+      }
+    },
+    watch: {
+      mediaId(){
+        this.page = 1
+        this.loadData()
+      }
+    },
+    computed: {
+    	...mapGetters("user", ["userInfo"])
+    },
+    onShow(){
+      this.loadData()
+    },
+    props:['mediaId', "id"],
+    methods: {
+      loadData(){
+        if( !this.mediaId ) return;
+        let param = {
+          mediaId: this.mediaId,
+          page: this.page,
+          size: this.size
+        }
+        httpServer( "Course.GetUserPostMediaList", param).then(res=>{
+          if( res.code != 200) return;
+          this.total = res.data.total;
+          this.msgList = res.data.list||[];
+        })
+      },
+      sendMsg() {
+        if (this.title === "") {
+          alert("留言内容为空")
+          return
+        }
+        let param = {title:this.title, mediaId: this.mediaId};
+        httpServer( "Course.AddPostMedia", param).then(res=>{
+          if( res.code != 200) return;
+          this.title = ''
+          param.userId = this.userInfo.uid;
+          param.author = this.userInfo.nickname;
+          param.createTime = parseInt(Date.now()/1000)
+          this.msgList.push( param )
+          this.total += 1
+        })
+      },
+      doDelMsg(postId){
+        let param = {postId};
+        httpServer( "Course.DeletePostMedia", {postId}).then(res=>{
+          if( res.code != 200) return;
+          this.loadData()
+        })
+      },
+      delMsg(postId) {
+        let that = this
+        MessageBox({
+          title: "删除信息",
+          message: "删除之后不可恢复，是否确认删除！！",
+          showCancelButton: true,
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          beforeClose: (action, instance, done) => {
+            if (action === "confirm") {
+              instance.confirmButtonLoading = true;
+              instance.confirmButtonText = '提交中...';
+              that.doDelMsg(postId);
+              done();
+              instance.confirmButtonLoading = false;
+              that.dialogVisible = true;
+
+            } else{
+              done();
+            }
+
+          }
+        })
+      },
+    },
+    filters: {
+      formatTime: value => {
+        const date = new Date(value*1000);
+        return `${date.getFullYear()}年${(date.getMonth()+1).toString().padStart(2,0)}月${date.getDate().toString().padStart(2,0)}日 ${date.getHours().toString().padStart(2,0)}时${date.getMinutes().toString().padStart(2,0)}分${date.getSeconds().toString().padStart(2,0)}秒`
+      }
+    }
+  }
+</script>
+<!-- 如果想让这里编写的样式只对当前组件有效，style上添加一个scoped属性-->
+<style scoped>
+  .input-msg {
+    width: 80%;
+    margin: 10px auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  #msg {
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    outline: none;
+    border: 1px solid rgba(219, 73, 73, 0.466);
+    border-radius: 5px;
+    resize: none;
+    display: block;
+    margin: 10px auto;
+    font-size: 18px;
+  }
+
+  .send-msg {
+    width: 200px;
+    height: 40px;
+    border: none;
+    background-color: orangered;
+    color: wheat;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+
+  .send-msg:hover {
+    background-color: rgb(34, 231, 109);
+    color: #000;
+  }
+
+  .history {
+    width: 80%;
+    padding: 20px 10px;
+    margin: 10px auto;
+    background-color: #fff;
+  }
+
+  .msg-item {
+    display: flex;
+    padding: 10px;
+    border-bottom: 1px dashed #888;
+  }
+
+/*  .msg-item img {
+    width: 100px;
+    height: 100px;
+    border-radius: 10px;
+  } */
+
+  .msg-item div {
+    margin-left: 10px;
+    width: 100%;
+  }
+
+  .msg-item div h2 {
+    font-size: 22px;
+  }
+
+  .msg-item div h2 small {
+    font-size: 16px;
+    color: #888;
+    font-weight: 600;
+    margin-left: 20px;
+  }
+
+  .msg-item div p.cont {
+    font-size: 16px;
+    color: #444;
+    margin: 10px 0;
+    word-wrap: break-word;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    min-height: 30px;
+  }
+
+  .control {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .reply{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .btn {
+    width: 80px;
+    height: 30px;
+    border: 1px solid #888;
+    border-radius: 15px;
+    cursor: pointer;
+  }
+
+  .btn-edit {
+    background-color: rgb(20, 187, 247);
+  }
+
+  .btn-edit:hover {
+    background-color: rgb(17, 148, 196);
+    color: #fff;
+  }
+
+  .btn-del {
+    background-color: rgb(247, 20, 88);
+  }
+
+  .btn-del:hover {
+    background-color: rgb(192, 21, 72);
+    color: #fff;
+  }
+</style>