一、前言
欢送来到本期的博客!
本期将会解说如何接入微信领取的退款和勾销订单接口, 本篇文章将是 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.js
api 文件, 增加两个办法
/**
* 勾销接口
* @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>
*/
@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 多平台公布