Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
76ca1cb6 by 田浩浩
Options

修改预约记录渲染功能

1 parent 7451b01f
Inline Side-by-side
Showing 2 changed files with 170 additions and 83 deletions
1 $(function () {
2 var Date = undefined;
3 var appuintText = undefined;
4 var bustime = undefined; 1 var bustime = undefined;
2 $(function () {
3 var Date = undefined;
4 var appuintText = undefined;
5
5 6
6 // 国有房屋无业点击选中记录 7 // 国有房屋无业点击选中记录
7 var busIndex = undefined; 8 var busIndex = undefined;
8 // 机构id 9 // 机构id
9 var jgid = undefined; 10 var jgid = undefined;
10 getAppointmentDay(); 11 getAppointmentDay();
11 layui.use("element", function () { 12 layui.use("element", function () {
12 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 13 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
...@@ -45,39 +46,8 @@ var jgid = undefined; ...@@ -45,39 +46,8 @@ var jgid = undefined;
45 prevEl: ".swiper-button-prev", 46 prevEl: ".swiper-button-prev",
46 }, 47 },
47 }); 48 });
48 function handle() { 49
49 layui.use("layer", function () { 50 function detailHandle() {
50 layer.open({
51 type: 1,
52 title: "请确认以下信息",
53 shadeClose: false,
54 area: ["500px", "320px"],
55 scrollbar: false,
56 skin: "confimInfo",
57 content:
58 '<div class="infoContent">' +
59 "<ul>" +
60 "<li><span>姓名</span>:" + getCookie().username +"</li>" +
61 "<li><span>身份证号</span>："+getCookie().zjhm+"</li>" +
62 "<li><span>联系电话</span>："+getCookie().phone +"</li>" +
63 "</ul>" +
64 '<div class="listItem"><h3>大厅名称：</h3>' +
65 hallname +
66 "</div>" +
67 '<div class="listItem"><h3>预约业务：</h3>' +
68 appuintText +
69 "</div>" +
70 '<div class="listItem"><h3>预约时间：</h3>' +
71 Date +
72 "&nbsp;&nbsp;" +
73 bustime +
74 "</div>" +
75 '<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>' +
76 "</div>",
77 });
78 });
79 }
80 function detailHandle(){
81 layui.use("layer", function () { 51 layui.use("layer", function () {
82 layer.open({ 52 layer.open({
83 type: 1, 53 type: 1,
...@@ -86,31 +56,31 @@ var jgid = undefined; ...@@ -86,31 +56,31 @@ var jgid = undefined;
86 area: ["500px", "320px"], 56 area: ["500px", "320px"],
87 scrollbar: false, 57 scrollbar: false,
88 skin: "confimInfo", 58 skin: "confimInfo",
89 content:'123', 59 content: '123',
90 }); 60 });
91 }); 61 });
92 } 62 }
93 // 业务选择 63 // 业务选择
94 $(document).on("click", ".business_item ul .item_appoint ", function (e) { 64 // $(document).on("click", ".business_item ul .item_appoint ", function (e) {
95 console.log(5555) 65 // console.log(5555)
96 jgid = GetRequest(); 66 // jgid = GetRequest();
97 appuintText = $(this).find("h3").text(); 67 // appuintText = $(this).find("h3").text();
98 periodRulesId = $(this).data('id') 68 // periodRulesId = $(this).data('id')
99 console.log('aaa',periodRulesId) 69 // console.log('aaa', periodRulesId)
100 checkAppointment() 70 // checkAppointment()
101 handle(); 71 // handle();
102 }); 72 // });
103 $(document).on("click", ".cancel", function () { 73 $(document).on("click", ".cancel", function () {
104 layer.closeAll(); 74 layer.closeAll();
105 }); 75 });
106 $(document).on("click", ".confim", function () { 76 $(document).on("click", ".confim", function () {
107 if(flag){ 77 if (flag) {
108 var paramsobj = {} 78 var paramsobj = {}
109 paramsobj.jgid = GetRequest() 79 paramsobj.jgid = GetRequest()
110 paramsobj.periodRulesId = periodRulesId 80 paramsobj.periodRulesId = periodRulesId
111 paramsobj.userid = getCookie().userid 81 paramsobj.userid = getCookie().userid
112 makeAppointment(paramsobj) 82 makeAppointment(paramsobj)
113 } 83 }
114 }); 84 });
115 }); 85 });
116 function GetRequest() { 86 function GetRequest() {
...@@ -168,7 +138,9 @@ function getAppointmentPeriodAndBusiness() { ...@@ -168,7 +138,9 @@ function getAppointmentPeriodAndBusiness() {
168 //返回数据根据结果进行相应的处理 138 //返回数据根据结果进行相应的处理
169 if (result.code == 200 && result.data != null) { 139 if (result.code == 200 && result.data != null) {
170 console.log(result.data) 140 console.log(result.data)
171 data.busList = result.data.appointmentPeriodBusinessList 141 data.busList = result.data.appointmentPeriodBusinessList;
142 //bookingDate=result.data.bookingDate;
143 RenderBusinessList(result.data);
172 // console.log(2222,data.busList) 144 // console.log(2222,data.busList)
173 // if(result.data.choosePeriodRulesId!==null){ 145 // if(result.data.choosePeriodRulesId!==null){
174 // if(2){ 146 // if(2){
...@@ -186,28 +158,28 @@ function getAppointmentPeriodAndBusiness() { ...@@ -186,28 +158,28 @@ function getAppointmentPeriodAndBusiness() {
186 // data.busList = result.data.appointmentPeriodBusinessList 158 // data.busList = result.data.appointmentPeriodBusinessList
187 // console.log(11111, data.busList) 159 // console.log(11111, data.busList)
188 // } 160 // }
189 if(data.busList.length >0){ 161 if (data.busList.length > 0) {
190 data.busList.forEach((item,index)=>{ 162 data.busList.forEach((item, index) => {
191 hallname = item.orgBusinessList[0].jgName 163 hallname = item.orgBusinessList[0].jgName
192 }) 164 })
193 } 165 }
194 layui.use("laytpl", function () { 166 // layui.use("laytpl", function () {
195 laytpl = layui.laytpl; 167 // laytpl = layui.laytpl;
196 var getTpl1 = document.getElementById("business_item").innerHTML, 168 // var getTpl1 = document.getElementById("business_item").innerHTML,
197 view1 = document.getElementById("business_list"); 169 // view1 = document.getElementById("business_list");
198 laytpl(getTpl1).render(data, function (html) { 170 // laytpl(getTpl1).render(data, function (html) {
199 view1.innerHTML = html; 171 // view1.innerHTML = html;
200 }); 172 // });
201 }); 173 // });
202 } 174 }
203 }, 175 },
204 }); 176 });
205 } 177 }
206 // 根据办事大厅机构ID、用户ID检查用户是否可预约抢号 178 // 根据办事大厅机构ID、用户ID检查用户是否存在预约限制
207 function checkAppointment(){ 179 function checkAppointment() {
208 $.ajax({ 180 $.ajax({
209 type: "get", //提交方式 181 type: "get", //提交方式
210 async:false, 182 async: false,
211 url: 183 url:
212 portal.api_url + "/portal/appointmentmh/checkAppointment", 184 portal.api_url + "/portal/appointmentmh/checkAppointment",
213 data: { 185 data: {
...@@ -219,29 +191,29 @@ function checkAppointment(){ ...@@ -219,29 +191,29 @@ function checkAppointment(){
219 success: function (result) { 191 success: function (result) {
220 //返回数据根据结果进行相应的处理 192 //返回数据根据结果进行相应的处理
221 if (result.code == 200) { 193 if (result.code == 200) {
222 return flag = result.data 194 return flag = result.data
223 }else if(result.code ==210){ 195 } else if (result.code == 210) {
224 return layer.msg( result.message) 196 return layer.msg(result.message)
225 } 197 }
226 }, 198 },
227 }); 199 });
228 } 200 }
229 // 用户预约抢号 POST 201 // 用户预约抢号 POST
230 function makeAppointment(data){ 202 function makeAppointment(data) {
231 $.ajax({ 203 $.ajax({
232 type: "post", //提交方式 204 type: "post", //提交方式
233 async:false, 205 async: false,
234 url: portal.api_url + "/portal/appointmentmh/makeAppointment",//路径 206 url: portal.api_url + "/portal/appointmentmh/makeAppointment",//路径
235 headers:{//***关键****** 207 headers: {//***关键******
236 'Content-Type': 'application/json;charset=UTF-8', 208 'Content-Type': 'application/json;charset=UTF-8',
237 }, 209 },
238 dataType: "json", 210 dataType: "json",
239 data:JSON.stringify(data),//***关键****** 211 data: JSON.stringify(data),//***关键******
240 success: function (result) {//返回数据根据结果进行相应的处理 212 success: function (result) {//返回数据根据结果进行相应的处理
241 if(result.code ==200 && result.data!==null){ 213 if (result.code == 200 && result.data !== null) {
242 appointmentId = result.data 214 appointmentId = result.data
243 window.location.href = "./yyjg.html?appointmentId="+ appointmentId 215 window.location.href = "./yyjg.html?appointmentId=" + appointmentId
244 } 216 }
245 } 217 }
246 }); 218 });
247 } 219 }
...@@ -263,3 +235,118 @@ var data = { ...@@ -263,3 +235,118 @@ var data = {
263 }, 235 },
264 ], 236 ],
265 }; 237 };
238
239 //渲染业务信息列表
240 function RenderBusinessList(data) {
241 //获取业务列表DIV容器ID
242 let businessDiv = $("#business_list");
243 //是否存在预约记录（默认为否）
244 let existRecord = false;
245 if (data.choosePeriodRulesId != null && data.choosePeriodRulesId != "") {
246 existRecord = true;
247 }
248 let businessContent = "";
249 $.each(data.appointmentPeriodBusinessList, function (index, item) {
250 businessContent += '<div class="business_item">';
251 businessContent += '<div class="item_time"><span>上午</span> <span>' + item.startTime + '</span><span>-</span><span>' + item.endTime + '</span></div>';
252 businessContent += '<ul>';
253 $.each(item.orgBusinessList, function (childIndex, childItem) {
254 //存在预约记录
255 if (existRecord) {
256 if (data.choosePeriodRulesId == childItem.periodRulesId) {
257 businessContent += '<li class="isAppoint" style="border: 1px solid red ;" data-id="' + childItem.periodRulesId + '">';
258 businessContent += '<h3>' + childItem.shortName + '</h3>';
259 businessContent += '<input type="button" value="查看详情" id="' + childItem.periodRulesId + '" dataName="' + childItem.shortName + '" onclick="appointmentDetail(this.id)"/>';
260 }
261 else{
262 businessContent += '<li class="isAppoint">';
263 businessContent += '<h3>' + childItem.shortName + '</h3>';
264 }
265 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
266 } else {
267 businessContent += '<li class="isAppoint" data-id="' + childItem.periodRulesId + '">';
268 businessContent += '<h3>' + childItem.shortName + '</h3>';
269 if (childItem.residueNumber > 0) {
270 businessContent += '<input type="button" value="立即预约" id="' + childItem.periodRulesId + '" dataName="' + childItem.shortName + '" onclick="handle(this.id)"/>';
271 }
272 businessContent += '<p style="color:#5FB878">(剩' + childItem.residueNumber + '票)</p></li>';
273 }
274
275 });
276 businessContent += '</ul>';
277 businessContent += '</div>';
278
279 });
280 businessDiv.html(businessContent);
281 }
282
283 var yyrq;
284 function handle(id) {
285 var input = $("#" + id);
286 layui.use("layer", function () {
287 layer.open({
288 type: 1,
289 title: "请确认以下信息",
290 shadeClose: false,
291 area: ["500px", "320px"],
292 scrollbar: false,
293 skin: "confimInfo",
294 content:
295 '<div class="infoContent">' +
296 "<ul>" +
297 "<li><span>姓名</span>:" + getCookie().username + "</li>" +
298 "<li><span>身份证号</span>：" + getCookie().zjhm + "</li>" +
299 "<li><span>联系电话</span>：" + getCookie().phone + "</li>" +
300 "</ul>" +
301 '<div class="listItem"><h3>大厅名称：</h3>' +
302 hallname +
303 "</div>" +
304 '<div class="listItem"><h3>预约业务：</h3>' +
305 input.attr("dataName") +
306 "</div>" +
307 '<div class="listItem"><h3>预约时间：</h3>' +
308 bookingDate +
309 "&nbsp;&nbsp;" +
310 bustime +
311 "</div>" +
312 '<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>' +
313 "</div>",
314 });
315 });
316 }
317
318 //预约详情
319 function appointmentDetail(id) {
320 var input = $("#" + id);
321 layui.use("layer", function () {
322 layer.open({
323 type: 1,
324 title: "预约详情信息",
325 shadeClose: false,
326 area: ["500px", "320px"],
327 scrollbar: false,
328 skin: "confimInfo",
329 content:
330 '<div class="infoContent">' +
331 "<ul>" +
332 "<li><span>姓名</span>:" + getCookie().username + "</li>" +
333 "<li><span>身份证号</span>：" + getCookie().zjhm + "</li>" +
334 "<li><span>联系电话</span>：" + getCookie().phone + "</li>" +
335 "</ul>" +
336 '<div class="listItem"><h3>预约编号：</h3>' +
337 hallname +
338 "</div>" +
339 '<div class="listItem"><h3>预约业务：</h3>' +
340 input.attr("dataName") +
341 "</div>" +
342 '<div class="listItem"><h3>预约时间：</h3>' +
343 bookingDate +
344 "&nbsp;&nbsp;" +
345 bustime +
346 "</div>" +
347 '<div class="confimButton"><button type="button" class="layui-btn cancel layui-btn-primary">取消预约</button></div>' +
348 "</div>",
349 });
350 });
351 }
352
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
62 </ul> 62 </ul>
63 </div> 63 </div>
64 <div class="appoint_time"> 64 <div class="appoint_time">
65 <div class="swiper-container"> 65 <div class="swiper-container" >
66 <div class="swiper-wrapper" id="swiperDate"></div> 66 <div class="swiper-wrapper" id="swiperDate"></div>
67 </div> 67 </div>
68 <!-- Add Arrows --> 68 <!-- Add Arrows -->
......