Springboot集成支付宝沙箱支付（退款功能）

转x33g5p2x  于2022-07-10 转载在 Spring  
字(25.5k)|赞(0)|评价(0)|浏览(609)

包括：
支付宝沙箱 支付 + 异步通知 + 退款功能

正式版本的sdk

通用版本SDK文档：https://opendocs.alipay.com/open/02np94

  1. <dependency>
  2.      <groupId>com.alipay.sdk</groupId>
  3.      <artifactId>alipay-sdk-java</artifactId>
  4.      <version>4.22.110.ALL</version>
  5.  </dependency>

AlipayConfig.java 只需要获取配置alipay的参数即可

  1. import lombok.Data;
  2. import org.springframework.boot.context.properties.ConfigurationProperties;
  3. import org.springframework.stereotype.Component;
  5. @Data
  6. @Component
  7. @ConfigurationProperties(prefix = "alipay")
  8. public class AliPayConfig {
  9.     private String appId;
  10.     private String appPrivateKey;
  11.     private String alipayPublicKey;
  12.     private String notifyUrl;
  14. }

参数更新：

  1. import lombok.Data;
  3. @Data
  4. public class AliPay {
  5.     private String traceNo;
  6.     private double totalAmount;
  7.     private String subject;
  8.     private String alipayTraceNo;
  9. }

完整的支付宝通用版本支付代码：

  1. import cn.hutool.core.date.DateUnit;
  2. import cn.hutool.core.date.DateUtil;
  3. import cn.hutool.json.JSONObject;
  4. import com.alipay.api.AlipayApiException;
  5. import com.alipay.api.AlipayClient;
  6. import com.alipay.api.DefaultAlipayClient;
  7. import com.alipay.api.internal.util.AlipaySignature;
  8. import com.alipay.api.request.AlipayTradePagePayRequest;
  9. import com.alipay.api.request.AlipayTradeRefundRequest;
  10. import com.alipay.api.response.AlipayTradeRefundResponse;
  11. import com.example.springboot.common.Result;
  12. import com.example.springboot.config.AliPayConfig;
  13. import com.example.springboot.controller.dto.AliPay;
  14. import com.example.springboot.entity.Orders;
  15. import com.example.springboot.mapper.OrdersMapper;
  16. import org.springframework.web.bind.annotation.GetMapping;
  17. import org.springframework.web.bind.annotation.PostMapping;
  18. import org.springframework.web.bind.annotation.RequestMapping;
  19. import org.springframework.web.bind.annotation.RestController;
  21. import javax.annotation.Resource;
  22. import javax.servlet.http.HttpServletRequest;
  23. import javax.servlet.http.HttpServletResponse;
  24. import java.util.HashMap;
  25. import java.util.Map;
  27. // xjlugv6874@sandbox.com
  28. // 9428521.24 - 30 = 9428491.24 + 30 = 9428521.24
  29. @RestController
  30. @RequestMapping("/alipay")
  31. public class AliPayController {
  33.     private static final String GATEWAY_URL = "https://openapi.alipaydev.com/gateway.do";
  34.     private static final String FORMAT = "JSON";
  35.     private static final String CHARSET = "UTF-8";
  36.     //签名方式
  37.     private static final String SIGN_TYPE = "RSA2";
  39.     @Resource
  40.     private AliPayConfig aliPayConfig;
  42.     @Resource
  43.     private OrdersMapper ordersMapper;
  45.     @GetMapping("/pay") // &subject=xxx&traceNo=xxx&totalAmount=xxx
  46.     public void pay(AliPay aliPay, HttpServletResponse httpResponse) throws Exception {
  47.         // 1. 创建Client，通用SDK提供的Client，负责调用支付宝的API
  48.         AlipayClient alipayClient = new DefaultAlipayClient(GATEWAY_URL, aliPayConfig.getAppId(),
  49.                 aliPayConfig.getAppPrivateKey(), FORMAT, CHARSET, aliPayConfig.getAlipayPublicKey(), SIGN_TYPE);
  51.         // 2. 创建 Request并设置Request参数
  52.         AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();  // 发送请求的 Request类
  53.         request.setNotifyUrl(aliPayConfig.getNotifyUrl());
  54.         JSONObject bizContent = new JSONObject();
  55.         bizContent.set("out_trade_no", aliPay.getTraceNo());  // 我们自己生成的订单编号
  56.         bizContent.set("total_amount", aliPay.getTotalAmount()); // 订单的总金额
  57.         bizContent.set("subject", aliPay.getSubject());   // 支付的名称
  58.         bizContent.set("product_code", "FAST_INSTANT_TRADE_PAY");  // 固定配置
  59.         request.setBizContent(bizContent.toString());
  61.         // 执行请求，拿到响应的结果，返回给浏览器
  62.         String form = "";
  63.         try {
  64.             form = alipayClient.pageExecute(request).getBody(); // 调用SDK生成表单
  65.         } catch (AlipayApiException e) {
  66.             e.printStackTrace();
  67.         }
  68.         httpResponse.setContentType("text/html;charset=" + CHARSET);
  69.         httpResponse.getWriter().write(form);// 直接将完整的表单html输出到页面
  70.         httpResponse.getWriter().flush();
  71.         httpResponse.getWriter().close();
  72.     }
  74.     @PostMapping("/notify")  // 注意这里必须是POST接口
  75.     public String payNotify(HttpServletRequest request) throws Exception {
  76.         if (request.getParameter("trade_status").equals("TRADE_SUCCESS")) {
  77.             System.out.println("=========支付宝异步回调========");
  79.             Map<String, String> params = new HashMap<>();
  80.             Map<String, String[]> requestParams = request.getParameterMap();
  81.             for (String name : requestParams.keySet()) {
  82.                 params.put(name, request.getParameter(name));
  83.                 // System.out.println(name + " = " + request.getParameter(name));
  84.             }
  86.             String tradeNo = params.get("out_trade_no");
  87.             String gmtPayment = params.get("gmt_payment");
  88.             String alipayTradeNo = params.get("trade_no");
  90.             String sign = params.get("sign");
  91.             String content = AlipaySignature.getSignCheckContentV1(params);
  92.             boolean checkSignature = AlipaySignature.rsa256CheckContent(content, sign, aliPayConfig.getAlipayPublicKey(), "UTF-8"); // 验证签名
  93.             // 支付宝验签
  94.             if (checkSignature) {
  95.                 // 验签通过
  96.                 System.out.println("交易名称: " + params.get("subject"));
  97.                 System.out.println("交易状态: " + params.get("trade_status"));
  98.                 System.out.println("支付宝交易凭证号: " + params.get("trade_no"));
  99.                 System.out.println("商户订单号: " + params.get("out_trade_no"));
  100.                 System.out.println("交易金额: " + params.get("total_amount"));
  101.                 System.out.println("买家在支付宝唯一id: " + params.get("buyer_id"));
  102.                 System.out.println("买家付款时间: " + params.get("gmt_payment"));
  103.                 System.out.println("买家付款金额: " + params.get("buyer_pay_amount"));
  105.                 // 更新订单未已支付
  106.                 ordersMapper.updateState(tradeNo, "已支付", gmtPayment, alipayTradeNo);
  107.             }
  108.         }
  109.         return "success";
  110.     }
  112.     @GetMapping("/return")
  113.     public Result returnPay(AliPay aliPay) throws AlipayApiException {
  114.         // 7天无理由退款
  115.         String now = DateUtil.now();
  116.         Orders orders = ordersMapper.getByNo(aliPay.getTraceNo());
  117.         if (orders != null) {
  118.             // hutool工具类，判断时间间隔
  119.             long between = DateUtil.between(DateUtil.parseDateTime(orders.getPaymentTime()), DateUtil.parseDateTime(now), DateUnit.DAY);
  120.             if (between > 7) {
  121.                 return Result.error("-1", "该订单已超过7天，不支持退款");
  122.             }
  123.         }
  125.         // 1. 创建Client，通用SDK提供的Client，负责调用支付宝的API
  126.         AlipayClient alipayClient = new DefaultAlipayClient(GATEWAY_URL,
  127.                 aliPayConfig.getAppId(), aliPayConfig.getAppPrivateKey(), FORMAT, CHARSET,
  128.                 aliPayConfig.getAlipayPublicKey(), SIGN_TYPE);
  129.         // 2. 创建 Request，设置参数
  130.         AlipayTradeRefundRequest request = new AlipayTradeRefundRequest();
  131.         JSONObject bizContent = new JSONObject();
  132.         bizContent.set("trade_no", aliPay.getAlipayTraceNo());  // 支付宝回调的订单流水号
  133.         bizContent.set("refund_amount", aliPay.getTotalAmount());  // 订单的总金额
  134.         bizContent.set("out_request_no", aliPay.getTraceNo());   //  我的订单编号
  136.         // 返回参数选项，按需传入
  137.         //JSONArray queryOptions = new JSONArray();
  138.         //queryOptions.add("refund_detail_item_list");
  139.         //bizContent.put("query_options", queryOptions);
  141.         request.setBizContent(bizContent.toString());
  143.         // 3. 执行请求
  144.         AlipayTradeRefundResponse response = alipayClient.execute(request);
  145.         if (response.isSuccess()) {  // 退款成功，isSuccess 为true
  146.             System.out.println("调用成功");
  148.             // 4. 更新数据库状态
  149.             ordersMapper.updatePayState(aliPay.getTraceNo(), "已退款", now);
  150.             return Result.success();
  151.         } else {   // 退款失败，isSuccess 为false
  152.             System.out.println(response.getBody());
  153.             return Result.error(response.getCode(), response.getBody());
  154.         }
  156.     }
  158. }

至此，后端集成完毕。

注意事项

如果你在支付的过程中出现了这样的一个界面，不用慌，直接使用 隐私窗口打开即可。

参考SQL

商品表：

  1. CREATE TABLE `goods` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  4.   `price` decimal(10,2) DEFAULT NULL COMMENT '单价',
  5.   `store` int(10) DEFAULT NULL COMMENT '库存',
  6.   `unit` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '单位',
  7.   `img` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '封面',
  8.   PRIMARY KEY (`id`)
  9. ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

订单表

  1. CREATE TABLE `orders` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `no` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单编号',
  4.   `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '名称',
  5.   `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '订单时间',
  6.   `state` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT '待支付' COMMENT '支付状态',
  7.   `total` decimal(10,2) DEFAULT NULL COMMENT '订单总价',
  8.   `user_id` int(11) DEFAULT NULL COMMENT '用户id',
  9.   `payment_time` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '支付时间',
  10.   `alipay_no` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '支付宝交易号',
  11.   `return_time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '退款时间',
  12.   PRIMARY KEY (`id`)
  13. ) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

购买下订单的模拟接口：

  1. @PostMapping("/{goodsId}/{num}")
  2.     public Result createOrder(@PathVariable Integer goodsId, @PathVariable Integer num) {
  3.         Goods goods = goodsService.getById(goodsId);
  4.         if (goods == null) {
  5.             throw new ServiceException("-1", "未找到商品");
  6.         }
  7.         User currentUser = TokenUtils.getCurrentUser();
  8.         Integer userId = currentUser.getId();
  10.         Orders orders = new Orders();
  11.         orders.setName(goods.getName());
  12.         orders.setNo(DateUtil.format(new Date(), "yyyyMMdd") + System.currentTimeMillis());
  13.         orders.setTime(DateUtil.now());
  14.         orders.setUserId(userId);
  15.         orders.setTotal(goods.getPrice().multiply(BigDecimal.valueOf(num)));
  16.         ordersService.save(orders);
  17.         return Result.success();
  18.     }

附赠前端调用代码：
Goods.vue

  1. <template>
  2.   <div>
  3.     <div style="margin: 10px 0">
  4.       <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
  5. <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>-->
  6. <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>-->
  7.       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
  8.       <el-button type="warning" @click="reset">重置</el-button>
  9.     </div>
  11.     <div style="margin: 10px 0">
  12.       <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
  13.       <el-popconfirm
  14.           class="ml-5"
  15.           confirm-button-text='确定'
  16.           cancel-button-text='我再想想'
  17.           icon="el-icon-info"
  18.           icon-color="red"
  19.           title="您确定批量删除这些数据吗？"
  20.           @confirm="delBatch"
  21.       >
  22.         <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
  23.       </el-popconfirm>
  24.       <!-- <el-upload action="http://localhost:9090/goods/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
  25.         <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
  26.       </el-upload>
  27.       <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button> -->
  28.     </div>
  30.     <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
  31.       <el-table-column type="selection" width="55"></el-table-column>
  32.       <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
  33.       <el-table-column prop="name" label="名称"></el-table-column>
  34.       <el-table-column prop="price" label="单价"></el-table-column>
  35.       <el-table-column prop="store" label="库存"></el-table-column>
  36.       <el-table-column prop="unit" label="单位"></el-table-column>
  37.       <el-table-column label="图片"><template slot-scope="scope"><el-image style="width: 100px; height: 100px" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image></template></el-table-column>
  38.       <el-table-column label="购买"  width="180" align="center">
  39.         <template v-slot="scope">
  40.           <el-button type="primary" @click="buy(scope.row.id)">购 买</el-button>
  41.         </template>
  42.       </el-table-column>
  43.       <el-table-column label="操作"  width="180" align="center">
  44.         <template slot-scope="scope">
  45.           <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
  46.           <el-popconfirm
  47.               class="ml-5"
  48.               confirm-button-text='确定'
  49.               cancel-button-text='我再想想'
  50.               icon="el-icon-info"
  51.               icon-color="red"
  52.               title="您确定删除吗？"
  53.               @confirm="del(scope.row.id)"
  54.           >
  55.             <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
  56.           </el-popconfirm>
  57.         </template>
  58.       </el-table-column>
  59.     </el-table>
  60.     <div style="padding: 10px 0">
  61.       <el-pagination
  62.           @size-change="handleSizeChange"
  63.           @current-change="handleCurrentChange"
  64.           :current-page="pageNum"
  65.           :page-sizes="[2, 5, 10, 20]"
  66.           :page-size="pageSize"
  67.           layout="total, sizes, prev, pager, next, jumper"
  68.           :total="total">
  69.       </el-pagination>
  70.     </div>
  72.     <el-dialog title="信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
  73.       <el-form label-width="100px" size="small" style="width: 90%">
  74.         <el-form-item label="名称">
  75.           <el-input v-model="form.name" autocomplete="off"></el-input>
  76.         </el-form-item>
  77.         <el-form-item label="单价">
  78.           <el-input v-model="form.price" autocomplete="off"></el-input>
  79.         </el-form-item>
  80.         <el-form-item label="库存">
  81.           <el-input v-model="form.store" autocomplete="off"></el-input>
  82.         </el-form-item>
  83.         <el-form-item label="单位">
  84.           <el-input v-model="form.unit" autocomplete="off"></el-input>
  85.         </el-form-item>
  86.         <el-form-item label="封面">
  87.           <el-upload action="http://localhost:9090/file/upload" ref="img" :on-success="handleImgUploadSuccess">
  88.             <el-button size="small" type="primary">点击上传</el-button>
  89.           </el-upload>
  90.         </el-form-item>
  92.       </el-form>
  93.       <div slot="footer" class="dialog-footer">
  94.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  95.         <el-button type="primary" @click="save">确 定</el-button>
  96.       </div>
  97.     </el-dialog>
  98.   </div>
  99. </template>
  101. <script>
  102. export default {
  103.   name: "Goods",
  104.   data() {
  105.     return {
  106.       tableData: [],
  107.       total: 0,
  108.       pageNum: 1,
  109.       pageSize: 10,
  110.       name: "",
  111.       form: {},
  112.       dialogFormVisible: false,
  113.       multipleSelection: [],
  114.       user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
  115.     }
  116.   },
  117.   created() {
  118.     this.load()
  119.   },
  120.   methods: {
  121.     buy(goodsId) {
  122.       this.request.post("/orders/" +  goodsId + "/" + 1).then(res => {
  123.         if (res.code === '200') {
  124.           this.$message.success("购买成功，请前往订单页面支付")
  125.         } else {
  126.           this.$message.error(res.msg)
  127.         }
  128.       })
  129.     },
  130.     load() {
  131.       this.request.get("/goods/page", {
  132.         params: {
  133.           pageNum: this.pageNum,
  134.           pageSize: this.pageSize,
  135.           name: this.name,
  136.         }
  137.       }).then(res => {
  138.         this.tableData = res.data.records
  139.         this.total = res.data.total
  140.       })
  141.     },
  142.     save() {
  143.       this.request.post("/goods", this.form).then(res => {
  144.         if (res.code === '200') {
  145.           this.$message.success("保存成功")
  146.           this.dialogFormVisible = false
  147.           this.load()
  148.         } else {
  149.           this.$message.error("保存失败")
  150.         }
  151.       })
  152.     },
  153.     handleAdd() {
  154.       this.dialogFormVisible = true
  155.       this.form = {}
  156.       this.$nextTick(() => {
  157.         if(this.$refs.img) {
  158.            this.$refs.img.clearFiles();
  159.          }
  160.          if(this.$refs.file) {
  161.           this.$refs.file.clearFiles();
  162.          }
  163.       })
  164.     },
  165.     handleEdit(row) {
  166.       this.form = JSON.parse(JSON.stringify(row))
  167.       this.dialogFormVisible = true
  168.        this.$nextTick(() => {
  169.          if(this.$refs.img) {
  170.            this.$refs.img.clearFiles();
  171.          }
  172.          if(this.$refs.file) {
  173.           this.$refs.file.clearFiles();
  174.          }
  175.        })
  176.     },
  177.     del(id) {
  178.       this.request.delete("/goods/" + id).then(res => {
  179.         if (res.code === '200') {
  180.           this.$message.success("删除成功")
  181.           this.load()
  182.         } else {
  183.           this.$message.error("删除失败")
  184.         }
  185.       })
  186.     },
  187.     handleSelectionChange(val) {
  188.       console.log(val)
  189.       this.multipleSelection = val
  190.     },
  191.     delBatch() {
  192.       if (!this.multipleSelection.length) {
  193.         this.$message.error("请选择需要删除的数据")
  194.         return
  195.       }
  196.       let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
  197.       this.request.post("/goods/del/batch", ids).then(res => {
  198.         if (res.code === '200') {
  199.           this.$message.success("批量删除成功")
  200.           this.load()
  201.         } else {
  202.           this.$message.error("批量删除失败")
  203.         }
  204.       })
  205.     },
  206.     reset() {
  207.       this.name = ""
  208.       this.load()
  209.     },
  210.     handleSizeChange(pageSize) {
  211.       console.log(pageSize)
  212.       this.pageSize = pageSize
  213.       this.load()
  214.     },
  215.     handleCurrentChange(pageNum) {
  216.       console.log(pageNum)
  217.       this.pageNum = pageNum
  218.       this.load()
  219.     },
  220.     handleFileUploadSuccess(res) {
  221.       this.form.file = res
  222.     },
  223.     handleImgUploadSuccess(res) {
  224.       this.form.img = res
  225.     },
  226.     download(url) {
  227.       window.open(url)
  228.     },
  229.     exp() {
  230.       window.open("http://localhost:9090/goods/export")
  231.     },
  232.     handleExcelImportSuccess() {
  233.       this.$message.success("导入成功")
  234.       this.load()
  235.     }
  236.   }
  237. }
  238. </script>
  240. <style>
  241. .headerBg {
  242.   background: #eee!important;
  243. }
  244. </style>

Orders.vue

  1. <template>
  2.   <div>
  3.     <div style="margin: 10px 0">
  4.       <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
  5. <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>-->
  6. <!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>-->
  7.       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
  8.       <el-button type="warning" @click="reset">重置</el-button>
  9.     </div>
  11.     <div style="margin: 10px 0">
  12.       <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
  13.       <el-popconfirm
  14.           class="ml-5"
  15.           confirm-button-text='确定'
  16.           cancel-button-text='我再想想'
  17.           icon="el-icon-info"
  18.           icon-color="red"
  19.           title="您确定批量删除这些数据吗？"
  20.           @confirm="delBatch"
  21.       >
  22.         <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
  23.       </el-popconfirm>
  24.       <!-- <el-upload action="http://localhost:9090/orders/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block">
  25.         <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
  26.       </el-upload>
  27.       <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button> -->
  28.     </div>
  30.     <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
  31.       <el-table-column type="selection" width="55"></el-table-column>
  32.       <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
  33.       <el-table-column prop="no" label="订单编号"></el-table-column>
  34.       <el-table-column prop="name" label="名称"></el-table-column>
  35.       <el-table-column prop="time" label="订单时间"></el-table-column>
  36.       <el-table-column prop="state" label="支付状态"></el-table-column>
  37.       <el-table-column prop="total" label="订单总价"></el-table-column>
  38.       <el-table-column prop="paymentTime" label="支付时间"></el-table-column>
  39.       <el-table-column prop="alipayNo" label="支付宝宝流水号"></el-table-column>
  40.       <el-table-column prop="returnTime" label="退款时间"></el-table-column>
  41.       <el-table-column label="支付"  width="180" align="center">
  42.         <template v-slot="scope">
  43.           <el-button type="primary" @click="pay(scope.row)" :disabled="scope.row.state !== '待支付'">支 付</el-button>
  44.           <el-button type="danger" @click="returnPay(scope.row)" :disabled="scope.row.state !== '已支付'">退款</el-button>
  45.         </template>
  46.       </el-table-column>
  47.       <el-table-column label="操作"  width="180" align="center">
  48.         <template slot-scope="scope">
  49.           <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
  50.           <el-popconfirm
  51.               class="ml-5"
  52.               confirm-button-text='确定'
  53.               cancel-button-text='我再想想'
  54.               icon="el-icon-info"
  55.               icon-color="red"
  56.               title="您确定删除吗？"
  57.               @confirm="del(scope.row.id)"
  58.           >
  59.             <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
  60.           </el-popconfirm>
  61.         </template>
  62.       </el-table-column>
  63.     </el-table>
  64.     <div style="padding: 10px 0">
  65.       <el-pagination
  66.           @size-change="handleSizeChange"
  67.           @current-change="handleCurrentChange"
  68.           :current-page="pageNum"
  69.           :page-sizes="[2, 5, 10, 20]"
  70.           :page-size="pageSize"
  71.           layout="total, sizes, prev, pager, next, jumper"
  72.           :total="total">
  73.       </el-pagination>
  74.     </div>
  76.     <el-dialog title="信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
  77.       <el-form label-width="100px" size="small" style="width: 90%">
  78.         <el-form-item label="订单编号">
  79.           <el-input v-model="form.no" autocomplete="off"></el-input>
  80.         </el-form-item>
  81.         <el-form-item label="名称">
  82.           <el-input v-model="form.name" autocomplete="off"></el-input>
  83.         </el-form-item>
  84.         <el-form-item label="订单时间">
  85.           <el-date-picker v-model="form.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
  86.         </el-form-item>
  87.         <el-form-item label="支付状态">
  88.           <el-input v-model="form.state" autocomplete="off"></el-input>
  89.         </el-form-item>
  90.         <el-form-item label="订单总价">
  91.           <el-input v-model="form.total" autocomplete="off"></el-input>
  92.         </el-form-item>
  94.       </el-form>
  95.       <div slot="footer" class="dialog-footer">
  96.         <el-button @click="dialogFormVisible = false">取 消</el-button>
  97.         <el-button type="primary" @click="save">确 定</el-button>
  98.       </div>
  99.     </el-dialog>
  100.   </div>
  101. </template>
  103. <script>
  104. export default {
  105.   name: "Orders",
  106.   data() {
  107.     return {
  108.       tableData: [],
  109.       total: 0,
  110.       pageNum: 1,
  111.       pageSize: 10,
  112.       name: "",
  113.       form: {},
  114.       dialogFormVisible: false,
  115.       multipleSelection: [],
  116.       user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
  117.     }
  118.   },
  119.   created() {
  120.     this.load()
  121.   },
  122.   methods: {
  123.     pay(row) {
  124.       const url = `http://localhost:9090/alipay/pay?subject=${row.name}&traceNo=${row.no}&totalAmount=${row.total}`
  125.       window.open(url);  //  得到一个url，这个url就是支付宝支付的界面url, 新窗口打开这个url就可以了
  126.     },
  127.     returnPay(row) {
  128.       const url = `http://localhost:9090/alipay/return?totalAmount=${row.total}&alipayTraceNo=${row.alipayNo}&traceNo=${row.no}`
  129.       this.request.get(url).then(res => {
  130.         if(res.code === '200') {
  131.           this.$message.success("退款成功")
  132.         }  else {
  133.           this.$message.error("退款失败")
  134.         }
  135.         this.load()
  136.       })
  137.     },
  138.     load() {
  139.       this.request.get("/orders/page", {
  140.         params: {
  141.           pageNum: this.pageNum,
  142.           pageSize: this.pageSize,
  143.           name: this.name,
  144.         }
  145.       }).then(res => {
  146.         this.tableData = res.data.records
  147.         this.total = res.data.total
  148.       })
  149.     },
  150.     save() {
  151.       this.request.post("/orders", this.form).then(res => {
  152.         if (res.code === '200') {
  153.           this.$message.success("保存成功")
  154.           this.dialogFormVisible = false
  155.           this.load()
  156.         } else {
  157.           this.$message.error("保存失败")
  158.         }
  159.       })
  160.     },
  161.     handleAdd() {
  162.       this.dialogFormVisible = true
  163.       this.form = {}
  164.       this.$nextTick(() => {
  165.         if(this.$refs.img) {
  166.            this.$refs.img.clearFiles();
  167.          }
  168.          if(this.$refs.file) {
  169.           this.$refs.file.clearFiles();
  170.          }
  171.       })
  172.     },
  173.     handleEdit(row) {
  174.       this.form = JSON.parse(JSON.stringify(row))
  175.       this.dialogFormVisible = true
  176.        this.$nextTick(() => {
  177.          if(this.$refs.img) {
  178.            this.$refs.img.clearFiles();
  179.          }
  180.          if(this.$refs.file) {
  181.           this.$refs.file.clearFiles();
  182.          }
  183.        })
  184.     },
  185.     del(id) {
  186.       this.request.delete("/orders/" + id).then(res => {
  187.         if (res.code === '200') {
  188.           this.$message.success("删除成功")
  189.           this.load()
  190.         } else {
  191.           this.$message.error("删除失败")
  192.         }
  193.       })
  194.     },
  195.     handleSelectionChange(val) {
  196.       console.log(val)
  197.       this.multipleSelection = val
  198.     },
  199.     delBatch() {
  200.       if (!this.multipleSelection.length) {
  201.         this.$message.error("请选择需要删除的数据")
  202.         return
  203.       }
  204.       let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
  205.       this.request.post("/orders/del/batch", ids).then(res => {
  206.         if (res.code === '200') {
  207.           this.$message.success("批量删除成功")
  208.           this.load()
  209.         } else {
  210.           this.$message.error("批量删除失败")
  211.         }
  212.       })
  213.     },
  214.     reset() {
  215.       this.name = ""
  216.       this.load()
  217.     },
  218.     handleSizeChange(pageSize) {
  219.       console.log(pageSize)
  220.       this.pageSize = pageSize
  221.       this.load()
  222.     },
  223.     handleCurrentChange(pageNum) {
  224.       console.log(pageNum)
  225.       this.pageNum = pageNum
  226.       this.load()
  227.     },
  228.     handleFileUploadSuccess(res) {
  229.       this.form.file = res
  230.     },
  231.     handleImgUploadSuccess(res) {
  232.       this.form.img = res
  233.     },
  234.     download(url) {
  235.       window.open(url)
  236.     },
  237.     exp() {
  238.       window.open("http://localhost:9090/orders/export")
  239.     },
  240.     handleExcelImportSuccess() {
  241.       this.$message.success("导入成功")
  242.       this.load()
  243.     }
  244.   }
  245. }
  246. </script>
  248. <style>
  249. .headerBg {
  250.   background: #eee!important;
  251. }
  252. </style>

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://lebron.blog.csdn.net/article/details/125669452

内容来源于网络，如有侵权，请联系作者删除！

Javaservlet支付

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com