25841

packages/3.0.0/AppPartyHistoryClass/components/seriesAdd.vue

@@ -21,8 +21,22 @@
                 </el-row>
               </el-form-item>
               <el-form-item style="width: 100%;" label="视频" prop="videoUrl">
-                <el-input size="small" v-model="form.videoUrl" clearable placeholder="请输入..." maxlength="300"
-                          show-word-limit/>
+                <el-upload :show-file-list="false" ref="upload1"
+                          action :http-request="submitUpload" :accept="accept" :limit="1">
+                  <div class="video" v-if="!form.videoUrl.length">
+                    <div class="icon">
+                      <ai-icon type="svg" icon="iconVideo"/>
+                      <span>上传视频</span>
+                    </div>
+                    <span class="tips">支持mp4格式，单个文件最大100MB</span>
+                  </div>
+                </el-upload>
+                <video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
+                      :src="form.videoUrl[0].url" controls="controls" v-if="form.videoUrl.length"></video>
+                <el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
+                          :limit="1" v-if="form.videoUrl.length">
+                  <el-button style="margin-top: 10px;">重新选择</el-button>
+                </el-upload>
               </el-form-item>
             </el-form>
           </template>
@@ -50,10 +64,7 @@
       <template #footer>
         <template v-if="isEdit">
           <el-button size="small" @click="$emit('back')">取消</el-button>
-          <el-button type="primary" size="small" @click="saveAdd(0)">保存
-          </el-button>
-          <el-button type="primary" size="small" @click="saveAdd(1)">保存并发布
-          </el-button>
+          <el-button type="primary" size="small" @click="saveAdd">保存</el-button>
         </template>
       </template>
     </ai-detail>
@@ -61,6 +72,7 @@
 </template>
 
 <script>
+import mp4box from 'mp4box'
   import { mapState } from 'vuex'
   export default {
     name: "seriesAdd",
@@ -83,12 +95,13 @@
         form: {
           title: '',
           num: '',
-          videoUrl: "",
+          videoUrl: [],
         },
+        accept: ".mp4",
         rules: {
           title: [{required: true, message: "请填写单集名称"}],
           num: [{required: true, message: "请填写单集顺序"}],
-          videoUrl: [{required: true, message: "请填写视频地址"}],
+          videoUrl: [{required: true, message: "请选择视频"}],
         },
         isDetail: true,
         episodeNum: 0,
@@ -104,17 +117,17 @@
         window.open(url);
       },
       // 保存
-      saveAdd(status) {
-        console.log(this.user)
+      saveAdd() {
         this.$refs.ruleForm.validate(v => {
           if (v) {
             this.instance.post('/app/apppartyclassroomepisode/addOrUpdate', {
               ...this.form,
-              status,
               createUser: this.user.info.name,
               createUserId: this.user.info.id,
+              status: 1,
               classroomId: this.parentRow?.id,
-              id: !!this.row.id ? this.row.id : null
+              id: !!this.row.id ? this.row.id : null,
+              videoUrl: this.form.videoUrl.length ? this.form.videoUrl[0].url : ''
             }).then((res) => {
               if (res && res.code == 0) {
                 this.row?.id ? this.$message.success('修改成功') : this.$message.success('添加成功');
@@ -124,6 +137,49 @@
           }
         })
       },
+      submitUpload(file) {
+        this.$refs['upload1']?.clearFiles();
+        this.$refs['upload2']?.clearFiles();
+        this.$refs['ruleForm']?.clearValidate('videoFile');
+        const fileType = file.file.name.split(".")[1];
+        const size = file.file.size / 1024 / 1024 > 100;
+        let mp4boxfile = mp4box.createFile();
+        const reader = new FileReader();
+        reader.readAsArrayBuffer(file.file);
+        reader.onload = (e) => {
+          const arrayBuffer = e.target.result;
+          arrayBuffer.fileStart = 0;
+          mp4boxfile.appendBuffer(arrayBuffer);
+        };
+        mp4boxfile.onReady = (info) => {
+          let codec = info.mime.match(/codecs="(\S*),/)[1]
+          if (codec.indexOf('avc') === -1) {
+            return this.$message.error("视频编码格式不支持")
+          }
+
+          if (size) {
+            return this.$message.error("视频大小不能超过100M");
+          }
+
+          if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
+            let formData = new FormData()
+            formData.append('file', file.file);
+            this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
+              if (res && res.data) {
+                let videoList = res.data[0].split(";");
+   
+                this.form.videoUrl = [{
+                  id: videoList[1],
+                  url: videoList[0]
+                }]
+              }
+            })
+          } else {
+            return this.$message.error("视频格式错误");
+          }
+
+        };
+      },
       // 详情
       checkDetaiList(id) {
         id && this.instance.post('/app/apppartyclassroom/queryLargestNum', null, {
@@ -143,7 +199,9 @@
           if (res?.data) {
             this.form.title = res.data.title;
             this.form.num = res.data.num;
-            this.form.videoUrl = res.data.videoUrl;
+            this.form.videoUrl = res.data.videoUrl ? [{
+              url: res.data.videoUrl
+            }]: [];
           }
         })
       },
@@ -189,6 +247,62 @@
     display: flex;
     flex-direction: column;
 
+  .video {
+    width: 640px;
+    height: 360px;
+    border-radius: 4px;
+    border: 1px dashed #D0D4DC;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      span:nth-child(2) {
+        display: inline-block;
+        font-size: 16px;
+        color: #333333;
+        line-height: 30px;
+      }
+
+      .iconfont {
+        display: inline-block;
+        font-size: 40px;
+        color: #2266FF;
+      }
+    }
+
+    .tips {
+      display: inline-block;
+      font-size: 12px;
+      color: #999999;
+      line-height: 26px;
+    }
+  }
+
+  .video-com {
+    width: 640px;
+    height: 360px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    margin-top: -40px;
+  }
+
+  ::v-deep .AiIcon {
+    width: 38px;
+    height: 38px;
+  }
+
+  .footer_btn {
+    width: 106px;
+  }
+
     .detail-content {
       padding-bottom: 80px;
     }