前置优惠组件接入文档
接入指南
接入说明
场景 | 支持在哪里接入 | 是否支持页面组件 |
---|---|---|
商品领券,展示券场景 | 小程序商品详情页接入小程序商品订单页接入 | 否 |
会员积分优惠 | 小程序商品详情页接入 | 是 |
会员等级专享价优惠 | 小程序商品详情页接入 | 是 |
消费金优惠 | 小程序商品详情页接入小程序商品订单页接入 | 是 |
1.
2.
1.

2.

接入流程

使用须知
接入指引
1、在小程序中声明使用插件
app.json
中声明使用插件。tradePay
指组件名,支持由用户自行定义,使用组件时以自定义名称为准。{
"plugins": {
"tradePay": {
"version": "*", // 目前只支持设置 * ,自动选择版本
"provider": "2021003178648009" // 组件Id,固定不变
},
}
}
2、商品详情页获取优惠信息
getDetailPageDiscountInfo()
获取优惠信息。参数详情可查看 商品详情页获取优惠信息。// 引入插件
const plugin = requirePlugin('tradePay');
Page({
async onLoad() {
const params = {
// 仅为代码说明,具体参数参考入参表格!
itemDetailInfo: {
outItemId: 'zh030206',
outSkuId: 'zh030206-1',
price: '100.1',
},
};
const res = await plugin.getDetailPageDiscountInfo(params) || {};
const {
success,
resultCode, // 错误码
resultMsg, // 错误信息
showStatus, // 是否要展示组件
buyRestrict, // 是否允许购买
consultDetailInfoList = [], // 商品每个sku的优惠信息详情
} = res;
if (!success) {
console.error('商详前置优惠接口失败');
}
......
}
});

3、商品订单页获取优惠信息
getOrderPageDiscountInfo()
获取优惠信息。参数详情可查看 商品订单页获取优惠信息。// 引入插件
const plugin = requirePlugin('tradePay');
Page({
async onLoad() {
const params = {
// 订单详细信息,仅为代码说明,具体参数参考入参表格!
orderDetailInfo: {
amount: '2', // 订单总金额
itemDetailInfoList: [{
outItemId: 'zh030206',
outSkuId: 'zh030206-1',
price: '100.1', // 商品价格
quantity: 2, // 数量
}],
},
};
const discountResult = await plugin.getOrderPageDiscountInfo(params);
const {
success,
resultCode, // 错误码
resultMsg, // 错误信息
showStatus, // 是否要展示组件
buyRestrict, // 是否允许下单
activityConsultId, // 咨询ID,在调用支付 API 时回传
totalPromoAmount, // 平台优惠-总优惠金额
totalOrderAmount, // 平台优惠-总订单金额
voucherPromoAmount, // 券优惠金额
couponPromoAmount, // 红包优惠金额
channelPromoAmount, // 渠道优惠金额
promoAmountInfoList, // 优惠金额详细信息
itemConsultDetailInfoList, // 商品详细信息
voucherConsultInfoList, // 优惠详细信息
} = discountResult;
if (!success) {
console.error('下单前置优惠接口失败');
}
......
}
});
4、展示优惠组件
声明组件
plugin://${app.json里面声明的组件名称}/discountCard
;"usingComponents": {
// 商品订单页前置优惠组件
"order-discount-card": "plugin://tradePay/orderDiscountCard",
// 商品详情页前置优惠组件
"detail-discount-card": "plugin://tradePay/detailDiscountCard",
}
使用组件
success
状态(如:接口可能返回 null / { success: false, ...... }
,使用者应当自主优先判断抛弃前述异常情况下在小程序页面中做 setData() 操作引起前置优惠组件重新渲染),而不是将接口响应回传给前置优惠组件。<view>
<order/detail-discount-card
class=""
discountResponse="{ {「获取优惠信息」步骤中拿到的接口响应} }" //discountResult
/>
</view>
修改于 2023-11-21 08:03:55