25600

packages/3.0.0/AppContentInfo/components/Add.vue

@@ -1,5 +1,5 @@
 <template>
-  <ai-detail>
+  <ai-detail class="content-add">
     <template slot="title">
       <ai-title :title="params.id ? '编辑内容发布' : '添加内容发布'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
       </ai-title>
@@ -15,7 +15,7 @@
               <ai-area-select clearable @fullname="v => form.areaName = v" always-show :instance="instance" v-model="form.areaId" :disabled-level="disabledLevel"></ai-area-select>
             </el-form-item>
             <el-form-item prop="contentType" label="文章类型" :rules="[{required: true, message: '请选择文章类型', trigger: 'change'}]">
-              <el-select style="width: 100%;" v-model="form.contentType" size="small" placeholder="请选择文章类型">
+              <el-select style="width: 100%;" @change="onChange" v-model="form.contentType" size="small" placeholder="请选择文章类型">
                 <el-option
                   v-for="item in contentTypeList"
                   :key="item.value"
@@ -37,12 +37,13 @@
             <el-form-item v-if="form.contentType === '0'" label="正文" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
               <ai-editor v-model="form.content" :instance="instance"/>
             </el-form-item>
-            <el-form-item v-if="form.contentType === '0'" label="图片" prop="files" style="width: 100%;">
+            <el-form-item v-if="form.contentType === '0'" label="附件" prop="files" style="width: 100%;">
               <ai-uploader
                 :instance="instance"
                 v-model="form.files"
-                fileType="img"
+                fileType="file"
-                acceptType=".jpg,.png,.jpeg"
+                showTips
+                key="file"
                 :limit="9">
                 <template slot="tips">
                   <p>最多上传9张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
@@ -50,13 +51,21 @@
               </ai-uploader>
             </el-form-item>
             <el-form-item v-if="form.contentType === '1'" label="视频" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传视频', trigger: 'change'}]">
-              <ai-uploader
+              <el-upload :show-file-list="false" ref="upload1" action :http-request="submitUpload" :accept="accept" :limit="1">
-                :instance="instance"
+                <div class="video" v-if="!form.files.length">
-                v-model="form.files"
+                  <div class="icon">
-                acceptType=".mp4"
+                    <ai-icon type="svg" icon="iconVideo"/>
-                fileType="video"
+                    <span>上传视频</span>
-                :limit="1">
+                  </div>
-              </ai-uploader>
+                  <span class="tips">支持mp4格式，单个文件最大100MB</span>
+                </div>
+              </el-upload>
+              <video class="video-com" style="width:100%; height:100%; object-fit: fill;" muted
+                    :src="form.files[0].url" controls="controls" v-if="form.files.length"></video>
+              <el-upload :show-file-list="false" ref="upload2" action :http-request="submitUpload" :accept="accept"
+                        :limit="1" v-if="form.files.length">
+                <el-button style="margin-top: 10px;">重新选择</el-button>
+              </el-upload>
             </el-form-item>
           </el-form>
         </template>
@@ -70,6 +79,7 @@
 </template>
 
 <script>
+  import mp4box from 'mp4box'
   import { mapState } from 'vuex'
   export default {
     name: 'Add',
@@ -83,6 +93,7 @@
     data () {
       return {
         info: {},
+        accept: '.mp4',
         form: {
           title: '',
           content: '',
@@ -131,6 +142,53 @@
         })
       },
 
+      onChange () {
+        this.form.files = []
+      },
+
+      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.files = [{
+                  id: videoList[1],
+                  url: videoList[0]
+                }]
+              }
+            })
+          } else {
+            return this.$message.error("视频格式错误")
+          }
+        }
+      },
+
       getCateList () {
         this.instance.post(`/app/appcontentmodulecategory/list`, null, {
           params: {
@@ -182,4 +240,52 @@
 </script>
 
 <style scoped lang="scss">
+  .content-add {
+    .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;
+    }
+  }
 </style>