# 一、B2b插件-支付组件
# 1. B2b 支付组件
基础库 3.0.2 开始支持，低版本需做兼容处理。
B2b 门店助手插件提供了 B2b 渠道支付组件，组件支持选择微信支付和银行转账支付两种支付方式，其中银行转账支付方式是对订单金额为 5w 元以上的订单的支付能力的补充
要求版本：2.0.0 以上
# 1.1 申请添加插件
插件添加方式见：申请添加插件
# 1.2 配置插件
插件配置见：配置插件
# 1.3 使用插件
在需要使用 B2b 支付组件的页面的 index.json 引入插件：
{
"usingComponents": {
"pay-table": "plugin://自定义组件名/pay-table"
}
}
# 1.4 组件样式属性
B2b 支付组件支持有限度的通过指定属性进行样式自定义：
默认组件样式：
自定义组件样式：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| payTableStyles | Object | 否 | 控制支付组件基本样式 |
| payItemStyles | Object | 否 | 控制支付选择框的基本样式 |
| payButtonContainerStyles | Object | 否 | 控制支付按钮容器的基本样式 |
| payButtonStyles | Object | 否 | 控制支付按钮的基本样式 |
| checkedColor | String | 否 | checkbox 的颜色，如 #fff |
| payButtonText | String | 否 | 控制支付按钮的文案 |
支持编辑的样式字段：
| 字段 | 类型 |
|---|---|
| padding | String |
| margin | String |
| border | String |
| width | String |
| height | String |
| color | String |
| background | String |
| border-bottom | String |
| border-top | String |
| border-right | String |
| border-left | String |
| border-radius | String |
# 1.5 组件关键属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| checkValue | string | 是 | 控制当前选中的checkBox(支付方式) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| redirectInfo | Object | 是 | 重定向信息：android系统下银行app回跳微信后，返回指定的商家小程序页面。(android系统下从app返回微信后，无法原路返回商家小程序，因此需要 指定返回的商家小程序页面) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| payData | Object | 是 | B2b微信支付请求参数，与wx.requestCommonPayment参数一致 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
# 1.6 组件事件
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| bindcheckChange | eventhandle | 否 | checkbox 的值改变后的回调，可以和 checkValue 属性配合实现双向绑定的效果 |
| bindconfirmPay | eventhandle | 否 | 支付按钮点击的回调 |
| bindpaySuccess | eventhandle | 否 | B2b 微信支付成功的回调, 由于银行转账支付需要跳转银行 app，因此不会触发这个事件 |
| bindpayFail | eventhandle | 否 | B2b 微信支付和银行转账支付失败的回调，使用微信支付时，错误信息可参考 wx.requestCommonPayment |
| bindinvalidLibVersion | eventhandle | 否 | 使用 B2b 微信支付基础库版本不兼容时触发 |
# 1.7 组件 slot
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| morePayChannel | Slot | 否 | 可以自定义支付渠道 |
通过使用 name="morePayChannel" 的 slot，可以自定义支付渠道，示例如下：
<view>
<pay-table
id="payTable"
checkValue="{{checkValue}}"
payButtonText="{{payButtonText}}"
bindcheckChange="handleCheckChange"
bindconfirmPay="handleConfirmPay"
payData="payData"
>
<view slot="morePayChannel">
<radio-group bindchange="hanldeRadioChange">
<view class="pay-item">
<view>
<view>
<view class="pay-channel-name">余额支付</view>
</view>
</view>
<radio value="BALANCEPAY" checked="{{checkValue === 'BALANCEPAY'}}" />
</view>
</radio-group>
</view>
</pay-table>
</view>
// @ts-ignore
const plugin = requirePlugin("自定义组件名");
const buttonText = {
WEIQIPAY: "腾讯银行转账",
BALANCEPAY: "余额支付",
WECHATPAY: "微信支付",
};
Page({
data: {
checkValue: "",
payButtonText: "",
payData: {},
},
handleCheckChange(e) {
console.log("handleCheckChange", e);
this.setData({
checkValue: e.detail,
payButtonText: `${buttonText[e.detail]} ¥500`,
});
},
handleConfirmPay(e) {
console.log("handleConfirmPay", e);
},
hanldeRadioChange(e) {
this.setData({
checkValue: e.detail.value,
});
},
});