抖音泛知识交易系统2.0 pay-button 交易按钮

cwangyage

已于 2022-11-26 14:58:03 修改

阅读量2.6k

点赞数 3

分类专栏：小程序文章标签： vue.js javascript 前端

于 2022-11-26 14:57:59 首次发布

本文链接：https://blog.csdn.net/lovewangyage/article/details/128048024

版权

本文档介绍了如何在Hbuilder项目中集成和使用抖音泛知识交易系统的Pay-button组件。从创建vue.config.js配置文件到引入组件、处理支付和退款回调，详细阐述了组件的使用方法和注意事项。遇到的问题包括：只能用Pay-button下单、组件文字样式修改等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：以下方法是使用Hbuilder建立的项目，由于`pay-button`是新增组件，框架暂未适配，因此需要使用原生组件混合的方式接入

使用Hbuilder新建项目之后

1、在根目录新建vue.config.js文件

// vue.config.js
const UniappToGroup = require('uniapp-to-group')
module.exports = {
configureWebpack: {
plugins: [
new UniappToGroup({
// 对应 package.json 中引入插件步骤
package: {
'ttPlugins': {
'dependencies': {
// 注册交易模版插件
'microapp-trade-plugin': {
'version': '1.0.0',
'isDynamic': true
}
}
}
},
/**
* app 中可以是任何字段，插件会将字段和app.json对比，有就合并字段，没有就添加字段
* 合并字段目前只处理 Array 和 Object 类型(注：[]和{}才会合并， null 类型不会合并)
* Object 类型字段合并，在key相同的情况会覆盖value
* Array 类型合并是将两个数组合并
*/
// #ifdef MP-TOUTIAO
app: {
'pages': [
// 下单页
"ext://microapp-trade-plugin/order-confirm",
// 退款申请页
"ext://microapp-trade-plugin/refund-apply",
// 退款详情页
"ext://microapp-trade-plugin/refund-detail"
]
},
// #endif
})
]
}
}

2、npm install uniapp-to-group -D

3、引入组件

新建ttcomponents文件夹，如下

index.js

Component({
properties: {
   // 组件的使用模式1：已下单 2：未下单
mode: {
       type: Number,
       value: 2,
   },
   // 已下单场景（mode = 1）下，细分订单状态0：继续支付1：申请退款2：退款中3：退款成功4：退款失败
   orderstatus: {
       type: Number,
       value: 0,
   },
   // 开发者订单系统的退款单号，用于查看退款详情
   refundid: {
       type: String,
       value: "",
   },
   // 开发者订单系统的交易订单号，用于继续支付、申请退款
   orderdingdan: {
       type: String,
       value: "",
   },
   // 商品id,mode 为 2 时，该属性必传
goodsId: {
type: String,
value: "",
},
   extension: {
   type: String,
   value: "",
   },
   source: {
   type: String,
   value: "",
   },
   // 组件class名
   classname: {
   type: String,
   value: "",
   },
   hbprice: {
   type: