增加设置腾讯视频入口

project/qujing/app/AppCurriculumManage/components/Add.vue

@@ -12,10 +12,10 @@
             </el-form-item>
             <el-form-item prop="courseType" label="课程类型" :rules="[{required: true, message: '请选择课程类型', trigger: 'change'}]">
               <ai-select
-                v-model="form.courseType"
+                  v-model="form.courseType"
-                clearable
+                  clearable
-                placeholder="请选择课程类型"
+                  placeholder="请选择课程类型"
-                :selectList="dict.getDict('qjCourseType')">
+                  :selectList="dict.getDict('qjCourseType')">
               </ai-select>
             </el-form-item>
             <el-form-item prop="showIndex" label="排序" :rules="[{required: true, message: '请选择文章类型', trigger: 'change'}]">
@@ -24,21 +24,25 @@
             <el-form-item v-if="form.courseType === '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.courseType === '0' && !isHideCoverimg" label="封面图片" prop="pictureUrl" :rules="[{required: true, message: '请上传封面图片', trigger: 'change'}]" style="width: 100%;">
+            <el-form-item v-if="form.courseType === '0' && !isHideCoverimg" label="封面图片" prop="pictureUrl" :rules="[{required: true, message: '请上传封面图片', trigger: 'change'}]"
+                          style="width: 100%;">
               <ai-uploader
-                :instance="instance"
+                  :instance="instance"
-                isShowTip
+                  isShowTip
-                v-model="form.pictureUrl"
+                  v-model="form.pictureUrl"
-                :limit="1"
+                  :limit="1"
-                :cropOps="cropOps"
+                  :cropOps="cropOps"
-                is-crop>
+                  is-crop>
                 <template slot="tips">
                   <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                   <p>图片比例：1.6：1</p>
                 </template>
               </ai-uploader>
             </el-form-item>
-            <el-form-item v-if="form.courseType === '1'" label="视频" prop="videoUrl" style="width: 100%;" :rules="[{required: true, message: '请上传视频', trigger: 'change'}]">
+            <el-form-item v-if="form.courseType==1" label="腾讯视频ID" class="w100">
+              <el-input v-model="form.videoId" clearable placeholder="请从腾讯视频创作号上获取对应视频id"/>
+            </el-form-item>
+            <el-form-item v-if="form.courseType==='1'&&!form.videoId" label="视频" prop="videoUrl" style="width: 100%;" :rules="[{required: true, message: '请上传视频', trigger: 'change'}]">
               <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">
@@ -49,20 +53,20 @@
                 </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>
+                     :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">
+                         :limit="1" v-if="form.videoUrl.length">
                 <el-button style="margin-top: 10px;">重新选择</el-button>
               </el-upload>
             </el-form-item>
             <el-form-item label="视频封面" prop="pictureUrl" style="width: 100%;" v-if="form.courseType === '1'" :rules="[{required: true, message: '请上传视频封面', trigger: 'change'}]">
               <ai-uploader
-                :instance="instance"
+                  :instance="instance"
-                isShowTip
+                  isShowTip
-                v-model="form.pictureUrl"
+                  v-model="form.pictureUrl"
-                :limit="1"
+                  :limit="1"
-                :cropOps="cropOps"
+                  :cropOps="cropOps"
-                is-crop>
+                  is-crop>
                 <template slot="tips">
                   <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                   <p>图片比例：1.6：1</p>
@@ -81,211 +85,212 @@
 </template>
 
 <script>
-  import mp4box from 'mp4box'
+import mp4box from 'mp4box'
-  export default {
-    name: 'Add',
 
-    props: {
+export default {
-      instance: Function,
+  name: 'Add',
-      dict: Object,
+
-      params: Object
+  props: {
-    },
+    instance: Function,
-    data () {
+    dict: Object,
-      return {
+    params: Object
-        info: {},
+  },
-        accept: '.mp4',
+  data() {
-        form: {
+    return {
-          title: '',
+      info: {},
-          content: '',
+      accept: '.mp4',
-          showIndex: '',
+      form: {
-          videoUrl: [],
+        title: '',
-          pictureUrl: [],
+        content: '',
-          courseType: '0',
+        showIndex: '',
-          duration: ''
+        videoUrl: [],
+        pictureUrl: [],
+        courseType: '0',
+        duration: ''
+      },
+      isLoading: false,
+      cropOps: {
+        width: "336px",
+        height: "210px"
+      },
+      id: '',
+      contentTypeList: [
+        {
+          name: '图文',
+          value: '0'
         },
-        isLoading: false,
+        {
-        cropOps: {
+          name: '视频',
-          width: "336px",
+          value: '1'
-          height: "210px"
+        }
-        },
+      ],
-        id: '',
+      isHideCoverimg: false,
-        contentTypeList: [
+      cateList: [],
-          {
+      needExamine: '0'
-            name: '图文',
+    }
-            value: '0'
+  },
-          },
+
-          {
+  created() {
-            name: '视频',
+    this.dict.load('qjCourseType').then(() => {
-            value: '1'
+      if (this.params && this.params.id) {
-          }
+        this.getInfo(this.params.id)
-        ],
-        isHideCoverimg: false,
-        cateList: [],
-        needExamine: '0'
       }
-    },
+    })
+  },
 
-    created () {
+  methods: {
-      this.dict.load('qjCourseType').then(() => {
+    getInfo(id) {
-        if (this.params && this.params.id) {
+      this.instance.post(`/app/appcourseinfo/queryDetailById?id=${id}`).then(res => {
-          this.getInfo(this.params.id)
+        if (res.code === 0) {
+          this.form = res.data
+          this.form.pictureUrl = res.data.pictureUrl ? [{
+            url: res.data.pictureUrl
+          }] : []
+          this.form.videoUrl = res.data.videoUrl ? [{
+            url: res.data.videoUrl
+          }] : []
         }
       })
     },
 
-    methods: {
+    onChange() {
-      getInfo (id) {
+      this.form.videoUrl = []
-        this.instance.post(`/app/appcourseinfo/queryDetailById?id=${id}`).then(res => {
+    },
-          if (res.code === 0) {
-            this.form = res.data
-            this.form.pictureUrl = res.data.pictureUrl ? [{
-              url: res.data.pictureUrl
-            }] : []
-            this.form.videoUrl = res.data.videoUrl ? [{
-              url: res.data.videoUrl
-            }] : []
-          }
-        })
-      },
 
-      onChange () {
+    submitUpload(file) {
-        this.form.videoUrl = []
+      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("视频编码格式不支持")
+        // }
 
-      submitUpload(file) {
+        if (size) {
-        this.$refs['upload1']?.clearFiles();
+          return this.$message.error("视频大小不能超过100M");
-        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.isLoading = true
-            this.instance.post(`/admin/file/addVideo1`, formData).then(res => {
-              if (res && res.data) {
-                let videoList = res.data[0].split(";")
-                this.form.duration = res.data[2]
-
-                this.form.videoUrl = [{
-                  id: videoList[1],
-                  url: videoList[0]
-                }]
-                this.form.pictureUrl = [{
-                  id: res.data[1].split(";")[1],
-                  url: res.data[1].split(";")[0]
-                }]
-              }
-
-              this.isLoading = false
-            }).catch(() => {
-              this.isLoading = false
-            })
-          } else {
-            return this.$message.error("视频格式错误")
-          }
         }
-      },
 
-      confirm () {
+        if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
-        this.$refs.form.validate((valid) => {
+          let formData = new FormData()
-          if (valid) {
+          formData.append('file', file.file);
-            this.isLoading = true
+          this.isLoading = true
-            this.instance.post(`/app/appcourseinfo/addOrUpdate`, {
+          this.instance.post(`/admin/file/addVideo1`, formData).then(res => {
-              ...this.form,
+            if (res && res.data) {
-              videoUrl: this.form.courseType === '1' ? this.form.videoUrl[0].url : '',
+              let videoList = res.data[0].split(";")
-              pictureUrl: this.form.pictureUrl.length ? this.form.pictureUrl[0].url : ''
+              this.form.duration = res.data[2]
-            }).then(res => {
-              if (res.code == 0) {
-                this.$message.success('提交成功')
-                setTimeout(() => {
-                  this.cancel(true)
-                }, 600)
-              } else {
-                this.isLoading = false
-              }
-            }).catch(() => {
-              this.isLoading = false
-            })
-          }
-        })
-      },
 
-      cancel (isRefresh) {
+              this.form.videoUrl = [{
-        this.$emit('change', {
+                id: videoList[1],
-          type: 'List',
+                url: videoList[0]
-          isRefresh: !!isRefresh
+              }]
-        })
+              this.form.pictureUrl = [{
+                id: res.data[1].split(";")[1],
+                url: res.data[1].split(";")[0]
+              }]
+            }
+
+            this.isLoading = false
+          }).catch(() => {
+            this.isLoading = false
+          })
+        } else {
+          return this.$message.error("视频格式错误")
+        }
       }
+    },
+
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.isLoading = true
+          this.instance.post(`/app/appcourseinfo/addOrUpdate`, {
+            ...this.form,
+            videoUrl: this.form.courseType === '1' ? this.form.videoUrl[0].url : '',
+            pictureUrl: this.form.pictureUrl.length ? this.form.pictureUrl[0].url : ''
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success('提交成功')
+              setTimeout(() => {
+                this.cancel(true)
+              }, 600)
+            } else {
+              this.isLoading = false
+            }
+          }).catch(() => {
+            this.isLoading = false
+          })
+        }
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'List',
+        isRefresh: !!isRefresh
+      })
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .content-add {
+.content-add {
-    .video {
+  .video {
-      width: 640px;
+    width: 640px;
-      height: 360px;
+    height: 360px;
-      border-radius: 4px;
+    border-radius: 4px;
-      border: 1px dashed #D0D4DC;
+    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;
 
-      .icon {
+      span:nth-child(2) {
-        display: flex;
+        display: inline-block;
-        flex-direction: column;
+        font-size: 16px;
-        align-items: center;
+        color: #333333;
-        justify-content: center;
+        line-height: 30px;
-
-        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 {
+      .iconfont {
         display: inline-block;
-        font-size: 12px;
+        font-size: 40px;
-        color: #999999;
+        color: #2266FF;
-        line-height: 26px;
       }
     }
 
-    .video-com {
+    .tips {
-      width: 640px;
+      display: inline-block;
-      height: 360px;
+      font-size: 12px;
-      background: rgba(0, 0, 0, 0.5);
+      color: #999999;
-      border-radius: 2px;
+      line-height: 26px;
-      border: 1px solid #D0D4DC;
-      margin-top: -40px;
     }
   }
+
+  .video-com {
+    width: 640px;
+    height: 360px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    border: 1px solid #D0D4DC;
+    margin-top: -40px;
+  }
+}
 </style>