视频后台管理，提成计算优化

stdiet-ui/src/api/custom/videoClassify.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询视频分类列表
+export function listVideoClassify(query) {
+  return request({
+    url: '/custom/videoClassify/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询视频分类详细
+export function getVideoClassify(id) {
+  return request({
+    url: '/custom/videoClassify/' + id,
+    method: 'get'
+  })
+}
+
+// 新增视频分类
+export function addVideoClassify(data) {
+  return request({
+    url: '/custom/videoClassify',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改视频分类
+export function updateVideoClassify(data) {
+  return request({
+    url: '/custom/videoClassify',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除视频分类
+export function delVideoClassify(id) {
+  return request({
+    url: '/custom/videoClassify/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出视频分类
+export function exportVideoClassify(query) {
+  return request({
+    url: '/custom/videoClassify/export',
+    method: 'get',
+    params: query
+  })
+}
+
+//获取所有分类
+export function getAllClassify(){
+  return request({
+    url: '/custom/videoClassify/getAllClassify',
+    method: 'get'
+  })
+}

stdiet-ui/src/components/FileUpload/UploadFile.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-upload
+  class="avatar-uploader"
+  :headers="upload.headers"
+  :action="upload.url"
+  :show-file-list="false"
+  :on-success="handleFileSuccess"
+  :accept="'.png,.jpg'"
+  :before-upload="beforeAvatarUpload">
+  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+  <div class="el-upload__tip" slot="tip">
+      1、只能上传png、jpg文件，且每个文件不超过{{
+        upload.fileSize / (1024 * 1024)
+      }}M
+    </div>
+</el-upload>
+</template>
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+  name: "DragUpload",
+  components: {},
+  data() {
+    return {
+      upload: {
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/custom/fileUpload/" + this.prefix,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 其他需要携带的数据
+        data: {},
+        //每个文件大小(单位：byte)
+        fileSize: 1024 * 1024 * 10,
+      },
+      //上传之后的路径
+      imageUrl: null,
+      fileUrl: null
+    };
+  },
+  methods: {
+    resetUpload(){
+        this.imageUrl = null;
+        this.fileUrl = null
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      if (response != null && response.code === 200) {
+        this.fileUrl = response.fileUrl;
+        this.imageUrl = response.previewUrl;
+        //this.imageUrl = URL.createObjectURL(file.raw);
+        //文件全部上传成功，则调用回调方法
+        this.$emit("callbackMethod", this.fileUrl);
+      } else {
+        this.$message.error("文件上传失败");
+      }
+    },
+    // 文件上传失败处理
+    handleFileFail(err, file, fileList) {
+      this.$message.error("文件上传失败");
+    },
+    beforeAvatarUpload(file) {
+        if(file.type != 'image/jpeg' && file.type != 'image/png') {
+          this.$message.error('文件格式错误');
+          return false;
+        }
+        if (file.size > this.upload.fileSize) {
+          this.$message.error('文件大小超过最大限制');
+          return false;
+        }
+        return true;
+    }
+  },
+  props: {
+    prefix: {
+      type: String,
+      default: "videoCover",
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.avatar-uploader .el-upload {
+    border: 1px dashed #d7e236;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 300px;
+    height: 200px;
+    display: block;
+  }
+</style>
+

stdiet-ui/src/components/UploadVideo/index.vue

@@ -7,7 +7,7 @@
                 placeholder="请输入视频标题"
                 v-model="videoFrom.title"
                 maxlength="50" 
-                rows="3"
+                rows="1"
                 show-word-limit
             />
         </el-form-item>
@@ -16,11 +16,37 @@
                 type="textarea"
                 placeholder="请输入视频描述"
                 v-model="videoFrom.description"
-                maxlength="2000"
-                rows="10"
+                maxlength="1000"
+                rows="3"
                 show-word-limit
             />
         </el-form-item>
+         <el-form-item label="视频封面" prop="coverUrl">
+              <UploadFile ref="uploadFile" :prefix="'videoCover'" @callbackMethod="handleCoverUrl"></UploadFile>
+          </el-form-item>
+        <el-form-item label="视频类别" prop="cateId">
+            <el-select v-model="videoFrom.cateId" clearable filterable placeholder="请选择类别">
+              <el-option
+                v-for="classify in classifyList"
+                :key="classify.id"
+                :label="classify.cateName"
+                :value="classify.id"
+              />
+            </el-select>
+          </el-form-item>
+         
+          
+          <el-form-item label="视频权限" prop="payLevel">
+            <el-select v-model="videoFrom.payLevel" clearable filterable placeholder="请选择权限">
+              <el-option
+                v-for="dict in payVideoLevelList"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="parseInt(dict.dictValue)"
+              />
+            </el-select>
+          </el-form-item>
+          
         <el-form-item label="视频文件" prop="file">
             <div>
             <input type="file" accept=".mp4" ref="videoFile" id="videoFile" @change="fileChange($event)">
@@ -39,17 +65,32 @@
 </template>
 <script>
   import axios from 'axios'
-  import {getUploadVideoAuth } from "@/api/custom/nutritionalVideo";
-
+  import {getUploadVideoAuth,addNutritionalVideo } from "@/api/custom/nutritionalVideo";
+  import {getAllClassify } from "@/api/custom/videoClassify";
+  import UploadFile from "@/components/FileUpload/UploadFile";
   export default {
       name: "UploadVideo",
     data () {
       return {
         open: false,
         videoFrom:{},
-        videoRules:{},
+        videoRules:{
+          title: [
+            { required: true, message: "标题不能为空", trigger: "blur" },
+          ],
+          coverUrl: [
+           { required: true, message: "封面不能为空", trigger: "blur" },
+          ],
+          cateId:[
+            { required: true, message: "视频类别不能为空", trigger: "blur" },
+          ],
+          payLevel:[
+            { required: true, message: "视频权限不能为空", trigger: "blur" },
+          ]
+        },
         callback: null,
-
+        classifyList: [],
+        payVideoLevelList:[],
         uploadAuth:{
             
         },
@@ -72,20 +113,42 @@
         uploading: false
       }
     },
+    created(){
+      getAllClassify().then(response => {
+          if(response.code == 200){
+              this.classifyList = response.data;
+          }
+      });
+      this.getDicts("video_pay_level").then((response) => {
+        this.payVideoLevelList = response.data;
+      });
+        
+    },
+    components: {
+      UploadFile
+    },
     methods: {
         showDialog(callback){
             this.resetVideoFrom();
             this.open = true;
             this.callback = callback;
         },
+        handleCoverUrl(url){
+          this.videoFrom.coverUrl = url;
+        },
         resetVideoFrom(){
             this.videoFrom = {
                 cateId: null,
                 coverUrl: null,
                 title: null,
                 description: null,
-                tags: null, 
+                tags: null,
+                payLevel: null,
+                videoId: null
             };
+            if(this.$refs.uploadFile){
+                this.$refs.uploadFile.resetUpload();
+            }
             this.authProgress = 0;
             this.file = null;
             this.videoFileList = [];
@@ -112,55 +175,53 @@
         },
 
         fileChange (e) {
-            if(this.videoFrom.title == null || this.videoFrom.title.trim().length == 0){
-                this.$message({
-                    message: "标题不能为空",
-                    type: "warning",
-                });
-                return;
-            }
-            if(this.uploading){
-                this.$message({
-                    message: "文件正在上传，请勿取消",
-                    type: "warning",
-                });
-                return;
-            }
-            this.file = e.target.files[0];
-            var userData = '{"Vod":{}}'
-            /**if (this.uploader) {
-                this.uploader.stopUpload()
-                this.authProgress = 0
-                this.statusText = ""
-            }**/
-            this.videoFrom.fileName = this.file.name;
-            if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
-                this.$message({
-                    message: "当前文件名称错误",
-                    type: "warning",
-                });
-                return;
-            }
-            let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
-            if(this.fileType.indexOf(fileType) == -1){
-                this.$message({
-                    message: "当前文件格式错误",
-                    type: "warning",
-                });
-                return;
-            }
-            
-            getUploadVideoAuth(this.videoFrom).then(response => {
-                if(response.code == 200){
-                    this.uploadAuth = response.uploadAuth;
-                    this.uploader = this.createUploader()
-                    this.uploader.addFile(this.file, null, null, null, userData)
-                    this.uploadDisabled = false
-                    this.pauseDisabled = true
-                    this.resumeDisabled = true
-                }
-            })
-            
+            this.$refs["videoFrom"].validate((valid) => {
+              if (valid) {
+                 if(this.uploading){
+                    this.$message({
+                      message: "文件正在上传，请勿取消",
+                      type: "warning",
+                    });
+                    return;
+                  }
+                  this.file = e.target.files[0];
+                  var userData = '{"Vod":{}}'
+                  /**if (this.uploader) {
+                      this.uploader.stopUpload()
+                      this.authProgress = 0
+                      this.statusText = ""
+                  }**/
+                  this.videoFrom.fileName = this.file.name;
+                  if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
+                      this.$message({
+                          message: "当前文件名称错误",
+                          type: "warning",
+                      });
+                      return;
+                  }
+                  let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
+                  if(this.fileType.indexOf(fileType) == -1){
+                      this.$message({
+                          message: "当前文件格式错误",
+                          type: "warning",
+                      });
+                      return;
+                  }
+                  
+                  getUploadVideoAuth(this.videoFrom).then(response => {
+                      if(response.code == 200){
+                          this.uploadAuth = response.uploadAuth;
+                          console.log(this.uploadAuth);
+                          this.videoFrom.videoId = this.uploadAuth.videoId;
+                          this.uploader = this.createUploader()
+                          this.uploader.addFile(this.file, null, null, null, userData)
+                          this.uploadDisabled = false
+                          this.pauseDisabled = true
+                          this.resumeDisabled = true
+                      }
+                  })
+                    }
+                  }); 
       },
       authUpload () {
         // 然后调用 startUpload 方法, 开始上传
@@ -259,9 +320,14 @@
           onUploadEnd: function (uploadInfo) {
             self.statusText = '文件上传完毕'
             self.uploading = false;
-            self.msgSuccess("上传成功");
-            self.open = false;
-            self.callback && self.callback();
+            //self.msgSuccess("上传成功");
+            addNutritionalVideo(self.videoFrom).then(response => {
+                if (response.code === 200) {
+                  self.msgSuccess("视频上传成功");
+                  self.open = false;
+                  self.callback && self.callback();
+                }
+            })         
           }
         })
         return uploader

stdiet-ui/src/views/custom/nutritionalVideo/index.vue

@@ -71,21 +71,23 @@
     <el-table v-loading="loading" :data="nutritionalVideoList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <!--<el-table-column label="视频分类ID" align="center" prop="cateId" />-->
-      <el-table-column label="封面" align="center" prop="coverUrl">
+      <el-table-column label="封面" align="center" prop="coverUrl" width="300">
         <template slot-scope="scope">
-          <el-image title="点击大图预览"
-          style="width: 200px; height: 200px"
+          <el-image
+          style="width: 300px; height: 200px"
           :src="scope.row.coverUrl"
           :preview-src-list="coverImageList">
           </el-image>
         </template>
       </el-table-column>
-      <el-table-column label="标题" align="center" prop="title" />
+      <el-table-column label="标题" align="center" prop="title" width="200"/>
       <el-table-column label="描述" align="center" prop="description" />
-      <el-table-column label="标签" align="center" prop="tags" />
-      <el-table-column label="显示状态" align="center" prop="showFlag">
+      <el-table-column label="标签" align="center" prop="tags" width="100"/>
+       <el-table-column label="分类" align="center" prop="cateName" width="100"/>
+       <el-table-column label="权限等级" align="center" prop="payLevelName" width="100"/>
+      <el-table-column label="显示状态" align="center" prop="showFlag" width="100">
         <template slot-scope="scope">
-          {{scope.row.showFlag == 1 ? '正常' : '屏蔽'}}
+          {{scope.row.showFlag == 1 ? '正常' : '不显示'}}
         </template>
       </el-table-column>
       <!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -208,8 +210,8 @@
         this.loading = true;
         listNutritionalVideo(this.queryParams).then(response => {
           this.nutritionalVideoList = response.rows;
-        this.total = response.total;
-        this.loading = false;
+          this.total = response.total;
+          this.loading = false;
       });
       },
       // 取消按钮