SpringBoot秒殺系統實戰15-訂單詳情頁

秒殺成功後,會生成秒殺訂單,然後和訂單數據信息一起跳轉至訂單詳情頁面(order_detail.html)

根據orderStatus的值來判定訂單的狀態:

  • 0 未支付
  • 1 代發貨
  • 2 已發貨
  • 3 已收貨
  • 4 已退款
  • 5 已完成

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">tom  15008484456</td>
		</tr>
		<tr>
			<td>收貨地址</td>
			<td colspan="2">四川崇州市</td>
		</tr>
		</table>
	</div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章