Selaa lähdekoodia

课程留言和介绍图片

yuhongqi 11 tuntia sitten
vanhempi
commit
a3b0d0e14c

+ 30 - 0
src/api/course/userCourseComment.js

@@ -50,4 +50,34 @@ export function exportUserCourseComment(query) {
     method: 'get',
     params: query
   })
+}
+
+// 下载精选留言Word导入模板
+export function downloadCommentImportTemplate() {
+  return request({
+    url: '/course/userCourseComment/importTemplate',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+// 导入精选留言
+export function importComments(courseId, file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: '/course/userCourseComment/importComments/' + courseId,
+    method: 'post',
+    data: formData,
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+// 查询精选留言历史列表
+export function listFeaturedComments(courseId, query) {
+  return request({
+    url: '/course/userCourseComment/featuredComments/' + courseId,
+    method: 'get',
+    params: query
+  })
 }

+ 128 - 1
src/views/components/course/userCourseCatalogDetails.vue

@@ -398,12 +398,57 @@
             style="width: 200px"
           />
         </el-form-item>
+        <el-form-item label="课程介绍图" prop="courseIntroImg">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :show-file-list="false"
+            :on-success="handleCourseIntroSuccess"
+            :before-upload="beforeCourseIntroUpload">
+            <img v-if="form.courseIntroImg" :src="form.courseIntroImg" class="avatar" style="max-width: 300px; max-height: 200px;">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <div style="margin-top:5px;">
+            <el-button v-if="form.courseIntroImg" size="mini" type="danger" @click="form.courseIntroImg = null">删除图片</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="精选留言">
+          <el-button size="small" type="primary" @click="openCommentImportDialog">导入留言</el-button>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="导入精选留言" :visible.sync="commentImportDialog.visible" width="600px" append-to-body>
+      <el-upload
+        drag
+        :auto-upload="false"
+        :limit="1"
+        accept=".xls,.xlsx"
+        :on-change="handleCommentFileChange"
+        :file-list="commentImportDialog.fileList">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将Excel文件拖到此处,或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">仅支持.xls/.xlsx格式</div>
+      </el-upload>
+      <div style="margin-top: 10px;">
+        <el-button size="small" type="text" @click="handleDownloadTemplate">下载Excel导入模板</el-button>
+      </div>
+      <div v-if="commentImportDialog.historyList.length > 0" style="margin-top: 15px;">
+        <el-divider content-position="left">历史上传留言</el-divider>
+        <el-table :data="commentImportDialog.historyList" border size="small" max-height="300">
+          <el-table-column label="昵称" prop="nickName" width="100"/>
+          <el-table-column label="评论内容" prop="content" show-overflow-tooltip/>
+          <el-table-column label="上传时间" prop="createTime" width="160"/>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="commentImportDialog.loading" @click="handleImportComments">确认导入</el-button>
+        <el-button @click="commentImportDialog.visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
     <el-dialog :title="title" :visible.sync="updateBatchData.open" width="1000px" append-to-body>
       <el-form ref="form" :model="updateBatchData.form" label-width="110px">
         <el-form-item label="看课时间" prop="timeRange">
@@ -640,6 +685,7 @@ import {listVideoResource, listPublicVideoResource} from '@/api/course/videoReso
 import {getByIds} from '@/api/course/courseQuestionBank'
 import CourseWatchComment from "./courseWatchComment.vue";
 import {getCateListByPid, getCatePidList, getPublicCateListByPid, getPublicCatePidList} from '@/api/course/userCourseCategory'
+import {downloadCommentImportTemplate, importComments, listFeaturedComments} from '@/api/course/userCourseComment'
 import draggable from 'vuedraggable'
 import { getConfigByKey } from '@/api/system/config'
 
@@ -762,6 +808,7 @@ export default {
       form: {
         isOnPut: 0,
         courseProducts: [],
+        courseIntroImg: null,
         randomRedPacketRules:null,
         randomRedPacketRulesArr:[
            {
@@ -817,6 +864,15 @@ export default {
       // 销售易弹窗
       xsyDialogVisible: false,
       xsyParams: '',
+      // 精选留言导入弹窗
+      commentImportDialog: {
+        visible: false,
+        loading: false,
+        fileList: [],
+        file: null,
+        historyList: [],
+        courseId: null
+      },
     }
   },
   created() {
@@ -1093,7 +1149,8 @@ export default {
             maxAmount: 0.01,
             weight: 100,
           }
-        ]
+        ],
+        courseIntroImg: null
       };
       this.videoURL = '';
       this.progress = 0;
@@ -1153,6 +1210,7 @@ export default {
       api(videoId).then(response => {
         console.log(response);
         this.form = response.data;
+        this.$set(this.form, 'courseIntroImg', response.data.courseIntroImg || null);
         this.$set(this.form, 'isOnPut', response.data.isOnPut !== undefined ? response.data.isOnPut : 0);
         if(!!this.form.randomRedPacketRules){
            this.$set(this.form, 'randomRedPacketRulesArr', JSON.parse(this.form.randomRedPacketRules)) ;
@@ -1654,6 +1712,75 @@ export default {
         }
       }
     },
+    // 课程介绍图片上传成功
+    handleCourseIntroSuccess(res) {
+      if (res.code == 200) {
+        this.form.courseIntroImg = res.url;
+        this.$forceUpdate();
+      } else {
+        this.$message.error(res.msg || '上传失败');
+      }
+    },
+    // 课程介绍图片上传前校验(10MB限制)
+    beforeCourseIntroUpload(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error('课程介绍图片大小不能超过10MB!');
+      }
+      const isImage = file.type.startsWith('image/');
+      if (!isImage) {
+        this.$message.error('只能上传图片格式文件!');
+      }
+      return isLt10M && isImage;
+    },
+    // 打开精选留言导入弹窗
+    openCommentImportDialog() {
+      this.commentImportDialog.visible = true;
+      this.commentImportDialog.file = null;
+      this.commentImportDialog.fileList = [];
+      this.commentImportDialog.courseId = this.form.courseId;
+      // 加载历史留言
+      listFeaturedComments(this.form.courseId).then(res => {
+        this.commentImportDialog.historyList = res.rows || [];
+      });
+    },
+    // 选择导入文件
+    handleCommentFileChange(file) {
+      this.commentImportDialog.file = file.raw;
+    },
+    // 下载Word导入模板
+    handleDownloadTemplate() {
+      downloadCommentImportTemplate().then(res => {
+        const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = '精选留言导入模板.xlsx';
+        link.click();
+        window.URL.revokeObjectURL(url);
+      });
+    },
+    // 确认导入精选留言
+    handleImportComments() {
+      if (!this.commentImportDialog.file) {
+        this.$message.warning('请先选择要导入的Excel文件');
+        return;
+      }
+      this.commentImportDialog.loading = true;
+      importComments(this.commentImportDialog.courseId, this.commentImportDialog.file).then(res => {
+        if (res.code === 200) {
+          this.$message.success(res.msg);
+          // 刷新历史列表
+          listFeaturedComments(this.commentImportDialog.courseId).then(res2 => {
+            this.commentImportDialog.historyList = res2.rows || [];
+          });
+        } else {
+          this.$message.error(res.msg);
+        }
+      }).finally(() => {
+        this.commentImportDialog.loading = false;
+      });
+    },
 
   }
 }

+ 128 - 1
src/views/components/course/userCourseCatalogDetailsZM.vue

@@ -410,12 +410,57 @@
 <!--            </el-form-item>-->
 <!--          </el-col>-->
 <!--        </el-row>-->
+        <el-form-item label="课程介绍图" prop="courseIntroImg">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadUrl"
+            :show-file-list="false"
+            :on-success="handleCourseIntroSuccess"
+            :before-upload="beforeCourseIntroUpload">
+            <img v-if="form.courseIntroImg" :src="form.courseIntroImg" class="avatar" style="max-width: 300px; max-height: 200px;">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <div style="margin-top:5px;">
+            <el-button v-if="form.courseIntroImg" size="mini" type="danger" @click="form.courseIntroImg = null">删除图片</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="精选留言">
+          <el-button size="small" type="primary" @click="openCommentImportDialog">导入留言</el-button>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="导入精选留言" :visible.sync="commentImportDialog.visible" width="600px" append-to-body>
+      <el-upload
+        drag
+        :auto-upload="false"
+        :limit="1"
+        accept=".xls,.xlsx"
+        :on-change="handleCommentFileChange"
+        :file-list="commentImportDialog.fileList">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将Excel文件拖到此处,或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">仅支持.xls/.xlsx格式</div>
+      </el-upload>
+      <div style="margin-top: 10px;">
+        <el-button size="small" type="text" @click="handleDownloadTemplate">下载Excel导入模板</el-button>
+      </div>
+      <div v-if="commentImportDialog.historyList.length > 0" style="margin-top: 15px;">
+        <el-divider content-position="left">历史上传留言</el-divider>
+        <el-table :data="commentImportDialog.historyList" border size="small" max-height="300">
+          <el-table-column label="昵称" prop="nickName" width="100"/>
+          <el-table-column label="评论内容" prop="content" show-overflow-tooltip/>
+          <el-table-column label="上传时间" prop="createTime" width="160"/>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="commentImportDialog.loading" @click="handleImportComments">确认导入</el-button>
+        <el-button @click="commentImportDialog.visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
     <el-dialog :title="title" :visible.sync="updateBatchData.open" width="1000px" append-to-body>
       <el-form ref="form" :model="updateBatchData.form" label-width="110px">
         <el-form-item label="看课时间" prop="timeRange">
@@ -596,6 +641,7 @@ import {listVideoResource} from '@/api/course/videoResource';
 import {getByIds} from '@/api/course/courseQuestionBank'
 import CourseWatchComment from "./courseWatchComment.vue";
 import {getCateListByPid, getCatePidList} from '@/api/course/userCourseCategory'
+import {downloadCommentImportTemplate, importComments, listFeaturedComments} from '@/api/course/userCourseComment'
 import draggable from 'vuedraggable'
 import { getConfigByKey } from '@/api/system/config'
 
@@ -716,6 +762,7 @@ export default {
       form: {
         isOnPut: 0,
         courseProducts: [],
+        courseIntroImg: null,
         randomRedPacketRules:null,
         randomRedPacketRulesArr:[
           {
@@ -747,6 +794,15 @@ export default {
         title: ""
       },
       enableRandomRedPacket:false,
+      // 精选留言导入弹窗
+      commentImportDialog: {
+        visible: false,
+        loading: false,
+        fileList: [],
+        file: null,
+        historyList: [],
+        courseId: null
+      },
       // 批量修改封面
       batchEditCoverDialog: {
         title: '修改视频封面',
@@ -1224,7 +1280,8 @@ export default {
             maxAmount: 0.01,
             weight: 100,
           }
-        ]
+        ],
+        courseIntroImg: null
       };
       this.videoURL = '';
       this.progress = 0;
@@ -1284,6 +1341,7 @@ export default {
       api(videoId).then(response => {
         console.log(response);
         this.form = response.data;
+        this.$set(this.form, 'courseIntroImg', response.data.courseIntroImg || null);
         this.$set(this.form, 'isOnPut', response.data.isOnPut !== undefined ? response.data.isOnPut : 0);
 
         if (this.form.randomRedPacketRules) {
@@ -1740,6 +1798,75 @@ export default {
         thumbnail: null,
       }
     },
+    // 课程介绍图片上传成功
+    handleCourseIntroSuccess(res) {
+      if (res.code == 200) {
+        this.form.courseIntroImg = res.url;
+        this.$forceUpdate();
+      } else {
+        this.$message.error(res.msg || '上传失败');
+      }
+    },
+    // 课程介绍图片上传前校验(10MB限制)
+    beforeCourseIntroUpload(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error('课程介绍图片大小不能超过10MB!');
+      }
+      const isImage = file.type.startsWith('image/');
+      if (!isImage) {
+        this.$message.error('只能上传图片格式文件!');
+      }
+      return isLt10M && isImage;
+    },
+    // 打开精选留言导入弹窗
+    openCommentImportDialog() {
+      this.commentImportDialog.visible = true;
+      this.commentImportDialog.file = null;
+      this.commentImportDialog.fileList = [];
+      this.commentImportDialog.courseId = this.form.courseId;
+      // 加载历史留言
+      listFeaturedComments(this.form.courseId).then(res => {
+        this.commentImportDialog.historyList = res.rows || [];
+      });
+    },
+    // 选择导入文件
+    handleCommentFileChange(file) {
+      this.commentImportDialog.file = file.raw;
+    },
+    // 下载Word导入模板
+    handleDownloadTemplate() {
+      downloadCommentImportTemplate().then(res => {
+        const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = '精选留言导入模板.xlsx';
+        link.click();
+        window.URL.revokeObjectURL(url);
+      });
+    },
+    // 确认导入精选留言
+    handleImportComments() {
+      if (!this.commentImportDialog.file) {
+        this.$message.warning('请先选择要导入的Excel文件');
+        return;
+      }
+      this.commentImportDialog.loading = true;
+      importComments(this.commentImportDialog.courseId, this.commentImportDialog.file).then(res => {
+        if (res.code === 200) {
+          this.$message.success(res.msg);
+          // 刷新历史列表
+          listFeaturedComments(this.commentImportDialog.courseId).then(res2 => {
+            this.commentImportDialog.historyList = res2.rows || [];
+          });
+        } else {
+          this.$message.error(res.msg);
+        }
+      }).finally(() => {
+        this.commentImportDialog.loading = false;
+      });
+    },
 
   }
 }

+ 0 - 21
src/views/system/config/config.vue

@@ -1595,27 +1595,6 @@
               inactive-color="#ff4949">
             </el-switch>
           </el-form-item>
-          <el-form-item label="看课Tab-评价得积分" prop="showTabReviewPoints">
-            <el-switch
-              v-model="form18.showTabReviewPoints"
-              active-color="#13ce66"
-              inactive-color="#ff4949">
-            </el-switch>
-          </el-form-item>
-          <el-form-item label="看课Tab-栏目介绍" prop="showTabColumnIntro">
-            <el-switch
-              v-model="form18.showTabColumnIntro"
-              active-color="#13ce66"
-              inactive-color="#ff4949">
-            </el-switch>
-          </el-form-item>
-          <el-form-item label="看课Tab-精选留言" prop="showTabFeaturedComments">
-            <el-switch
-              v-model="form18.showTabFeaturedComments"
-              active-color="#13ce66"
-              inactive-color="#ff4949">
-            </el-switch>
-          </el-form-item>
           <el-form-item label="视频删除上架校验" prop="enableVideoDeleteOnShelfCheck">
             <el-switch
               v-model="form18.enableVideoDeleteOnShelfCheck"