修改

@@ -4,10 +4,7 @@ $(function () {
   var appuintText = undefined;
 
 
-  // 国有房屋无业点击选中记录
-  var busIndex = undefined;
-  // 机构id
-  var jgid = undefined;
+
   getAppointmentDay();
   layui.use("element", function () {
     let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
@@ -17,17 +14,17 @@ $(function () {
     });
   });
 
-function a(i) {
-    Date = data.dateList[i].jyjh;
-    bookingDate = data.dateList[i].bookingDate;
-    bustime = data.dateList[i].week;
-    getAppointmentPeriodAndBusiness()
-    $(".swiper-slide")
-      .eq(i)
-      .addClass("active1")
-      .siblings()
-      .removeClass("active1");
-  }
+  // function a(i) {
+  //   Date = data.dateList[i].jyjh;
+  //   bookingDate = data.dateList[i].bookingDate;
+  //   bustime = data.dateList[i].week;
+  //   //getAppointmentPeriodAndBusiness()
+  //   $(".swiper-slide")
+  //     .eq(i)
+  //     .addClass("active1")
+  //     .siblings()
+  //     .removeClass("active1");
+  // }
   var swiper = new Swiper(".swiper-container", {
     slidesPerView: 5,
     spaceBetween: 20,
@@ -37,7 +34,7 @@ function a(i) {
     on: {
       click: function (swiper) {
         var index = swiper["clickedIndex"];
-        a(index);
+        //a(index);
       },
     },
     loopFillGroupWithBlank: true,
@@ -49,23 +46,9 @@ function a(i) {
   $(document).on("click", ".cancel", function () {
     layer.closeAll();
   });
-  $(document).on("click", ".confim", function () {
-    var paramsobj = {}
-    paramsobj.jgid = GetQueryString("jgid");
-    paramsobj.periodRulesId = periodRulesId
-    paramsobj.userid = getCookie().userid
-    makeAppointment(paramsobj)
-  });
+  
 });
-$(document).on('click','#canlebutton',function(){
-  console.log(2323)
-  var obj = {}
-  obj.appointmentId = cancleId,
-  obj.userid = getCookie().userid
-  obj.jgid = GetQueryString("jgid"),
-  obj.periodRulesId = choosePeriodRulesId,
-  cancleAppointment(obj)
-})
+
 //获取当前页面预约日期
 function getAppointmentDay() {
   $.ajax({
@@ -78,21 +61,35 @@ function getAppointmentDay() {
     success: function (result) {
       //返回数据根据结果进行相应的处理
       if (result.code == 200 && result.data != null) {
-        data.dateList = result.data.listTime;
-        layui.use("laytpl", function () {
-          laytpl = layui.laytpl;
-          var getTpl = document.getElementById("date").innerHTML,
-            view = document.getElementById("swiperDate");
-          laytpl(getTpl).render(data, function (html) {
-            view.innerHTML = html;
-          });
-        });
+        RenderbookingDateList(result.data);
+        bookingDateClick(result.data.listTime[0].bookingDate);
       }
     },
   });
 }
+
+
+
+//渲染预约日期列表
+function RenderbookingDateList(data) {
+  let DateConnect = "";
+  $.each(data.listTime, function (index, item) {
+    DateConnect += '<ul id="' + item.bookingDate + '" class="swiper-slide layui-bg-gray" onclick="bookingDateClick(this.id)">';
+    DateConnect += '<li>' + item.week + '</li><li>' + item.jyjh + '</li>';
+    DateConnect += '</ul>';
+  });
+  $("#swiperDate").html(DateConnect);
+}
+
+//预约日期点击事件
+function bookingDateClick(id) {
+  $(".layui-bg-gray").removeClass("active1");
+  $("#" + id).addClass("active1");
+  getAppointmentPeriodAndBusiness(id);
+}
+
 // 根据办事大厅机构ID、日期、用户ID，获取对应日期的业务列表 GET
-function getAppointmentPeriodAndBusiness() {
+function getAppointmentPeriodAndBusiness(bookingDate) {
   $.ajax({
     type: "get", //提交方式
     url:
@@ -107,38 +104,14 @@ function getAppointmentPeriodAndBusiness() {
     success: function (result) {
       //返回数据根据结果进行相应的处理
       if (result.code == 200 && result.data != null) {
-        console.log(result.data)
-        data.busList = result.data.appointmentPeriodBusinessList;
-        choosePeriodRulesId = result.data.choosePeriodRulesId     
-        cancleId = result.data.appointmentId     
         RenderBusinessList(result.data);
-        if (data.busList.length > 0) {
-          data.busList.forEach((item, index) => {
-            hallname = item.orgBusinessList[0].jgName
-          })
+        if (result.data.appointmentPeriodBusinessList.length > 0) {
+          hallname = result.data.appointmentPeriodBusinessList[0].orgBusinessList[0].jgName;
         }
       }
     },
   });
 }
-var bookingDate = undefined;
-var flag = undefined;
-var msg = undefined;
-var hallname = undefined;
-var periodRulesId = undefined
-var choosePeriodRulesId = undefined
-var appointmentId = undefined
-var cancleId = undefined
-var data = {
-  dateList: [],
-  busList: [
-    {
-      startTime: "",
-      endTime: "",
-      orgBusinessList: [],
-    },
-  ],
-};
 
 //渲染业务信息列表
 function RenderBusinessList(data) {
@@ -171,7 +144,7 @@ function RenderBusinessList(data) {
         businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">';
         businessContent += '<h3>' + childItem.shortName + '</h3>';
         if (childItem.residueNumber > 0) {
-          businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" dataName="' + childItem.shortName + '"  onclick="handle(this.id)"/>';
+          businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" periodRulesId="' + childItem.periodRulesId + '"  onclick="handle(this.id)"/>';
         }
         businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
       }
@@ -209,7 +182,7 @@ function checkAppointment() {
 }
 
 function handle(id) {
-  periodRulesId = id
+  let bookingDateUL = $(".active1");
   let msg = checkAppointment();
   if (msg != undefined) {
     //layer.msg('hello'); 
@@ -235,21 +208,25 @@ function handle(id) {
         hallname +
         "</div>" +
         '<div class="listItem"><h3>预约业务：</h3>' +
-        input.attr("dataName") +
+        input.val() +
         "</div>" +
         '<div class="listItem"><h3>预约时间：</h3>' +
-        yysj +
+        bookingDateUL.children("li").get(1).innerHTML +
         "&nbsp;&nbsp;" +
-        bustime +
+        bookingDateUL.children("li").get(0).innerHTML +
         "</div>" +
-        '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal">确定</button></div>' +
+        '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消</button><button type="button" class="layui-btn confim layui-btn-normal" onclick="makeAppointment(\'' + input.attr("periodRulesId") + '\')">确定</button></div>' +
         "</div>",
     });
   });
 }
 
-// 用户预约抢号  POST 
-function makeAppointment(data) {
+// 提交预约记录
+function makeAppointment(id) {
+  var paramsobj = {}
+  paramsobj.jgid = GetQueryString("jgid");
+  paramsobj.periodRulesId = id;
+  paramsobj.userid = getCookie().userid;
   $.ajax({
     type: "post",  //提交方式  
     async: false,
@@ -258,37 +235,21 @@ function makeAppointment(data) {
       'Content-Type': 'application/json;charset=UTF-8',
     },
     dataType: "json",
-    data: JSON.stringify(data),//***关键******
+    data: JSON.stringify(paramsobj),//***关键******
     success: function (result) {//返回数据根据结果进行相应的处理
       if (result.code == 200 && result.data !== null) {
         appointmentId = result.data
         window.location.href = "./yyjg.html?appointmentId=" + appointmentId
       }
-    }
-  });
-}
-// 用户取消预约
-function cancleAppointment(data) {
-  $.ajax({
-    type: "post",  //提交方式  
-    url: portal.api_url + "/portal/appointmentmh/cancleAppointment",//路径  
-    headers: {//***关键******
-      'Content-Type': 'application/json;charset=UTF-8',
-    },
-    dataType: "json",
-    data: JSON.stringify(data),//***关键******
-    success: function (result) {//返回数据根据结果进行相应的处理
-      if (result.code == 200 && result.data !== null) {
-        console.log('取消预约成功')
-        // a(i)
-        // appointmentId = result.data
-        // window.location.href = "./yyjg.html?appointmentId=" + appointmentId
+      else {
+        alert(result.message);
       }
     }
   });
 }
-// GET 根据预约信息标识码appointmentId查看预约详情
-function getAppointmentDetail(id){
+
+// 根据预约信息标识码appointmentId查看预约详情接口数据
+function getAppointmentDetail(id) {
   $.ajax({
     type: "get", //提交方式
     url:
@@ -302,8 +263,8 @@ function getAppointmentDetail(id){
       //返回数据根据结果进行相应的处理
       if (result.code == 200) {
         appointmentDetail(result.data);
-      } 
-      else{
+      }
+      else {
         alert(result.message);
       }
     },
@@ -311,7 +272,7 @@ function getAppointmentDetail(id){
 }
 
 
-//预约详情
+//预约详情展示页面
 function appointmentDetail(data) {
   layui.use("layer", function () {
     layer.open({
@@ -332,13 +293,36 @@ function appointmentDetail(data) {
         data.reservationNumber +
         "</div>" +
         '<div class="listItem"><h3>预约业务：</h3>' +
-        data.hbShortname  +
+        data.hbShortname +
         "</div>" +
         '<div class="listItem"><h3>预约时间：</h3>' +
-        data.bookingDate.substr(0,4) + '年'+data.bookingDate.substr(4,2) + '月' + data.bookingDate.substr(6,2) + '日'+data.startTime + '至'+data.endTime +
+        data.bookingDate.substr(0, 4) + '年' + data.bookingDate.substr(4, 2) + '月' + data.bookingDate.substr(6, 2) + '日' + data.startTime + '至' + data.endTime +
         "</div>" +
-        '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary" id="canlebutton">取消预约</button></div>' +
+        '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary" onclick="cancleAppointment(\'' + data.aid + '\',\'' + data.jgid + '\',\'' + data.periodRulesId + '\',\'' + data.userid + '\')">取消预约</button></div>' +
         "</div>",
     });
   });
 }
+// 用户取消预约
+function cancleAppointment(aid, jgid, periodRulesId, userid) {
+
+  $.ajax({
+    type: "post",  //提交方式  
+    url: portal.api_url + "/portal/appointmentmh/cancleAppointment",//路径  
+    headers: {//***关键******
+      'Content-Type': 'application/json;charset=UTF-8',
+    },
+    dataType: "json",
+    data: JSON.stringify({
+      "appointmentId": aid,
+      "jgid": jgid,
+      "periodRulesId": periodRulesId,
+      "userid": userid
+    }),//***关键******
+    success: function (result) {//返回数据根据结果进行相应的处理
+      if (result.code == 200) {
+        bookingDateClick($(".active1").attr('id'));   
+      }
+    }
+  });
+}
\ No newline at end of file

-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html
+  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>
-    <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"
-      type="text/css"
-      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>
-    <div class="yysj_main">
-      <div class="navigation_crumbs">
-        <div class="contentBox">
-          <span class="layui-breadcrumb">
-            <a href="../index.html" title="首页">首页</a>
-            <a href="./grzx.html" title="个人中心">个人中心</a>
-            <a title="预约时间"><cite>预约时间</cite></a>
-          </span>
-        </div>
+<head>
+  <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" type="text/css" 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>
+  <div class="yysj_main">
+    <div class="navigation_crumbs">
+      <div class="contentBox">
+        <span class="layui-breadcrumb">
+          <a href="../index.html" title="首页">首页</a>
+          <a href="./grzx.html" title="个人中心">个人中心</a>
+          <a title="预约时间"><cite>预约时间</cite></a>
+        </span>
       </div>
-      <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
-      <div class="central_area">
-        <div class="progressBar contentBox">
-          <ul class="app_progress">
-            <li>
-              <p class="active"></p>
-              <h5>预约须知</h5>
-            </li>
-            <div class="layui-progress">
-              <div class="layui-progress-bar" lay-percent="100%"></div>
-            </div>
-            <li>
-              <p class="active"></p>
-              <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>
-            </li>
-            <div class="layui-progress">
-              <div class="layui-progress-bar" lay-percent="50%"></div>
-            </div>
-            <li>
-              <p></p>
-              <h5>预约结果</h5>
-            </li>
-          </ul>
-        </div>
-        <div class="appoint_time">
-          <div class="swiper-container" >
-            <div class="swiper-wrapper" id="swiperDate"></div>
+    </div>
+    <!-- ----------------------------------内容模块的开始----------------------------------------------- -->
+    <div class="central_area">
+      <div class="progressBar contentBox">
+        <ul class="app_progress">
+          <li>
+            <p class="active"></p>
+            <h5>预约须知</h5>
+          </li>
+          <div class="layui-progress">
+            <div class="layui-progress-bar" lay-percent="100%"></div>
           </div>
-          <!-- Add Arrows -->
-          <div class="swiper-button-next"></div>
-          <div class="swiper-button-prev"></div>
-        </div>
-        <!-- ----------------------------------业务选择start----------------------------------------------- -->
-        <div class="business_choice contentBox">
-          <div class="site-title">
-            <fieldset>
-              <legend>
-                <a href="" name="fieldset"> 业务预约 </a>
-              </legend>
-            </fieldset>
+          <li>
+            <p class="active"></p>
+            <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>
+          </li>
+          <div class="layui-progress">
+            <div class="layui-progress-bar" lay-percent="50%"></div>
           </div>
-          <div id="business_list"></div>
+          <li>
+            <p></p>
+            <h5>预约结果</h5>
+          </li>
+        </ul>
+      </div>
+      <div class="appoint_time">
+        <div class="swiper-container">
+          <div class="swiper-wrapper" id="swiperDate"></div>
+        </div>
+        <!-- Add Arrows -->
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
+      <!-- ----------------------------------业务选择start----------------------------------------------- -->
+      <div class="business_choice contentBox">
+        <div class="site-title">
+          <fieldset>
+            <legend>
+              <h2>业务列表</h2>
+            </legend>
+          </fieldset>
         </div>
+        <div id="business_list"></div>
+      </div>
 
-        <div class="next_button">
-          <button type="button" class="layui-btn layui-btn-normal">
-            <!-- <a href="./yyxz.html" title="上一步">
+      <div class="next_button">
+        <button type="button" class="layui-btn layui-btn-normal">
+          <!-- <a href="./yyxz.html" title="上一步">
                         上一步
                     </a> -->
-            <a href="./xzqy.html" title="上一步"> 上一步 </a>
-          </button>
-        </div>
+          <a href="./xzqy.html" title="上一步"> 上一步 </a>
+        </button>
       </div>
     </div>
-  </body>
+  </div>
+</body>
+
 </html>
 <script type="text/javascript" src="../staticJs/common.js"></script>
 <script type="text/javascript" src="../staticJs/down.js"></script>
 <script src="../staticJs/swiper-bundle.min.js"></script>
 <script type="text/javascript" src="../staticJs/yysj.js"></script>
 
-<script id="date" type="text/html">
-  {{# layui.each(d.dateList, function(index, item){ }} {{# if(item.isSelect){ }}
+<!-- <script id="date" type="text/html">
+  {{# layui.each(d.dateList, function(index, item){ }}
+   {{# if(item.isSelect){ }}
   <ul class="swiper-slide layui-bg-gray active1">
     <li>{{item.week}}</li>
     <li>{{item.jyjh}}</li>
@@ -111,4 +107,4 @@
     <li>{{item.jyjh}}</li>
   </ul>
   {{# } }} {{# }); }}
-</script>
\ No newline at end of file
+</script> -->
\ No newline at end of file