修改预约记录渲染功能

-$(function () {
-var Date = undefined;
-var appuintText = undefined;
 var bustime = undefined;
+$(function () {
+  var Date = undefined;
+  var appuintText = undefined;
+
 
-// 国有房屋无业点击选中记录
-var busIndex = undefined;
-// 机构id
-var jgid = undefined;
+  // 国有房屋无业点击选中记录
+  var busIndex = undefined;
+  // 机构id
+  var jgid = undefined;
   getAppointmentDay();
   layui.use("element", function () {
     let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
@@ -45,39 +46,8 @@ var jgid = undefined;
       prevEl: ".swiper-button-prev",
     },
   });
-  function handle() {
-    layui.use("layer", function () {
-      layer.open({
-        type: 1,
-        title: "请确认以下信息",
-        shadeClose: false,
-        area: ["500px", "320px"],
-        scrollbar: false,
-        skin: "confimInfo",
-        content:
-        '<div class="infoContent">' +
-        "<ul>" +
-        "<li><span>姓名</span>:" + getCookie().username +"</li>" +
-        "<li><span>身份证号</span>："+getCookie().zjhm+"</li>" +
-        "<li><span>联系电话</span>："+getCookie().phone +"</li>" +
-        "</ul>" +
-        '<div class="listItem"><h3>大厅名称：</h3>' +
-        hallname +
-        "</div>" +
-        '<div class="listItem"><h3>预约业务：</h3>' +
-        appuintText +
-        "</div>" +
-        '<div class="listItem"><h3>预约时间：</h3>' +
-        Date +
-        "&nbsp;&nbsp;" +
-        bustime +
-        "</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>",
-      });
-    });
-  }
-  function detailHandle(){
+
+  function detailHandle() {
     layui.use("layer", function () {
       layer.open({
         type: 1,
@@ -86,31 +56,31 @@ var jgid = undefined;
         area: ["500px", "320px"],
         scrollbar: false,
         skin: "confimInfo",
-        content:'123',
+        content: '123',
       });
     });
   }
   // 业务选择
-  $(document).on("click", ".business_item ul .item_appoint ", function (e) {
-    console.log(5555)
-    jgid = GetRequest();
-    appuintText = $(this).find("h3").text();
-    periodRulesId = $(this).data('id')
-    console.log('aaa',periodRulesId)
-    checkAppointment()
-    handle();
-  });
+  // $(document).on("click", ".business_item ul .item_appoint ", function (e) {
+  //   console.log(5555)
+  //   jgid = GetRequest();
+  //   appuintText = $(this).find("h3").text();
+  //   periodRulesId = $(this).data('id')
+  //   console.log('aaa', periodRulesId)
+  //   checkAppointment()
+  //   handle();
+  // });
   $(document).on("click", ".cancel", function () {
     layer.closeAll();
   });
   $(document).on("click", ".confim", function () {
-      if(flag){
-        var paramsobj = {}
-        paramsobj.jgid = GetRequest()
-        paramsobj.periodRulesId = periodRulesId
-        paramsobj.userid = getCookie().userid
-        makeAppointment(paramsobj)
-      }
+    if (flag) {
+      var paramsobj = {}
+      paramsobj.jgid = GetRequest()
+      paramsobj.periodRulesId = periodRulesId
+      paramsobj.userid = getCookie().userid
+      makeAppointment(paramsobj)
+    }
   });
 });
 function GetRequest() {
@@ -168,7 +138,9 @@ function getAppointmentPeriodAndBusiness() {
       //返回数据根据结果进行相应的处理
       if (result.code == 200 && result.data != null) {
         console.log(result.data)
-        data.busList = result.data.appointmentPeriodBusinessList
+        data.busList = result.data.appointmentPeriodBusinessList;
+        //bookingDate=result.data.bookingDate;
+        RenderBusinessList(result.data);
         // console.log(2222,data.busList)
         // if(result.data.choosePeriodRulesId!==null){
         //   if(2){
@@ -186,28 +158,28 @@ function getAppointmentPeriodAndBusiness() {
         //   data.busList = result.data.appointmentPeriodBusinessList
         //   console.log(11111, data.busList)
         // }
-        if(data.busList.length >0){
-          data.busList.forEach((item,index)=>{
+        if (data.busList.length > 0) {
+          data.busList.forEach((item, index) => {
             hallname = item.orgBusinessList[0].jgName
           })
         }
-        layui.use("laytpl", function () {
-          laytpl = layui.laytpl;
-          var getTpl1 = document.getElementById("business_item").innerHTML,
-            view1 = document.getElementById("business_list");
-          laytpl(getTpl1).render(data, function (html) {
-            view1.innerHTML = html;
-          });
-        });
+        // layui.use("laytpl", function () {
+        //   laytpl = layui.laytpl;
+        //   var getTpl1 = document.getElementById("business_item").innerHTML,
+        //     view1 = document.getElementById("business_list");
+        //   laytpl(getTpl1).render(data, function (html) {
+        //     view1.innerHTML = html;
+        //   });
+        // });
       }
     },
   });
 }
-// 根据办事大厅机构ID、用户ID检查用户是否可预约抢号
-function checkAppointment(){
+// 根据办事大厅机构ID、用户ID检查用户是否存在预约限制
+function checkAppointment() {
   $.ajax({
     type: "get", //提交方式
-    async:false,
+    async: false,
     url:
       portal.api_url + "/portal/appointmentmh/checkAppointment",
     data: {
@@ -219,29 +191,29 @@ function checkAppointment(){
     success: function (result) {
       //返回数据根据结果进行相应的处理
       if (result.code == 200) {
-        return  flag = result.data
-      }else if(result.code ==210){
-        return layer.msg( result.message)
+        return flag = result.data
+      } else if (result.code == 210) {
+        return layer.msg(result.message)
       }
     },
   });
 }
 // 用户预约抢号  POST 
-function makeAppointment(data){
+function makeAppointment(data) {
   $.ajax({
     type: "post",  //提交方式  
-    async:false,
+    async: false,
     url: portal.api_url + "/portal/appointmentmh/makeAppointment",//路径  
-    headers:{//***关键******
+    headers: {//***关键******
       'Content-Type': 'application/json;charset=UTF-8',
     },
     dataType: "json",
-    data:JSON.stringify(data),//***关键******
+    data: JSON.stringify(data),//***关键******
     success: function (result) {//返回数据根据结果进行相应的处理
-       if(result.code ==200 && result.data!==null){
-          appointmentId = result.data
-          window.location.href = "./yyjg.html?appointmentId="+ appointmentId
-       } 
+      if (result.code == 200 && result.data !== null) {
+        appointmentId = result.data
+        window.location.href = "./yyjg.html?appointmentId=" + appointmentId
+      }
     }
   });
 }
@@ -263,3 +235,118 @@ var data = {
     },
   ],
 };
+
+//渲染业务信息列表
+function RenderBusinessList(data) {
+  //获取业务列表DIV容器ID
+  let businessDiv = $("#business_list");
+  //是否存在预约记录（默认为否）
+  let existRecord = false;
+  if (data.choosePeriodRulesId != null && data.choosePeriodRulesId != "") {
+    existRecord = true;
+  }
+  let businessContent = "";
+  $.each(data.appointmentPeriodBusinessList, function (index, item) {
+    businessContent += '<div class="business_item">';
+    businessContent += '<div class="item_time"><span>上午</span> <span>' + item.startTime + '</span><span>-</span><span>' + item.endTime + '</span></div>';
+    businessContent += '<ul>';
+    $.each(item.orgBusinessList, function (childIndex, childItem) {
+      //存在预约记录
+      if (existRecord) {      
+        if (data.choosePeriodRulesId == childItem.periodRulesId) {
+          businessContent += '<li class="isAppoint" style="border: 1px solid red ;" data-id="' + childItem.periodRulesId + '">';
+          businessContent += '<h3>' + childItem.shortName + '</h3>';
+          businessContent += '<input type="button" value="查看详情" id="' + childItem.periodRulesId + '" dataName="' + childItem.shortName + '"  onclick="appointmentDetail(this.id)"/>';
+        }
+        else{
+          businessContent += '<li class="isAppoint">';
+          businessContent += '<h3>' + childItem.shortName + '</h3>';
+        }
+        businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
+      } else {
+        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 += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
+      }
+
+    });
+    businessContent += '</ul>';
+    businessContent += '</div>';
+
+  });
+  businessDiv.html(businessContent);
+}
+
+var yyrq;
+function handle(id) {
+  var input = $("#" + id);
+  layui.use("layer", function () {
+    layer.open({
+      type: 1,
+      title: "请确认以下信息",
+      shadeClose: false,
+      area: ["500px", "320px"],
+      scrollbar: false,
+      skin: "confimInfo",
+      content:
+        '<div class="infoContent">' +
+        "<ul>" +
+        "<li><span>姓名</span>:" + getCookie().username + "</li>" +
+        "<li><span>身份证号</span>：" + getCookie().zjhm + "</li>" +
+        "<li><span>联系电话</span>：" + getCookie().phone + "</li>" +
+        "</ul>" +
+        '<div class="listItem"><h3>大厅名称：</h3>' +
+        hallname +
+        "</div>" +
+        '<div class="listItem"><h3>预约业务：</h3>' +
+        input.attr("dataName") +
+        "</div>" +
+        '<div class="listItem"><h3>预约时间：</h3>' +
+        bookingDate +
+        "&nbsp;&nbsp;" +
+        bustime +
+        "</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>",
+    });
+  });
+}
+
+//预约详情
+function appointmentDetail(id) {
+  var input = $("#" + id);
+  layui.use("layer", function () {
+    layer.open({
+      type: 1,
+      title: "预约详情信息",
+      shadeClose: false,
+      area: ["500px", "320px"],
+      scrollbar: false,
+      skin: "confimInfo",
+      content:
+        '<div class="infoContent">' +
+        "<ul>" +
+        "<li><span>姓名</span>:" + getCookie().username + "</li>" +
+        "<li><span>身份证号</span>：" + getCookie().zjhm + "</li>" +
+        "<li><span>联系电话</span>：" + getCookie().phone + "</li>" +
+        "</ul>" +
+        '<div class="listItem"><h3>预约编号：</h3>' +
+        hallname +
+        "</div>" +
+        '<div class="listItem"><h3>预约业务：</h3>' +
+        input.attr("dataName") +
+        "</div>" +
+        '<div class="listItem"><h3>预约时间：</h3>' +
+        bookingDate +
+        "&nbsp;&nbsp;" +
+        bustime +
+        "</div>" +
+        '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消预约</button></div>' +
+        "</div>",
+    });
+  });
+}
+

@@ -62,7 +62,7 @@
           </ul>
         </div>
         <div class="appoint_time">
-          <div class="swiper-container">
+          <div class="swiper-container" >
             <div class="swiper-wrapper" id="swiperDate"></div>
           </div>
           <!-- Add Arrows -->