城市网站建设意义,小型企业管理系统软件,高端手机网站,深圳高端网站定制建设文章目录0.页面效果1.思路总结2.后端代码3.前端js4.前端html0.页面效果 1.思路总结
1#xff09;用户点击“我的订单”#xff0c;js向后端获取数据#xff0c;并加载在前端的模板中#xff1b;
2#xff09;用户点击相应订单的“去支付”按钮#xff0c;js向引导用户…
文章目录0.页面效果1.思路总结2.后端代码3.前端js4.前端html0.页面效果 1.思路总结
1用户点击“我的订单”js向后端获取数据并加载在前端的模板中
2用户点击相应订单的“去支付”按钮js向引导用户跳转到支付宝链接
3用户交易完成之后点击评论的“确定”按钮js将评论数据传送给后端接口 4后端接口接收评论数据并进行逻辑处理比如修改订单状态、订单数加1、提交数据库等并将redis中关于房屋详情页的缓存删除以保证下次获取个人详情页时能够重新生成最新的评论。
2.后端代码
orders.py中部分接口
获取用户订单
# /api/v1.0/user/orders?rolecustom rolelandlord
api.route(/user/orders, methods[GET])
login_required
def get_user_orders():查询用户的订单信息user_id g.user_id# 用户的身份用户想要查询作为房客预订别人房子的订单还是想要作为房东查询别人预订自己房子的订单role request.args.get(role, )# 查询订单数据try:if landlord role:# 以房东的身份查询订单# 先查询属于自己的房子有哪些houses House.query.filter(House.user_id user_id).all()houses_ids [house.id for house in houses]# 再查询预订了自己房子的订单orders Order.query.filter(Order.house_id.in_(houses_ids)).order_by(Order.create_time.desc()).all()else:# 以房客的身份查询订单 查询自己预订的订单orders Order.query.filter(Order.user_id user_id).order_by(Order.create_time.desc()).all()except Exception as e:current_app.logger.error(e)return jsonify(errnoRET.DBERR, errmsg查询订单信息失败)# 将订单对象转换为字典数据orders_dict_list []if orders:for order in orders:orders_dict_list.append(order.to_dict())return jsonify(errnoRET.OK, errmsgOK, data{orders: orders_dict_list})用户评论
api.route(/orders/int:order_id/comment, methods[PUT])
login_required
def save_order_comment(order_id):保存订单评论信息user_id g.user_id# 获取参数req_data request.get_json()comment req_data.get(comment) # 评价信息# 检查参数if not comment:return jsonify(errnoRET.PARAMERR, errmsg参数错误)try:# 需要确保只能评论自己下的订单而且订单处于待评价状态才可以order Order.query.filter(Order.id order_id, Order.user_id user_id,Order.status WAIT_COMMENT).first()house order.houseexcept Exception as e:current_app.logger.error(e)return jsonify(errnoRET.DBERR, errmsg无法获取订单数据)if not order:return jsonify(errnoRET.REQERR, errmsg操作无效)try:# 将订单的状态设置为已完成order.status COMPLETE# 保存订单的评价信息order.comment comment# 将房屋的完成订单数增加1house.order_count 1db.session.add(order)db.session.add(house)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errnoRET.DBERR, errmsg操作失败)# 因为房屋详情中有订单的评价信息为了让最新的评价信息展示在房屋详情中所以删除redis中关于本订单房屋的详情缓存try:redis_store.delete(house_info_%s % order.house.id)except Exception as e:current_app.logger.error(e)return jsonify(errnoRET.OK, errmsgOK)3.前端js
orders.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?rolecustom, function(resp){if (0 resp.errno) {$(.orders-list).html(template(orders-list-tmpl, {orders:resp.data.orders}));$(.order-pay).on(click, function () {var orderId $(this).parents(li).attr(order-id);$.ajax({url: /api/v1.0/orders/ orderId /payment,type: post,dataType: json,headers: {X-CSRFToken: getCookie(csrf_token),},success: function (resp) {if (4101 resp.errno) {location.href /login.html;} else if (0 resp.errno) {// 引导用户跳转到支付宝连接location.href resp.data.pay_url;}}});});$(.order-comment).on(click, function(){var orderId $(this).parents(li).attr(order-id);$(.modal-comment).attr(order-id, orderId);});$(.modal-comment).on(click, function(){var orderId $(this).attr(order-id);var comment $(#comment).val()if (!comment) return;var data {order_id:orderId,comment:comment};// 处理评论$.ajax({url:/api/v1.0/orders/orderId/comment,type:PUT,data:JSON.stringify(data),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();$(#comment-modal).modal(hide);}}});});}});});4.前端html
orders.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_COMMENT order.status }}div classfr order-operatebutton typebutton classbtn btn-success order-comment data-togglemodal data-target#comment-modal发表评价/button/div{{ else if WAIT_PAYMENT order.status }}div classfr order-operatebutton typebutton classbtn btn-success order-pay去支付/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_PAYMENT 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 idcomment-modal tabindex-1 roledialog aria-labelledbycomment-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 idcomment placeholder请在此处填写评价/textarea/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal取消/buttonbutton typebutton classbtn btn-primary modal-comment确定/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/orders.js/script
/body
/html
