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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件工程形式化技术简介

形式化技术在软件工程中有效的提高了开发的效率、改进了软件开发的质量、减少了开发费用。形式化的技术容易在软件的规约上取得一致性&#xff0c;它属于一种非常有效的交流方式。 (一)非形式化的缺点 用自然语言书写的系统规格说明书&#xff0c;可能存在矛盾、二义性、含糊性…

Flask爱家租房--订单(房东接单、拒单)

文章目录0.效果展示1.效果展示2.后端接口3.前端js4.前端html0.效果展示 1.效果展示 1&#xff09;当房东点击“客户订单”&#xff0c;js向后端接口get_user_orders()获取数据&#xff0c;订单页面开始加载&#xff1b; 2&#xff09;当房东确定接单时&#xff0c;js会向后端…

开发经验和屁股的关系

昨晚为CSDN俱乐部的同学们做了一个讲座《微博开发、云平台及一个微博应用开发的简单方案》。已经用屏幕录相机记录下来了&#xff0c;不想讲完一边和同学聊着&#xff0c;一边收拾&#xff0c;直接关机&#xff0c;教室中带有保护卡的电脑自然不给面子&#xff0c;录相文件就此…

Flask爱家租房--房屋管理(获取房屋详情)

文章目录0.效果展示1.思路总结2.后端接口3.前端js4.前端html0.效果展示 1.思路总结 1&#xff09;房屋详情页面开始加载时&#xff0c;detail.js首先通过定义的函数&#xff08;重点&#xff1a;document.location.search&#xff09;&#xff0c;截取需要向后端取得详情页面的…

MAC 安装 pygraphviz 找不到头文件

networkx的有向图只能通过箭头来区别两点之间的两条边&#xff0c;但是我在复现snake论文的时候&#xff0c;需要绘制两个交叉口之间的两条不同方向的路段&#xff0c;最后选择了pygraphviz 直接通过anaconda打开对应终端&#xff0c;pip install pygraphviz&#xff0c;一直报…

如此如此,怎能师夷长技以制夷!

以一个爱国的软件设计者的角度来看这样一个weibo,大概的内容就是&#xff1a;北京南站的4SQ上有个老外留言吐槽&#xff1a;“没有中国身份证根本就没法在自动售票机上买票&#xff0c;那他妈的他们弄个英文界面干屁啊&#xff01;” 出于行业的敏感性&#xff0c;我感到很有意…

Flask爱家租房--房屋管理(搜索房屋列表)

文章目录0.效果展示1.后端接口2.前端js3.前端html0.效果展示 1.后端接口 house.py部分接口&#xff1a; # GET /api/v1.0/houses?sd2017-12-01&ed2017-12-31&aid10&sknew&p1 api.route("/houses") def get_house_list():"""获取房…

编程语言API性能大比拼

Ciaran是Skimlinks项目团队中的一名领导者&#xff0c;热爱开发&#xff0c;在业余时间喜欢研究一门新语言。作者和他的团队在开发Skimlinks项目时遇到了一些困难&#xff0c;于是做了这份测试&#xff0c;文中将Node.js、Scala、Go、Python、PHP进行对比&#xff0c;最终Pytho…

Python面试题总结(8)--操作类

1. 请写一个 Python 逻辑&#xff0c;计算一个文件中的大写字母数量 答&#xff1a;读取‘A.txt’中的大写字母数量 with open(A.txt) as f:"""计算一个文件中的大写字母数量"""count 0for i in f.read():if i.isupper():count 1 print(cou…

Flask--读取配置参数的方式

文章目录方法1. 使用配置文件方法2. 使用对象配置参数方法3. 直接操作config的字典对象项目实例方法1. 使用配置文件 首先将配置参数写在文件中&#xff0c;例如&#xff1a;config.cfg 然后导入: app Flask("__name__") app.config.from_pyfile("config.cf…

g开头的C语言编程软件,C语言函数大全(g开头)

函数名: gcvt功 能: 把浮点数转换成字符串用 法: char *gcvt(double value, int ndigit, char *buf);程序例:#include#includeint main(void){char str[25];double num;int sig 5; /* significant digits *//* a regular number */num 9.876;gcvt(num, sig, str);printf(&quo…

程序员成熟的标志《程序员成长路线图:从入门到优秀》

对好书进行整理&#xff0c;把好内容共享。 我见证过许多的程序员的成长&#xff0c;他们很多人在进入成熟期之后&#xff0c;技术上相对较高&#xff0c;一般项目开发起来比较自信&#xff0c;没有什么太大的困难&#xff0c;有的职位上也有所提升&#xff0c;成了项目经理、…

Diango博客--1.Django的接客之道

文章目录0.思路引导1.实现最简单的HelloWorld2.实现最简单的HelloWorld(使用Templates)0.思路引导 django 的开发流程&#xff1a; 即首先配置 URL&#xff0c;把 URL 和相应的视图函数绑定&#xff0c;一般写在 urls.py 文件里&#xff0c;然后在工程的 urls.py 文件引入。 …

Git的GUI工具sourcetree的使用

一、Git的学习这部分学习廖雪峰的git教程&#xff0c;参加以下链接&#xff1a;https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0001、首先是git的基本概念&#xff0c;如下图所示&#xff1a;整个git管理主要分为工作区、版本库&#xff0…

YY一下,扎克伯格做了一个什么样的AI家居助手?

对于这款令小扎太太抓狂的AI家居助手&#xff0c;难道就没人好奇吗&#xff1f; 据说&#xff0c;扎克伯格每年都要给自己定个目标&#xff0c;而他也即将完成今年的目标——打造一个AI家居助手。 当初&#xff0c;在定下这个目标时&#xff0c;小扎为我们简单描述了一下&…

Diango博客--2.博客从“裸奔”到“有皮肤”

文章目录0.思路引导1.更改视图函数&#xff0c;从数据库中获取数据2.网上下载模板&#xff0c;添加静态文件3.修改模板Templates中css、js文件的加载路径4.修改模板&#xff0c;引入模板变量&#xff0c;获取数据库数据0.思路引导 前文的Hello World 级别的视图函数特别简单&a…

脉冲时间宽度c语言,什么是脉冲宽度_脉冲宽度是什么意思

脉冲宽度是个很广泛的词&#xff0c;在不同的领域&#xff0c;脉冲宽度有不同的含义。脉冲宽度从学术角度讲就是电流或者电压随时间有规律变化的时间宽度&#xff0c;平时研究主要是方波&#xff0c;三角波&#xff0c;锯齿波&#xff0c;正弦函数波等等&#xff0c;这些波形变…

HDU - 5919 Sequence II

题意&#xff1a; 给定长度为n的序列和q次询问。每次询问给出一个区间&#xff08;L&#xff0c;R&#xff09;&#xff0c;求出区间内每个数第一次出现位置的中位数&#xff0c;强制在线。 题解&#xff1a; 用主席树从右向左的插入点。对于当前点i&#xff0c;如果a[i]出现过…

Django博客--3.创作后台开启

文章目录0.创建admin后台管理员账号1.在 admin 后台注册模型2.汉化应用的标题3.汉化应用下各个模块的名称4.汉化应用下各个模块的属性的名称5.文章列表显示更加详细的信息6.简化新增文章的表单7.自动设置文章作者为当前用户8.设定创建时间为当前时间9.设定修改建时间为保存时的…

raid-6磁盘阵列损坏导致数据丢失的恢复过程(图文教程)

一、故障描述机房突然断电导致整个存储瘫痪&#xff0c;加电后存储依然无法使用。经过用户方工程师诊断后认为是断电导致存储阵列损坏。整个存储是由12块日立硬盘&#xff08;3T SAS硬盘&#xff09;组成的RAID-6磁盘阵列&#xff0c;被分成一个卷&#xff0c;分配给几台Vmware…