@33cn/vue-cashier 中文文档教程

Question

vue-cashier

安装

npm install @33cn/vue-cashier -S

或者

yarn add @33cn/vue-cashier -S

注意事项

• 进行不同币种兑换时，需要事先挂单。挂单都使用gameSymbol/walletSymbol方式挂买卖单
• walletSymbol就是用于充值的币,例如我用BTY充值成GBTY，BTY就是walletSymbol。
• gameSymbol就是充值后成为的币,例如我用BTY充值成GBTY，GBTY就是gameSymbol。

传参说明

币种A 兑换成 币种B
以wallet开头的参数，表示币种A
以game开头的参数，表示币种B

参数	类型	说明
visible	boolean	是否可见，通过.sync修饰符同步状态，使用v-show原理
closable	?boolean	默认为true，是否点击遮罩层就可关闭弹窗
canBack	?boolean	是否显示返回按钮，只有状态页面，该设置才生效
walletPlatform	string	币种A所在平台， 例如BTY的platform为bty
walletNodeUrl	string	币种A所在链的url， 例如BTY的url为https://jiedian1.bityuan.com:8801
walletSymbol	string	币种A的名称， 例如BTY的symbol为BTY
walletTradeAddress	string	币种A所在的链的trade合约地址
walletCurrencyShowName	?string	币种显示名称，可以不填。不填时显示为walletSymbol，例如para币想要显示成BTY，walletSymbol传入para，walletCurrencyShowName传入bty
walletIsToken	boolean	币种A是否存在于token合约中， 例如BTY存在于coins合约，isToken为false，CCNY存在于token合约，isToken为true
gamePlatform	string	币种B所在平台， 例如GBTY的platform为game
gameNodeURL	string	币种B所在链的url， 例如GBTY的url为http://47.244.141.185:8901
gameSymbol	string	币种B的名称， 例如GBTY的symbol为GBTY
gameTradeAddress	string	币种B所在的链的trade合约地址
gameCurrencyShowName	string	与walletCurrencyShowName类似
gameIsToken	boolean	币种B是否存在于token合约中， 例如GBTY存在于coins合约，isToken为false
address	string	用户地址
pendingOrderAddr	string	挂单用户地址
pendingOrderQueryUrl	string	当前链数据服务所在节点的url,例如GBTY的数据服务的url为http://47.100.234.232:20022
exchangeRate	number	兑换比例 1 * 币种B = exchangeRate * 币种A
rechargeNumber	string	充值数量，即需要兑换获得rechargeNumber个gameSymbol
withdrawNumber	string	提现数量，即需要兑换获得withdrawNumber个walletSymbol
maxDecimalDigit	number	支持的最大充提数目的小数位数
ifKeepPriv	?boolean	是否保留私钥缓存，默认false

事件

类型	参数	说明
rechargeStart	无	充值开始时触发
withdrawStart	无	提现开始时触发
success	{ isRecharge, step }	充提成功时触发
fail	{ isRecharge, error: this.error, step }	充提失败时触发

定时器函数

executeTxAndQueryHashInterval({ address, walletSymbol, gameSymbol, callback, })

参数	类型	说明
address	string	用户地址
walletSymbol	string	币种A的名称
gameSymbol	string	币种B的名称
interval	?number	定时器(交易执行和查询交易)时间间隔，单位毫秒，默认5000
callback({ rechargeStatus, withdrawStatus })	?Function	每一次定时器执行完毕后的回调函数

callback参数说明

参数	类型	说明
rechargeStatus	{ isError: boolean, isComplete: boolean, step: number }	充值交易结果
withdrawStatus	{ isError: boolean, isComplete: boolean, step: number }	提现交易结果

• 返回值
• 清除定时器的函数

测试用例

import '@33cn/vue-cashier/dist/vue-cashier.css'
import FzmCashier from '@33cn/vue-cashier'

Vue.use(FzmCashier)

<FzmCashier 
  :visible.sync="visible"
  address = '1P7P4v3kL39zugQgDDLRqxzGjQd7aEbfKs'
  walletPlatform = "bty"
  walletNodeUrl = "https://jiedian1.bityuan.com:8801"
  walletSymbol = "BTY"
  :walletIsToken = "false"
  gamePlatform = "game"
  gameNodeURL = "http://47.244.141.185:8901"
  gameSymbol = "GBTY"
  :gameIsToken = "false"
  :exchangeRate = "1"
  pendingOrderAddr = "16eLrhNdojfhmaFPV8czBrLgUBX5Xcr6gM"
  pendingOrderQueryUrl = "http://47.100.234.232:20022" />

import { executeTxAndQueryHashInterval } from '@33cn/vue-cashier'

  mounted () {
    const callback = ({
      rechargeStatus,
      withdrawStatus
    }) => {
      console.log('rechargeStatus', rechargeStatus)
      console.log('withdrawStatus', withdrawStatus)
    }

    getCurrentBTYAddress().then(address => {
      this.address = address
      console.log('address', this.address)
      this.intervalTimer = executeTxAndQueryHashInterval({
        address,
        gameSymbol: 'para',
        walletSymbol: 'BTY',
        callback,
      })
    })
  },
  beforeDestroy () {
    this.intervalTimer && this.intervalTimer()
  },