添加课程介绍上传图片

src/views/biz/course/detail.vue

@@ -153,10 +153,28 @@
           label="课程介绍"
           prop="detail"
         >
-          <a-textarea
+          <!-- <a-textarea
             row="4"
             v-model="step1FormModel.detail"
-          />
+          /> -->
+          <a-upload
+              name="detailUpload"
+              accept="image/*"
+              list-type="picture-card"
+              :file-list="detailPicList"
+              :multiple="true"
+              :customRequest="uploadDetailPic"
+              :before-upload="beforUploadDetailPic"
+              @change="uploadDetailPicChange"
+              :remove="uploadDetailRemove"
+            >
+              <div v-if="detailPicList.length < 8">
+                <a-icon type="plus" />
+                <div>
+                  上传图片
+                </div>
+              </div>
+          </a-upload>
         </a-form-model-item>
 
         <a-form-model-item label="上传附件">
@@ -681,6 +699,7 @@ export default {
         pageIndex: 1,
         pageSize: 10,
       },
+      detailPicList:[],
     };
   },
   methods: {
@@ -827,6 +846,7 @@ export default {
       });
     },
     onSave() {
+      
       const {
         allow,
         allowOrgIds,
@@ -843,6 +863,19 @@ export default {
         vipPrice,
         tagIds,
       } = this.step1FormModel;
+      //验证
+      if(!name){
+        this.$message.info('请输入课程名称')
+        return
+      }
+      if(!logoUrl){
+        this.$message.info('请上传封面')
+        return
+      }
+      if(this.videoSeries.length == 0){
+        this.$message.info('请上传视频')
+        return
+      }
 
       const chaperList = [];
       this.videoSeries.forEach((chapter, index) => {
@@ -888,7 +921,14 @@ export default {
       this.attachments.forEach((a) => {
         course.attachmenIds.push(a.id);
       });
+      //课程介绍上传图片处理
+      if(this.detailPicList.length > 0){
         
+        let urlList = this.detailPicList.map(e => {
+          return e.url
+        })
+        course.detail = urlList.join(',')
+      }
       saveCourse(course).then((res) => {
         if (res.resp_code === 200) {
           this.$message.success("课程保存成功");
@@ -905,7 +945,26 @@ export default {
             this.step1FormModel = {
               ...res.datas,
             };
+            //构建课程介绍图片list
+            // console.log(res.datas)
+            if(res.datas.detail){
+              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
+                // console.log(obj)
+                index--
+                list.push(obj)
+              })
               
+              this.detailPicList = list
+            }
             if (this.step1FormModel.allowOrgList) {
               const _enterprise = [];
               this.step1FormModel.allowOrgList.forEach((t) => {
@@ -928,7 +987,7 @@ export default {
               label: this.step1FormModel.seriesName,
             };
 
-            console.log(res.datas);
+            // console.log(res.datas);
 
             const _attachments = [];
             res.datas.attachmentList.forEach((a) => {
@@ -1282,6 +1341,57 @@ export default {
     showVideoModal() {
       this.videoModalVisible = true;
     },
+    //上传课程简介图片
+    uploadDetailPic(data){
+      const formData = new FormData();
+      let uid = data.file.uid
+      formData.append("file", data.file);
+      uploadFile(formData)
+        .then(res => {
+          if(res.data.resp_code == 200){
+            this.detailPicList = this.detailPicList.map(e => {
+              if(e.uid == uid){
+                e.status = 'done'
+                e.url = res.data.datas.url
+              }
+              return e
+            })
+          }else{
+            this.detailPicList.forEach(e => {
+              if(e.uid == uid){
+                e.status = 'error'
+              }
+            })
+          }
+        }).catch(err => {
+          disposereq(this,err)
+        })
+      
+    },
+    beforUploadDetailPic(file){
+      
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.error('图片大小须小于2MB!');
+      }
+      return isLt2M;
+    },
+    uploadDetailPicChange(info){
+      if(info.file.status == 'uploading'){
+        this.detailPicList.push(info.file)
+      }
+      
+    },
+    uploadDetailRemove(file){
+      let newList = []
+      this.detailPicList.forEach(e => {
+        if(e.uid != file.uid){
+          newList.push(e)
+        }
+      })
+      this.detailPicList = newList
+      return true;
+    }
   },
 };
 </script>