秒杀系统 订单详情页
秒杀成功后,会生成秒杀订单,然后和订单数据信息一起跳转至订单详情页面(order_detail.html
)
根据orderStatus的值来判定订单的状态:
0 未支付
1 代发货
2 已发货
3 已收货
4 已退款
order_detail.html完整代码:
<!DOCTYPE html>
<!-- 使用thymeleaf,配置相应的 -->
<html xmlns:th="http://www.thymeleaf.org"> <!-- th!!! 命名空间使用 -->
<head>
<meta charset="UTF-8"/><!--<meta charset="UTF-8" /> thymeleaf模板引擎默认是Template modes:HTML5解析的,所以解析比较严格。 -->
<title>订单详情</title>
<!-- thymeleaf引入静态资源的方式,@加大括弧 "/" 代表static路径-->
<!-- jquery -->
<!-- <script type="text/javascript" th:src="@{/js/jequery.min.js}"></script> -->
<script type="text/javascript" th:src="@{/jquery-validation/lib/jquery-1.11.1.js}"></script>
<!-- bootstrap -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"/>
-->
<link type="text/css" rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}"/>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">秒杀订单详情</div>
<table class="table" id="goodslist">
<tr>
<td>商品名称</td>
<td colspan="3" th:text="${goods.goodsName}"></td>
</tr>
<tr>
<td>商品图片</td>
<td colspan="2"><img th:src="@{${goods.goodsImg}}" width="80" height="60"></img></td>
</tr>
<tr>
<td>订单原价</td>
<td colspan="3" th:text="${orderinfo.goodsPrice}"></td>
</tr>
<tr>
<td>下单时间</td>
<td th:text="${#dates.format(orderinfo.createDate,'yyyy-MM-dd HH:mm:ss')}" colspan="2"></td>
</tr>
<tr>
<td>订单状态</td>
<td><!-- 根据数值,做显示判断 -->
<span th:if="${orderinfo.orderStatus eq 0}">未支付</span>
<span th:if="${orderinfo.orderStatus eq 1}">代发货</span>
<span th:if="${orderinfo.orderStatus eq 2}">已发货</span>
<span th:if="${orderinfo.orderStatus == 3}">已收货</span>
<span th:if="${orderinfo.orderStatus == 4}">已退款</span>
<span th:if="${orderinfo.orderStatus == 5}">已完成</span>
</td>
<td> <!-- 如果上面是未支付,那么下面会生成一个立即支付的按钮 -->
<button class="btn btn-primary btn-block" type="submit" id="payButton">立即支付</button>
</td>
</tr>
<tr>
<td>收货人</td>
<td colspan="2">xxh 15170094468</td>
</tr>
<tr>
<td>收货地址</td>
<td colspan="2">江西南昌</td>
</tr>
</table>
</div>
</body>
</html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?