Flsak愛家租房--訂單（獲取用戶訂單、用戶評論）

文章目錄

- 0.頁面效果
- 1.思路總結
- 2.后端代碼
- 3.前端js
- 4.前端html

0.頁面效果

在這里插入圖片描述

1.思路總結

1）用戶點擊“我的訂單”，js向后端獲取數據，并加載在前端的模板中；
在這里插入圖片描述

2）用戶點擊相應訂單的“去支付”按鈕，js向引導用戶跳轉到支付寶鏈接；
在這里插入圖片描述

3）用戶交易完成之后，點擊評論的“確定”按鈕，js將評論數據傳送給后端接口；
在這里插入圖片描述 4）后端接口接收評論數據，并進行邏輯處理，比如修改訂單狀態、訂單數加1、提交數據庫等，并將redis中關于房屋詳情頁的緩存刪除，以保證下次獲取個人詳情頁時，能夠重新生成最新的評論。

2.后端代碼

orders.py中部分接口

獲取用戶訂單：

# /api/v1.0/user/orders?role=custom     role=landlord
@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(errno=RET.DBERR, errmsg="查詢訂單信息失敗")# 將訂單對象轉換為字典數據orders_dict_list = []if orders:for order in orders:orders_dict_list.append(order.to_dict())return jsonify(errno=RET.OK, errmsg="OK", 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(errno=RET.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(errno=RET.DBERR, errmsg="無法獲取訂單數據")if not order:return jsonify(errno=RET.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(errno=RET.DBERR, errmsg="操作失敗")# 因為房屋詳情中有訂單的評價信息，為了讓最新的評價信息展示在房屋詳情中，所以刪除redis中關于本訂單房屋的詳情緩存try:redis_store.delete("house_info_%s" % order.house.id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.OK, errmsg="OK")

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?role=custom", 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-list>li[order-id="+ orderId +"]>div.order-content>div.order-text>ul li:eq(4)>span").html("已完成");$("ul.orders-list>li[order-id="+ orderId +"]>div.order-title>div.order-operate").hide();$("#comment-modal").modal("hide");}}});});}});});

4.前端html

orders.html

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>愛家-我的訂單</title><link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"><link href="/static/css/reset.css" rel="stylesheet"><link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>
<body><div class="container"><div class="top-bar"><div class="nav-bar"><h3 class="page-title">我的訂單</h3><a class="nav-btn fl" href="/my.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a></div></div><div class="orders-con"><ul class="orders-list"></ul><script id="orders-list-tmpl" type="text/html">{{if orders}}{{each orders as order}}<li order-id={{order.order_id}}><div class="order-title"><h3>訂單編號：{{order.order_id}}</h3>{{ if "WAIT_COMMENT" == order.status }}<div class="fr order-operate"><button type="button" class="btn btn-success order-comment" data-toggle="modal" data-target="#comment-modal">發表評價</button></div>{{ else if "WAIT_PAYMENT" == order.status }}<div class="fr order-operate"><button type="button" class="btn btn-success order-pay">去支付</button></div>{{/if}}</div><div class="order-content"><img src="{{order.img_url}}"><div class="order-text"><h3>{{order.title}}</h3><ul><li>創建時間：{{order.ctime}}</li><li>入住日期：{{order.start_date}}</li><li>離開日期：{{order.end_date}}</li><li>合計金額：￥{{(order.amount/100.0).toFixed(0)}}(共{{order.days}}晚)</li><li>訂單狀態：<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}}</script><div class="modal fade" id="comment-modal" tabindex="-1" role="dialog" aria-labelledby="comment-label"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">發表評價</h4></div><div class="modal-body"><textarea class="form-control" rows="3" id="comment" placeholder="請在此處填寫評價"></textarea></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary modal-comment">確定</button></div></div></div></div></div><div class="footer"><p><span><i class="fa fa-copyright"></i></span>愛家租房&nbsp;&nbsp;享受家的溫馨</p></div> </div><script src="/static/js/jquery.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script><script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><script src="/static/js/template.js"></script><script src="/static/js/ihome/orders.js"></script>
</body>
</html>