update:优化前端js代码v1

src/main/java/top/lvzhiqiang/service/impl/VideoInfoServiceImpl.java

@@ -18,6 +18,7 @@ import java.io.File;
 import java.time.Instant;
 import java.time.LocalDate;
 import java.time.ZoneOffset;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
@@ -70,16 +71,33 @@ public class VideoInfoServiceImpl extends BaseServiceImpl<Object> implements Vid
 
     @Override
     public PageInfo<VideoInfo> getVideoInfoPage(Map<String, Object> params) {
-        // 转换成like
-        paramsToLike(params, "keyword");
-
-        // 分页
-        paramsToPagination(params);
-
-        // 排序
-        paramsToSort(params);
+        Object bigType = params.get("bigType");
+        List<VideoInfo> videoInfoList = new ArrayList<>();
+
+        if ("骑兵".equals(bigType)) {
+            // 转换成like
+            paramsToLike(params, "keyword");
+            // 分页
+            paramsToPagination(params);
+            // 排序
+            paramsToSort(params);
+            videoInfoList = videoInfoMapper.getVideoInfoList(params);
+        } else if ("步兵".equals(bigType)) {
+
+        } else if ("流出".equals(bigType)) {
+
+        } else if ("待处理".equals(bigType)) {
+
+        } else {
+            // 转换成like
+            paramsToLike(params, "keyword");
+            // 分页
+            paramsToPagination(params);
+            // 排序
+            paramsToSort(params);
+            videoInfoList = videoInfoMapper.getVideoInfoList(params);
+        }
 
-        List<VideoInfo> videoInfoList = videoInfoMapper.getVideoInfoList(params);
         PageInfo<VideoInfo> videoInfoPageInfo = new PageInfo<>(videoInfoList);
         return videoInfoPageInfo;
     }

src/main/resources/static/css/my.css

@@ -63,6 +63,7 @@ body {
         margin-top: 0px;
     }
 }
+
 .myui-header__search {
     width: 200px;
     margin-left: 20px;
@@ -83,6 +84,7 @@ body {
     display: none;
     z-Index: 999;
 }
+
 #cover img {
     position: absolute;
     bottom: 50%;
@@ -90,6 +92,7 @@ body {
     margin-left: 40px;
     margin-top: 40px;
 }
+
 .loading {
     display: none;
     position: absolute;
@@ -99,6 +102,17 @@ body {
     left: 50%;
     transform: translate(-50%, -50%);
 }
+
+.loading-shaixuan {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -25%);
+}
+
 #playvideo {
     display: none;
     position: absolute;
@@ -109,6 +123,7 @@ body {
     transform: translate(-50%, -50%);
     background: #FFFFFF;
 }
+
 #bigpreview {
     display: none;
     position: absolute;

src/main/resources/static/index.html

@@ -53,6 +53,7 @@
                     </div>
                 </div>
                 <div class="myui-panel_bd">
+                    <div class="text-center loading-shaixuan"><img src='cover/loading.gif'></div>
                     <div class="slideDown-box" style="">
                         <ul class="myui-screen__list nav-slide clearfix leixingul" data-align="left">
                             <li><a class="text-muted btn">类型</a></li>

src/main/resources/static/js/my.js

@@ -1,8 +1,11 @@
 $(function () {
     initOther();
-    initSearch();
+    search(1, true);
 });
 
+/**
+ * 初始化其他操作
+ */
 function initOther() {
     $(".slideDown-btn").click(function () {
         var display = $('.slideDown-box');
@@ -16,16 +19,16 @@ function initOther() {
     });
 
     $("#searchbutton").click(function () {
-        search(1);
+        search(1, false);
     });
     $("#shaixuan").click(function () {
         $("#wd").val("");
 
-        search(1);
+        search(1, false);
     });
     $("#wd").keydown(function (e) {
         if (e.keyCode == 13) {
-            search(1);
+            search(1, false);
         }
     });
     $(".dropdown-box").find("li").click(function () {
@@ -33,6 +36,7 @@ function initOther() {
         $(".dropdown-box").attr("style", "display: none;");
 
         getQueryHeaderInfo($("#bigType").text(), false);
+        search(1, false);
     });
     $(".dropdown-hover").mouseover(function () {
         $(".dropdown-box").attr("style", "display: block;");
@@ -49,97 +53,21 @@ function initOther() {
 }
 
 /**
- * 初始化搜索
- */
-function initSearch() {
-    var orderField = $(".paixuul").find(".btn-warm").attr("orderField");
-    var order = $(".paixuul").find(".btn-warm").attr("order");
-    var bigType = $("#bigType").text();
-    $.ajax({
-        url: "videoInfo/getVideoInfoPage", //请求的url地址
-        dataType: "json", //返回格式为json
-        data: JSON.stringify({
-            "pageNo": 1,
-            "pageSize": 10,
-            "orderField": orderField,
-            "order": order,
-            "bigType": bigType
-        }), //参数值
-        type: "post", //请求方式
-        async: true, //请求是否异步，默认为异步，这也是ajax重要特性
-        contentType: "application/json;charset=utf-8",
-        success: function (data) {
-            //请求成功时处理
-            if (data != null && $.trim(data) != "" && data.success) {
-                getQueryHeaderInfo($("#bigType").text(), true);
-
-                data = data.data;
-                var videoInfoList = data.list;
-                var str = "";
-                if (data.size > 0) {
-                    for (var i = 0; i < videoInfoList.length; i++) {
-                        var videoInfo = videoInfoList[i];
-                        str += "<li class=\"col-lg-8 col-md-6 col-sm-4 col-xs-3\">" +
-                            "   <div class=\"myui-vodlist__box\">" +
-                            "       <a class=\"myui-vodlist__thumb lazyload\" title=\"\" style=\"background-image: url(&quot;qibing/" + videoInfo.imgUrl + "&quot;);\">" +
-                            "           <span class=\"playvideo play hidden-xs\" videoUrl='" + videoInfo.videoUrl + "'></span>" +
-                            "           <span class=\"pic-tag pic-tag-top\">" +
-                            "               <span class=\"tag identificationCode\" style=\"background-color: #FB7299;\">" + videoInfo.identificationCode + "</span>" +
-                            "               <span class=\"tag\" style=\"background-color: #00C0FF;\">" + videoInfo.issueDate + "</span>" +
-                            "           </span>" +
-                            "           <span class=\"pic-text text-right\">" + videoInfo.score + "</span>" +
-                            "       </a>" +
-                            "       <div class=\"myui-vodlist__detail\">" +
-                            "           <h4 class=\"bigpreview title text-overflow\" imgUrl='" + videoInfo.imgUrl + "' ><a title=\" " + videoInfo.name + " \">" + videoInfo.name + "</a></h4>" +
-                            "           <p class=\"text text-overflow text-muted hidden-xs\">直属：" + videoInfo.mainWho + "</p>" +
-                            "       </div>" +
-                            "   </div>" +
-                            "</li>";
-                    }
-                    $(".myui-vodlist").html(str);
-
-                    $(".myui-page").pagination({
-                        pageSize: "10",
-                        pageNo: "1",
-                        total: data.total,
-                        callback: function (pageNo) {
-                            $("#wd").val("");
-
-                            search(pageNo);
-                        }
-                    });
-
-                    initContentEvent();
-                }
-            } else {
-                alert(data.message);
-            }
-        },
-        beforeSend: function () {
-            //请求前的处理
-            $("#cover").css('display', 'block');
-        },
-        complete: function () {
-            //请求完成的处理
-            $("#cover").css('display', 'none');
-        },
-        error: function (data) {
-            //请求出错处理
-            alert('error：' + data);
-        }
-    });
-}
-
-/**
  * 多条件搜索
  * @param pageNo
  */
-function search(pageNo) {
-    var genres = $(".leixingul").find(".btn-warm").text().replace("全部", "");
-    var cast = $(".yanyuanul").find(".btn-warm").text().replace("全部", "");
+function search(pageNo, startFlag) {
+    var genres = "";
+    var cast = "";
+    var keyword = "";
+    if (!startFlag) {
+        genres = $(".leixingul").find(".btn-warm").text().replace("全部", "");
+        cast = $(".yanyuanul").find(".btn-warm").text().replace("全部", "");
+        keyword = $("#wd").val();
+    }
+
     var orderField = $(".paixuul").find(".btn-warm").attr("orderField");
     var order = $(".paixuul").find(".btn-warm").attr("order");
-    var keyword = $("#wd").val();
     var bigType = $("#bigType").text();
     $.ajax({
         url: "videoInfo/getVideoInfoPage", //请求的url地址
@@ -160,6 +88,10 @@ function search(pageNo) {
         success: function (data) {
             //请求成功时处理
             if (data != null && $.trim(data) != "" && data.success) {
+                if (startFlag) {
+                    getQueryHeaderInfo($("#bigType").text(), startFlag);
+                }
+
                 data = data.data;
                 var videoInfoList = data.list;
                 var str = "";
@@ -194,18 +126,17 @@ function search(pageNo) {
                     $(".vodlistnone").attr("style", "padding: 50px;display: block;");
                 } else {
                     $(".vodlistnone").attr("style", "padding: 50px;display: none;");
-                }
-
-                $(".myui-page").pagination({
-                    pageSize: "10",
-                    pageNo: pageNo,
-                    total: data.total,
-                    callback: function (pageNo) {
-                        $("#wd").val("");
+                    $(".myui-page").pagination({
+                        pageSize: "10",
+                        pageNo: pageNo,
+                        total: data.total,
+                        callback: function (pageNo) {
+                            $("#wd").val("");
 
-                        search(pageNo);
-                    }
-                });
+                            search(pageNo, false);
+                        }
+                    });
+                }
 
                 initContentEvent();
             } else {
@@ -214,11 +145,19 @@ function search(pageNo) {
         },
         beforeSend: function () {
             //请求前的处理
-            $(".loading").css("display", "block");
+            if (startFlag) {
+                $("#cover").css("display", "block");
+            } else {
+                $(".loading").css("display", "block");
+            }
         },
         complete: function () {
             //请求完成的处理
-            $(".loading").css("display", "none");
+            if (startFlag) {
+                $("#cover").css("display", "none");
+            } else {
+                $(".loading").css("display", "none");
+            }
         },
         error: function (data) {
             //请求出错处理
@@ -238,7 +177,7 @@ function getQueryHeaderInfo(bigType, startFlag) {
         dataType: "json", //返回格式为json
         data: {"bigType": bigType}, //参数值
         type: "post", //请求方式
-        async: false, //请求是否异步，默认为异步，这也是ajax重要特性
+        async: !startFlag, //请求是否异步，默认为异步，这也是ajax重要特性
         success: function (data) {
             //请求成功时处理
             if (data != null && $.trim(data.data) != "" && data.success) {
@@ -248,6 +187,7 @@ function getQueryHeaderInfo(bigType, startFlag) {
                     $("#yanyuandiv").html("");
                     $(".vodlistnone").attr("style", "padding: 50px;display: block;");
                     $(".myui-vodlist").html("");
+                    $(".myui-page").html("");
                     return;
                 }
 
@@ -258,7 +198,7 @@ function getQueryHeaderInfo(bigType, startFlag) {
                         var videoCast = videoCastList[i];
                         str += "<li><a class=\"btn searchbtn\">" + videoCast.name + "</a></li>";
                     }
-                    $("#yanyuandiv").append(str);
+                    $("#yanyuandiv").html(str);
                 }
                 if (data.videoGenresList.length > 0) {
                     var videoGenresList = data.videoGenresList;
@@ -267,11 +207,7 @@ function getQueryHeaderInfo(bigType, startFlag) {
                         var videoGenres = videoGenresList[i];
                         str += "<li><a class=\"btn searchbtn\">" + videoGenres.name + "</a></li>";
                     }
-                    $("#leixingdiv").append(str);
-                }
-
-                if (!startFlag) {
-                    search(1);
+                    $("#leixingdiv").html(str);
                 }
 
                 $(".searchbtn").click(function () {
@@ -289,7 +225,7 @@ function getQueryHeaderInfo(bigType, startFlag) {
 
                     $("#wd").val("");
 
-                    search(1);
+                    search(1, false);
                 });
             } else {
                 alert(data.message);
@@ -297,9 +233,15 @@ function getQueryHeaderInfo(bigType, startFlag) {
         },
         beforeSend: function () {
             //请求前的处理
+            if (!startFlag) {
+                $(".loading-shaixuan").css("display", "block");
+            }
         },
         complete: function () {
             //请求完成的处理
+            if (!startFlag) {
+                $(".loading-shaixuan").css("display", "none");
+            }
         },
         error: function (data) {
             //请求出错处理