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

文章目录

    • 0.效果展示
    • 1.效果展示
    • 2.后端接口
    • 3.前端js
    • 4.前端html

0.效果展示

在这里插入图片描述

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(errno=RET.PARAMERR, errmsg="参数错误")# action参数表明客户端请求的是接单还是拒单的行为action = req_data.get("action")if action not in ("accept", "reject"):return jsonify(errno=RET.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(errno=RET.DBERR, errmsg="无法获取订单数据")# 确保房东只能修改属于自己房子的订单if not order or house.user_id != user_id:return jsonify(errno=RET.REQERR, errmsg="操作无效")if action == "accept":# 接单,将订单状态设置为等待评论order.status = "WAIT_PAYMENT"elif action == "reject":# 拒单,要求用户传递拒单原因reason = req_data.get("reason")if not reason:return jsonify(errno=RET.PARAMERR, errmsg="参数错误")order.status = "REJECTED"order.comment = reasontry:db.session.add(order)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg="操作失败")return jsonify(errno=RET.OK, errmsg="OK")

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?role=landlord", 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-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();$("#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-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();$("#reject-modal").modal("hide");}}});})}});
});

4.前端html

lorder.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_ACCEPT" == order.status }}<div class="fr order-operate"><button type="button" class="btn btn-success order-accept" data-toggle="modal" data-target="#accept-modal">接单</button><button type="button" class="btn btn-danger order-reject" data-toggle="modal" data-target="#reject-modal">拒单</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_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="accept-modal" tabindex="-1" role="dialog" aria-labelledby="accept-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"><p>您确定接此订单吗?</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary modal-accept">确定接单</button></div></div></div></div><div class="modal fade" id="reject-modal" tabindex="-1" role="dialog" aria-labelledby="reject-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="reject-reason" 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-reject">确定</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/lorders.js"></script>
</body>
</html>

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

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

相关文章

WebView性能优化--独立进程

Android允许一个app同时存在多个进程&#xff0c;可以根据需要把不同的模块放到不同进程中处理。 一、WebView独立进程的好处 1.有效增大App的运存&#xff0c;减少由webview引起的内存泄露对主进程内存的占用。 2.避免WebView的Crash影响App主进程的运行。 3.拥有对WebView独立…

linux修改python默认版本

linux修改python默认版本 update-alternatives --config pythonposted on 2018-05-24 22:42 psycheman 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/psycheman/p/9085576.html

什么是有穷状态机

有穷状态机的作用是描述对象在它的生命周期内所经历状态序列&#xff0c;以及如何响应来自外界的事件。有穷状态机首先包含一个有限状态的集合&#xff0c;还包含了从一个状态到另外一个状态的转换。 有穷自动机看上去就像是一个有向图&#xff0c;其中状态是图的节点&#xf…

linux设置开机自启 etc rt.d,Linux下禁止服务开机自启动

一、 Upstart是兼容System V的配置方式的&#xff0c;但主要的服务配置放在 /etc/init 下&#xff0c;这也就是为什么修改 /etc/rc${runlevel}.d/ (Ubuntu默认启动runlevel2&#xff0c;也就是/etc/rc2.d/)下的MySQL启动配置并不能真正起到禁止MySQL自启动的原因(比如使用命令 …

开发经验和屁股的关系

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

ZCARD key

返回key的有序集元素个数。 ##返回值 integer-reply: key存在的时候&#xff0c;返回有序集的元素个数&#xff0c;否则返回0。 ##例子 redis> ZADD myzset 1 "one" (integer) 1 redis> ZADD myzset 2 "two" (integer) 1 redis> ZCARD myzset (in…

Petri网

并发系统中遇到的一个主要问题是定时问题。这个问题可以表现为多种形式&#xff0c;如同步问题、竞争条件以及死锁问题。用于确定系统中隐含的定时问题的一种有效技术是Petri网&#xff0c;这种技术的一个很大的优点是它也可以用于设计中。Petri网是由CarlAdam Petri发明的。在…

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;一直报…

linux ntp连接失败,linux ntp服务器连接异常

弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器&#xff0c;帮助用户打造可靠、安全、灵活、高效的应用环境&#xff0c;确保服务持久稳定运行&#xff0c;提升运维效率三年低至5折&#xff0c;多种配置可选了解详情认证鉴权|…

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

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

基于supermap webgl三维楼层显隐控制思路

supermap 9D 产品中&#xff0c;可以先获取到模型的simd值&#xff0c;再调用setOnlyObjsVisible方法控制模型中单个物体的显示和隐藏。 var smid "94"; //楼层的smid值&#xff0c;多个楼层&#xff0c;则用数组的方式 var ids []; var layers viewer.scene.la…

#python计算结果百位500向下取整,(0-499取000,500-999取500)

!/usr/bin/env python coding:utf-8 计算结果百位500向下取整&#xff0c;&#xff08;0-499取000&#xff0c;500-999取500) import math calc_Amount float(input("输入所有可需金额&#xff1a;")) act_Amount calc_Amount if calc_Amount > 0: value2 calc…

什么是Z语言

Z语言是一种用“数学文字”或“数学符号”来描述计算机系统的规范化语言&#xff0c;它不但能应用于计算机硬件系统&#xff0c;而且也特别适用于计算机软件系统&#xff0c;Z语言描述“做什么”而不涉及“怎么做”&#xff0c;只对目标软件系统进行功能描述。实际上&#xff0…

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():"""获取房…

c语言用if语句判断字符类型,C语言if语句的使用

C语言if语句的使用【例3】#includeint main(void){char c;printf("input a character: ");cgetchar();if(c<32)printf("This is a control character\n");else if(c>0&&c<9)printf("This is a digit\n");else if(c>A&&a…

SQL的特点

1.综合统一集数据定义语言&#xff08;DDL&#xff09;&#xff0c;数据操纵语言&#xff08;DML&#xff09;&#xff0c;数据控制语言&#xff08;DCL&#xff09;功能于一体。可以独立完成数据库生命周期中的全部活动&#xff1a;定义和修改、删除关系模式&#xff0c;定义和…

编程语言API性能大比拼

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

ubuntu 安装ssh服务

1&#xff1a;安装 $ sudo apt-get install openssh-server 2&#xff1a;检查ssh服务开启状态 $ ps -s | grep ssh 3&#xff1a;启动ssh服务 $ service ssh start 4&#xff1a;本地登录 $ ssh localhost转载于:https://www.cnblogs.com/andy1327/p/9089930.html

手把手0基础项目实战(一)——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...

本文你将学到什么&#xff1f; 本文将以原理实战的方式&#xff0c;首先对“微服务”相关的概念进行知识点扫盲&#xff0c;然后开始手把手教你搭建这一整套的微服务系统。 项目完整源码下载 https://github.com/bz51/SpringBoot-Dubbo-Docker-Jenkins 这套微服务框架能干啥&am…