修改

src/pages/teacher/components/ChooseImg.vue

+<template>
+  <div class="ChooseImg" style="width: 900px; max-width: 80vw;">
+    <div style="margin:10px;">选择图片</div>
+    <el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);">
+      <el-col :span="24">
+        <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
+          <el-input size="small" style="width:250px" placeholder="请输入内容" @keyup.enter.native="GetPageList" v-model="msg.MediaName">
+            <el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </div>
+        <div class="basefix app-attachment-list">
+          <!-- <div class="app-attachment-item app-attachment-upload">
+            <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
+              :show-file-list="false" :http-request="UploadImage" multiple>
+              <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
+                <i class="el-icon-upload"></i>
+              </div>
+            </el-upload>
+          </div> -->
+          <el-tooltip v-for="(item,index) in dataList" :key="index" class="item" effect="dark"
+            :content="item.MediaGroupName" placement="top-start">
+            <div @click="PageSelect(item)" :class="getChecked(item) ? 'selected' :''"
+              class="el-tooltip item app-attachment-item">
+              <img :src="getIconLink(item.ImageUrl)" class="app-attachment-img" style="width: 100px; height: 100px;">
+              <div class="app-attachment-name">{{item.MediaGroupName}}</div>
+            </div>
+          </el-tooltip>
+        </div>
+        <div style="padding:0 10px 10px 0">
+          <el-pagination style="text-align:right" background :current-page="currentPage"
+            @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
+            :total="PageCount">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="margin:10px;text-align:right">
+      <el-button size="small" @click="closeDialog">取消</el-button>
+      <el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    GetContributeMediumPage
+  } from '../../../api/system/wechat';
+
+  export default {
+    name: 'ChooseImg',
+    data() {
+      return {
+        czType: 0,
+        val: '',
+        Id: '',
+        currentPage: 1,
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          rowsPerPage: 12,
+          MediaGroupId: 0, //分组
+          Type: 1, //类型
+          MediaName: ''
+        },
+        loading: false,
+        groupList: [],
+        pageMsgDig: false,
+        selectId: -1,
+        emitmsg: [],
+        PageCount:0,
+        dataList:[]
+      }
+    },
+    created() {},
+    computed: {
+
+    },
+    mounted() {
+      this.GetPageList();
+    },
+    methods: {
+      closeDialog(){
+        this.$emit('closeDia');
+      },
+      getChecked(item) {
+        var isChecked = false;
+        if (this.emitmsg && this.emitmsg.length > 0) {
+          this.emitmsg.forEach(eItem => {
+            if (eItem.selectId == item.Id && !isChecked) {
+              isChecked = true;
+            }
+          });
+        }
+        return isChecked;
+      },
+      SelectImgId() {
+        if (this.emitmsg && this.emitmsg.length > 0) {
+        var result = {
+            selectId: this.emitmsg[0].selectId,
+            url: this.emitmsg[0].url
+        };
+        this.$emit('SelectId', result)
+        }
+        this.selectId = -1;
+        this.emitmsg = [];
+      },
+      UploadImage(file) {
+        this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
+          if (res.resultCode == 1) {
+            this.addpageMsg.Path = res.FileUrl;
+            this.addpageMsg.Name = res.FileName;
+            this.addPageList();
+          }
+        })
+      },
+      // 新增素材信息
+      addPageList() {
+        var upInfo = JSON.parse(localStorage.uploadInfo);
+        if(upInfo){
+          this.addpageMsg.PathType=upInfo.StoreType;
+        }
+        this.apipost("/api/product/SetGetMaterialInfo", this.addpageMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.GetPageList();
+          }
+        })
+      },
+      //选择图片 clickType 1单击 2双击
+      PageSelect(item) {
+        this.emitmsg = [];
+        console.log(item,'item');
+        this.emitmsg.push({
+            selectId: item.Id,
+            url: item.Path
+        });
+        this.selectId = item.Id;
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.GetPageList();
+      },
+      GetPageList() {
+        GetContributeMediumPage(this.msg).then(res => {
+            this.loading = false
+            this.dataList = res.Data.PageData;
+            this.PageCount = res.Data.Count
+            this.dataList.forEach(x => {
+              x.check = false;
+            })
+          })
+          .catch(err => {
+            this.loading = false
+          })
+      },
+    },
+  }
+
+</script>
+
+<style>
+  .ChooseImg{
+    background: #fff;
+    width:1000px;
+  }
+  .ChooseImg .el-input.is-active .el-input__inner,
+  .ChooseImg .el-input__inner:focus {
+    border-color: #DCDFE6;
+  }
+
+  .ChooseImg .app-attachment-list .selected {
+    box-shadow: 0 0 0 1px #1ed0ff;
+    background: #daf5ff;
+    border-radius: 5px;
+  }
+
+  .ChooseImg .selectActive .el-icon-tickets {
+    color: #409EFF;
+  }
+
+  .ChooseImg .selectActive {
+    color: #409EFF;
+  }
+
+  .ChooseImg .app-attachment-name {
+    color: #666666;
+    margin-top: 5px;
+    font-size: 13px;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
+  .ChooseImg .app-attachment-item .app-attachment-img {
+    display: block;
+  }
+
+  .ChooseImg .app-attachment-upload i {
+    font-size: 30px;
+    color: #909399;
+  }
+
+  .ChooseImg .app-attachment-item {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    float: left;
+    width: 120px;
+    height: 140px;
+    margin: 7.5px;
+    text-align: center;
+    padding: 10px 10px 0;
+  }
+
+  .ChooseImg .app-attachment-upload {
+    box-shadow: none;
+    border: 1px dashed #b2b6bd;
+    height: 100px;
+    width: 100px;
+    margin: 17.5px;
+    padding: 0;
+  }
+
+  .ChooseImg .app-attachment-list {
+    padding: 5px;
+    min-height: 475px;
+  }
+
+  .ChooseImg .appendInput .el-input__inner {
+    border-right: none;
+
+  }
+
+  .ChooseImg .appendInput .el-input-group__append {
+    background-color: #fff !important;
+    border-left: none;
+    padding: 0 15px;
+  }
+
+</style>

src/pages/teacher/components/alladdsc.vue

@@ -3,7 +3,7 @@
     <!-- 图片新增修改 -->
     <div v-if="type==1">
       <q-dialog v-model="Isadd" persistent>
-        <q-card style="width: 520px; max-width: 80vw;">
+        <q-card style="width: 520px; max-width: 80vw;max-height:80vh;">
           <q-card-section>
             <div class="text-h6">新建/修改图片素材</div>
           </q-card-section>
@@ -12,27 +12,21 @@
             <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
               @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
               map-options />
-            <q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg" v-model="addMsg.PlatformType"
-              @input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型" :dense="false" emit-value
-              map-options />
+            <q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg"
+              v-model="addMsg.PlatformType" @input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型"
+              :dense="false" emit-value map-options />
             <q-input clearable filled v-model="addMsg.MediaName" placeholder="请输入图片名称" class="q-mt-lg" maxlength="20" />
 
             <div style="margin-top: 15px;">
               <div style="width:70px">上传图片:</div>
               <div style="margin-top: 15px;">
-                <el-upload
-                    class="avatar-uploader materialupload"
-                    ref="upload"
-                    :action="importFileUrl2"
-                    :multiple="false" 
-                    :on-success="successUpload"
-                    :show-file-list="false"
+                <el-upload class="avatar-uploader materialupload" ref="upload" :action="importFileUrl2"
+                  :multiple="false" :on-success="successUpload" :show-file-list="false"
                   accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">
                   <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="imgPath==''"></i>
                   <q-img v-else :src="imgPath" style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
                   </q-img>
                 </el-upload>
-                {{imgPath}}
                 <!-- <el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
                   accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
                   <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="addMsg.Path==''"></i>
@@ -66,14 +60,14 @@
             <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
               @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
               map-options />
-            <q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg" v-model="addMsg.PlatformType"
-              @input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型" :dense="false" emit-value
-              map-options />
+            <q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg"
+              v-model="addMsg.PlatformType" @input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型"
+              :dense="false" emit-value map-options />
             <q-input clearable filled v-model="addMsg.MediaName" placeholder="请输入音频名称" class="q-mt-lg" maxlength="20" />
             <div style="margin-top: 15px;">
               <div style="width:70px">上传音频:</div>
-              <q-circular-progress v-if='addMsg.Path' show-value class="text-red q-ma-md"
-                :max='duration' :value="timevalue" size="70px" :thickness="0.2" color="light-blue" track-color="grey-3"
+              <q-circular-progress v-if='addMsg.Path' show-value class="text-red q-ma-md" :max='duration'
+                :value="timevalue" size="70px" :thickness="0.2" color="light-blue" track-color="grey-3"
                 @click.stop="playVoice(addMsg.Path)">
                 <q-icon name="volume_up" class="q-mr-xs" />
                 <span style="font-size: 11px;">
@@ -112,11 +106,35 @@
             <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.MediaGroupId"
               @input="$forceUpdate()" ref="Id" :options="allclassifyList" label="分组" :dense="false" emit-value
               map-options />
+            <q-select filled stack-label option-value="Id" option-label="Name" class="q-mt-lg"
+              v-model="addMsg.PlatformType" @input="$forceUpdate()" ref="Id" :options="platTypeList" label="平台类型"
+              :dense="false" emit-value map-options />
+            <q-input clearable filled v-model="addMsg.MediaName" placeholder="请输入视频名称" class="q-mt-lg" maxlength="20" />
+            <div style="margin-top: 15px;">
+              <div style="width:80px">视频封面图:</div>
+              <div style="margin-top: 15px;">
+                <div style="width:100px;height:100px;border:1px solid #d1d1d1;text-align:center;line-height:100px;" @click="getImgChoice=true">
+                  <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;"
+                    v-if="addMsg.VideoWXImage==''"></i>
+                  <q-img v-else :src="addMsg.VideoWXImage" style="width: 100%;height: 100%;">
+                  </q-img>
+                </div>
+                <!-- <el-upload class="avatar-uploader materialupload" action="" :before-upload="uploadFile"
+                  accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp" :show-file-list="false">
+                  <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;" v-if="addMsg.Path==''"></i>
+                  <q-img v-else :src="addMsg.Path" style="width: 110px;height: 110px;border-radius: 6px;display: flex;">
+                  </q-img>
+                </el-upload> -->
+                <div style="margin-top: 20px;">
+                  (图片大小不超过2M，图片名不能重复，支持JPG，JPEG及PNG格式)
+                </div>
+              </div>
+            </div>
             <div style="margin-top: 15px;">
               <div style="width:70px">上传视频:</div>
 
-              <video width="320" height="240" controls="controls" v-if="addMsg.VideoModel.VideoPath!=''">
-                <source :src="addMsg.VideoModel.VideoPath" type="video/mp4" />
+              <video width="320" height="240" controls="controls" v-if="addMsg.Path!=''">
+                <source :src="addMsg.Path" type="video/mp4" />
               </video>
               <div style="margin-top: 15px;">
                 <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
@@ -139,12 +157,16 @@
         </q-card>
       </q-dialog>
     </div>
+    <!-- 选择文件 -->
+    <q-dialog title="选择文件" v-model="getImgChoice" width="1200px">
+      <ChooseImg @SelectId="SelectId" @closeDia="getImgChoice=false"></ChooseImg>
+    </q-dialog>
   </div>
 </template>
 
 <script>
   import BenzAMRRecorder from 'benz-amr-recorder'
-
+  import ChooseImg from '../components/ChooseImg'
   import {
     wechatUploadSelfFile,
     UploadSelfFile
@@ -154,6 +176,9 @@
     GetContributePlatfrom
   } from '../../../api/system/wechat';
   export default {
+    components: {
+      ChooseImg
+    },
     name: "allAddSC",
     props: {
       allclassifyList: {
@@ -189,24 +214,32 @@
         duration: 0, //音频中时长
         timevalue: 0, //音频播放到时间点
         playRec: null,
-        imgPath:'',
+        imgPath: '',
         importFileUrl2: this.domainManager().UploadFileUrl2,
+        getImgChoice: false
       }
     },
     created() {
       if (this.editobj != null) {
         this.addMsg = this.editobj
+        if(this.type==1){
+          this.imgPath = this.editobj.Path;
+        }
       }
     },
-    mounted(){
+    mounted() {
       this.getPlatForm();
     },
     methods: {
+      SelectId(obj) {
+        this.addMsg.VideoWXImage = obj.url;
+        this.getImgChoice = false;
+      },
       //获取已开放平台
       getPlatForm() {
         GetContributePlatfrom({}).then(res => {
-          console.log(res,'数据');
-          if(res.Code==1){
+          console.log(res, '数据');
+          if (res.Code == 1) {
             this.platTypeList = res.Data;
           }
         })
@@ -227,37 +260,9 @@
       getcancel() {
         this.$emit('getcancel')
       },
-      savewb() { //文本
-        if (this.addMsg.MediaGroupId == '') {
-          this.$q.notify({
-            type: 'negative',
-            message: `请选择分组选择`,
-            position: 'top'
-          })
-          return
-        }
-        if (this.addMsg.TextModel.Title == '') {
-          this.$q.notify({
-            type: 'negative',
-            message: `文本标题`,
-            position: 'top'
-          })
-          return
-        }
-        if (this.addMsg.TextModel.Content == '') {
-          this.$q.notify({
-            type: 'negative',
-            message: `文本内容`,
-            position: 'top'
-          })
-          return
-        };
-
-        this.setWeChat()
-      },
-      successUpload(file){
-        if(file.Code==1){
-          this.imgPath = this.domainManager().DomainUrl+file.Data.HttpPath;
+      successUpload(file) {
+        if (file.Code == 1) {
+          this.imgPath = this.domainManager().DomainUrl + file.Data.HttpPath;
           this.addMsg.Path = file.Data.Path;
         }
       },
@@ -291,7 +296,7 @@
         }
         if (this.type == 2) { //音频上传
           // 文件类型进行判断
-          let types = ['mp3', 'wma', 'wav','amr'];
+          let types = ['mp3', 'wma', 'wav', 'amr'];
           const isAudio = types.includes(files.type);
           const isLt2M = files.size / 1024 / 1024 < 2;
           let Times = this.getTimes(files)
@@ -323,7 +328,7 @@
                   let amr = new BenzAMRRecorder()
                   let that = this
                   amr.initWithUrl(res.FileUrl).then(function () {
-                      that.duration = amr.getDuration()
+                    that.duration = amr.getDuration();
                     if (Number(that.duration) >= 60) {
                       that.$q.notify({
                         type: 'negative',
@@ -333,7 +338,8 @@
                     } else {
                       that.$forceUpdate();
                       that.addMsg.Path = res.FileUrl;
-                        that.addMsg.Minutes = that.duration;
+                      that.addMsg.Minutes = parseInt(that.duration.toFixed());
+                      console.log(that.addMsg.Minutes, 'Minutes');
                     }
                   }).catch((e) => {
 
@@ -344,7 +350,7 @@
             // }
           }
         }
-        if (this.type == 5) { //视频上传
+        if (this.type == 3) { //视频上传
           // 文件类型进行判断
           const isLt10M = files.size / 1024 / 1024 < 10;
 
@@ -364,11 +370,21 @@
             })
             return false;
           }
-          wechatUploadSelfFile('wechatcatalogue', files, res => {
+          var configObj = {
+            isCreateCover: 1
+          }
+          UploadSelfFile('wechatcatalogue', files, res => {
+          console.log(res,'数据');
             if (res.Code == 1) {
-              this.addMsg.VideoModel.VideoName = res.FileName;
-              this.addMsg.VideoModel.VideoPath = res.FileUrl;
-              this.$forceUpdate();
+              let amr = new BenzAMRRecorder()
+              let that = this
+              amr.initWithUrl(res.FileUrl).then(function () {
+                that.duration = amr.getDuration();
+                that.addMsg.Path = res.FileUrl;
+                that.addMsg.Minutes = parseInt(that.duration.toFixed());
+              }).catch((e) => {
+
+              })
             }
           })
         }
@@ -378,12 +394,11 @@
         let audioDuration = 0
         //获取录音时长
         var url = URL.createObjectURL(content);
-        console.log(url,'进入url');
+        console.log(url, '进入url');
         //经测试，发现audio也可获取视频的时长
         var audioElement = new Audio(url);
         audioElement.addEventListener("loadedmetadata", function (_event) {
           audioDuration = parseInt(audioElement.duration);
-          console.log(audioDuration,'audioDuration');
         });
         return audioDuration
       },
@@ -435,7 +450,7 @@
           })
           return
         }
-        if (this.addMsg.VideoModel.VideoPath == '') {
+        if (this.addMsg.Path == '') {
           this.$q.notify({
             type: 'negative',
             message: `请上传视频`,
@@ -609,4 +624,8 @@
     line-height: 75px;
   }
 
+  .fullscreen {
+    z-index: 999;
+  }
+
 </style>

src/pages/teacher/components/audiomaterial.vue

@@ -7,8 +7,8 @@
           @click="goadd()"></q-btn>
         <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
           @click="pldelete()"></q-btn>
-                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
-                    @click="plmove()"></q-btn>
+        <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组" @click="plmove()">
+        </q-btn>
       </div>
       <div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;"
         v-if="dataList.length>0">
@@ -16,45 +16,33 @@
           :style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
           @click="dataList[y].check = !dataList[y].check,$forceUpdate();">
           <q-card-section>
-                        <div
-                            style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
-                            <span>{{x.UpdateTime}}</span>
-                            <q-icon
-                                v-if="x.Media_Id && x.Media_Id!=''" 
-                                size="20px" name="iconfont icon-yiqueren" color="green" >
+            <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
+              <div>{{x.UpdateTime}}</div>
+              <div>
+                <div style="display:inline-block;margin-right:5px;position:relative;top:-3px;">
+                    <q-icon v-if="x.Media_Id && x.Media_Id!=''" size="20px" name="iconfont icon-yiqueren" color="green">
                     <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                         已更新
                     </q-tooltip>
                     </q-icon>
-                            <q-icon
-                                v-if="x.Media_Id==''"
-                                size="20px" name="iconfont icon-weiwancheng" color="red" >
+                    <q-icon v-if="x.Media_Id==''" size="20px" name="iconfont icon-weiwancheng" color="red">
                     <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                         未更新
                     </q-tooltip>
                     </q-icon>
                 </div>
-                        <q-circular-progress
-                            show-value
-                            class="text-red q-ma-md"
-                            :max='x.duration'
-                            :value="x.timevalue"
-                            size="70px"
-                            :thickness="0.2"
-                            color="light-blue"
-                            track-color="grey-3"
-                            @click.stop="playVoice(x.AudioModel.AudioPath,y)"
-                        >
+                <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
+              </div>
+            </div>
+            <q-circular-progress show-value class="text-red q-ma-md" :max='parseInt(x.Minutes)' :value="x.timevalue"
+              size="70px" :thickness="0.2" color="light-blue" track-color="grey-3" @click.stop="playVoice(x.Path,y)">
               <q-icon name="volume_up" class="q-mr-xs" />
               <span style="font-size: 11px;">
                 {{x.timevalue?x.timevalue.toFixed(1):0}}
               </span>
-                            
             </q-circular-progress>
-                        <div class="onetext" style="margin-top: 5px;">
-                            {{x.AudioModel&&x.AudioModel.AudioName?x.AudioModel.AudioName:''}}</div>
-                        <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateByName}}</div>
-                        <div class="onetext" style="margin-top: 5px;">分组：{{x.MediumGroupName}}</div>
+            <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateBy}}</div>
+            <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaGroupName}}</div>
           </q-card-section>
         </q-card>
 
@@ -101,8 +89,8 @@
     created() {
 
     },
-        destroyed(){//页面销毁时候清楚音频的播放
-            if(this.playRec){
+    destroyed() { //页面销毁时候清楚音频的播放
+      if (this.playRec) {
         if (this.playRec.isPlaying()) {
           this.playRec.stop()
         }
@@ -115,10 +103,7 @@
       },
       goedit(row) {
         this.editobj = {}
-                this.editobj.Id = row.Id;
-                this.editobj.MediaGroupId = row.MediaGroupId;
-                this.editobj.Type = row.Type;
-                this.editobj.AudioModel = JSON.parse(JSON.stringify(row.AudioModel));
+        this.editobj = row;
         this.Isadd = true
       },
 
@@ -136,7 +121,7 @@
       playVoice(_url, index) {
         // TODO 这里暂时没处理 音频播放中暂停
         let vm = this
-                if(vm.voiceActive && (vm.voiceActive !=index)){//如果再放一个点击另一个上一个清0
+        if (vm.voiceActive && (vm.voiceActive != index)) { //如果再放一个点击另一个上一个清0
           vm.dataList[vm.voiceActive].timevalue = 0
         }
         if (vm.playRec !== null) {
@@ -148,14 +133,14 @@
           vm.voiceActive = index
           vm.playRec.play()
           let timer = setInterval(() => {
-                        vm.dataList[index].timevalue +=0.1 
+            vm.dataList[index].timevalue += 0.1
             vm.$forceUpdate();
           }, 100);
 
           vm.playRec.onEnded(function () {
             vm.voiceActive = null;
             vm.dataList[index].timevalue = 0
-                        clearInterval(timer);//停止
+            clearInterval(timer); //停止
             setTimeout(() => {
               vm.$forceUpdate();
             }, 1000);
@@ -167,7 +152,7 @@
       },
       //停止播放
       stopPlayVoice() {
-                if(this.playRec){
+        if (this.playRec) {
           if (this.playRec.isPlaying()) {
             this.playRec.stop()
           }
@@ -247,4 +232,5 @@
     text-overflow: ellipsis;
     width: 260px;
   }
+
 </style>

src/pages/teacher/components/imgmaterial.vue

@@ -18,26 +18,26 @@
           @click="dataList[y].check = !dataList[y].check,$forceUpdate()">
           <q-card-section>
             <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
-              <span>{{x.UpdateTime}}</span>
-            </div>
-            <q-img :src="x.ImageUrl" class="imgstyle">
-              <div class="absolute-bottom text-subtitle1 text-center onetext"
-                style="padding: 0;padding: 0 5px;font-size: 12px;">
-              </div>
-
+              <div>{{x.UpdateTime}}</div>
+              <div style="display:inline-block;margin-right:5px;position:relative;top:-3px;">
                 <q-icon v-if="x.Media_Id && x.Media_Id!=''" class="absolute all-pointer-events" size="20px"
-                name="iconfont icon-yiqueren" color="green" style="top: 8px; right: 8px">
+                name="iconfont icon-yiqueren" color="green" style="top: -7px;">
                 <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                   已更新
                 </q-tooltip>
               </q-icon>
               <q-icon v-if="x.Media_Id==''" class="absolute all-pointer-events" size="20px"
-                name="iconfont icon-weiwancheng" color="red" style="top: 8px; right: 8px">
+                name="iconfont icon-weiwancheng" color="red" style="top: -7px;">
                 <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
                   未更新
                 </q-tooltip>
               </q-icon>
-            </q-img>
+              </div>
+              <div>
+                <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;" @click.stop="goedit(x)"></i>
+              </div>
+            </div>
+            <q-img :src="x.ImageUrl" class="imgstyle"></q-img>
             <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateBy}}</div>
             <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaGroupName}}</div>
           </q-card-section>
@@ -91,10 +91,7 @@
       },
       goedit(row) {
         this.editobj = {}
-        this.editobj.Id = row.Id;
-        this.editobj.MediaGroupId = row.MediaGroupId;
-        this.editobj.Type = row.Type;
-        this.editobj.ImageModel = JSON.parse(JSON.stringify(row.ImageModel));
+        this.editobj = row;
         this.Isadd = true
       },
 

src/pages/teacher/components/videomaterial.vue

+<template>
+    <div class="videomaterial" style="padding: 0;margin: 0;">
+
+        <div class="page-content">
+            <div>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="cloud_upload" label="上传视频"
+                    @click="goadd()"></q-btn>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="delete" label="批量删除"
+                    @click="pldelete()"></q-btn>
+                <q-btn color="accent" style="float:right;" size="sm" class="q-mr-md" icon="edit" label="修改分组"
+                    @click="plmove()"></q-btn>
+            </div>
+            <div style="width: 100%;display: flex;align-items: center;flex-wrap: wrap;padding: 10px 20px;" v-if="dataList.length>0">
+                <q-card class="imgcard" v-for="(x,y) in dataList" :key='y'
+                    :style="{border:x.check==true?'2px solid #91d5ff':'2px solid #FFF'}"
+                    @click="dataList[y].check = !dataList[y].check,$forceUpdate()">
+                    <q-card-section>
+                        <div style="display:flex;align-items: center;justify-content: space-between;margin-bottom: 5px;">
+                            <div>{{x.UpdateTime}}</div>
+                            <div>
+                            <div style="display:inline-block;margin-right:5px;position:relative;top:-3px;">
+                                <q-icon
+                                    v-if="x.Media_Id && x.Media_Id!=''" 
+                                    size="20px" name="iconfont icon-yiqueren" color="green" >
+                                    <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                                        已更新
+                                    </q-tooltip>
+                                </q-icon>
+                                <q-icon
+                                    v-if="x.Media_Id==''"
+                                    size="20px" name="iconfont icon-weiwancheng" color="red" >
+                                    <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                                        未更新
+                                    </q-tooltip>
+                                </q-icon>
+                            </div>
+                            <i class="el-icon-edit-outline" style="font-size: 20px;color: #1890ff;"
+                                @click.stop="goedit(x)"></i>
+                            </div>
+                        </div>
+                        <video width="260" height="180" controls="controls" v-if="x.Path">
+                            <source :src="x.Path" type="video/mp4" />
+                        </video>
+                        <div class="onetext" style="margin-top: 5px;">视频名称：{{x.MediaName}}</div>
+                        <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaGroupName}}</div>
+                    </q-card-section>
+                </q-card>
+
+            </div>
+            <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;" v-if="dataList.length==0">暂无数据</div>
+
+        </div>
+        <div v-if="Isadd==true">
+            <alladdsc :allclassifyList="allclassifyList" type='3' @editsuccess="getchildren" :editobj='editobj'   @getcancel='Isadd=false'></alladdsc>
+        </div>
+       
+
+    </div>
+</template>
+
+<script>
+    import alladdsc from '../components/alladdsc'
+   
+    export default {
+        name: "videomaterial",
+        components: {
+            alladdsc,
+        },
+        props: {
+            dataList: {
+                type: Array,
+                default: [],
+            },
+            allclassifyList:{
+                type: Array,
+                default: [],
+            }
+        },
+        data() {
+            return {
+                loading: false,
+                Isadd: false,
+                editobj:null
+            }
+        },
+        created() {
+            
+        },
+        methods: {
+            goadd() {
+                this.Isadd = true;
+                this.editobj=null
+            },
+            goedit(row){
+                console.log(row,'row');
+                this.editobj= row
+                this.Isadd = true
+            },
+            
+            getchildren(){
+                this.$emit('editsuccess')
+                this.Isadd = false
+            },
+            pldelete(){
+                this.$emit('getdelete')
+            },
+            plmove(){
+                this.$emit('getmove')
+            }
+        }
+    }
+
+</script>
+
+<style>
+    .videomaterial .Sysuser_Date .el-input--prefix .el-input__inner {
+        background-color: red;
+        border: 0;
+    }
+
+    .videomaterial .state-item {
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-align: center;
+        font-size: 10px;
+    }
+
+    .videomaterial .frIdlist {
+        padding: 3px 10px;
+        border-radius: 3px;
+        background: #EEEEEF;
+        align-items: center;
+        justify-content: center;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        cursor: pointer;
+    }
+
+    .class-popover .q-pr-lg {
+        padding-right: 0;
+        margin-top: 20px;
+    }
+
+    .videomaterial .el-date-editor.el-input {
+        width: 100%;
+    }
+
+    .videomaterial .el-date-editor.el-input input {
+        background-color: transparent !important;
+    }
+
+    .videomaterial .el-range-editor .el-range-input {
+        background: none;
+    }
+
+    .Sysuser_Date .el-input__inner {
+        background: transparent !important;
+        border: 0 !important;
+    }
+
+    .videomaterial .el-drawer.rtl {
+        overflow: inherit;
+    }
+
+    .videomaterial .imgcard {
+        width: 300px;
+        margin: 0 15px 15px 0
+    }
+
+    .videomaterial .imgstyle {
+        width: 100%;
+        height: 45px;
+        border-radius: 0;
+    }
+
+    .videomaterial .onetext {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 260px;
+    }
+</style>
\ No newline at end of file

src/pages/teacher/contribution/materialList.vue

@@ -22,7 +22,10 @@
         @getdelete="getdelete" @getmove="getmove"></imgmaterial>
       </div>
       <div v-if="tabCheck=='2'">
-          <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove" ref="allm"></audiomaterial>
+        <audiomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></audiomaterial>
+      </div>
+      <div v-if="tabCheck=='3'">
+        <videomaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren"  @getdelete="getdelete" @getmove="getmove"></videomaterial>
       </div>
     </div>
 
@@ -59,13 +62,15 @@
 
   import imgmaterial from '../components/imgmaterial'
   import audiomaterial from '../components/audiomaterial'
+  import videomaterial from '../components/videomaterial'
 
   import BenzAMRRecorder from 'benz-amr-recorder'
 
   export default {
     components: {
       imgmaterial,
-      audiomaterial
+      audiomaterial,
+      videomaterial
     },
     meta: {
       title: "素材库"