@33cn/vue-cashier

vue的收银台组件

Usage no npm install needed!

<script type="module">
  import 33cnVueCashier from 'https://cdn.skypack.dev/@33cn/vue-cashier';
</script>

README

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()
  },