前言?

通過插件的形式，預先實現(xiàn)了一些頁面模板，例如退款頁模板，小程序開發(fā)者只需要直接引入相應插件，并且遵循插件約定的規(guī)范，與插件之間實現(xiàn)相互通信，即可完成相應的頁面，從而提高開發(fā)效率。

交易系統(tǒng)前端模板在頁面維度上提供了提單頁模板、退款頁模板等，模板的入口是一個pay-button 組件，通過該組件實現(xiàn)從小程序跳轉到前端模板頁面。

目錄

一 、在小程序中引入插件

二、pay-button交易按鈕

屬性說明

bind:pay 說明

bind:refund 說明

bind:applyrefund 說明

bind:getgoodsinfo 說明

bind:placeorder 說明

bind:error 說明

效果示例

Case 1 ：mode 為 1 或 不填 （組件的使用模式：已下單）

Case 2 ：mode 為 2 （組件的使用模式：立即搶購）

官方代碼示例

Case 1 ：mode 為 1 或不填

Case 2 ：mode 為 2，立即搶購

三、測試代碼示例

（1）下單（須真機調試否則抓取不到信息）

ttml

?js

（2）訂單詳情?

ttml

js?

四、報錯解決

一 、在小程序中引入插件

修改小程序全局配置文件 package.json 和 app.json。

package.json：

{
  "ttPlugins": {
    "dependencies": {
      // 配置插件名，版本等信息
      "microapp-trade-plugin": {
        "version": "1.1.2",
        "isDynamic": true
      }
    }
  }
}

app.json :

{
  "pages": [
    "pages/index/index",
    // 提單頁
    "ext://microapp-trade-plugin/order-confirm",
    // 退款申請頁配置
    "ext://microapp-trade-plugin/refund-apply",
    // 退款詳情頁
    "ext://microapp-trade-plugin/refund-detail"
  ]
}

二、pay-button交易按鈕

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/pay-button

屬性說明

bind:pay 說明

• 繼續(xù)支付：

// bind:refund 使用示例
handleContinutePay(event) {
    const { status, outOrderNo, result } = event.detail;
    if (status === 'success') {
        const { code } = result;
        if (code === 0) {
            // 繼續(xù)支付成功
        }
    } else {
        // 繼續(xù)支付失敗
    }
}

• 立即搶購
  • 當用戶在提單頁點擊「立即支付」按鈕后，會調起小程序收銀臺，當用戶實際完成了支付或選擇關閉收銀臺取消支付，以及預下單接口報錯時，前端模板會調用該方法。
  • 開發(fā)者可以在該方法中，根據(jù)支付返回結果，完成開發(fā)者自定義的邏輯，如跳轉訂單列表頁等。

/**
  * status: 支付狀態(tài)，'success' | 'fail'
  * orderId: 抖音交易系統(tǒng)內部訂單號，類型為 string
  * outOrderNo：開發(fā)者系統(tǒng)交易訂單號，類型為 string
  * result: 創(chuàng)建訂單、tt.pay 支付結果，類型為 object
*/
handlePay(event) {
    const { status , orderId , outOrderNo , result } = event.detail;
    if (status === 'success') {
        const { code } = result;
        if (code === 0) {
            // 支付成功
        } else {
            // 支付失?。ǔ瑫r、取消、關閉）
        }
    } else {
        const { errMsg } = result;
    }
}

• 事件對象的 detail 為 object 類型，屬性如下：

result 屬性說明

object 類型，屬性如下：

• 當?status?為 success 時：

• 當?status?為 fail 時：

bind:refund 說明

// bind:refund 使用示例
handleRefund(event) {
    const { status, result } = event.detail;
    if (status === 'success') {
        const { refundId, outRefundNo } = result;
    } else {
        const { errMsg } = result;
    }
}

事件對象的 detail 為?object?類型，屬性如下：

result 屬性說明

object?類型，屬性如下：

• 當?status?為 success 時：

• 當?status?為 fail 時：

bind:applyrefund 說明

需要返回 promise，開發(fā)者可以在 promise 中做退款參數(shù)的設置，并將需要透傳的退款參數(shù)作為返回值傳入 resolve 函數(shù)。

• 若無需傳入 extra 參數(shù)，該方法可不填。

// bind:applyrefund 使用示例
applyRefund(event) {
    const { orderId } = event.detail;
    const extra = { orderId }; // 開發(fā)者需要透傳的參數(shù)，可自定義內容
    return new Promise(resolve => {
      resolve(extra);
    });
  },

• 事件對象的 detail 為?object?類型，屬性如下：

指定金額退款

指定金額退時，需要通過 bind:applyrefund 傳入 itemOrderList。

itemOrderList 可和其他透傳參數(shù)一同通過 bind:applyrefund 傳入，可見下方代碼說明

itemOrderList 說明

itemOrderList 是一個長度最少為 1 的數(shù)組，不可傳遞 undefined 或 null。

// bind:applyrefund 指定金額退使用示例
applyRefund(event) {
    const { orderId } = event.detail;
    const itemOrderList = [
            {itemOrderId:'ot423412',refundAmount:100},
            {itemOrderId:'ot423413'},
        ]
    const extra = { orderId , itemOrderList };
    return new Promise(resolve => {
      resolve(extra);// extra 透傳至服務端時，當中的 itemOrderList 會被刪除
    });
  },

bind:getgoodsinfo 說明

• 需要返回 promise，開發(fā)者可以在 promise 中獲取相關商品信息，并將商品信息作為返回值傳入 resolve 函數(shù)。

// bind:getgoodsinfo 使用示例
// 非商品庫商品
getGoodsInfo(event) {
    const { goodsId } = event.detail;
    return new Promise(resolve => {
      // 在此處開發(fā)者可以進行商品數(shù)據(jù)請求，獲取商品信息
      // 然后將商品信息傳入 resolve 函數(shù)
      resolve({
        currentPrice: 9900,
        goodsName: '循禮門M+丨【釋集烤肉】99元  原價206.4元超值套餐',
        goodsPhoto:
          'https://p11.douyinpic.com/img/aweme-poi/product/spu/c050f399ac447daf2715e11e6976c2e2~noop.jpeg?from=3303174740',
        goodsLabels: [
            {type: 'EXPIRED_RETURNS'}, // 過期退
            {type: 'REFUND_ANYTIME'}, // 隨時退
            {type: 'BOOK_IN_ADVANCE', value: 2} // 提前2日預約
        ],
        minLimits: 1,
        maxLimits: 2,
        dateRule: '周一至周日可用',
        validation: {
            phoneNumber: {
                required: true  // 手機號是否必填, 為 ture則必填，false選填，默認選填
            }
        },
        extra: {}
      });
    });
}

// 商品庫商品
getGoodsInfo(event) {
    return new Promise(resolve => {
        // 在此處開發(fā)者可以進行商品數(shù)據(jù)請求，獲取商品信息
        // 然后將商品信息傳入 resolve 函數(shù)
        resolve({
            minLimits: 1,
            maxLimits: 2,
            dateRule: '周一至周日可用',
            validation: {
                phoneNumber: {
                    required: true  // 手機號是否必填
                }
            }
        });
    })
}

• 事件對象的 detail 為 object 類型，屬性如下：

• 商品信息說明如下：

GoodsLabel 類型說明

object 類型，屬性如下

type 的合法值

最多設置三個標簽，并且存在以下互斥關系：

• REFUND_ANYTIME?與?REFUNDABLE_DAYS?互斥，即 “隨時退” 與 “x 日內可退” 互斥。
• RESERVATION_FREE?與?BOOK_IN_ADVANCE?互斥，即 “免預約” 與 “提前 x 日預約” 互斥。
• NON_REFUNDABLE?與?REFUNDABLE_DAYS?REFUND_ANYTIME互斥，即 “不可退”與“隨時退” 、 “x 日內可退” 互斥。
• 只做展現(xiàn)。

bind:placeorder 說明

由于在前端模板中進行下單需要用戶登錄，所以建議在此處完成登錄或提醒用戶打開設置給予相應權限。

需要返回 promise，開發(fā)者可以在 promise 中完成用戶登錄，然后調用 resolve 函數(shù)。

• 若無法完成相關邏輯，則一定要觸發(fā) reject 方法，否則可能會導致后續(xù)跳轉失敗。

userLogin(event) {
const { goodsId , goodsType } = event.detail
    return new Promise((resolve, reject) => {
        tt.login({
            success() {
                // 用戶登錄成功并獲取信息，則調用 resolve 函數(shù)，跳轉至提單頁
                resolve();
            },
            fail() {
                // 用戶登錄失敗，則跳轉提單頁失敗
                reject();
            }
        });
    });
  },

• 事件對象的 detail 為 object 類型，屬性如下：

bind:error 說明

• 當錯誤發(fā)生時觸發(fā)。
• 錯誤原因可能是因為必填參數(shù)不合法，服務端請求錯誤等。

// 錯誤信息含義見下文 bind:error報錯信息
handleError(event) {
    const { errMsg ，errNo} = event.detail;
}

• 事件對象的detail 為 object 類型，屬性如下：

<pay-button ... //任意模式下均可使用bind:error bind:error="handleError" />

bind:error 報錯信息

errorHandler(event){
    const { errNo , errMsg } = event.detail
    // do something
    // errNo（錯誤碼，對應某種具體報錯原因）
    // errMsg（報錯信息）
}

效果示例

Case 1 ：mode 為 1 或 不填 （組件的使用模式：已下單）

Case 2 ：mode 為 2 （組件的使用模式：立即搶購）

根據(jù)?goods-type?商品類別分為：

• 商品庫商品：
  • 庫存大于 0：根據(jù)商品售賣時段，展示狀態(tài)分為：即將開始、立即搶購和已結束。
  • 庫存等于 0：展示狀態(tài)為已售罄。
• 非商品庫商品：
  • 展示狀態(tài)：立即搶購。
  • 

• 操作效果：點擊后進入提單頁。
  • 

Case 3 ：KA 解決方案退款場景

• 常用于order-status?為 1 的情況：

?

• 操作效果：點擊后進入申請退款頁面。
• 

官方代碼示例

Case 1 ：mode 為 1 或不填

• 繼續(xù)支付：

<pay-button order-status="{{0}}" order-id="xxx" bind:pay="onContinutePay" />

• 申請退款：
  • 使用交易系統(tǒng)生成的新訂單：

<pay-button
  order-status="{{1}}"
  order-id="xxx"
  bind:refund="onRefund"
  bind:applyrefund="applyRefund"
/>

• • 對于交易系統(tǒng)之前的老訂單，需傳入 refund-total-amount：

// 示例：老訂單申請退款 200 元
<!--
    使用交易模板 1.0 生成的老訂單，申請退款需要 refudnrefund-total-amount
    若無需傳入 extra 參數(shù)，則無需 bind:applyrefund 方法
-->
<pay-button
  order-status="{{1}}"
  order-id="xxx"
  bind:refund="onRefund"
  bind:applyrefund="applyRefund"
  refund-total-amount="{{20000}}"
/>

• 退款中：

<pay-button order-status="{{2}}" refund-id="xxx" />

• 退款成功：

<pay-button order-status="{{3}}" refund-id="xxx" />

• 退款失?。?/li>

<pay-button order-status="{{4}}" refund-id="xxx" />

Case 2 ：mode 為 2，立即搶購

<!-- 商品庫商品 -->
<pay-button
  mode="{{2}}"
  goods-type="{{1}}"
  goods-id="xxxx"
  bind:getgoodsinfo="getGoodsInfo"
  bind:placeorder="userLogin"
  bind:pay="onPay"
/>

<!-- 非商品庫商品 -->
<pay-button
  mode="{{2}}"
  goods-type="{{2}}"
  goods-id="xxxx"
  bind:getgoodsinfo="getGoodsInfo"
  bind:placeorder="userLogin"
  bind:pay="onPay"
/>

三、測試代碼示例

（1）下單（須真機調試否則抓取不到信息）

ttml

 <pay-button
      mode="{{2}}"
      goods-type="{{1}}"
      goods-id="xxx"
      bind:getgoodsinfo="getGoodsInfo"
      bind:placeorder="userLogin"
      bind:pay="onPay"
      bind:error="bindError"
    />

?js

Page({
  data: {
    goodId:''
  },
getGoodsInfo(event) {
  return new Promise(resolve => {
    // 在此處開發(fā)者可以進行商品數(shù)據(jù)請求，獲取商品信息
    // 然后將商品信息傳入 resolve 函數(shù)
    resolve({});
})
},
bindError(event){
  const { errNo , errMsg } = event.detail
  console.log('errMsg')
  console.log(event.detail)
  console.log(errMsg)
  console.log(errNo)
},
onPay(event) {
    console.log(event.detail);
    const { status, outOrderNo, result,orderId } = event.detail;
    if (status === 'success') {
        const { code } = result;
        console.log(result);
        if (code === 0) {
            // 繼續(xù)支付成功
            console.log('支付成功');
            setTimeout(() => {
              tt.redirectTo({
                url: `usr://pages/orderDetail/orderDetail?orderId=${orderId}`,
                success: (res) => {
                  console.log("redirectTo調用成功 ", res);
                },
                fail: (res) => {
                  console.log("redirectTo調用失敗 ", res);
                },
              });
            }, 1000)       
        }
    } else {
        console.log('支付失敗')
    }
},
userLogin(event) {
  console.log('用戶登錄');
  console.log(event);
  const { goodsId , goodsType } = event.detail
      return new Promise((resolve, reject) => {
          tt.login({
              success() {
                // 用戶登錄成功并獲取信息，則調用 resolve 函數(shù)，跳轉至提單頁
                  resolve();
              },
              fail() {
                  // 用戶登錄失敗，則跳轉提單頁失敗
                  reject();
              }
          });
      });
    },
  onShow(){

  },
  onReady: function () {

  },
  onLoad:function(options){

});

（2）訂單詳情?

ttml

<view class="order_wrap">
    <view class="order_top">
        <view class="title">訂單已支付</view>
        <view class="btn">
       <view tt:if="{{orderOutId}}">
        <pay-button
            order-status="{{1}}"
            order-id="{{orderOutId}}"
            bind:refund="onRefund"
            bind:error="bindError"
            bind:applyrefund="applyRefund"
          />
          <pay-button order-status="{{2}}" refund-id="{{orderOutId}}" />
       </view>
        </view>
    </view>
    <view class="task_list">
        <view class="task_list_l">
          <image src="https://p11.douyinpic.com/img/aweme-poi/product/spu/c050f399ac447daf2715e11e6976c2e2~noop.jpeg?from=3303174740"></image>
        </view>
        <view class="task_list_r">
          <view class="task_rtop">
            <view class="task_list_tit">測試商品</view>
          <view class="task_list_concesson">
          </view>
          <view class="task_rbot" tt:if="{{orderOutId}}"> 
            <view class="rbot_time">orderid：{{orderOutId}}</view>
          </view>
        </view>
      </view>
</view>
<view>
    <consume-card
        order-id="{{orderOutId}}"
        bind:consume="orderChangeHandler"
        bind:refund="onRefund"
        bind:applyrefund="applyRefund"
        bind:error="bindError"
            ></consume-card>
</view>
<view class="apply_shop">
    <view>適用門店(1)</view>
    <view>測試</view>
    <view>營業(yè)時間 11:00-次日00:00</view>
    <view>世紀大廈8層</view>
    <view>商家資質信息展示</view>
</view>
</view>

js?

  Page({
    data: {
      orderInfo:{},
      orderOutId:''
    },
    orderChangeHandler(event){
      const { orderId } = event.detail
      //do something
  },
  bindError(event){
    const { errNo , errMsg } = event.detail
    console.log('errMsg')
    console.log(event.detail)
    console.log(errMsg)
    console.log(errNo)
  },
  // bind:applyrefund 使用示例
  applyRefund(event){
    const { orderId } = event.detail;
    const extra = { orderId }; // 開發(fā)者需要透傳的參數(shù)，可自定義內容
    console.log(orderId)
    console.log(111)
    return new Promise(resolve => {
      resolve(extra);
    });
  },
  // bind:refund 使用示例
  onRefund(event) {
      const { status, result } = event.detail;
    console.log(event.detail);
      if (status === 'success') {
          const { refundId, outRefundNo } = result;
          console.log(result);
      } else {
          const { errMsg } = result;
      }
  },
  //核銷訂單后觸發(fā)
  orderChangeHandler(event){
    const { orderId } = event.detail
    //do something
  },


    onLoad: function (options) {
      let that=this
      console.log(options);
    if(options.orderId){
      that.setData({
        orderOutId:options.orderId
      })
      console.log('調用接口');
    }
    }
  })

四、報錯解決

?由于在pay-button組件內部使用的原生跳轉方法不生效，在路徑前加上user://即可

?其他服務端錯誤不做敘述了，有問題可以留言交流文章來源地址http://www.zghlxwxcb.cn/news/detail-415078.html

到了這里，關于字節(jié)小程序交易組件使用指南的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！