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

说明：以下方法是使用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: String,