在线预约数据渲染

焦小希
Showing 2 changed files with 72 additions and 43 deletions
staticCss/yysj.css
staticViews/yysj.html
--- a/staticCss/yysj.css
View file @2e86acd
+++ b/staticCss/yysj.css
View file @2e86acd
@@ -382,6 +382,7 @@
 } */
 .isAppoint {
    cursor:not-allowed!important;
+    background-color: #ccc;
 }
 .business_item ul li h3 {
    margin-bottom: 5px;
--- a/staticViews/yysj.html
View file @2e86acd
+++ b/staticViews/yysj.html
View file @2e86acd
-<!DOCTYPE html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
-<head>
+  <head>
-    <style>
+    <style></style>
-    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我的预约-预约时间</title>
    <script type="text/javascript" src="../staticJs/head.js"></script>
-    <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css">
+    <link rel="stylesheet" href="../staticCss/swiper-bundle.min.css" />
-    <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
+    <link
-    <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css">
+      rel="stylesheet"
-    <link rel="stylesheet" type="text/css" href="../staticCss/layuiDialog.css">
+      type="text/css"
-</head>
+      href="../staticCss/progressBar.css"
+    />
+    <link rel="stylesheet" type="text/css" href="../staticCss/yysj.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../staticCss/layuiDialog.css"
+    />
+  </head>
+  <body>
-<body>
    <div class="yysj_main">
      <div class="navigation_crumbs">
        <div class="contentBox">
@@ -31,36 +36,28 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
          <ul class="app_progress">
            <li>
              <p class="active"></p>
-                        <h5>
+              <h5>预约须知</h5>
-                            预约须知
-                        </h5>
            </li>
            <div class="layui-progress">
              <div class="layui-progress-bar" lay-percent="100%"></div>
            </div>
            <li>
              <p class="active"></p>
-                        <h5>
+              <h5>选择区域</h5>
-                            选择区域
-                        </h5>
            </li>
            <div class="layui-progress">
              <div class="layui-progress-bar" lay-percent="100%"></div>
            </div>
            <li>
              <p class="activeing"></p>
-                        <h5 class="activeingtext">
+              <h5 class="activeingtext">预约时间</h5>
-                            预约时间
-                        </h5>
            </li>
            <div class="layui-progress">
              <div class="layui-progress-bar" lay-percent="50%"></div>
            </div>
            <li>
              <p></p>
-                        <h5>
+              <h5>预约结果</h5>
-                            预约结果
-                        </h5>
            </li>
          </ul>
        </div>
@@ -77,14 +74,11 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
          <div class="site-title">
            <fieldset>
              <legend>
-                            <a href="" name="fieldset">
+                <a href="" name="fieldset"> 业务预约 </a>
-                                业务预约
-                            </a>
              </legend>
            </fieldset>
          </div>
-                <div id="business_list">
+          <div id="business_list"></div>
-                </div>
        </div>
        <div class="next_button">
@@ -92,15 +86,12 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
            <!-- <a href="./yyxz.html" title="上一步">
                        上一步
                    </a> -->
-                    <a href="./xzqy.html" title="上一步">
+            <a href="./xzqy.html" title="上一步"> 上一步 </a>
-                        上一步
-                    </a>
          </button>
        </div>
      </div>
    </div>
-</body>
+  </body>
 </html>
 <script type="text/javascript" src="../staticJs/common.js"></script>
 <script type="text/javascript" src="../staticJs/down.js"></script>
@@ -108,8 +99,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
 <script type="text/javascript" src="../staticJs/yysj.js"></script>
 <script id="date" type="text/html">
-    {{#  layui.each(d.dateList, function(index, item){ }}
+  {{# layui.each(d.dateList, function(index, item){ }} {{# if(item.isSelect){ }}
-    {{#  if(item.isSelect){ }}
  <ul class="swiper-slide layui-bg-gray active1">
    <li>{{item.week}}</li>
    <li>{{item.jyjh}}</li>
@@ -120,8 +110,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
    <li>{{item.week}}</li>
    <li>{{item.jyjh}}</li>
  </ul>
-    {{#  } }} 
+  {{# } }} {{# }); }}
-    {{#  }); }}
 </script>
 <script id="business_item" type="text/html">
@@ -133,14 +122,53 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
      <span>-</span>
      <span>{{item.endTime}}</span>
    </div>
-        <ul >
+    <ul>
      {{# layui.each(item.orgBusinessList, function(index1, item1){ }} 
-            <li class="item_appoint" data-id='{{item1.periodRulesId}}'>
+      {{# if(!item.choosePeriodRulesId && item1.residueNumber==0){ }}
-                <h3>
+      <li class="isAppoint" data-id="{{item1.periodRulesId}}">
-                    {{item1.shortName}}
+        <h3>{{item1.shortName}}</h3>
-                </h3>
        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
      </li>
+      {{# } }} 
+      {{# if(!item.choosePeriodRulesId && item1.residueNumber!=0){ }}
+      <li class="item_appoint" data-id="{{item1.periodRulesId}}">
+        <h3>{{item1.shortName}}</h3>
+        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
+      </li>
+      {{# } }} 
+      <!-- 表示预约的是该时间段 且是最后一个号 -->
+      {{# if(item.choosePeriodRulesId && item1.periodRulesId ==item.choosePeriodRulesId && item1.residueNumber==0){ }}
+      <li class="isAppoint" data-id="{{item1.periodRulesId}}">
+        <h3>{{item1.shortName}}</h3>
+        <input type="button" value='取消预约'>
+        <input type="button" value='查看详情'>
+        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
+      </li>
+      {{# } }} 
+      <!-- 表示预约的是该时间段，且该时间段的号不为0 -->
+      {{# if(item.choosePeriodRulesId && item1.periodRulesId ==item.choosePeriodRulesId && item1.residueNumber!=0){ }}
+      <li class="isAppoint" data-id="{{item1.periodRulesId}}">
+        <h3>{{item1.shortName}}</h3>
+        <input type="button" value='取消预约'>
+        <input type="button" value='查看详情'>
+        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
+      </li>
+      {{# } }} 
+      <!-- 表示预约的不是该时间段且剩余号为0 -->
+      {{# if(item.choosePeriodRulesId && item1.periodRulesId !=item.choosePeriodRulesId && item1.residueNumber==0){ }}
+      <li class="isAppoint" data-id="{{item1.periodRulesId}}">
+        <h3>{{item1.shortName}}</h3>
+        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
+      </li>
+      {{# } }} 
+      <!-- 表示预约的不是该时间段且剩余数不为0-->
+      {{# if(item.choosePeriodRulesId && item1.periodRulesId !=item.choosePeriodRulesId && item1.residueNumbe!=0){ }}
+      <li class="isAppoint" data-id="{{item1.periodRulesId}}">
+        <h3>{{item1.shortName}}</h3>
+        <p style="color:#5FB878">(剩{{item1.residueNumber}}票)</p>
+      </li>
+      {{# } }} 
      {{# }) }}
    </ul>
  </div>