为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天 Java支付全家桶...

【九月打卡】第15天 Java支付全家桶 企业级各类支付手段一站式解决方案(6-3)

2022.09.19 13:47 21浏览

课程名称:Java支付全家桶 企业级各类支付手段一站式解决方案

课程章节:6-3 实现结账页面

主讲老师:神思者

课程内容:

今天课程学习的主要知识点内容包括:
前端收款码付款显示订单交互页面的开发、开发根据订单id查找商品订单概要信息的接口。

课程收获:

1、payment.html 页面的开发,html 页面的主要核心代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="payment.css">
	</head>
	<body>
		<div class="panel">
			<h3>订单结算</h3>
			<div>
				<div class="row">
					<div>
						流水号:<span id="code"></span>
					</div>
					<div>
						状态:<span id="status"></span>
					</div>
				</div>
				<div class="row">
					<div>日期:<span id="date"></span></div>
					<div>总计:<span id="amount"></span>元</div>
					<div>实付:<span id="pay"></span>元</div>
				</div>
			</div>
			<table>
				<tr>
					<th>序号</th>
					<th>餐品</th>
					<th>数量</th>
					<th>单价</th>
					<th>折扣价</th>
				</tr>
				<tr>
					<td>1</td>
					<td>海鲜汤</td>
					<td>1</td>
					<td>¥58</td>
					<td>无</td>
				</tr>
				<tr>
					<td>2</td>
					<td>法式焗蜗牛</td>
					<td>1</td>
					<td>¥88</td>
					<td>无</td>
				</tr>
				<tr>
					<td>3</td>
					<td>吞拿鱼沙拉</td>
					<td>1</td>
					<td>¥129</td>
					<td>无</td>
				</tr>
				<tr>
					<td>4</td>
					<td>香煎菲力牛排</td>
					<td>1</td>
					<td>¥155</td>
					<td>无</td>
				</tr>
				<tr>
					<td>5</td>
					<td>海鲜意粉</td>
					<td>1</td>
					<td>¥56</td>
					<td>无</td>
				</tr>
			</table>
			<div class="operation">
				<input type="button" class="pay-btn" value="结算支付" data-order-id="2"/>
			</div>
			<div class="message">支付设备已经准备好</div>
		</div>
		<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js"></script>
		<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/config.js"></script>
		<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="payment.js"></script>
	</body>
</html>

2、开发根据订单id查找商品订单概要信息的接口:
(1)封装根据订单id查找商品订单的请求对象,主要代码如下:

@Data
@ApiModel(value = "订单结算")
public class SearchOrderForm {

    @Min(1)
    @ApiModelProperty(value = "订单id")
    private Integer orderId;
}

(2)在 controller 层开发根据订单id查找商品订单概要信息的接口,主要代码如下:

@Login
@PostMapping("/searchOrderById")
@ApiModelProperty("查询订单")
public R searchOrderById(@RequestBody SearchOrderForm form, @RequestHeader HashMap header) {
    ValidatorUtils.validateEntity(form);
    String token = header.get("token").toString();
    int userId = Integer.parseInt(
            jwtUtils.getClaimByToken(token).getSubject()
    );
    OrderEntity order = orderService.getOne(
            Wrappers.<OrderEntity>lambdaQuery()
                    .eq(OrderEntity::getUserId, userId)
                    .eq(OrderEntity::getId, form.getOrderId())
                    .last("limit 1")
    );
    return R.ok().put("order", order);
}

3、在前端 config.js 文件配置对应的后端接口:

......
let wxUrl = {
	......
	searchOrderById: baseUrl + "/app/order/searchOrderById",
}

4、编写前端 payment.js 的业务逻辑,其主要核心代码如下:

$(() => {
	$.ajax({
		url: wxUrl.searchOrderById,
		type: "post",
		dataType: "json",
		contentType: "application/json",
		beforeSend: (req) => {
			req.setRequestHeader("token", localStorage.getItem("token"));
		},
		data: JSON.stringify({
			"orderId": 1
		}),
		success: (resp) => {
			let order = resp.order;
			if (1 == order.status) {
				order.status="未付款"
			}
			else if (2 == order.status) {
				order.status="已付款"
			}
			else if (3 == order.status) {
				order.status="已发货"
			}
			else if (4 == order.status) {
				order.status="已签收"
			}
			else if (5 == order.status) {
				order.status="退款中"
			}
			else if (6 == order.status) {
				order.status="已退款"
			}
			$("#code").text(order.code);
			$("#status").text(order.status);
			$("#date").text(order.createTime);
			$("#amount").text(order.amount);
			$("#pay").text(order.amount);
			$(".pay-btn").attr("data-order-id", order.id);
			
			if (order.status != "未付款") {
				$(".pay-btn").attr("disable", true);
				$(".pay-btn").css({
					"background-color": "#666"
				});
			}
		},
		fail: (err) => {
			console.log(err.errMsg);
		}
	});
})

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
0
获赞与收藏
7

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

145篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消