关于后端:第十一章从零玩转系列之微信支付实战PC端我的订单接入退款取消接口-技术创作特训营第一期

一、前言

欢送来到本期的博客！

本期将会解说如何接入微信领取的退款和勾销订单接口, 本篇文章将是 PC 端的最初一个文章啦~ 之后将会是 UniApp 的篇章感触挪动端的引诱吧~

💗 本次为前端知识点如果不懂前段能够去仓库间接 copy 进去应用, 如果有什么问题能够在评论区留言, 我会第一工夫回复大家的. 关注我不迷路，如果本篇文章对你有所帮忙，或者你有什么疑难，欢送在评论区留言，我个别看到都会回复的。大家点赞反对一下哟~ 💗

• 第一章从零玩转系列之微信领取开篇
• 第二章从零玩转系列之微信领取平安
• 第三章从零玩转系列之微信领取实战根底框架搭建
• 第四章从零玩转系列之微信领取实战 PC 端领取下单接口搭建
• 第五章从零玩转系列之微信领取实战 PC 端领取微信回调接口搭建
• 第六章从零玩转系列之微信领取实战 PC 端领取微信勾销订单接口搭建
• 第七章从零玩转系列之微信领取实战 PC 端领取微信退款订单接口搭建
• 第八章从零玩转系列之微信领取实战 PC 端我的项目构建 Vue3+Vite+ 页面根底搭建
• 第九章从零玩转系列之微信领取实战 PC 端装修下单页面
• 第十章从零玩转系列之微信领取实战 PC 端装修我的订单下单页面
• 第十一章从零玩转系列之微信领取实战 PC 端我的订单接入退款勾销接口
• 第十二章从零玩转系列之微信领取实战 Uni—App 根底我的项目搭建

本次我的项目应用技术栈

后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus

前端: Vue3、Vite、ElementPlus

小程序: Uniapp、Uview

演示地址查看 WEB 端 小程序

二、介绍

本篇接着上一篇
从零玩转系列之微信领取实战 PC 端装修我的订单页面 | 技术创作特训营第一期文章,
将会解说前端如何接入微信领取的退款和勾销订单接口

在咱们的第六章节和第七章节曾经将接口都编写结束, 如果还不分明的同学可返回

• 第六章从零玩转系列之微信领取实战 PC 端领取微信勾销订单接口搭建
• 第七章从零玩转系列之微信领取实战 PC 端领取微信退款订单接口搭建

设计图

我的订单界面也曾经编写结束接下来咱们开始设计吧!
首先咱们须要在我的订单页面增加两个按钮, 一个是勾销订单, 一个是退款订单, 如下图所示

创立几个下单数据

留神: 记得关上内网穿透, 接管微信领取回调

三、前端接入退款和勾销订单接口

查看文档他咋玩的咱们就咋玩, 首先在 el-table-column 内编写一个模版标签相当于 DIV 容器给这个模版增加一个属性 #default="scope"
这个属性是用来接管以后行的数据的, 而后在模版内增加两个按钮, 一个是勾销订单, 一个是退款订单, 如下图所示

批改 order.vue 页面

批改wechatPay.jsapi 文件, 增加两个办法

/**
 * 勾销接口
 * @param orderNo 订单号
 * @returns {*}
 */
cancelInterface(orderNo) {
    return request({
        url: '/api/wx-pay/native/cancel/' + orderNo,
        method: 'post'
    });
},

/**
 * 退款接口
 * @param orderNo 订单号
 * @param reason 退款理由
 * @param refundNo 领取胜利后的交易单号
 * @returns {*}
 */
refundInterface(orderNo, reason, refundNo) {
    return request({
        url: '/api/wx-pay/native/refunds/' + orderNo + '/' + refundNo + '/' + reason,
        method: 'post'
    });
}

勾销订单

这个接口很简略, 只须要传入订单号就能够了, 而后在点击勾销订单的时候调用这个接口, 那么这个接口申请同学们本人去实现吧~

思路:

1. 点击勾销订单按钮, 能够弹出提示框提醒是否勾销订单
2. 获取以后行的订单号, 而后调用勾销订单接口, 而后调用查问列表接口刷新

退款订单

能够看到咱们的设计图, 首先点击须要退款的订单弹出一个退款核实窗口验证你是否是自己, 而后在输出退款理由, 点击确定退款.

Dialog 对话框

在保留以后页面状态的状况下，告知用户并承载相干操作。

弹出层代码编写

    <!-- 退款对话框 -->
      <el-dialog title="退款" v-model="refundDialogVisible" @close="closeDialog" width="350px" center>
        <el-form label-width="90px">
          <el-form-item label="交易订单号">
            <el-input style="width: 100%" v-model="refundNo" placeholder="请输出交易单号后四位"></el-input>
          </el-form-item>
          <el-form-item label="退款起因">
            <el-select style="width: 100%" v-model="reason" placeholder="请抉择退款起因">
              <el-option label="不喜爱" value="不喜爱"></el-option>
              <el-option label="买错了" value="买错了"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="refundInterface()" :disabled="refundSubmitBtnDisabled"> 确 定 </el-button>
        </div>
      </el-dialog>

解释 v-model / close 作用

API#

事件 #

定义变量

// --------------------------------------------------- 变量 ---------------------------------------------------
// 退款是否显示
const refundDialogVisible = ref(false)
// 退款按钮限度
const refundSubmitBtnDisabled = ref(false)
// 退款备注
const reason = ref("")
// 退款订单号
const orderNo = ref("")
// 交易单号
const refundNo = ref("")

编写敞开退款弹出并且清空数据

// 敞开退款弹出并且清空数据
const closeDialog = () => {
  refundDialogVisible.value = false
  refundSubmitBtnDisabled.value = false
  reason.value = ""orderNo.value =""
  refundNo.value = ""
}

编写关上退款对话框办法 并且传入订单号用于退款接口应用

// 关上退款弹窗
const refundDialog = (orderNo) => {
  refundDialogVisible.value = true;
  orderNo.value = orderNo;
}

发送退款申请

编写退款申请办法

交易订单号只须要输出后四位咱们是和后端对应过的别忘记咯!

给同学安排一个作业咯给备注和交易单号增加校验, 如果为空则提醒用户须要填写

测试啥都没有输出不容许申请通过

修复 ” BUG “

当咱们间接抛出异样没有进行解决异样的话 SpringBoot 会主动将异样信息封装成一个 JSON 返回给前端,
这个 JSON 不是咱们自定义的, 所以咱们须要自定义异样解决类, 将异样信息封装成咱们自定义的 JSON 返回给前端

关上后端创立 exception 包, 而后创立一个全局异样解决类 GlobalExceptionHandler.java

// yangbuyi Copyright (c) https://yby6.com 2023.

package com.yby6.exception;


import com.yby6.reponse.R;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;

/**
 * 全局异样处理器
 *
 * @author Yang Shuai
 * Create By 2023/08/19
 * <p>
 */
@RestControllerAdvice
public class GlobalExceptionHandler {private static final Logger log = LoggerFactory.getLogger(GlobalExceptionHandler.class);

    /**
     * 解决异样
     *
     * @param e e
     * @return {@link R}
     */
    @ExceptionHandler(Exception.class)
    public R handleException(Exception e) {log.error(e.getMessage(), e);
        return R.fail(e.getMessage());
    }

}

再次测试

测试乱输出, 后端检测到了~

测试输出正确的交易单号

返回微信找到领取账单对照一下, 进行退款输出交易订单号后四位

返回手机查看退款后果

最初

本期完结咱们下次再见 👋~

，关注我不迷路，如果本篇文章对你有所帮忙，或者你有什么疑难，欢送在评论区留言，我个别看到都会回复的。大家点赞反对一下哟~ 💗

【选题思路】

“ 技术源于生存 ” 为什么写微信领取这种我的项目的文章呢? 因为我看到市面上的文章都不全面不细节不小文言更加没有配套 Demo!!!

从而我的从零玩转微信领取诞生啦~ 搭配 PC 端、Uniapp 端的不同实现.

【写作提纲】

一、前言

通过前言表白我每次的文章内容是什么货色和注意事项, 以及本篇文章的目录和彩蛋

二、介绍

介绍设计图的款式和性能, 思路, 以及后端接口的编写

三、前端接入退款和勾销订单接口

实现勾销接口和退款接口的编写、实现搭建一个弹出层用于退款应用、编写测试用例、联合后面的知识点修复一个 伪 “BUG”

本文由 mdnice 多平台公布