视频封面选取功能

stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysNutritionalVideoController.java

@@ -8,6 +8,7 @@ import com.stdiet.common.core.page.TableDataInfo;
 import com.stdiet.common.utils.AliyunVideoUtils;
 import com.stdiet.common.utils.StringUtils;
 import com.stdiet.common.utils.oss.AliyunOSSUtils;
+import org.aspectj.weaver.loadtime.Aj;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
@@ -54,6 +55,8 @@ public class SysNutritionalVideoController extends BaseController
         SysNutritionalVideo sysNutritionalVideos = sysNutritionalVideoService.selectSysNutritionalVideoById(id);
         if(sysNutritionalVideos != null && StringUtils.isNotEmpty(sysNutritionalVideos.getCoverUrl())){
             sysNutritionalVideos.setPreviewUrl(AliyunOSSUtils.generatePresignedUrl(sysNutritionalVideos.getCoverUrl()));
+        }else{
+            sysNutritionalVideos.setPreviewUrl(AliyunVideoUtils.getVideoCoverUrl(sysNutritionalVideos.getVideoId()));
         }
         return AjaxResult.success(sysNutritionalVideos);
     }
@@ -149,4 +152,47 @@ public class SysNutritionalVideoController extends BaseController
         return AjaxResult.success(sysNutritionalVideos);
     }
 
+    /**
+     * 根据视频videoId提交视频截图请求
+     */
+    @PreAuthorize("@ss.hasPermi('custom:nutritionalVideo:add')")
+    @GetMapping("/submitVideoSnapshot")
+    public AjaxResult submitVideoSnapshot(@RequestParam("videoId")String videoId)
+    {
+        if(StringUtils.isEmpty(videoId)){
+            return AjaxResult.error("视频资源不存在");
+        }
+        AjaxResult result = AjaxResult.error("截图请求失败");
+        try {
+            if(AliyunVideoUtils.submitVideoSnapshot(videoId)){
+                result = AjaxResult.success();
+            }
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        return result;
+    }
+
+    /**
+     * 根据视频videoId获取视频截图
+     */
+    @PreAuthorize("@ss.hasPermi('custom:nutritionalVideo:add')")
+    @GetMapping("/getVideoSnapshot")
+    public AjaxResult getVideoSnapshot(@RequestParam("videoId")String videoId)
+    {
+        if(StringUtils.isEmpty(videoId)){
+            return AjaxResult.error("视频资源不存在");
+        }
+        AjaxResult result = AjaxResult.error("截图不存在");
+        try {
+            List<String> videoSnapshotList = AliyunVideoUtils.getVideoSnapshot(videoId);
+            if(videoSnapshotList != null){
+                result = AjaxResult.success(videoSnapshotList);
+            }
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        return result;
+    }
+
 }

stdiet-common/src/main/java/com/stdiet/common/utils/AliyunVideoUtils.java

@@ -29,6 +29,9 @@ public class AliyunVideoUtils {
 
     public static final String search_field = "VideoId,Title,CoverURL,CateName,Tags,Status,Description,CreationTime";
 
+    //默认截图模板
+    public static final String defaultSnapshotTemplateId = "f8ccc3b5113ca8ea356ef9adf8c573b2";
+
     /**
      * 初始化视频点播Client
      * @return
@@ -176,7 +179,7 @@ public class AliyunVideoUtils {
      * @return
      * @throws Exception
      */
-    public static String updateVideo(String videoId, String title, String tags, String description, Long cateId) throws Exception{
+    public static String updateVideo(String videoId, String title, String tags, String description, Long cateId, String coverUrl) throws Exception{
         com.aliyun.vod20170321.Client client = AliyunVideoUtils.createClient();
         if(StringUtils.isEmpty(videoId)){
             return null;
@@ -194,6 +197,30 @@ public class AliyunVideoUtils {
         if(cateId != null && cateId.longValue() > 0){
             updateVideoInfoRequest.setCateId(cateId);
         }
+        if(StringUtils.isNotEmpty(coverUrl)){
+            updateVideoInfoRequest.setCoverURL(coverUrl);
+        }
+        UpdateVideoInfoResponse updateVideoInfoResponse = client.updateVideoInfo(updateVideoInfoRequest);
+        if(updateVideoInfoResponse != null){
+            return updateVideoInfoResponse.body.requestId;
+        }
+        return null;
+    }
+
+    /**
+     * 更新视频封面
+     * @param videoId 视频ID必须
+     * @param coverUrl 封面
+     * @return
+     * @throws Exception
+     */
+    public static String updateVideoCoverUrl(String videoId, String coverUrl) throws Exception{
+        com.aliyun.vod20170321.Client client = AliyunVideoUtils.createClient();
+        if(StringUtils.isEmpty(videoId) || StringUtils.isEmpty(coverUrl)){
+            return null;
+        }
+        UpdateVideoInfoRequest updateVideoInfoRequest = new UpdateVideoInfoRequest().setVideoId(videoId);
+        updateVideoInfoRequest.setCoverURL(coverUrl);
         UpdateVideoInfoResponse updateVideoInfoResponse = client.updateVideoInfo(updateVideoInfoRequest);
         if(updateVideoInfoResponse != null){
             return updateVideoInfoResponse.body.requestId;
@@ -208,7 +235,7 @@ public class AliyunVideoUtils {
      * @throws Exception
      */
     public static String delVideo(String videoId) throws Exception{
-        return updateVideo(videoId, null,null,null, default_delete_cateId);
+        return updateVideo(videoId, null,null,null, default_delete_cateId, null);
     }
 
     /**
@@ -261,10 +288,52 @@ public class AliyunVideoUtils {
         return coverUrl;
     }
 
+    /**
+     * 根据VideoId提交截图请求
+     * @param videoId
+     * @return
+     */
+    public static boolean submitVideoSnapshot(String videoId){
+        try{
+            com.aliyun.vod20170321.Client client = AliyunVideoUtils.createClient();
+            SubmitSnapshotJobRequest submitSnapshotJobRequest = new SubmitSnapshotJobRequest()
+                    .setSnapshotTemplateId(defaultSnapshotTemplateId)
+                    .setVideoId(videoId);
+            SubmitSnapshotJobResponse response = client.submitSnapshotJob(submitSnapshotJobRequest);
 
+            return response != null && response.body != null && response.body.snapshotJob != null;
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        return false;
+    }
 
-
+    /**
-
+     * 根据VideoId获取普通截图信息
+     * @param videoId
+     * @return
+     */
+    public static List<String> getVideoSnapshot(String videoId){
+        List<String> snapshotList = new ArrayList<>();
+        try{
+            com.aliyun.vod20170321.Client client = AliyunVideoUtils.createClient();
+            ListSnapshotsRequest listSnapshotsRequest = new ListSnapshotsRequest()
+                    .setVideoId(videoId)
+                    .setSnapshotType("NormalSnapshot");
+            ListSnapshotsResponse response = client.listSnapshots(listSnapshotsRequest);
+            if(response != null && response.body != null){
+                List<ListSnapshotsResponseBody.ListSnapshotsResponseBodyMediaSnapshotSnapshotsSnapshot>  listSnapshots = response.body.mediaSnapshot.snapshots.snapshot;
+                if(listSnapshots != null && listSnapshots.size() > 0){
+                    for (ListSnapshotsResponseBody.ListSnapshotsResponseBodyMediaSnapshotSnapshotsSnapshot snapshot : listSnapshots) {
+                        snapshotList.add(snapshot.url);
+                    }
+                }
+            }
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+        return snapshotList;
+    }
 
 
 }

stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysNutritionalVideoServiceImpl.java

@@ -106,6 +106,17 @@ public class SysNutritionalVideoServiceImpl implements ISysNutritionalVideoServi
     public int insertSysNutritionalVideo(SysNutritionalVideo sysNutritionalVideo)
     {
         sysNutritionalVideo.setCreateTime(DateUtils.getNowDate());
+        //判断封面是上传的还是阿里云视频截图封面
+        if(isSnapshot(sysNutritionalVideo.getCoverUrl())){
+            //更新阿里云视频封面
+            try{
+                AliyunVideoUtils.updateVideoCoverUrl(sysNutritionalVideo.getVideoId(), sysNutritionalVideo.getCoverUrl());
+            }catch (Exception e){
+                e.printStackTrace();
+                return 0;
+            }
+            sysNutritionalVideo.setCoverUrl("");
+        }
         return sysNutritionalVideoMapper.insertSysNutritionalVideo(sysNutritionalVideo);
     }
 
@@ -119,19 +130,23 @@ public class SysNutritionalVideoServiceImpl implements ISysNutritionalVideoServi
     public int updateSysNutritionalVideo(SysNutritionalVideo sysNutritionalVideo)
     {
         sysNutritionalVideo.setUpdateTime(DateUtils.getNowDate());
+        sysNutritionalVideo.setCoverUrl(sysNutritionalVideo.getCoverUrl() == null ? "" : sysNutritionalVideo.getCoverUrl());
+        String coverUrl = sysNutritionalVideo.getCoverUrl();
+        //判断封面是上传的还是阿里云视频截图封面
+        sysNutritionalVideo.setCoverUrl(isSnapshot(coverUrl) ? "" : coverUrl);
         int row = sysNutritionalVideoMapper.updateSysNutritionalVideo(sysNutritionalVideo);
         if(row > 0){
-            updateAliyunVideo(sysNutritionalVideo.getId());
+            sysNutritionalVideo.setCoverUrl(isSnapshot(coverUrl) ? coverUrl : null);
+            updateAliyunVideo(sysNutritionalVideo);
         }
         return row;
     }
 
     @Async
-    public void updateAliyunVideo(Long id){
+    public void updateAliyunVideo(SysNutritionalVideo sysNutritionalVideo){
         try{
-            SysNutritionalVideo sysNutritionalVideo = selectSysNutritionalVideoById(id);
             if(sysNutritionalVideo != null && sysNutritionalVideo.getVideoId() != null){
-                AliyunVideoUtils.updateVideo(sysNutritionalVideo.getVideoId(), sysNutritionalVideo.getTitle(), sysNutritionalVideo.getTags(), sysNutritionalVideo.getDescription(), null);
+                AliyunVideoUtils.updateVideo(sysNutritionalVideo.getVideoId(), sysNutritionalVideo.getTitle(), sysNutritionalVideo.getTags(), sysNutritionalVideo.getDescription(), null, sysNutritionalVideo.getCoverUrl());
             }
         }catch (Exception e){
             e.printStackTrace();
@@ -270,4 +285,15 @@ public class SysNutritionalVideoServiceImpl implements ISysNutritionalVideoServi
         return sysNutritionalVideoMapper.updateVideoPlayNum(videoId);
     }
 
+    /**
+     * 判断是否为阿里点播的截图
+     * @param url
+     * @return
+     */
+    private boolean isSnapshot(String url){
+       return StringUtils.isNotEmpty(url) && url.startsWith("http://outin");
+    }
+
+
+
 }

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

@@ -78,3 +78,23 @@ export function getVideoPlayUrlById(id) {
   })
 }
 
+// 根据视频videoId提交视频截图请求
+export function submitVideoSnapshot(id) {
+  return request({
+    url: '/custom/nutritionalVideo/submitVideoSnapshot',
+    method: 'get',
+    params: {'videoId': id}
+  })
+}
+
+//根据视频videoId获取视频截图
+export function getVideoSnapshot(id) {
+  return request({
+    url: '/custom/nutritionalVideo/getVideoSnapshot',
+    method: 'get',
+    params: {'videoId': id}
+  })
+}
+
+
+

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

@@ -8,7 +8,7 @@
   :accept="'.png,.jpg'"
   :before-upload="beforeAvatarUpload">
   <img v-if="imageUrl || coverUrl" :src="imageUrl || coverUrl" class="avatar">
-  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+  <i v-else class="el-icon-plus avatar-uploader-icon" title="手动上传图片"></i>
   
   <div class="el-upload__tip" slot="tip" style="color:#1890ff">
     <el-button v-if="imageUrl || coverUrl" size="small" type="danger" @click="removeFile">移除</el-button>

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

@@ -17,15 +17,11 @@
                 placeholder="请输入视频描述"
                 v-model.trim="videoFrom.description"
                 maxlength="1000"
-                rows="3"
+                rows="2"
                 show-word-limit
             />
         </el-form-item>
-        
+         <div style="display:flex">
-         <el-form-item label="视频封面" prop="coverUrl">
-              <UploadFile ref="uploadFile" :prefix="'videoCover'" @callbackMethod="handleCoverUrl" :tips="'视频未传封面图片时，会主动截取封面，但会存在延迟，请勿直接发布到小程序'"></UploadFile>
-          </el-form-item>  
-          <div style="display:flex">
             <el-form-item label="视频类别" prop="cateId" style="width:300px">
             <treeselect
                 v-model="videoFrom.cateId"
@@ -46,40 +42,47 @@
             </el-select>
           </el-form-item>   
           </div>
-          
         <el-form-item label="视频文件" prop="file">
             <div>
             <input type="file" accept=".mp4" ref="videoFile" id="videoFile" @change="fileChange($event)">
             <div > <span>上传状态：{{statusText}}</span><span style="margin-left:100px">进度：{{authProgress}}%</span></div>
             <div style="color:#1890ff"> 
-                1、只能上传mp4文件，上传大文件时请使用客户端上传，防止上传超时 
+                <el-button type="primary" @click="authUpload" :disabled="uploadDisabled" size="small" icon="el-icon-upload2">上传视频</el-button><span style="margin-left:20px">1、只能上传mp4格式视频</span>
             </div>
+            
             </div>
         </el-form-item>
+         <el-form-item label="视频封面" prop="coverUrl">
+              <UploadFile ref="uploadFile" :prefix="'videoCover'" :coverUrl="videoFrom.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
+              <el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" :disabled="!uploadVideoFlag" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
+          </el-form-item>  
         <el-form-item label="展示状态" prop="wxShow">
               <el-switch
                 v-model="videoFrom.wxShow"
-                active-text="小程序展示"
+                active-text="展示"
-                inactive-text="小程序不展示">
+                inactive-text="不展示">
               </el-switch>
-              <div style="color:red">提示：请保证内容正确再展示到小程序</div>
+              <div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
           </el-form-item>  
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="authUpload" :disabled="uploadDisabled">开始上传</el-button>
+        <el-button type="primary" @click="submitVideoForm">保存</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+      <!-- 手动选择封面 -->
+      <VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
 </el-dialog>
   
 </template>
 <script>
   import axios from 'axios'
-  import {getUploadVideoAuth,addNutritionalVideo } from "@/api/custom/nutritionalVideo";
+  import {getUploadVideoAuth,addNutritionalVideo,getVideoSnapshot,submitVideoSnapshot } from "@/api/custom/nutritionalVideo";
   import {getAllClassify } from "@/api/custom/videoClassify";
   import UploadFile from "@/components/FileUpload/UploadFile";
    import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
   import IconSelect from "@/components/IconSelect";
+  import VideoSelectCover from "@/components/VideoSelectCover";
   export default {
       name: "UploadVideo",
     data () {
@@ -122,6 +125,8 @@
         statusText: '',
         fileType:['mp4','MP4'],
         uploading: false,
+        //视频是否上传成功标识
+        uploadVideoFlag: false
       }
     },
     created(){
@@ -142,7 +147,7 @@
         
     },
     components: {
-      UploadFile,Treeselect, IconSelect
+      UploadFile,Treeselect, IconSelect,VideoSelectCover
     },
     methods: {
         showDialog(classifyList, callback){
@@ -167,7 +172,8 @@
                 tags: null,
                 payLevel: this.defaultPayLevel ? parseInt(this.defaultPayLevel) : null,
                 videoId: null,
-                wxShow: false
+                wxShow: false,
+                previewUrl: null 
             };
             if(this.$refs.uploadFile){
                 this.$refs.uploadFile.resetUpload();
@@ -180,11 +186,53 @@
             this.uploader = null;
             this.statusText = '';
             this.uploading = false;
+            this.uploadVideoFlag = false;
             this.resetForm("videoFrom"); 
         },
         submitVideoForm(){
+          this.$refs["videoFrom"].validate((valid) => {
+              if (valid) {
+                    //视频分类不能选择主分类
+                    if(this.videoFrom.cateId == 0){
+                        this.$message({
+                            message: "视频分类不能选择主分类",
+                            type: "warning",
+                        });
+                        return;
+                    }
+                    if(this.uploading){
+                        this.$message({
+                            message: "视频正在上传，请勿取消",
+                            type: "warning",
+                        });
+                        return;
+                    }
+                    if(!this.uploadVideoFlag){
+                        this.$message({
+                            message: "请先上传视频再保存",
+                            type: "warning",
+                        });
+                        return;
+                    }
+                    this.videoFrom.showFlag = this.videoFrom.wxShow ? 1 : 0;
+                    addNutritionalVideo(this.videoFrom).then(response => {
+                        if (response.code === 200) {
+                          this.msgSuccess("视频保存成功");
+                          this.open = false;
+                          this.callback && this.callback();
+                        }
+                    })
+              }
+          });
             
         },
+        selectVideoCover(){
+            this.$refs.videoSelectCoverRef.showDialog(this.videoFrom,(url)=>{
+               //console.log(url);
+               this.videoFrom.previewUrl = url;
+               this.videoFrom.coverUrl = url;
+            });
+        },
         /** 转换菜单数据结构 */
         normalizer(node) {
           if (node.children && !node.children.length) {
@@ -205,7 +253,7 @@
         cancel(){
             if(this.uploading){
                 this.$message({
-                    message: "文件正在上传，请勿取消",
+                    message: "视频正在上传，请勿取消",
                     type: "warning",
                 });
                 return;
@@ -219,7 +267,7 @@
               if (valid) {
                  if(this.uploading){
                     this.$message({
-                      message: "文件正在上传，请勿取消",
+                      message: "视频正在上传，请勿取消",
                       type: "warning",
                     });
                     return;
@@ -242,7 +290,7 @@
                   this.videoFrom.fileName = this.file.name;
                   if(this.videoFrom.fileName == null || this.videoFrom.fileName.length == 0 || this.videoFrom.fileName.lastIndexOf(".") == -1){
                       this.$message({
-                          message: "当前文件名称错误",
+                          message: "当前视频名称错误",
                           type: "warning",
                       });
                       return;
@@ -250,7 +298,7 @@
                   let fileType = this.videoFrom.fileName.substring(this.videoFrom.fileName.lastIndexOf(".")+1);
                   if(this.fileType.indexOf(fileType) == -1){
                       this.$message({
-                          message: "当前文件格式错误",
+                          message: "当前视频格式错误",
                           type: "warning",
                       });
                       return;
@@ -268,8 +316,8 @@
                           this.resumeDisabled = true
                       }
                   })
-                    }
+              }
-                  }); 
+            }); 
       },
       authUpload () {
         // 然后调用 startUpload 方法, 开始上传
@@ -309,7 +357,7 @@
           addFileSuccess: function (uploadInfo) {
             self.uploadDisabled = false
             self.resumeDisabled = false
-            self.statusText = '添加文件成功, 等待上传...'
+            self.statusText = '添加视频成功, 等待上传...'
             console.log("addFileSuccess: " + uploadInfo.file.name)
           },
           // 开始上传
@@ -322,32 +370,32 @@
             // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
             // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
             uploader.setUploadAuthAndAddress(uploadInfo, self.uploadAuth.uploadAuth, self.uploadAuth.uploadAddress, self.uploadAuth.videoId) 
-            self.statusText = '文件开始上传...'
+            self.statusText = '视频开始上传...'
             console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
           },
           // 文件上传成功
           onUploadSucceed: function (uploadInfo) {
             console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
-            self.statusText = '文件上传成功!'
+            self.statusText = '视频上传成功!'
             
           },
           // 文件上传失败
           onUploadFailed: function (uploadInfo, code, message) {
             console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
             self.uploading = false;
-            self.statusText = '文件上传失败!'
+            self.statusText = '视频上传失败!'
           },
           // 取消文件上传
           onUploadCanceled: function (uploadInfo, code, message) {
             console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
-            self.statusText = '文件已暂停上传'
+            self.statusText = '视频已暂停上传'
           },
           // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
           onUploadProgress: function (uploadInfo, totalSize, progress) {
             console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
             let progressPercent = Math.ceil(progress * 100)
             self.authProgress = progressPercent
-            self.statusText = '文件上传中...'
+            self.statusText = '视频上传中...'
           },
           // 上传凭证超时
           onUploadTokenExpired: function (uploadInfo) {
@@ -360,23 +408,20 @@
               uploader.resumeUploadWithAuth(uploadAuth)
               console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
             })*/
-            self.statusText = '文件上传超时...';
+            self.statusText = '视频上传超时...';
             self.uploading = false;
             
           },
           // 全部文件上传结束
           onUploadEnd: function (uploadInfo) {
-            self.statusText = '文件上传完毕'
+            self.statusText = '视频上传完毕'
             self.uploading = false;
-            //self.msgSuccess("上传成功");
+            self.uploadVideoFlag = true;
-            self.videoFrom.showFlag = self.videoFrom.wxShow ? 1 : 0;
+            submitVideoSnapshot(self.videoFrom.videoId).then(response => {
-            addNutritionalVideo(self.videoFrom).then(response => {
+                if(response.code == 200){
-                if (response.code === 200) {
+                    console.log("-- 截图成功 --");
-                  self.msgSuccess("视频上传成功");
-                  self.open = false;
-                  self.callback && self.callback();
                 }
-            })         
+            })
           }
         })
         return uploader

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

@@ -0,0 +1,69 @@
+<template>
+<el-dialog title="选择视频封面（每隔两秒一张截图，共十张）" :visible.sync="open" width="650px" style="height: 80%; overflow: auto;" :close-on-click-modal="true" :show-close="true" append-to-body>
+    <div v-if="!showFlag"><el-divider>{{showStatusText}}</el-divider></div>
+    <div v-else class="demo-image__lazy" style="margin-left:20px;">
+        <div v-for="url in videoSnapshotList" :key="url">
+            <el-image :src="url" lazy style="width:550px;height:300px;margin-top:10px;cursor:pointer" title="点击选择" @click="selectVideoSnapshot(url)"></el-image>
+            <el-divider></el-divider>
+        </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    
+</el-dialog>
+  
+</template>
+<script>
+  import axios from 'axios'
+  import {getVideoSnapshot } from "@/api/custom/nutritionalVideo";
+  export default {
+    name: "VideoSelectCover",
+    data () {
+      return {
+        open: false,
+        videoData: null,
+        callback: undefined,
+        showFlag: false,
+        showStatusText:"加载中...",
+        videoSnapshotList:[]
+      }
+    },
+    created(){
+        
+    },
+    components: {
+      
+    },
+    methods: {
+        showDialog(data,callback){
+            if(data && data.videoId != null){
+                this.videoSnapshotList = [];
+                this.showFlag = false;
+                this.showStatusText = "加载中...";
+                this.open = true;
+                this.videoData = data;
+                this.callback = callback;
+                this.getVideoSnapshot();
+            } 
+        },
+        getVideoSnapshot(){
+            getVideoSnapshot(this.videoData.videoId).then(response => {
+                if(response.code == 200 && response.data.length > 0){
+                    this.videoSnapshotList = response.data;
+                    this.showFlag = true;
+                }else{
+                    this.showStatusText = "暂无截图数据！"
+                }
+            })
+        },
+        selectVideoSnapshot(url){
+            this.callback && this.callback(url);
+            this.open = false;
+        },
+        cancel(){
+            this.open = false;
+        }
+    }
+  }
+</script>

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

@@ -9,7 +9,7 @@
           size="small"
         />
       </el-form-item>
-      <el-form-item label="小程序展示状态" prop="showFlag" label-width="200">
+      <el-form-item label="展示状态" prop="showFlag" label-width="200">
         <el-select
           v-model="queryParams.showFlag"
           placeholder="请选示状态"
@@ -131,7 +131,7 @@
       <!--<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="200">
+      <el-table-column label="展示状态" align="center" prop="showFlag" width="200">
         <template slot-scope="scope" >
           <el-switch
                 v-model="scope.row.wxShow"
@@ -208,20 +208,26 @@
                 show-word-limit
             />
         </el-form-item>
-         <el-form-item label="视频封面" prop="coverUrl">
+         <div style="display:flex">
-              <UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="'视频未传封面图片时，会主动截取封面，但会存在延迟，请勿直接发布到小程序'"></UploadFile>
+        <el-form-item label="视频类别" prop="cateId" style="width:300px">
-          </el-form-item>
+            <!--<el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
-        <el-form-item label="视频类别" prop="cateId">
-            <el-select v-model="form.cateId" clearable filterable placeholder="请选择类别">
               <el-option
                 v-for="classify in classifyList"
                 :key="classify.id"
                 :label="classify.cateName"
                 :value="classify.id"
               />
-            </el-select>
+            </el-select>-->
+            <treeselect
+                v-model="form.cateId"
+                :options="classifyList"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择分类"
+                style="width:200px"
+              />
           </el-form-item>
-          <el-form-item label="视频权限" prop="payLevel">
+          <el-form-item label="视频权限" prop="payLevel" style="margin-left:40px">
             <el-select v-model="form.payLevel" clearable filterable placeholder="请选择权限">
               <el-option
                 v-for="dict in payVideoLevelList"
@@ -231,13 +237,18 @@
               />
             </el-select>
           </el-form-item>
+         </div>
+         <el-form-item label="视频封面" prop="coverUrl">
+              <UploadFile ref="uploadFile" v-if="open" :prefix="'videoCover'" :coverUrl="form.previewUrl" @callbackMethod="handleCoverUrl" :tips="''"></UploadFile>
+              <el-button type="primary" size="small" icon="el-icon-film" @click="selectVideoCover" title="上传视频之后选择视频截图作为封面">选择封面</el-button>
+          </el-form-item>
            <el-form-item label="展示状态" prop="wxShow">
               <el-switch
                 v-model="form.wxShow"
-                active-text="小程序展示"
+                active-text="展示"
-                inactive-text="小程序不展示">
+                inactive-text="不展示">
               </el-switch>
-              <div style="color:red">提示：请保证内容正确再展示到小程序</div>
+              <div style="color:red">提示：开启展示之后客户可看到该视频，请保证内容正确再展示</div>
           </el-form-item>    
       </el-form>
      
@@ -255,6 +266,9 @@
            <VideoClassify ref="videoClassifyRef"></VideoClassify>
       </div>
     </el-dialog>
+
+    <!-- 手动选择封面 -->
+      <VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
   </div>
 </template>
 
@@ -268,6 +282,7 @@
     import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
   import IconSelect from "@/components/IconSelect";
+  import VideoSelectCover from "@/components/VideoSelectCover";
   export default {
     name: "NutritionalVideo",
     data() {
@@ -316,6 +331,8 @@
         coverImageList:[],
         //分类列表
         classifyList:[],
+        //所有分类
+        allClassifyList:[],
         //权限等级列表
         payVideoLevelList:[],
         //视频分类弹窗显示标识
@@ -331,7 +348,7 @@
       });
     },
     components: {
-      UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect
+      UploadVideo,UploadFile,VideoClassify,AutoHideMessage,Treeselect, IconSelect,VideoSelectCover
     },
     methods: {
       /** 查询营养视频列表 */
@@ -350,6 +367,7 @@
       getAllVideoClassify(){
         getAllClassify().then(response => {
           if(response.code == 200){
+            this.allClassifyList = response.data;
             this.classifyList = [];
             const classify = { id: 0, cateName: '主分类', children: [] };
             classify.children = this.handleTree(response.data, "id");
@@ -366,6 +384,7 @@
       reset() {
         this.form = {
           id: null,
+          videoId:null,
           cateId: null,
           coverUrl: null,
           title: null,
@@ -373,10 +392,18 @@
           tags: null,
           payLevel:null,
           showFlag: null,
-          wxShow: false
+          wxShow: false,
+          previewUrl: null
         };
         this.resetForm("form");
       },
+      selectVideoCover(){
+            this.$refs.videoSelectCoverRef.showDialog(this.form,(url)=>{
+               //console.log(url);
+               this.form.previewUrl = url;
+               this.form.coverUrl = url;
+            });
+      },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNum = 1;
@@ -394,7 +421,7 @@
         this.multiple = !selection.length
       },
       clickUploadVideo(){
-        this.$refs.uploadVideoRef.showDialog(this.classifyList, ()=>{
+        this.$refs.uploadVideoRef.showDialog(this.allClassifyList, ()=>{
          this.getList();
         });
       },
@@ -443,6 +470,14 @@
         this.$refs["form"].validate(valid => {
           if (valid) {
             this.form.showFlag = this.form.wxShow ? 1 : 0;
+            //视频分类不能选择主分类
+            if(this.form.cateId == 0){
+                this.$message({
+                    message: "视频分类不能选择主分类",
+                    type: "warning",
+                });
+                return;
+            }
             if (this.form.id != null) {
               updateNutritionalVideo(this.form).then(response => {
                 if (response.code === 200) {