修改

src/api/system/wechat.js

@@ -577,6 +577,45 @@ export function SetSynvEduEmployee(data) {
   })
 }
 
+//素材聊表
+/**
+ * 获取素材类型枚举列表
+ */
+
+export function GetContributeMediumType(data) {
+  return request({
+    url: '/QYContribute/GetContributeMediumTypeEnumList',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取素材分页列表
+ */
+
+export function GetContributeMediumPage(data) {
+  return request({
+    url: '/QYContribute/GetContributeMediumPageList',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取平台类型
+ */
+
+export function GetContributePlatfrom(data) {
+  return request({
+    url: '/QYContribute/GetContributePlatfromList',
+    method: 'post',
+    data
+  })
+}
+
+
+
 
 
 

src/pages/teacher/components/alladdsc.vue

+<template>
+  <div class="allAddSC" style="padding: 0;margin: 0;">
+    <!-- 图片新增修改 -->
+    <div v-if="type==2">
+      <q-dialog v-model="Isadd" persistent>
+        <q-card style="width: 520px; max-width: 80vw;">
+          <q-card-section>
+            <div class="text-h6">新建/修改图片素材</div>
+          </q-card-section>
+          <q-separator />
+          <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
+            <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:70px">上传图片:</div>
+              <div style="margin-top: 15px;">
+                <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>
+
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white">
+            <q-btn class="q-mr-md" label="取消" @click="getcancel" />
+            <q-btn color="accent" class="q-mr-md" label="确定" @click="saveImage()" />
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+    </div>
+    <!-- //音频 -->
+    <div v-if="type==4">
+      <q-dialog v-model="Isadd" persistent>
+        <q-card style="width: 520px; max-width: 80vw;">
+          <q-card-section>
+            <div class="text-h6">新建/修改音频</div>
+          </q-card-section>
+          <q-separator />
+          <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
+            <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 />
+            <div style="margin-top: 15px;">
+              <div style="width:70px">上传音频:</div>
+              <!-- <audio controls="controls"  style="margin-top: 10px;">
+                                <source :src="addMsg.AudioModel.AudioPath" > -->
+
+              <!-- </audio> -->
+              <q-circular-progress v-if='addMsg.AudioModel.AudioPath' 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.AudioModel.AudioPath)">
+                <q-icon name="volume_up" class="q-mr-xs" />
+                <span style="font-size: 11px;">
+                  {{timevalue?timevalue.toFixed(1):0}}
+                </span>
+
+              </q-circular-progress>
+              <div style="margin-top: 15px;">
+                <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
+                  <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传"
+                    @click='stopPlayVoice()'>
+                  </q-btn>
+                </el-upload>
+                <div style="margin-top: 20px;">
+                  (音频上传大小不超过2MB，播放长度不超过60s,支持AMR格式。)
+                </div>
+
+              </div>
+            </div>
+
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white">
+            <q-btn class="q-mr-md" label="取消" @click="getcancel(),stopPlayVoice()" />
+            <q-btn color="accent" class="q-mr-md" label="确定" @click="saveaudio(),stopPlayVoice()" />
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+    </div>
+    <!-- 视频 -->
+    <div v-if="type==5">
+      <q-dialog v-model="Isadd" persistent>
+        <q-card style="width: 520px; max-width: 80vw;">
+          <q-card-section>
+            <div class="text-h6">新增视频</div>
+          </q-card-section>
+          <q-separator />
+          <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
+            <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 />
+            <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>
+              <div style="margin-top: 15px;">
+                <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
+                  <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
+                  </q-btn>
+                </el-upload>
+                <div style="margin-top: 20px;">
+                  (视频上传大小不超过10M，支持MP4格式)
+                </div>
+
+              </div>
+            </div>
+
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white">
+            <q-btn class="q-mr-md" label="取消" @click="getcancel" />
+            <q-btn color="accent" class="q-mr-md" label="确定" @click="savevideo()" />
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BenzAMRRecorder from 'benz-amr-recorder'
+
+  import {
+    wechatUploadSelfFile,
+    UploadFileToSystem
+  } from "../../../api/common/common"; //上传图片
+  import {
+    setWeChatMediumInfo, //新增修改素材
+    GetContributePlatfrom
+  } from '../../../api/system/wechat';
+  export default {
+    name: "allAddSC",
+    props: {
+      allclassifyList: {
+        type: Array,
+        default: [],
+      },
+      type: {
+        type: String,
+        default: 1,
+      },
+      editobj: {
+        type: Object,
+        default: null,
+      }
+
+    },
+    data() {
+      return {
+        Isadd: true,
+        addMsg: {
+          Id: 0,
+          MediaGroupId: 1, //	分组ID
+          MediaName: '', //标题/名称
+          Description: '', //视频介绍
+          Type: this.type, //1图片 2 音频 3视频
+          VideoImage: '', //视频封面图
+          VideoWXImage: '', //视频封面图（微信地址） （修改时 素材库选择）	
+          Path: '', //文件路径
+          PlatformType: 1, //平台类型 枚举
+          Minutes: '' //音频/视频 时长 00:00格式
+        },
+        platTypeList: [], //平台类型
+        duration: 0, //音频中时长
+        timevalue: 0, //音频播放到时间点
+        playRec: null
+      }
+    },
+    created() {
+      if (this.editobj != null) {
+        this.addMsg = this.editobj
+        this.addMsg.Is_Sync = 1
+      } else {
+        this.gettype()
+      }
+    },
+    mounted(){
+        this.getPlatForm();
+    },
+    methods: {
+      //获取已开放平台
+      getPlatForm() {
+        GetContributePlatfrom({}).then(res => {
+          console.log(res,'数据');
+          if(res.Code==1){
+            this.platTypeList = res.Data;
+          }
+        })
+      },
+      gettype() {
+        this.addMsg.Id = 0;
+        this.addMsg.Type = this.type
+        this.addMsg.Is_Sync = 1;
+        this.addMsg.MediaGroupId = '';
+        if (this.type == 2) { //图片
+          this.addMsg.ImageModel = {
+            ImageName: '',
+            ImagePath: ''
+          };
+        } else if (this.type == 4) { //音频
+          this.addMsg.AudioModel = {
+            AudioName: '',
+            AudioPath: '',
+          };
+        } else if (this.type == 5) { //视频
+          this.addMsg.VideoModel = {
+            VideoName: '',
+            VideoPath: '',
+          };
+        }
+      },
+      setWeChat() {
+        setWeChatMediumInfo(this.addMsg).then(res => {
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: res.Message,
+            position: 'top'
+          })
+          //this.gettype()
+          this.$emit('editsuccess')
+        })
+      },
+      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()
+      },
+      uploadFile(files) { //图片上传
+      console.log('进入');
+      console.log(files,'files');
+      console.log(this.type,'typeee');
+        if (this.type == 1) { //图文和图片、小程序的时候处理
+          let types = ['image/jpeg', 'image/jpg', 'image/png'];
+          const isImage = types.includes(files.type);
+          const isLtSize = files.size / 1024 / 1024 < 2;
+          if (!isLtSize) {
+            this.$q.notify({
+              type: 'negative',
+              message: `上传图片大小不能超过 2MB!`,
+              position: 'top'
+            })
+            return false;
+          }
+          if (!isImage) {
+            this.$q.notify({
+              type: 'negative',
+              message: `上传图片只能是 JPG、JPEG、PNG 格式!`,
+              position: 'top'
+            })
+          } else {
+            UploadSelfFile('wechatcatalogue', files, 1 , res => {
+              console.log(res,'数据');
+              if (res.Code == 1) {
+                
+              }
+            })
+          }
+        }
+        if (this.type == 4) { //音频上传
+          // 文件类型进行判断
+          const isAudio = files.type === "audio/amr";
+          const isLt2M = files.size / 1024 / 1024 < 2;
+          let Times = this.getTimes(files)
+          const isTime60S = Times >= 60 ? true : false;
+
+          // 获取时长
+          ;
+          if (!isAudio) {
+            this.$q.notify({
+              type: 'negative',
+              message: `上传文件只能是AMR格式!`,
+              position: 'top'
+            })
+          } else {
+            if (!isLt2M) {
+              this.$q.notify({
+                type: 'negative',
+                message: `上传文件大小不能超过 2MB!!`,
+                position: 'top'
+              })
+            } else {
+              if (isTime60S) {
+                this.$q.notify({
+                  type: 'negative',
+                  message: `上传文件时长不能超过60秒!!`,
+                  position: 'top'
+                })
+              } else {
+
+                wechatUploadSelfFile('wechatcatalogue', files, res => {
+                  if (res.Code == 1) {
+                    let amr = new BenzAMRRecorder()
+                    let that = this
+                    amr.initWithUrl(res.FileUrl).then(function () {
+                      that.duration = amr.getDuration()
+                      if (Number(that.duration) >= 60) {
+                        that.$q.notify({
+                          type: 'negative',
+                          message: `上传文件时长不能超过60秒!!`,
+                          position: 'top'
+                        })
+                      } else {
+                        that.addMsg.AudioModel.AudioName = res.FileName;
+                        that.addMsg.AudioModel.AudioPath = res.FileUrl;
+                        that.$forceUpdate();
+                      }
+                    }).catch((e) => {
+
+                    })
+
+                  }
+                })
+              }
+            }
+          }
+        }
+        if (this.type == 5) { //视频上传
+          // 文件类型进行判断
+          const isLt10M = files.size / 1024 / 1024 < 10;
+
+          if (['video/mp4'].indexOf(files.type) == -1) {
+            this.$q.notify({
+              type: 'negative',
+              message: `请上传正确的视频格式!`,
+              position: 'top'
+            })
+            return false;
+          }
+          if (!isLt10M) {
+            this.$q.notify({
+              type: 'negative',
+              message: `上传视频大小不能超过10MB哦!`,
+              position: 'top'
+            })
+            return false;
+          }
+          wechatUploadSelfFile('wechatcatalogue', files, res => {
+            if (res.Code == 1) {
+              this.addMsg.VideoModel.VideoName = res.FileName;
+              this.addMsg.VideoModel.VideoPath = res.FileUrl;
+              this.$forceUpdate();
+            }
+          })
+        }
+      },
+      getTimes(file) { //获取音频妙数
+        var content = file;
+        let audioDuration = 0
+        //获取录音时长
+        var url = URL.createObjectURL(content);
+        //经测试，发现audio也可获取视频的时长
+        var audioElement = new Audio(url);
+        audioElement.addEventListener("loadedmetadata", (_event) => {
+          audioDuration = parseInt(audioElement.duration);
+        });
+        return audioDuration
+      },
+
+      saveImage() { //图片提交
+        if (this.addMsg.MediaGroupId == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择分组选择`,
+            position: 'top'
+          })
+          return
+        }
+        if (this.addMsg.Path == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请上传图片`,
+            position: 'top'
+          })
+          return
+        }
+        this.setWeChat()
+
+      },
+      saveaudio() { //音频
+        if (this.addMsg.MediaGroupId == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择分组选择`,
+            position: 'top'
+          })
+          return
+        }
+        if (this.addMsg.AudioModel.AudioPath == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请上传音频`,
+            position: 'top'
+          })
+          return
+        }
+        this.setWeChat()
+      },
+      savevideo() { //视频
+        if (this.addMsg.MediaGroupId == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择分组选择`,
+            position: 'top'
+          })
+          return
+        }
+        if (this.addMsg.VideoModel.VideoPath == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请上传视频`,
+            position: 'top'
+          })
+          return
+        }
+        this.setWeChat()
+      },
+      showUpLoadFile(i) {
+        // 文件类型进行判断
+
+        if (
+          i.FileName.substring(
+            i.FileName.lastIndexOf(".") + 1,
+            i.FileName.length
+          ).toUpperCase() == "PDF" ||
+          i.FileName.substring(
+            i.FileName.lastIndexOf(".") + 1,
+            i.FileName.length
+          ).toUpperCase() == "TXT"
+        ) {
+          this.previewPDF(i.Url);
+        } else {
+          window.open(
+            "https://view.officeapps.live.com/op/view.aspx?src=" + i.FilePath
+          );
+        }
+      },
+
+      playVoice(_url) {
+        // TODO 这里暂时没处理 音频播放中暂停
+        let vm = this
+        if (vm.playRec !== null) {
+          vm.stopPlayVoice()
+        }
+        vm.playRec = new BenzAMRRecorder()
+        //⚠️注意跨域问题
+        vm.playRec.initWithUrl(_url).then(function () {
+          vm.playRec.play()
+          let timer = setInterval(() => {
+            vm.timevalue += 0.1
+            vm.$forceUpdate();
+          }, 100);
+
+          vm.playRec.onEnded(function () {
+            vm.timevalue = 0
+            clearInterval(timer); //停止
+            setTimeout(() => {
+              vm.$forceUpdate();
+            }, 1000);
+
+          })
+        }).catch((e) => {
+
+          vm.$message.error('播放录音失败')
+        })
+      },
+      //停止播放
+      stopPlayVoice() {
+        if (this.playRec) {
+          if (this.playRec.isPlaying()) {
+            this.playRec.stop()
+          }
+        }
+      },
+
+    }
+  }
+
+</script>
+
+<style>
+  .allAddSC .Sysuser_Date .el-input--prefix .el-input__inner {
+    background-color: red;
+    border: 0;
+  }
+
+  .allAddSC .state-item {
+    padding: 2px 5px;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .allAddSC .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;
+  }
+
+  .allAddSC .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  .allAddSC .el-date-editor.el-input input {
+    background-color: transparent !important;
+  }
+
+  .allAddSC .el-range-editor .el-range-input {
+    background: none;
+  }
+
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .allAddSC .el-drawer.rtl {
+    overflow: inherit;
+  }
+
+  .allAddSC .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  .allAddSC .el-date-editor.el-input input {
+    background-color: transparent !important;
+  }
+
+  .allAddSC .el-range-editor .el-range-input {
+    background: none;
+  }
+
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .allAddSC .el-drawer.rtl {
+    overflow: inherit;
+  }
+
+  .allAddSC .imgcard {
+    width: 240px;
+    margin: 0 15px 15px 0
+  }
+
+  .allAddSC .imgstyle {
+    width: 100%;
+    height: 120px;
+    border-radius: 0;
+  }
+
+  .allAddSC .onetext {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 208px;
+  }
+
+  .addscfile .icon-excel,
+  .addscfile .icon-pdf,
+  .addscfile .icon-txt,
+  .addscfile .icon-wenjian,
+  .addscfile .icon-yasuobao,
+  .addscfile .icon-shipin,
+  .addscfile .icon-word {
+    font-size: 38px;
+    color: green;
+    line-height: 75px;
+  }
+
+</style>

src/pages/teacher/components/imgmaterial.vue

+<template>
+  <div class="imgmaterial" 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;">
+              <span>{{x.UpdateTime}}</span>
+            </div>
+            <q-img :src="x.Path" class="imgstyle">
+              <div class="absolute-bottom text-subtitle1 text-center onetext"
+                style="padding: 0;padding: 0 5px;font-size: 12px;">
+              </div>
+
+              <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">
+                <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">
+                <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
+                  未更新
+                </q-tooltip>
+              </q-icon>
+            </q-img>
+            <div class="onetext" style="margin-top: 5px;">上传者：{{x.UpdateBy}}</div>
+            <div class="onetext" style="margin-top: 5px;">分组：{{x.MediaName}}</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='2' @editsuccess="getchildren" :editobj='editobj'
+                @getcancel='Isadd=false'></alladdsc>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import alladdsc from '../components/alladdsc'
+  export default {
+    name: "imgmaterial",
+    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) {
+        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.Isadd = true
+      },
+
+      getchildren() {
+        this.$emit('editsuccess')
+        this.Isadd = false
+      },
+      pldelete() {
+        this.$emit('getdelete')
+      },
+      plmove() {
+        this.$emit('getmove')
+      }
+
+    }
+  }
+
+</script>
+
+<style>
+  .imgmaterial .Sysuser_Date .el-input--prefix .el-input__inner {
+    background-color: red;
+    border: 0;
+  }
+
+  .imgmaterial .state-item {
+    padding: 2px 5px;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .imgmaterial .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;
+  }
+
+  .imgmaterial .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  .imgmaterial .el-date-editor.el-input input {
+    background-color: transparent !important;
+  }
+
+  .imgmaterial .el-range-editor .el-range-input {
+    background: none;
+  }
+
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .imgmaterial .el-drawer.rtl {
+    overflow: inherit;
+  }
+
+  .imgmaterial .imgcard {
+    width: 240px;
+    margin: 0 15px 15px 0
+  }
+
+  .imgmaterial .imgstyle {
+    width: 100%;
+    height: 120px;
+    border-radius: 0;
+  }
+
+  .imgmaterial .onetext {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 208px;
+  }
+
+</style>

src/pages/teacher/contribution/materialList.vue

+<template>
+  <div class="materialManage page-body">
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+        <div class="col-3">
+          <q-select filled @input="resetSearch" option-value="Id" option-label="Name"
+            v-model="msg.MediaGroupId" ref="Id" :options="classifyList" label="分组" :dense="false" emit-value
+            map-options />
+        </div>
+        <div class="col-3">
+          <q-input @keyup.enter.native="resetSearch" @clear="resetSearch()" clearable filled
+            v-model="msg.MediaName" label="输入搜索内容" maxlength="20" />
+        </div>
+      </div>
+    </div>
+    <div class="page-content">
+      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
+        <q-tab :ripple="false" :name="x.Id" :label="x.Name" v-for="(x,y) in MediumList" :key="y"
+          @click="msg.Type = x.Id,resetSearch()" />
+      </q-tabs>
+      <div v-if="tabCheck=='1'" >
+         <imgmaterial :dataList='dataList' :allclassifyList='allclassifyList' @editsuccess="getchildren" @getdelete="getdelete" @getmove="getmove"></imgmaterial>
+      </div>  
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    GetContributeMediumType,
+    getWeChatMediumGroupList,
+    GetContributeMediumPage
+  } from '../../../api/system/wechat';
+
+  import imgmaterial from '../components/imgmaterial'
+
+  import BenzAMRRecorder from 'benz-amr-recorder'
+
+  export default {
+    components: {
+        imgmaterial
+    },
+    meta: {
+      title: "素材库"
+    },
+    name: "materialManage",
+    data() {
+      return {
+        loading: false,
+        PageCount: 0,
+        tabCheck: 1,
+        msg: {
+          pageIndex: 1,
+          pageSize: 10,
+          rowsPerPage: 10,
+          MediaGroupId: 0, //分组
+          Type: 1, //类型
+          MediaName: '',
+        },
+        classifyList: [],
+        MediumList: [],
+        dataList: [],
+        allclassifyList: [],
+        Ismove: false,
+        moveMsg: {
+          MediumIds: '',
+          MediumGroupId: '',
+        }
+      }
+    },
+    created() {},
+    mounted() {
+      this.getMediumTypeList() //素材类型枚举
+      this.getWeChatMediumGroupList() //素材分组
+      this.getList()//获取列表数据
+    },
+    methods: {
+      getMediumTypeList() {
+        GetContributeMediumType({}).then(res => {
+          this.MediumList = res.Data
+        })
+      },
+      getWeChatMediumGroupList() {
+        getWeChatMediumGroupList({}).then(res => {
+          this.classifyList = res.Data
+          this.allclassifyList = JSON.parse(JSON.stringify(res.Data))
+          let obj = {
+            Name: '全部',
+            Id: 0,
+          }
+          this.classifyList.unshift(obj)
+        })
+      },
+      getList() {
+        this.loading = true
+        console.log('111111111');
+        if (this.tabCheck == 0 || this.tabCheck == 1) {
+          this.msg.pageSize = 15
+        } else if (this.tabCheck == 2 || this.tabCheck == 3 || this.tabCheck == 6) {
+          this.msg.pageSize = 12
+        } else if (this.tabCheck == 4 || this.tabCheck == 5 || this.tabCheck == 7) {
+          this.msg.pageSize = 10
+        }
+        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;
+              let amr = new BenzAMRRecorder()
+              if (x.Type == 4 && x.AudioModel != null) {
+                x.timevalue = 0;
+                amr.initWithUrl(x.AudioModel.AudioPath).then(function () {
+                  x.duration = amr.getDuration()
+                }).catch((e) => {
+
+                })
+              }
+            })
+            console.log(this.dataList,'主页');
+          })
+          .catch(err => {
+            this.loading = false
+          })
+      },
+      changePage(e) {
+        if (this.tabCheck == 0 || this.tabCheck == 4) {
+          this.$refs.allm.stopPlayVoice()
+        }
+        this.msg.pageIndex = e;
+        this.getList()
+      },
+      resetSearch() {
+        this.msg.pageIndex = 1;
+        this.getList()
+      },
+      getchildren(addMsg) { //子级过来的新增和修改
+        this.getList()
+      },
+      getdelete() { //批量删除
+        let data = []
+        this.dataList.forEach(x => {
+          if (x.check == true) {
+            data.push(x.Id)
+          }
+        })
+        if (data.length == 0) {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择删除的对象`,
+            position: 'top'
+          })
+          return
+        }
+        let msg = data.join(',')
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除所选素材？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          delWecharMediumInfo({
+            MediumIds: msg
+          }).then(res => {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: res.Message,
+              position: 'top'
+            })
+            this.getList()
+
+          })
+        }).onCancel(() => {
+
+        });
+      },
+      getmove() {
+        let data = []
+        this.dataList.forEach(x => {
+          if (x.check == true) {
+            data.push(x.Id)
+          }
+        })
+        if (data.length == 0) {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择分组的对象`,
+            position: 'top'
+          })
+          return
+        };
+        this.moveMsg.MediumIds = data.join(',')
+        this.Ismove = true
+      },
+      savemove() {
+        if (this.moveMsg.MediumGroupId == '') {
+          this.$q.notify({
+            type: 'negative',
+            message: `请选择分组选择`,
+            position: 'top'
+          })
+          return
+        }
+        setWecharMediumMore(this.moveMsg).then(res => {
+          this.$q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: res.Message,
+            position: 'top'
+          })
+          this.Ismove = false
+          this.moveMsg.MediumGroupId = ''
+          this.getList()
+
+        })
+      }
+
+    }
+  }
+
+</script>
+
+<style>
+  .materialManage .Sysuser_Date .el-input--prefix .el-input__inner {
+    background-color: red;
+    border: 0;
+  }
+
+  .materialManage .state-item {
+    padding: 2px 5px;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 10px;
+  }
+
+  .materialManage .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;
+  }
+
+  .materialManage .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  .materialManage .el-date-editor.el-input input {
+    background-color: transparent !important;
+  }
+
+  .materialManage .el-range-editor .el-range-input {
+    background: none;
+  }
+
+  .Sysuser_Date .el-input__inner {
+    background: transparent !important;
+    border: 0 !important;
+  }
+
+  .materialManage .el-drawer.rtl {
+    overflow: inherit;
+  }
+
+  .materialupload {
+    width: 118px;
+    height: 118px;
+    border-radius: 4px;
+    border: 1px dashed #d9d9d9;
+    background: #fafafa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+  }
+
+</style>