支持外部url视频

src/views/biz/course/detail.vue

@@ -186,12 +186,21 @@
                 <a-form-item>
                     <a-input v-model="video.title" placeholder="视频标题" allowClear></a-input>
                 </a-form-item>
-                <a-form-item>
+                <div class="video_type">
+                    <a-radio-group :options="[
+                        { label: '上传添加', value: 'ALI' },
+                        { label: 'URL添加', value: 'URL' },
+                        ]" default-value="ALI" @change="onVideoTypeChanged" />
+                </div>
+                <a-form-item v-if="video.videoType==='ALI'">
                     <a-upload ref="videoUploaderRef" name="file" :multiple="false" :show-upload-list="true" :customRequest="uploadVideo" :before-upload="beforeVideoUpload">
                         <a-button>
                             <a-icon type="upload" />选择视频文件</a-button>
                     </a-upload>
                 </a-form-item>
+                 <a-form-item v-if="video.videoType==='URL'">
+                    <a-input v-model="video.videoUrl" placeholder="视频URL" allowClear></a-input>
+                </a-form-item>
             </a-form>
         </a-modal>
     </template>
@@ -226,18 +235,10 @@
 </template>
 
 <script>
+import { uploadFile } from "@/api/biz/resource";
+import { disposereq } from "@/utils/util";
+import { fetchList as teacherFetchList } from "@/api/biz/teacher";
 import {
-    uploadFile
-} from "@/api/biz/resource";
-import {
-    disposereq
-} from "@/utils/util";
-import {
-    fetchList as teacherFetchList
-} from "@/api/biz/teacher";
-import {
-    saveStep1,
-    saveStep2,
   getDetail,
   fetchAliyunAuth,
   fetchAliyunPolicy,
@@ -250,14 +251,10 @@ import {
   updateChaperTitle,
 } from "@/api/biz/course";
 
-import {
-    fetchList as fetchTagList
-} from "@/api/biz/courseTag";
-import {
-    fetchList as fetchEnterprise
-} from "@/api/biz/enterprise";
+import { fetchList as fetchTagList } from "@/api/biz/courseTag";
+import { fetchList as fetchEnterprise } from "@/api/biz/enterprise";
 
-import {fetchList as fetchUserTagList} from "@/api/admin/user_tag";
+import { fetchList as fetchUserTagList } from "@/api/admin/user_tag";
 
 export default {
   // 创建完毕
@@ -285,11 +282,10 @@ export default {
     });
     fetchUserTagList({
       pageIndex: 1,
-            pageSize: 10000
-        }).then(res => {
+      pageSize: 10000,
+    }).then((res) => {
       this.userTagList = res.data;
-            
-        })
+    });
 
     fetchTagList({
       pageIndex: 1,
@@ -407,7 +403,7 @@ export default {
       }
     };
     return {
-            isReadOnly: this.$route.query.isReadOnly == 'true',
+      isReadOnly: this.$route.query.isReadOnly == "true",
       attachment: {
         title: "",
       },
@@ -424,6 +420,7 @@ export default {
         file: "",
         fileName: "",
         title: "",
+        videoType: "ALI",
       },
       showVideoEditor: false,
       teachers: [],
@@ -439,27 +436,37 @@ export default {
       aliyunUserId: "",
       //第一步保存时验证规则定义
       step1FormRules: {
-                name: [{
+        name: [
+          {
             required: true,
             message: "不能为空",
             trigger: "blur",
-                }, ],
-                seriesId: [{
+          },
+        ],
+        seriesId: [
+          {
             validator: validateSerial,
             trigger: "change",
-                }, ],
-                price: [{
+          },
+        ],
+        price: [
+          {
             validator: validatePrice,
             trigger: "change",
-                }, ],
-                validPeriod: [{
+          },
+        ],
+        validPeriod: [
+          {
             validator: validateValidPeriod,
             trigger: "change",
-                }, ],
-                vipPrice: [{
+          },
+        ],
+        vipPrice: [
+          {
             validator: validateVipPrice,
             trigger: "change",
-                }, ],
+          },
+        ],
       },
       //第一步表单数据对象
       step1FormModel: {
@@ -481,7 +488,8 @@ export default {
         allowOrgIds: [],
         tagIds: [],
         tagNames: [],
-                userTagIds: '',
+        userTagIds: "",
+        videoType: "upload",
       },
       //上传封面时的进度条
       loading: false,
@@ -498,10 +506,13 @@ export default {
       },
       detailPicList: [],
       userTagList: [],
-            selectedUserTagIds: []
+      selectedUserTagIds: [],
     };
   },
   methods: {
+    onVideoTypeChanged(e) {
+      this.video.videoType = e.target.value;
+    },
     editVideo(video) {
       this.video2update = video;
       this.showVideoEditor = true;
@@ -586,9 +597,9 @@ export default {
     handleEnterpriseChange(value) {
       this.step1FormModel.allowOrgIds = value;
     },
-        handleUserTagChange(value){
+    handleUserTagChange(value) {
       this.selectedUserTagIds = value;
-            this.step1FormModel.userTagIds = value.join(',');
+      this.step1FormModel.userTagIds = value.join(",");
       // console.log(this.step1FormModel.userTagIds);
     },
     handleSeriesSearch(value) {
@@ -610,10 +621,12 @@ export default {
         pageSize: 500,
       }).then((res) => {
         if (res.count === 0) {
-                    callback([{
+          callback([
+            {
               name: value,
               id: -1,
-                    }, ]);
+            },
+          ]);
         } else {
           const item = res.data.find((d) => d.name.trim() === value);
           if (!item) {
@@ -658,7 +671,6 @@ export default {
       });
     },
     onSave() {
-
       const {
         allow,
         allowOrgIds,
@@ -678,18 +690,18 @@ export default {
       } = this.step1FormModel;
       //验证
       if (!name) {
-                this.$message.info('请输入课程名称')
-                return
+        this.$message.info("请输入课程名称");
+        return;
       }
       if (!logoUrl) {
-                this.$message.info('请上传封面')
-                return
+        this.$message.info("请上传封面");
+        return;
       }
       if (this.videoSeries.length == 0) {
-                this.$message.info('请上传视频')
-                return
+        this.$message.info("请上传视频");
+        return;
       }
-            if (chargeModel == 'PAY') {
+      if (chargeModel == "PAY") {
         if (price == "") {
           this.$message.info("非会员价格不能为空");
           return;
@@ -758,9 +770,9 @@ export default {
       };
       if (this.currentSeries) {
         course.seriesId = this.currentSeries.key;
-                course.seriesName = this.currentSeries.label ?
-                    this.currentSeries.label.trim() :
-                    this.currentSeries.label;
+        course.seriesName = this.currentSeries.label
+          ? this.currentSeries.label.trim()
+          : this.currentSeries.label;
       }
 
       const courseId = this.$route.query.id;
@@ -779,11 +791,10 @@ export default {
       });
       //课程介绍上传图片处理
       if (this.detailPicList.length > 0) {
-
-                let urlList = this.detailPicList.map(e => {
-                    return e.url
-                })
-                course.detail = urlList.join(',')
+        let urlList = this.detailPicList.map((e) => {
+          return e.url;
+        });
+        course.detail = urlList.join(",");
       }
 
       saveCourse(course).then((res) => {
@@ -806,22 +817,22 @@ export default {
             //构建课程介绍图片list
             // console.log(res.datas)
             if (res.datas.detail) {
-                            var picUrlAry = res.datas.detail.split(',')
+              var picUrlAry = res.datas.detail.split(",");
               // console.log(picUrlAry)
-                            var list = []
-                            var index = -1
-                            picUrlAry.forEach(e => {
-                                var obj = {}
-                                obj.uid = index + ''
-                                obj.name = obj.uid
-                                obj.status = 'done'
-                                obj.url = e
+              var list = [];
+              var index = -1;
+              picUrlAry.forEach((e) => {
+                var obj = {};
+                obj.uid = index + "";
+                obj.name = obj.uid;
+                obj.status = "done";
+                obj.url = e;
                 // console.log(obj)
-                                index--
-                                list.push(obj)
-                            })
+                index--;
+                list.push(obj);
+              });
 
-                            this.detailPicList = list
+              this.detailPicList = list;
             }
             if (this.step1FormModel.allowOrgList) {
               const _enterprise = [];
@@ -851,7 +862,7 @@ export default {
             res.datas.attachmentList.forEach((a) => {
               _attachments.push({
                 id: a.resourceId,
-                                title: a.resourceName
+                title: a.resourceName,
               });
             });
             this.attachments = _attachments;
@@ -864,14 +875,12 @@ export default {
             });
             this.videoSeries = _videoSeries;
             //用户标签
-                        console.log(this.step1FormModel.allow)
-                        if(this.step1FormModel.allow == 'USER_TAG'){
-                            this.step1FormModel.userTagIds.split(',').forEach(item => {
+            console.log(this.step1FormModel.allow);
+            if (this.step1FormModel.allow == "USER_TAG") {
+              this.step1FormModel.userTagIds.split(",").forEach((item) => {
                 this.selectedUserTagIds.push(parseInt(item));
-                            })
-
+              });
             }
-                        
           } else {
             this.$message.info(res.resp_msg);
           }
@@ -923,11 +932,9 @@ export default {
         });
     },
     beforeVideoUpload(file) {
-            const {
-                type
-            } = file;
+      const { type } = file;
       const title = file.name.substring(0, file.name.indexOf("."));
-            if (this.video.title == undefined || this.video.title == '') {
+      if (this.video.title == undefined || this.video.title == "") {
         this.video.title = title;
       }
       if (type.startsWith("video")) {
@@ -939,19 +946,14 @@ export default {
     },
 
     beforeAttachmentUpload(file) {
-            const {
-                type
-            } = file;
+      const { type } = file;
       const title = file.name.substring(0, file.name.indexOf("."));
       this.attachment.title = title;
     },
 
     saveAttachments() {
       if (this.attachment) {
-                const {
-                    title,
-                    id
-                } = this.attachment;
+        const { title, id } = this.attachment;
         if (!title) {
           this.$message.error("请填写附件标题");
           return;
@@ -977,7 +979,8 @@ export default {
       uploadFile(formData)
         .then((res) => {
           if (res.data.resp_code == 200) {
-                        self.$refs.attachmentUploaderRef.onProgress({
+            self.$refs.attachmentUploaderRef.onProgress(
+              {
                 percent: 100,
               },
               data.file
@@ -994,10 +997,7 @@ export default {
         });
     },
 
-        uploadVideo({
-            file
-        }) {
-
+    uploadVideo({ file }) {
       this.video.fileName = file.name;
       this.video.file = file.file;
       var userData = '{"Vod":{}}';
@@ -1032,12 +1032,12 @@ export default {
         region: self.aliyunRegion,
         userId: self.aliyunUserId,
         // 添加文件成功
-                addFileSuccess: function (uploadInfo) {
+        addFileSuccess: function(uploadInfo) {
           self.uploadDisabled = false;
           self.resumeDisabled = false;
         },
         // 开始上传
-                onUploadstarted: function (uploadInfo) {
+        onUploadstarted: function(uploadInfo) {
           self.uploadVideoStatus = "uploading";
           if (!uploadInfo.videoId) {
             fetchAliyunPolicy({
@@ -1083,23 +1083,24 @@ export default {
           }
         },
         // 文件上传成功
-                onUploadSucceed: function (uploadInfo) {
+        onUploadSucceed: function(uploadInfo) {
           self.$message.success("文件上传成功");
           self.uploadVideoStatus = "success";
         },
         // 文件上传失败
-                onUploadFailed: function (uploadInfo, code, message) {
+        onUploadFailed: function(uploadInfo, code, message) {
           self.$message.error("文件上传失败");
         },
         // 取消文件上传
-                onUploadCanceled: function (uploadInfo, code, message) {
+        onUploadCanceled: function(uploadInfo, code, message) {
           self.$message.error("文件已暂停上传");
         },
         // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
-                onUploadProgress: function (uploadInfo, totalSize, progress) {
+        onUploadProgress: function(uploadInfo, totalSize, progress) {
           let progressPercent = Math.ceil(progress * 100);
           self.authProgress = progressPercent;
-                    self.$refs.videoUploaderRef.onProgress({
+          self.$refs.videoUploaderRef.onProgress(
+            {
               percent: progressPercent,
             },
             uploadInfo.file
@@ -1109,7 +1110,7 @@ export default {
           }
         },
         // 上传凭证超时
-                onUploadTokenExpired: function (uploadInfo) {
+        onUploadTokenExpired: function(uploadInfo) {
           refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
             if (res.resp_code == 200) {
               const data = res.datas;
@@ -1123,7 +1124,7 @@ export default {
           self.$message.error("文件上传超时");
         },
         // 全部文件上传结束
-                onUploadEnd: function (uploadInfo) {
+        onUploadEnd: function(uploadInfo) {
           // self.$message.success("文件上传完毕");
         },
       });
@@ -1152,7 +1153,10 @@ export default {
       this.teacherModalVisible = true;
     },
     showVideoUploadModal() {
-            if(this.step1FormModel.type === 'SINGLE' && this.videoSeries.length>0){
+      if (
+        this.step1FormModel.type === "SINGLE" &&
+        this.videoSeries.length > 0
+      ) {
         this.$message.error("课程类型为单集,请先删除已有视频文件");
         return;
       } else {
@@ -1161,7 +1165,7 @@ export default {
     },
     closeVideoUploadModal() {
       this.videoUploadModalVisible = false;
-            this.video = {};
+      this.video = { videoType: "ALI" };
     },
 
     showAttachmentUploadModal() {
@@ -1174,32 +1178,29 @@ export default {
 
     videoUpload() {
       if (this.video) {
-                const {
-                    title,
-                    id
-                } = this.video;
+        const { title, id, videoType, videoUrl } = this.video;
         if (!title) {
           this.$message.error("请填写视频标题");
           return;
         }
+
+        if (videoType === "ALI") {
           if (!id) {
             this.$message.error("请上传视频文件");
             return;
           }
           fetchVideoInfo(id).then((res) => {
             if (res.resp_code == 200) {
-                        console.log(this.step1FormModel.type)
-                        const {
-                            coverURL,
-                            duration
-                        } = res.datas;
-                        if (this.step1FormModel.type === 'SINGLE') {
-                            this.videoSeries = [{
+              const { coverURL, duration } = res.datas;
+              if (this.step1FormModel.type === "SINGLE") {
+                this.videoSeries = [
+                  {
                     name: title,
                     videoId: id,
                     coverUrl: coverURL,
                     duration,
-                            }];
+                  },
+                ];
               } else {
                 this.videoSeries.push({
                   name: title,
@@ -1213,6 +1214,14 @@ export default {
               this.videoUploadModalVisible = false;
             }
           });
+        } else {
+          this.videoSeries.push({
+            name: title,
+            videoType: videoType,
+            videoUrl: videoUrl,
+          });
+          this.videoUploadModalVisible = false;
+        }
       }
     },
     //查询讲师
@@ -1245,59 +1254,60 @@ export default {
     //上传课程简介图片
     uploadDetailPic(data) {
       const formData = new FormData();
-            let uid = data.file.uid
+      let uid = data.file.uid;
       formData.append("file", data.file);
       uploadFile(formData)
-                .then(res => {
+        .then((res) => {
           if (res.data.resp_code == 200) {
-                        this.detailPicList = this.detailPicList.map(e => {
+            this.detailPicList = this.detailPicList.map((e) => {
               if (e.uid == uid) {
-                                e.status = 'done'
-                                e.url = res.data.datas.url
+                e.status = "done";
+                e.url = res.data.datas.url;
               }
-                            return e
-                        })
+              return e;
+            });
           } else {
-                        this.detailPicList.forEach(e => {
+            this.detailPicList.forEach((e) => {
               if (e.uid == uid) {
-                                e.status = 'error'
+                e.status = "error";
               }
-                        })
+            });
           }
-                }).catch(err => {
-                    disposereq(this, err)
         })
-
+        .catch((err) => {
+          disposereq(this, err);
+        });
     },
     beforUploadDetailPic(file) {
-
       const isLt2M = file.size / 1024 / 1024 < 2;
       if (!isLt2M) {
-                this.$message.error('图片大小须小于2MB!');
+        this.$message.error("图片大小须小于2MB!");
       }
       return isLt2M;
     },
     uploadDetailPicChange(info) {
-            if (info.file.status == 'uploading') {
-                this.detailPicList.push(info.file)
+      if (info.file.status == "uploading") {
+        this.detailPicList.push(info.file);
       }
-
     },
     uploadDetailRemove(file) {
-            let newList = []
-            this.detailPicList.forEach(e => {
+      let newList = [];
+      this.detailPicList.forEach((e) => {
         if (e.uid != file.uid) {
-                    newList.push(e)
+          newList.push(e);
         }
-            })
-            this.detailPicList = newList
+      });
+      this.detailPicList = newList;
       return true;
-        }
+    },
   },
 };
 </script>
 
 <style>
+.video_type {
+  margin-bottom: 6px;
+}
 .attachment-icon {
   margin-right: 5px;
 }
@@ -1365,7 +1375,8 @@ export default {
 .video-image {
   width: 120px;
   height: 68px;
-    background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat 50%;
+  background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat
+    50%;
   display: inline-block;
   position: relative;
   cursor: pointer;

src/views/biz/homePageSetting/index.vue

@@ -77,7 +77,7 @@
             <a-form>
                 <a-form-item label="编辑封面">
                     <div class="siwper-editor">
-                        <a-upload name="file" :multiple="false" list-type="picture-card" :show-upload-list="false" :customRequest="uploadSwiperImg" :before-upload="beforeUpload">
+                        <a-upload accept="image/*" name="file" :multiple="false" list-type="picture-card" :show-upload-list="false" :customRequest="uploadSwiperImg" :before-upload="beforeUpload">
 
                             <img v-if="currentSwiper.imageUrl" :src="currentSwiper.imageUrl" :width="200" />
                             <div v-else>

vue.config.js

@@ -3,8 +3,8 @@
  * https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8
  *
  */
-const url = 'http://edu.qkdata.com:10081'
-// const url = 'http://localhost:9090'
+// const url = 'http://edu.qkdata.com:10081'
+const url = 'http://192.168.10.22:9090'
 
 // 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径
 let publicPath = '/admin'