抖音小程序＜pay-button＞组件退款功能

已于 2024-05-07 11:48:47 修改
阅读量1.8k 收藏 10
点赞数 8
文章标签： 小程序 javascript 前端 html
于 2024-04-15 15:20:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48070278/article/details/137780379
版权

退款使用的是pay-button 交易按钮（行业sdk）

准备工作：

在package.json文件添加

 "industrySDK": true

直接放在最上面就可以

添加完重启编辑器！！！

在使用组件页面判断是否支持组件
 
if (tt.canIUse("industrySDK.pay-button")) {
  console.log('支持pay-button组件')
}

 直接复制使用-退款按钮代码

<pay-button
  mode="{{1}}"
  order-id="{{orderId}}"
  order-status="{{refundStatus}}"
  bind:refund="handleRefund"
  bind:error="onError"
  refund-id="{{refundNo}}"
/>
mode介绍
mode为1是----已下单，用于退款场景
mode为2是----未下单，用于下单场景
order-id介绍
开发者订单系统的交易订单号，退款的时候该属性必传，要拿交易订单号去退款。
order-status介绍
退款的时候细分状态，因为退款的时候有 (申请退款,退款中,退款成功,退款失败),
这些都是后端返回的状态，切记让后端根据抖音规则返回状态，自己也能转，就是多个地方使用不方便！
抖音规则: 0：继续支付1：申请退款2：退款中3：退款成功4：退款失败
退款的时候该属性必传
bind:refund介绍
这个就是点击申请退款以后的回调，不是必填
bind:error介绍
这个比较重要，退款出现报错都会在这个方法里打印。
常见错误是开发者调用扩展点失败...一般遇到扩展点相关的直接问后端解决

bind:error错误码地址如下抖音pay-button组件退款常见错误码icon-default.png?t=N7T8https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/pay-button-sdk#16b1f15b

欢迎评论互相交流学习

最新版微信小程序支付,退款问题实现与总结(保姆级)
m0_62049633的博客
02-22 4067
首先我们作为后端，需要像前端提供一个接口，前端通过调用这个接口唤起下单，在这个接口中,后端回去调用微信下单接口,这时候微信会给我们返一个预支付id，我们通过这个预支付的id，这个预支付id是唤起下单的一个必填参数,咱们只需要计算出唤起支付所需要的参数,然后传给前端,前端就可以调用这个唤起支付接口,这样,输入密码的数字轮盘就出来了。
抖音泛知识交易系统2.0 pay-button 交易按钮
lovewangyage的博客
11-26 2641
抖音泛知识交易系统2.0 pay-button 交易按钮
抖音小程序pay-button使用
qq_61869009的博客
08-07 2080
抖音泛知识支付模板，字节小程序支付
小程序+调用退款+php,小程序微信退款功能实现方法详解
weixin_33417488的博客
03-26 362
本文实例讲述了小程序微信退款功能实现方法。分享给大家供大家参考，具体如下：☹. 背景微信开发中，既然涉及到了微信支付，对于合理的购物网站，必定会有用户退款请求当然，一种方式是登录 微信商户平台，在 交易列表 中进行微信退款操作但是，如果业务量庞大，作为友好交互，自然需要进行代码实现 微信退款 操作咯稍作一提，这是针对 小程序退款申请 的方法指导(目测跟公众号退款没啥区别)理论上，请对应参考文章：小...
php 小程序退款完整版
大脸猫脸大
03-20 2120
功能前提：1. 使用   wx php sdk （小程序支付完整版） ，  2. 配置证书时使用绝对路径1. 上代码： /** * 退款 * @author:大脸猫脸大 */ public function refund() { import("Vendor.Wxpay.lib.WxPay#Api", "", ".php"); ...
字节小程序交易组件使用指南
m0_55969466的博客
10-21 3089
前言通过插件的形式，预先实现了一些页面模板，例如退款页模板，小程序开发者只需要直接引入相应插件，并且遵循插件约定的规范，与插件之间实现相互通信，即可完成相应的页面，从而提高开发效率。交易系统前端模板在页面维度上提供了提单页模板、退款页模板等，模板的入口是一个，通过该组件实现从小程序跳转到前端模板页面。
从零到一实践：全面掌握微信支付机制、支付-退款功能的完整流程以及uniapp支付接口集成配置
JINGWHALE
04-20 1715
本文介绍了微信支付用户下单、后端生成预支付订单、前端调用支付接口、用户完成支付、微信通知后端支付结果、后端处理支付结果、后端通知前端支付结果、退款、uniapp支付配置等全流程实践。小程序支付直接对接微信支付系统，使得商家能够触达这一庞大的潜在客户群体。借助微信的高用户粘性和高频使用特性，小程序支付能够有效扩大商家的服务覆盖范围，吸引和留住更多消费者。
uniapp+vue3开发抖音小程序按需配置泛知识交易组件+下单页插件
张百星的博客
10-12 729
记录uniapp接入抖音交易模板
uni 退款 流程 和物流流程
m0_46701899的博客
03-08 1145
1.退款流程 1.组件模块 <template> <view class="process_more"> <!-- 步骤条 --> <view class="set-2" :key="index" v-for="(item,index) in list"> <!-- 图片 --> <view :class="[index <= current?'success-border':'fail-border'.
使用uniapp云开发对接抖音小程序通用交易系统
ctCheng的博客
06-04 1455
1、使用tt.requestOrder(options)生成一个抖音的订单2、使用tt.getOrderPayment(options);调起收银台完成支付3、服务端接收支付回调完成注意：开发者工具中可能会有 requestOrder 未定义的报错，直接使用真机调试就好了注意：使用前记得把抖音的通用交易那些需要开通的都开通了。
uniapp小程序支付app 支付【前端部分】
热门推荐
Neil_1993的博客
01-03 1万+
&lt;template&gt; &lt;view&gt; &lt;button @click="paymini"&gt;小程序支付&lt;/button&gt; &lt;button @click="payapp"&gt;app支付&lt;/button&gt; &lt;/view&gt; &lt;/template&gt;
抖音【交易系统2.0-生活到综poi小程序开发】步骤三、四
qq_19591849的博客
12-08 1227
抖音的这套链路，和以往常规对接有点出入，对接支付宝、微信的话。基本是都封装好了。业务逻辑处理完传入对应的字段就可以了。这套链路我感觉是更贴合开发者，更深入商品细节。让开发者细微的参数都需要一一处理。包括支付、退款逻辑。单独退款。也比较贴切，更灵活区分业务。还有中途不要被抖音同学的属于给混淆。poi、poi货架、sku。中途也是重工好多功能。希望大家一遍过~
vuecli3配置开发环境 测试环境 生产环境
断肠人在刷牙〃的博客
08-20 1204
开发环境、生产环境、测试环境的基本理解和区别： 开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成：操作系统 ，web服务器 ，语言环境。 php 。 数据库 。 等等 测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。项目完成测试，修改bug阶段 生产环境：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志.
Java实现微信小程序开发 小程序支付开发-小程序退款功能
奋斗的IT青年
08-28 1万+
              最近，经历多个微信小程序支付以及小程序退款实战项目，今天编者经过整理，把小程序申请退款的实战项目案例分享给大家，希望能让大家借鉴，在项目开发中少走弯路。                                小程序处理退款前提需安装商户安全证书： 退款请求需要在请求服务器安装微信提供的安全证书，因为微信退款需要携带证书的请求,此证书可在申请微信商户号成功后...
支付宝支付---流程详解
justzcy的博客
08-22 3136
思路解析及代码展示，功能实现！！！欢迎学习
SpringBoot(JAVA)整合小程序支付和退款功能详解
weixin_46204877的博客
03-11 3389
SpringBoot(java)整合微信小程序SDK支付和退款，小程序调用后端预支付接口，接口调用成功返回给小程序支付凭证id，小程序拿到支付凭证调用微信后台支付接口，小程序支付成功后，微信后台执行支付回调将支付订单信息返回(预支付调用微信后台是需要传入支付成功后自己本地的回调接口地址)
关于微信小程序自定义交易组件升级处理的相关问题,及解决思路
Lonelypatients°的博客
04-14 9886
系列文章目录 微信自定义交易组件开发步骤(视频号加小程序实现直播带货) 你进来看不懂算我输! 文章目录系列文章目录前言🍊一、本次升级更新内容🔍二、本次升级更新途中遇到的问题记录🔍三、本次升级相关的功能🔍三、接入指引❓总结吃瓜🍉 前言🍊 微信于3.25号针对小程序自定义交易组件进行升级，灰度测试到6月底正式替换老版本相关功能及参数，届时对于未升级组件的商户无法再使用自定义组件的相关功能。对于这次升级自此引发了一大堆的问题, 接下来为大家一一解读微信的神操作! 一、本次升级更新内容🔍 1. 审核
小程序View点击响应传递多个参数
shving的专栏
04-13 4682
小程序开发中，view的点击事件是通过bindtap绑定的，比如： <view class='pay-button' bindtap='gotoDetail' id='{{item.id}}'>查看详情</view> 在js文件中是这样获取参数id的： gotoDetail: function(e) { var id = e.currentTarget....
面对对<<ListBox>> - OrderList <<Label>> - DuePay <<Label>> - AlreadyPay <<Label>> - ResidualPay <<Button>> - Print
最新发布
05-08
<think>好的，我现在需要帮助用户了解如何在编程中使用ListBox显示订单列表，以及使用Label和Button实现应付、已付、未付金额和打印功能。首先，我应该考虑用户可能使用的编程语言，但问题中没有明确说明。根据引用中提到的示例，用户之前可能接触过Python（如wxPython中的媒体控制）和JavaScript（如JSF示例），但需要更多的上下文。为了通用性，我可以选择一个常见的GUI框架，比如Python的Tkinter，因为它简单且适合教学。 接下来，我需要分解问题为几个部分：ListBox显示订单、Labels显示金额、Buttons触发功能。首先，如何用ListBox显示订单？通常需要将数据绑定到ListBox，可能需要一个订单列表，每个订单包含名称、金额等信息。然后，应付金额是订单总额，已付是用户已支付的总额，未付是应付减去已付。Labels需要动态更新这些值。Print按钮可能需要将数据导出或打印。 然后，我需要考虑交互逻辑。例如，当用户选择ListBox中的订单时，可能需要显示详细信息，但用户的问题更侧重于总体金额的计算。因此，应付金额可能是所有订单的总和，已付可能通过按钮或其他方式累加，比如点击“支付”按钮增加已付金额。但用户的问题中提到的是AlreadyPay、ResidualPay，可能这些是静态显示，而Print按钮触发打印操作。 接下来，参考用户提供的引用，比如引用[1]中提到的数据填充方式，可能需要使用不同的数据绑定方法。例如，在Tkinter中，可以使用Listbox的insert方法添加项目。对于金额的显示，可能需要StringVar来动态更新Label的内容。 然后，我需要考虑如何组织代码结构。可能创建一个订单类，存储每个订单的信息。应付总额可以通过遍历订单列表计算总和。已付金额可能需要一个变量来跟踪，每次点击支付按钮时更新。未付金额则是应付减去已付。 在实现时，需要注意事件绑定，例如按钮点击触发计算或打印。打印功能可能需要将数据格式化为字符串或生成报表，但具体实现可能依赖于库，这里可以简化为控制台输出。 最后，验证示例代码的正确性，确保ListBox正确显示订单，Labels正确更新，按钮功能正常。同时，根据用户要求生成相关问题，可能涉及数据绑定、动态更新、事件处理等方面。</think>### 使用 ListBox、Label 和 Button 实现订单管理功能 以下是基于Python Tkinter框架的示例实现，涵盖界面布局、数据绑定和交互逻辑： #### 1. 界面布局与组件定义 ```python import tkinter as tk from tkinter import ttk class OrderApp: def __init__(self, master): self.master = master self.orders = [ {"id": 1, "name": "订单A", "amount": 1500}, {"id": 2, "name": "订单B", "amount": 2300}, {"id": 3, "name": "订单C", "amount": 800} ] # 金额状态变量 self.due_pay = tk.StringVar() self.already_pay = tk.StringVar(value="0") self.residual_pay = tk.StringVar() # 构建界面 self.create_widgets() self.update_totals() ``` #### 2. ListBox显示订单列表 ```python def create_widgets(self): # 订单列表区域 list_frame = ttk.LabelFrame(self.master, text="订单列表") list_frame.pack(padx=10, pady=5, fill=tk.BOTH, expand=True) self.order_list = tk.Listbox(list_frame, height=6) self.order_list.pack(fill=tk.BOTH, expand=True) # 填充订单数据 for order in self.orders: self.order_list.insert(tk.END, f"{order['name']} - ¥{order['amount']}") ``` #### 3. 金额显示与按钮功能 ```python # 金额显示区域 amount_frame = ttk.Frame(self.master) amount_frame.pack(padx=10, pady=5, fill=tk.X) ttk.Label(amount_frame, text="应付总额:").grid(row=0, column=0, sticky="w") ttk.Label(amount_frame, textvariable=self.due_pay).grid(row=0, column=1, sticky="e") ttk.Label(amount_frame, text="已付金额:").grid(row=1, column=0, sticky="w") ttk.Label(amount_frame, textvariable=self.already_pay).grid(row=1, column=1, sticky="e") ttk.Label(amount_frame, text="未付金额:").grid(row=2, column=0, sticky="w") ttk.Label(amount_frame, textvariable=self.residual_pay).grid(row=2, column=1, sticky="e") # 功能按钮 btn_frame = ttk.Frame(self.master) btn_frame.pack(padx=10, pady=5, fill=tk.X) ttk.Button(btn_frame, text="支付", command=self.make_payment).pack(side=tk.LEFT, padx=5) ttk.Button(btn_frame, text="打印", command=self.print_receipt).pack(side=tk.LEFT, padx=5) ``` #### 4. 核心业务逻辑 ```python def update_totals(self): """更新金额统计""" total_due = sum(order["amount"] for order in self.orders) self.due_pay.set(f"¥{total_due}") residual = total_due - int(self.already_pay.get() or 0) self.residual_pay.set(f"¥{residual}") def make_payment(self): """模拟支付操作""" current = int(self.already_pay.get() or 0) # 实际应调用支付接口，这里模拟支付100元 self.already_pay.set(str(current + 100)) self.update_totals() def print_receipt(self): """打印收据（示例输出到控制台）""" selected = self.order_list.curselection() if selected: order = self.orders[selected[0]] print(f"打印收据：{order['name']} ¥{order['amount']}") ``` #### 5. 启动应用 ```python if __name__ == "__main__": root = tk.Tk() root.title("订单管理系统") app = OrderApp(root) root.mainloop() ``` ### 实现要点说明 1. **数据绑定**：使用`Listbox`的`insert`方法加载订单数据，`StringVar`实现标签内容动态更新[^1] 2. **金额计算**：通过`sum()`函数计算总应付金额，使用`set()`方法更新显示值 3. **事件处理**：按钮绑定`command`参数触发支付和打印操作[^2] 4. **状态管理**：保持金额变量与界面显示的实时同步 5. **扩展性**：订单数据采用字典结构，便于后续添加更多字段 ### 界面优化建议 1. 增加滚动条提升长列表浏览体验 2. 使用`Treeview`代替`Listbox`显示多列数据 3. 添加支付金额输入对话框 4. 实现数据库持久化存储[^4]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值