弹窗提示

src/css/searchStaticList.less

@@ -288,6 +288,63 @@
     
 }
 
+.warning-box {
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  .bg {
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .3;
+    z-index: 999;
+  }
+  .inner-box {
+    width: 400px;
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -90px 0 0 -200px;
+    color: #333;
+    border-radius: 4px;
+  }
+  .title {
+    border-bottom: 1px #EBEBEB solid;
+    height: 40px;
+    line-height: 40px;
+    span {
+      margin-left: 20px;
+    }
+    i {
+      margin-left: 322px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    padding: 30px 20px;
+    img {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+  }
+  button {
+    width: 60px;
+    height: 34px;
+    background: @staticMainColor;
+    color: #fff;
+    text-align: center;
+    border-radius: 3px;
+    margin: 0 0 20px 322px;
+  }
+}
+
 
 
 

src/html/searchStaticList.html

@@ -45,6 +45,21 @@
       </div>
     </div>
   </div>
+  <div class="warning-box">
+    <div class="bg"></div>
+    <div class="inner-box">
+      <div class="title">
+        <span>提示</span>
+        <i class="close">×</i>
+      </div>
+      <div class="content">
+        <img src="../images/warn.png" alt=""><span></span>
+      </div>
+      <div class="btn">
+        <button class="confirm">确定</button>
+      </div>
+    </div>
+  </div>
 </body>
 </html>
 

src/js/searchStaticList.js

@@ -3,7 +3,7 @@ require('./../css/searchStaticList.less');
 const $ = require("jquery");
 const { post,config,getUrlArgObject,openNewWin } = require('./promise.js');
 
-let searchType = 0,inputStr = '',curPage=1,size=10;
+let searchType = 0, inputStr = '', curPage = 1, size = 10, totalPage = 1;
 searchType = getUrlArgObject('type') || 0
 inputStr = getUrlArgObject('inputStr') || ''
 
@@ -13,6 +13,7 @@ require('./../images/staticBgS.png').replace(/^undefined/g, '')
 require('./../images/staticLogo.png').replace(/^undefined/g, '')
 require('./../images/staticBg.png').replace(/^undefined/g, '')
 require('./../images/nolis.png').replace(/^undefined/g, '')
+require('./../images/warn.png').replace(/^undefined/g, '')
 
 $(function(){
   initData()
@@ -60,6 +61,11 @@ function getSearchList(){
 }
 function getTabData(){
     let vals = $('.searchStr').val();
+    if (!vals) {
+        $(".staticResult .loading").hide();
+        toggleWarnBox('检索词不能为空！');
+        return;
+    }
     let param = {
         size,
         current:curPage,
@@ -71,7 +77,7 @@ function getTabData(){
       if(result.code == 0) {
         const data = result.data;
         tabList = data.records;
-        const totalPage = data.pages;
+          totalPage = data.pages;
         const totalNum = data.total;
         renderList(tabList);
         if(totalNum > 0){
@@ -126,6 +132,15 @@ function initData(){
         $(".searchStr").val(inputStr)
     }
 }
+
+function toggleWarnBox(text) {
+    if (text) {
+        $(".warning-box .content span").text(text);
+        $(".warning-box").show();
+    } else {
+        $(".warning-box").hide();
+    }
+}
 // 分页
 function renderPagination(totalPage,activePage,totalNum){
     let str = `<span class="totalSum">共${totalNum}条</span>
@@ -200,8 +215,19 @@ function renderPagination(totalPage,activePage,totalNum){
         getTabData()
     })
     $('.goNum input').change(function(){
-        curPage = $(this).val()
+        const n = $(this).val()
+        if (totalPage < n) {
+            toggleWarnBox("输入页数不能大于最大页数");
+            return;
+        }
+        curPage = n;
         getTabData()
     })
 }
 
+$(function () {
+    $(".warning-box .confirm,.warning-box .close").click(function () {
+        toggleWarnBox();
+    })
+})();
+