一、前言
欢送来到本期的博客！
本期将会解说如何接入微信领取的退款和勾销订单接口,本篇文章将是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' });}勾销订单
这个接口很简略,只须要传入订单号就能够了,而后在点击勾销订单的时候调用这个接口,那么这个接口申请同学们本人去实现吧~
思路:
- 点击勾销订单按钮,能够弹出提示框提醒是否勾销订单
- 获取以后行的订单号,而后调用勾销订单接口,而后调用查问列表接口刷新
退款订单
能够看到咱们的设计图,首先点击须要退款的订单弹出一个退款核实窗口验证你是否是自己,而后在输出退款理由,点击确定退款.
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#
| 属性名 | 阐明 | 类型 | 默认 |
|---|---|---|---|
| model-value / v-model | 是否显示 Dialog | boolean | — |
事件#
| 事件名 | 阐明 | Type |
|---|---|---|
| @close | Dialog 敞开的回调 弹出层的 X | Function |
定义变量
// ---------------------------------------------------变量---------------------------------------------------// 退款是否显示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> */@RestControllerAdvicepublic 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多平台公布