文章目录
- 一、前台首页--购物车模块
- 1.1 购物车业务分析
- 1.2 封装购物车实体类
- 1.3 购物车实现(分两步走)
- 1.3.1 第一步 :详情页到购物车
- 1.3.2 第二步 :购物车页面显示数据
- 1.4 删除和清空购物车
- 1.4.1 实现继续购物
- 1.4.2 删除购物车
- 1.4.3 清除购物车
- 二、前台首页--订单模块及支付宝支付
- 2.1 支付宝沙箱测试
- 2.2 保存订单(后端实现)
- 2.3 支付宝对接
- 2.3.1 引入支付宝环境
- 2.3.2 编写后端 //TODO
- 2.3.3 编写前端
一、前台首页–购物车模块
1.1 购物车业务分析
由上述分析可知,购物车页面就是由购物车和购物项组成
1.2 封装购物车实体类
创建购物项和购物车两个实体类 CartItem.java
😐 Cart.java
CartItem.java
package com.zql.pojo;
import java.io.Serializable;
/**
* 购物项
* author:Daniel
* version:1.0
*/
public class CartItem implements Serializable{
private Product product;//商品: 图片 价格 名称
private int count;//数量
private double subCount;//总价格
public CartItem() {
super();
// TODO Auto-generated constructor stub
}
public CartItem(Product product, int count, double subCount) {
super();
this.product = product;
this.count = count;
this.subCount = subCount;
}
public Product getProduct() {
return product;
}
public void setProduct(Product product) {
this.product = product;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public double getSubCount() {
//购物项 总价格 = 单价* 数量
return subCount = (getProduct().getPrice()*getCount());
}
public void setSubCount(double subCount) {
this.subCount = subCount;
}
@Override
public String toString() {
return "CartItem [product=" + product + ", count=" + count + ", subCount=" + subCount + "]";
}
}
Cart.java
package com.zql.pojo;
import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
/**
* author:Daniel
* version:1.0
*
* 购物车
*/
public class Cart implements Serializable{
/**
* 要求:
* 1.购物车每次添加商品都会叠加上面,所以是有顺序的
* 2.购物车 删除简单
* 只有linkedHashMap 是有序 删除且简单的
*
*/
//key 商品的id
//value 购物项
private Map<String,CartItem> cartMap = new LinkedHashMap(); //一个个的购物项
private double totalCount; //总价格(所有购物项价格之和)
public Cart() {
super();
// TODO Auto-generated constructor stub
}
public Cart(Map<String, CartItem> cartMap, double totalCount) {
super();
this.cartMap = cartMap;
this.totalCount = totalCount;
}
public Map<String, CartItem> getCartMap() {
return cartMap;
}
public void setCartMap(Map<String, CartItem> cartMap) {
this.cartMap = cartMap;
}
public double getTotalCount() {
totalCount = 0.0; //当购物车全部删掉时,就会变成默认值0.0
for(String key : cartMap.keySet()) { //遍历出key 即id
CartItem cartItem = cartMap.get(key); //由key得到value的值即购物项的值
totalCount += cartItem.getSubCount(); //购物总价格=小计 的综合
}
return totalCount;
}
public void setTotalCount(double totalCount) {
this.totalCount = totalCount;
}
@Override
public String toString() {
return "Cart [cartMap=" + cartMap + ", totalCount=" + totalCount + "]";
}
}
1.3 购物车实现(分两步走)
1.3.1 第一步 :详情页到购物车
(1)在详情页 product_detail.jsp 中添加入口方法
<!-- 跳转到购物车页面 -->
<script type="text/javascript">
function addCart(){
/* 商品pid */
// var pid = ${p.pid}
// alert(pid); //测试看是不是pid
var count = $("#count").val();
//alert(count);//测试看是不是能拿到数量
location.href="${pageContext.request.contextPath}/order?method=order&pid=${p.pid}&count="+count;
}
</script>
(2)分别创建
OderServlet.java、OderService.java、OrderServiceImpl.java、OrderDao.java、OrderDaoImpl.java
(3) OrderServlet.java
package com.zql.web.servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.pojo.Product;
import com.zql.service.OrderService;
import com.zql.service.ProductService;
import com.zql.service.impl.OrderServiceImpl;
import com.zql.service.impl.ProductServiceImpl;
/**
* author:Daniel
* version:1.0
*/
@WebServlet("/order")
public class OrderServlet extends BaseServlet{
public String order(HttpServletRequest request, HttpServletResponse response)throws Exception {
//创建购物项
//1.获取商品pid
String pid = request.getParameter("pid");
//获得购物数量
String count = request.getParameter("count");
//创建商品对象 获得商品名称 价格等
//商品业务
ProductService ps = new ProductServiceImpl();
Product product = ps.findProductdetailByPid(pid);
//2.购物项
CartItem cartItem = new CartItem();
cartItem.setProduct(product);
cartItem.setCount(Integer.parseInt(count));
//创建购物车
Cart cart = getCart(request);
//业务处理 将购物项添加到购物车中
OrderService os = new OrderServiceImpl();
os.addCart(cart,cartItem);
//现在购物车有了那就跳转到购物车页面
return "/cart.jsp";
}
public Cart getCart(HttpServletRequest request) {
//获得域中的购物车
Cart cart = (Cart) request.getSession().getAttribute("cart");
//判断受否有购物车
if(cart == null) {
//为空则创建购物车并且存入到域中
cart = new Cart();
request.getSession().setAttribute("cart", cart);
}
//如果有的话,那就叠加呗
return cart;
}
}
(4) OrderService.java
void addCart(Cart cart, CartItem cartItem) throws Exception;
(5)OrderServiceImpl.java
package com.zql.service.impl;
import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.service.OrderService;
/**
* author:Daniel
* version:1.0
*/
public class OrderServiceImpl implements OrderService{
@Override
public void addCart(Cart cart, CartItem cartItem) {
//判断是否存在该商品 存在则叠加(老商品+新商品) 不存在则添加
//获得购物项商品的pid
int pid = cartItem.getProduct().getPid();
CartItem old = cart.getCartMap().get(pid+"");//获得老商品
//进行判断是否有老商品
if(old != null) {
//数量叠加
old.setCount(old.getCount()+cartItem.getCount());
}else {
//直接添加
cart.getCartMap().put(pid+"", cartItem);
return;
}
}
}
(6) 导入 文件五 cart.jsp页面
(7) 最终显示:http://localhost:8080/xiaomi/login.jsp
1.3.2 第二步 :购物车页面显示数据
(1)前端 cart.jsp 页面实现显示
(2) cart.jsp 完整代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript">
</script>
</head>
<body>
<%-- <%@ include file="header.jsp" %> --%><!--是引如导航头的,可注掉 -->
<div class="order_head">
<div class="head_background">
<div class="head_box">
<a href="index.html" class="head_left_a"><img src="img/logo.jpg" alt="" class="head_left_p"></a>
<h1 class="head_h1">我的购物车</h1>
<div class="head_right">
<span class="head_right_in">清空购物车 </span>
</div>
</div>
</div>
</div>
<div class="trolley_background">
<div class="trolley_background_in">
<div class="tro_tab_h">
<div class="col tro_tab_check">
<h1 class="tro_tab_check_p">√</h1>
<span class="tro_tab_check_sp">全选</span>
</div>
<div class="col tro_tab_img">
</div>
<p class="col tro_tab_name">商品名称</p>
<div class="col tro_tab_price">单价</div>
<div class="col tro_tab_num">数量</div>
<div class="col tro_tab_total">小计</div>
<div class="col tro_tab_action">操作</div>
</div>
<c:forEach items="${cart.cartMap }" var="entry">
<div class="tro_tab_h1">
<div class="col tro_tab_check">
<h1 class="tro_tab_check_p" style="background-color: #fff">
<input type="checkbox" name="ids">
</h1>
<span class="tro_tab_check_sp"></span>
</div>
<div class="col tro_tab_img">
</div>
<div class="col tro_tab_name">
<!--<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>-->
<li class="tro_tab_name_li1" style="font-size: 16px;">${entry.value.product.pname }</li>
</div>
<div class="col tro_tab_price">
<span id="price"></span><span>${entry.value.product.price }元</span>
</div>
<div class="col tro_tab_num">
<input type="count" value="${entry.value.count }" id="num">
</div>
<div class="col tro_tab_total ">
<c:set var="sum_money" value=""></c:set>
<span class="tro_tab_total_value" id="prices">${entry.value.subCount }</span>元
</div>
<div class="col tro_tab_action" style="cursor: pointer;width: 40px;height: 40px;" onclick="">删除</div>
</div>
</c:forEach>
</div>
<div class="tro_close_bot ">
<!--<p class="tro_bot_ppp">+</p>-->
<p class="tro_close_p "> <a href="">继续购物 </a></p>
<p class="tro_close_p_c">合计:<span id="close">${cart.totalCount }</span>元</p>
<p class="tro_close_p_r" style="cursor: pointer;">去结算</p>
</div>
</div>
</body>
</html>
(3) 最终显示:http://localhost:8080/xiaomi/login.jsp
1.4 删除和清空购物车
1.4.1 实现继续购物
java${pageContext.request.contextPath}/toIndex?method=toIndex
Bug的存在(到时候中级或高级中再慢慢总结这点):
1.4.2 删除购物车
(1) 记得一定要引入js
(2) cart.jsp
<script type="text/javascript">
/* 删除购物车 */
function del(pid){
//alert(pid)
if(confirm("首付,您确定要删除么?")){
location.href = "${pageContext.request.contextPath}/order?method=del&pid="+pid;
}
}
</script>
OrderServlet.java
//根据pid删除购物项
public String del(HttpServletRequest request, HttpServletResponse response)throws Exception {
String pid = request.getParameter("pid");
//获取购物车项
Cart cart = getCart(request);
cart.getCartMap().remove(pid);
return "/cart.jsp";
}
1.4.3 清除购物车
(1) cart.jsp
/* 清空购物车 */
$(function(){
$("#clear").click(function(){
if(confirm("确定要删除么,土老板!")){
//alert(22);
location.href="${pageContext.request.contextPath}/order?method=clearCart";
}
})
(2) OrderServlet.java
//清空购物车
public String clearCart(HttpServletRequest request, HttpServletResponse response)throws Exception {
//获取购物车
//Cart cart = (Cart) request.getSession().getAttribute("cart");
Cart cart = getCart(request);
//cart.getCartMap().clear();//第一种方法
request.getSession().removeAttribute("cart"); //第二种方法
return "/cart.jsp";
}
(3) 最终显示(点击”确定“就会清除)
二、前台首页–订单模块及支付宝支付
支付宝沙箱:(详情请看 文件五中详细文档)
类似于沙盘, 模拟真实环境下进行支付(缺失是部分商户的申请,证件缺少无法申请)
数据库设计
2.1 支付宝沙箱测试
2.2 保存订单(后端实现)
(1)导入sql:
CREATE TABLE orders (
oid VARCHAR(32) NOT NULL,
ordertime DATETIME DEFAULT NULL,
total DOUBLE DEFAULT NULL,
state INT(11) DEFAULT NULL,
uid INT DEFAULT NULL,
PRIMARY KEY (oid),
KEY fk_0003 (uid),
CONSTRAINT fk_0003 FOREIGN KEY (uid) REFERENCES USER (uid)
) ENGINE=INNODB DEFAULT CHARSET=utf8;
CREATE TABLE orderitem (
itemid VARCHAR(32) NOT NULL,
COUNT INT(11) DEFAULT NULL,
subtotal DOUBLE DEFAULT NULL,
pid INT(32) DEFAULT NULL,
oid VARCHAR(32) DEFAULT NULL,
PRIMARY KEY (itemid),
KEY fk_0001 (pid),
KEY fk_0002 (oid),
CONSTRAINT fk_0001 FOREIGN KEY (pid) REFERENCES product (pid),
CONSTRAINT fk_0002 FOREIGN KEY (oid) REFERENCES orders (oid)
) ENGINE=INNODB DEFAULT CHARSET=utf8;
(2) 编写两个表对应的javabean😁
Orders.java
package com.zql.pojo;
import java.io.Serializable;
import java.util.List;
/**
* author:Daniel
* version:1.0
*
* 订单实体
*/
public class Orders implements Serializable{
private String oid; //订单主键
private String ordertime; //订单时间
private double total; //订单数量
private int state; //订单状态
private int uid; //外键
private User user; //用户
private List<OrderItem> olist; //订单项
public Orders() {
super();
// TODO Auto-generated constructor stub
}
public Orders(String oid, String ordertime, double total, int state, int uid, User user, List<OrderItem> olist) {
super();
this.oid = oid;
this.ordertime = ordertime;
this.total = total;
this.state = state;
this.uid = uid;
this.user = user;
this.olist = olist;
}
public String getOid() {
return oid;
}
public void setOid(String oid) {
this.oid = oid;
}
public String getOrdertime() {
return ordertime;
}
public void setOrdertime(String ordertime) {
this.ordertime = ordertime;
}
public double getTotal() {
return total;
}
public void setTotal(double total) {
this.total = total;
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List<OrderItem> getOlist() {
return olist;
}
public void setOlist(List<OrderItem> olist) {
this.olist = olist;
}
@Override
public String toString() {
return "Orders [oid=" + oid + ", ordertime=" + ordertime + ", total=" + total + ", state=" + state + ", uid="
+ uid + ", user=" + user + ", olist=" + olist + "]";
}
}
OrderItem.java
package com.zql.pojo;
import java.io.Serializable;
/**
* author:Daniel
* version:1.0
*
* 订单项实体
*/
public class OrderItem implements Serializable{
private String itemid;//主键
private int count;
private double subtotal;//订单总额
private int pid;//外键 商品主键
private String oid;//外键 订单主键
private Product product;//商品
private Orders orders;//订单
public OrderItem() {
super();
// TODO Auto-generated constructor stub
}
public OrderItem(String itemid, int count, double subtotal, int pid, String oid, Product product,
Orders orders) {
super();
this.itemid = itemid;
this.count = count;
this.subtotal = subtotal;
this.pid = pid;
this.oid = oid;
this.product = product;
this.orders = orders;
}
public String getItemid() {
return itemid;
}
public void setItemid(String itemid) {
this.itemid = itemid;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public double getSubtotal() {
return subtotal;
}
public void setSubtotal(double subtotal) {
this.subtotal = subtotal;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getOid() {
return oid;
}
public void setOid(String oid) {
this.oid = oid;
}
public Product getProduct() {
return product;
}
public void setProduct(Product product) {
this.product = product;
}
public Orders getOrders() {
return orders;
}
public void setOrders(Orders orders) {
this.orders = orders;
}
@Override
public String toString() {
return "OrderItem [itemid=" + itemid + ", count=" + count + ", subtotal=" + subtotal + ", pid=" + pid
+ ", oid=" + oid + ", product=" + product + ", orders=" + orders + "]";
}
}
(2)在cart.jsp中添加id
cart.jsp
//去结算(生成订单)
$("#addOrders").click(function(){
location.href="${pageContext.request.contextPath}/order?method=addOrders";
})
(3) OrderServlet.java
//去结算(生成订单)addOrders
public String addOrders(HttpServletRequest request, HttpServletResponse response)throws Exception {
User user = (User) request.getSession().getAttribute("user");
//判断是否登录
if(user == null) {
request.setAttribute("msg", "请先登录😂( ̄︶ ̄)↗ ");
return "msg.jsp"; //在此刻创建一个msg.jsp页面
}
//查看购物车是否为空 ,为空则也返回msg.jsp
Cart cart = getCart(request);
if(cart == null) {
request.setAttribute("msg", "请先登录😂( ̄︶ ̄)↗ ");
return "msg.jsp";
}
//通过上面两个条件,则创建订单
Orders orders = new Orders();
orders.setOid(UUIDUtils.getUUID());
orders.setOrdertime(new Date().toLocaleString());
orders.setTotal(cart.getTotalCount());
orders.setState(0);//默认值为 0
orders.setUid(user.getUid());
orders.setUser(user);
//orders.setOlist(olist);
//创建集合将orderItem添加到orders中
List<OrderItem> oilist = new ArrayList();
//遍历
for (String key : cart.getCartMap().keySet()) {
CartItem cartItem = cart.getCartMap().get(key);
//设置赋值
//创建订单项
OrderItem orderItem = new OrderItem();
orderItem.setItemid(UUIDUtils.getUUID());
orderItem.setCount(cartItem.getCount());
orderItem.setSubtotal(cartItem.getSubCount());
orderItem.setPid(cartItem.getProduct().getPid());
orderItem.setOid(orders.getOid());
orderItem.setProduct(cartItem.getProduct());
orderItem.setOrders(orders);
//添加到集合中
oilist.add(orderItem);
}
//将订单项添加到订单集合中
orders.setOlist(oilist);
//业务处理
OrderService os = new OrderServiceImpl();
os.addOrders(orders);
//清空购物车
cart.getCartMap().clear();
//TODO
return null;
}
(4)创建msg.jsp 页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
${msg }
</body>
</html>
(5) OrderService.java
package com.zql.service;
import com.zql.pojo.Cart;
import com.zql.pojo.CartItem;
import com.zql.pojo.Orders;
/**
* author:Daniel
* version:1.0
*/
public interface OrderService {
void addCart(Cart cart, CartItem cartItem) throws Exception;
//保存订单(生成订单)
void addOrders(Orders orders) throws Exception;
}
(6)OrderServiceImpl.java
//保存订单(生成订单)
@Override
public void addOrders(Orders orders) throws Exception {
//保存订单
OrderDao od = new OrderDaoImpl();
od.addOrders(orders);
//保存订单项
for (OrderItem oi : orders.getOlist()) {
od.addOrderItem(oi);
}
}
(7)OrderDao.java
package com.zql.dao;
import java.sql.SQLException;
import com.zql.pojo.OrderItem;
import com.zql.pojo.Orders;
/**
* author:Daniel
* version:1.0
*/
public interface OrderDao {
//保存订单
void addOrders(Orders orders) throws SQLException;
//保存订单项
void addOrderItem(OrderItem oi) throws SQLException;
}
(8)OrderDaoImpl.java
package com.zql.dao.impl;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import com.zql.dao.OrderDao;
import com.zql.pojo.OrderItem;
import com.zql.pojo.Orders;
import com.zql.utils.C3P0Utils;
/**
* author:Daniel
* version:1.0
*/
public class OrderDaoImpl implements OrderDao{
QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
//保存订单
@Override
public void addOrders(Orders orders) throws SQLException {
String sql = "insert into orders values(?,?,?,?,?)";
Object[] param = {orders.getOid(),orders.getOrdertime(),
orders.getTotal(),orders.getState(),orders.getUid()};
qr.update(sql,param);
}
//保存订单项
@Override
public void addOrderItem(OrderItem oi) throws SQLException{
String sql = "insert into orderItem values(?,?,?,?,?)";
Object[] param = {oi.getItemid(),oi.getCount(),oi.getSubtotal(),oi.getPid(),oi.getOid()};
qr.update(sql, param);
}
}
(9)最终检验:http://localhost:8080/xiaomi/login.jsp
(9.1) 没有点击“去结算”数据库为空
(9.2)添加购物车两条并且“去结算”
(9.3)点击结算数据库显示:
2.3 支付宝对接
2.3.1 引入支付宝环境
(1)引入支付宝(文件五——>对接小米文件)出现报红解决,如下:
(2)修改相关配置(2.1 应该配置好了,没有则看本文2.1)
(3)修改项目名,如下
2.3.2 编写后端 //TODO
OrderServlet.java
2.3.3 编写前端
pay/index.jsp
完整代码 pay/index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>支付宝电脑网站支付</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
}
.tab-head {
margin-left: 120px;
margin-bottom: 10px;
}
.tab-content {
clear: left;
display: none;
}
h2 {
border-bottom: solid #02aaf1 2px;
width: 200px;
height: 25px;
margin: 0;
float: left;
text-align: center;
font-size: 16px;
}
.selected {
color: #FFFFFF;
background-color: #02aaf1;
}
.show {
clear: left;
display: block;
}
.hidden {
display: none;
}
.new-btn-login-sp {
padding: 1px;
display: inline-block;
width: 75%;
}
.new-btn-login {
background-color: #02aaf1;
color: #FFFFFF;
font-weight: bold;
border: none;
width: 100%;
height: 30px;
border-radius: 5px;
font-size: 16px;
}
#main {
width: 100%;
margin: 0 auto;
font-size: 14px;
}
.red-star {
color: #f00;
width: 10px;
display: inline-block;
}
.null-star {
color: #fff;
}
.content {
margin-top: 5px;
}
.content dt {
width: 100px;
display: inline-block;
float: left;
margin-left: 20px;
color: #666;
font-size: 13px;
margin-top: 8px;
}
.content dd {
margin-left: 120px;
margin-bottom: 5px;
}
.content dd input {
width: 85%;
height: 28px;
border: 0;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#foot {
margin-top: 10px;
position: absolute;
bottom: 15px;
width: 100%;
}
.foot-ul {
width: 100%;
}
.foot-ul li {
width: 100%;
text-align: center;
color: #666;
}
.note-help {
color: #999999;
font-size: 12px;
line-height: 130%;
margin-top: 5px;
width: 100%;
display: block;
}
#btn-dd {
margin: 20px;
text-align: center;
}
.foot-ul {
width: 100%;
}
.one_line {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #eeeeee;
width: 100%;
margin-left: 20px;
}
.am-header {
display: -webkit-box;
display: -ms-flexbox;
display: box;
width: 100%;
position: relative;
padding: 7px 0;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: #1D222D;
height: 50px;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
box-align: center;
}
.am-header h1 {
-webkit-box-flex: 1;
-ms-flex: 1;
box-flex: 1;
line-height: 18px;
text-align: center;
font-size: 18px;
font-weight: 300;
color: #fff;
}
</style>
</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
<h1>支付宝电脑网站支付体验入口页</h1>
</header>
<div id="main">
<div id="tabhead" class="tab-head">
<h2 id="tab1" class="selected" name="tab">付 款</h2>
<h2 id="tab2" name="tab">交 易 查 询</h2>
<h2 id="tab3" name="tab">退 款</h2>
<h2 id="tab4" name="tab">退 款 查 询</h2>
<h2 id="tab5" name="tab">交 易 关 闭</h2>
</div>
<form name="alipayment" action="pay/alipay.trade.page.pay.jsp" method="post"
target="_blank">
<div id="body1" class="show" name="divcontent">
<dl class="content">
<dt>商户订单号 :</dt>
<dd>
<input id="WIDout_trade_no" value="${orders.oid }" name="WIDout_trade_no" />
</dd>
<hr class="one_line">
<dt>订单姓名 :</dt>
<dd>
<input id="WIDsubject" value="${orders.user.name }" name="WIDsubject" />
</dd>
<hr class="one_line">
<dt>付款金额 :</dt>
<dd>
<input id="WIDtotal_amount" value="${orders.total }" name="WIDtotal_amount" />
</dd>
<hr class="one_line">
<dt>订单时间:</dt>
<dd>
<input id="WIDbody" value="${orders.ordertime }" name="WIDbody" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit"
style="text-align: center;">付 款</button>
</span> <span class="note-help">如果您点击“付款”按钮,即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<form name=tradequery action=pay/alipay.trade.query.jsp method=post
target="_blank">
<div id="body2" class="tab-content" name="divcontent">
<dl class="content">
<dt>商户订单号 :</dt>
<dd>
<input id="WIDTQout_trade_no" name="WIDTQout_trade_no" />
</dd>
<hr class="one_line">
<dt>支付宝交易号 :</dt>
<dd>
<input id="WIDTQtrade_no" name="WIDTQtrade_no" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit"
style="text-align: center;">交 易 查 询</button>
</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“交易查询”按钮,即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<form name=traderefund action=alipay.trade.refund.jsp method=post
target="_blank">
<div id="body3" class="tab-content" name="divcontent">
<dl class="content">
<dt>商户订单号 :</dt>
<dd>
<input id="WIDTRout_trade_no" name="WIDTRout_trade_no" />
</dd>
<hr class="one_line">
<dt>支付宝交易号 :</dt>
<dd>
<input id="WIDTRtrade_no" name="WIDTRtrade_no" />
</dd>
<hr class="one_line">
<dt>退款金额 :</dt>
<dd>
<input id="WIDTRrefund_amount" name="WIDTRrefund_amount" />
</dd>
<hr class="one_line">
<dt>退款原因 :</dt>
<dd>
<input id="WIDTRrefund_reason" name="WIDTRrefund_reason" />
</dd>
<hr class="one_line">
<dt>退款请求号 :</dt>
<dd>
<input id="WIDTRout_request_no" name="WIDTRout_request_no" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit"
style="text-align: center;">退 款</button>
</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“退款”按钮,即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<form name=traderefundquery
action=alipay.trade.fastpay.refund.query.jsp method=post
target="_blank">
<div id="body4" class="tab-content" name="divcontent">
<dl class="content">
<dt>商户订单号 :</dt>
<dd>
<input id="WIDRQout_trade_no" name="WIDRQout_trade_no" />
</dd>
<hr class="one_line">
<dt>支付宝交易号 :</dt>
<dd>
<input id="WIDRQtrade_no" name="WIDRQtrade_no" />
</dd>
<hr class="one_line">
<dt>退款请求号 :</dt>
<dd>
<input id="WIDRQout_request_no" name="WIDRQout_request_no" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit"
style="text-align: center;">退 款 查 询</button>
</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“退款查询”按钮,即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<form name=tradeclose action=alipay.trade.close.jsp method=post
target="_blank">
<div id="body5" class="tab-content" name="divcontent">
<dl class="content">
<dt>商户订单号 :</dt>
<dd>
<input id="WIDTCout_trade_no" name="WIDTCout_trade_no" />
</dd>
<hr class="one_line">
<dt>支付宝交易号 :</dt>
<dd>
<input id="WIDTCtrade_no" name="WIDTCtrade_no" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit"
style="text-align: center;">交 易 关 闭</button>
</span> <span class="note-help">商户订单号与支付宝交易号二选一,如果您点击“交易关闭”按钮,即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<div id="foot">
<ul class="foot-ul">
<li>支付宝版权所有 2015-2018 ALIPAY.COM</li>
</ul>
</div>
</div>
</body>
<script language="javascript">
var tabs = document.getElementsByName('tab');
var contents = document.getElementsByName('divcontent');
(function changeTab(tab) {
for(var i = 0, len = tabs.length; i < len; i++) {
tabs[i].onmouseover = showTab;
}
})();
function showTab() {
for(var i = 0, len = tabs.length; i < len; i++) {
if(tabs[i] === this) {
tabs[i].className = 'selected';
contents[i].className = 'show';
} else {
tabs[i].className = '';
contents[i].className = 'tab-content';
}
}
}
/* function GetDateNow() {
var vNow = new Date();
var sNow = "";
sNow += String(vNow.getFullYear());
sNow += String(vNow.getMonth() + 1);
sNow += String(vNow.getDate());
sNow += String(vNow.getHours());
sNow += String(vNow.getMinutes());
sNow += String(vNow.getSeconds());
sNow += String(vNow.getMilliseconds());
document.getElementById("WIDout_trade_no").value = sNow;
document.getElementById("WIDsubject").value = "测试";
document.getElementById("WIDtotal_amount").value = "0.01";
} */
GetDateNow();
</script>
</html>
最终显示:http://localhost:8080/xiaomi/login.jsp
第一步
第二步
第三步
第四步
第五步:
交易完成这里可以再次查看