18网站推广,医院网站开发兼职,深圳福田最新消息今天,嵌入式软件开发有哪些文章目录0.效果展示1.效果展示2.后端接口3.前端js4.前端html0.效果展示 1.效果展示
1#xff09;当房东点击“客户订单”#xff0c;js向后端接口get_user_orders()获取数据#xff0c;订单页面开始加载#xff1b;
2#xff09;当房东确定接单时#xff0c;js会向后端…
文章目录0.效果展示1.效果展示2.后端接口3.前端js4.前端html0.效果展示 1.效果展示
1当房东点击“客户订单”js向后端接口get_user_orders()获取数据订单页面开始加载
2当房东确定接单时js会向后端接口发送数据后端接口进行修改状态、提交数据库相关操作
3当房东拒单时js会向后端接口发送数据后端接口进行修改状态、获取失败原因、失败回滚等相关操作 2.后端接口
orders.py部分接口
api.route(/orders/int:order_id/status, methods[PUT])
login_required
def accept_reject_order(order_id):接单、拒单user_id g.user_id# 获取参数req_data request.get_json()if not req_data:return jsonify(errnoRET.PARAMERR, errmsg参数错误)# action参数表明客户端请求的是接单还是拒单的行为action req_data.get(action)if action not in (accept, reject):return jsonify(errnoRET.PARAMERR, errmsg参数错误)try:# 根据订单号查询订单并且要求订单处于等待接单状态order Order.query.filter(Order.id order_id, Order.status WAIT_ACCEPT).first()house order.houseexcept Exception as e:current_app.logger.error(e)return jsonify(errnoRET.DBERR, errmsg无法获取订单数据)# 确保房东只能修改属于自己房子的订单if not order or house.user_id ! user_id:return jsonify(errnoRET.REQERR, errmsg操作无效)if action accept:# 接单将订单状态设置为等待评论order.status WAIT_PAYMENTelif action reject:# 拒单要求用户传递拒单原因reason req_data.get(reason)if not reason:return jsonify(errnoRET.PARAMERR, errmsg参数错误)order.status REJECTEDorder.comment reasontry:db.session.add(order)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errnoRET.DBERR, errmsg操作失败)return jsonify(errnoRET.OK, errmsgOK)3.前端js
lorder.js
//模态框居中的控制
function centerModals(){$(.modal).each(function(i){ //遍历每一个模态框var $clone $(this).clone().css(display, block).appendTo(body); var top Math.round(($clone.height() - $clone.find(.modal-content).height()) / 2);top top 0 ? top : 0;$clone.remove();$(this).find(.modal-content).css(margin-top, top-30); //修正原先已经有的30个像素});
}function getCookie(name) {var r document.cookie.match(\\b name ([^;]*)\\b);return r ? r[1] : undefined;
}$(document).ready(function(){$(.modal).on(show.bs.modal, centerModals); //当模态框出现的时候$(window).on(resize, centerModals);// 查询房东的订单$.get(/api/v1.0/user/orders?rolelandlord, function(resp){if (0 resp.errno) {$(.orders-list).html(template(orders-list-tmpl, {orders:resp.data.orders}));$(.order-accept).on(click, function(){var orderId $(this).parents(li).attr(order-id);$(.modal-accept).attr(order-id, orderId);});// 接单处理$(.modal-accept).on(click, function(){var orderId $(this).attr(order-id);$.ajax({url:/api/v1.0/orders/orderId/status,type:PUT,data:{action:accept},contentType:application/json,dataType:json,headers:{X-CSRFTOKEN:getCookie(csrf_token),},success:function (resp) {if (4101 resp.errno) {location.href /login.html;} else if (0 resp.errno) {$(.orders-listli[order-id orderId ]div.order-contentdiv.order-textul li:eq(4)span).html(已接单);$(ul.orders-listli[order-id orderId ]div.order-titlediv.order-operate).hide();$(#accept-modal).modal(hide);}}})});$(.order-reject).on(click, function(){var orderId $(this).parents(li).attr(order-id);$(.modal-reject).attr(order-id, orderId);});// 处理拒单$(.modal-reject).on(click, function(){var orderId $(this).attr(order-id);var reject_reason $(#reject-reason).val();if (!reject_reason) return;var data {action: reject,reason:reject_reason};$.ajax({url:/api/v1.0/orders/orderId/status,type:PUT,data:JSON.stringify(data),contentType:application/json,headers: {X-CSRFTOKEN:getCookie(csrf_token)},dataType:json,success:function (resp) {if (4101 resp.errno) {location.href /login.html;} else if (0 resp.errno) {$(.orders-listli[order-id orderId ]div.order-contentdiv.order-textul li:eq(4)span).html(已拒单);$(ul.orders-listli[order-id orderId ]div.order-titlediv.order-operate).hide();$(#reject-modal).modal(hide);}}});})}});
});4.前端html
lorder.html
!DOCTYPE html
html
head meta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenotitle爱家-我的订单/titlelink href/static/plugins/bootstrap/css/bootstrap.min.css relstylesheetlink href/static/plugins/font-awesome/css/font-awesome.min.css relstylesheetlink href/static/css/reset.css relstylesheetlink href/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css relstylesheetlink href/static/css/ihome/main.css relstylesheetlink href/static/css/ihome/orders.css relstylesheet
/head
bodydiv classcontainerdiv classtop-bardiv classnav-barh3 classpage-title客户订单/h3a classnav-btn fl href/my.htmlspani classfa fa-angle-left fa-2x/i/span/a/div/divdiv classorders-conul classorders-list/ulscript idorders-list-tmpl typetext/html{{if orders}}{{each orders as order}}li order-id{{order.order_id}}div classorder-titleh3订单编号{{order.order_id}}/h3{{ if WAIT_ACCEPT order.status }}div classfr order-operatebutton typebutton classbtn btn-success order-accept data-togglemodal data-target#accept-modal接单/buttonbutton typebutton classbtn btn-danger order-reject data-togglemodal data-target#reject-modal拒单/button/div{{/if}}/divdiv classorder-contentimg src{{order.img_url}}div classorder-texth3{{order.title}}/h3ulli创建时间{{order.ctime}}/lili入住日期{{order.start_date}}/lili离开日期{{order.end_date}}/lili合计金额{{(order.amount/100.0).toFixed(0)}}(共{{order.days}}晚)/lili订单状态span{{if WAIT_ACCEPT order.status}}待接单{{else if WAIT_COMMENT order.status}}待评价{{else if COMPLETE order.status}}已完成{{else if REJECTED order.status}}已拒单{{/if}}/span/li{{if COMPLETE order.status}}li我的评价 {{order.comment}}/li{{else if REJECTED order.status}}li拒单原因 {{order.comment}}/li{{/if}}/ul/div/div/li{{/each}}{{else}}暂时没有订单。{{/if}}/scriptdiv classmodal fade idaccept-modal tabindex-1 roledialog aria-labelledbyaccept-labeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodalspan aria-hiddentruetimes;/span/buttonh4 classmodal-title操作提示/h4/divdiv classmodal-bodyp您确定接此订单吗/p/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取消/buttonbutton typebutton classbtn btn-primary modal-accept确定接单/button/div/div/div/divdiv classmodal fade idreject-modal tabindex-1 roledialog aria-labelledbyreject-labeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodalspan aria-hiddentruetimes;/span/buttonh4 classmodal-title请输入拒接单原因/h4/divdiv classmodal-bodytextarea classform-control rows3 idreject-reason placeholder此处必须填写原因/textarea/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取消/buttonbutton typebutton classbtn btn-primary modal-reject确定/button/div/div/div/div/divdiv classfooterpspani classfa fa-copyright/i/span爱家租房nbsp;nbsp;享受家的温馨/p/div /divscript src/static/js/jquery.min.js/scriptscript src/static/plugins/bootstrap/js/bootstrap.min.js/scriptscript src/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js/scriptscript src/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js/scriptscript src/static/js/template.js/scriptscript src/static/js/ihome/lorders.js/script
/body
/html
