<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Test</title>
    <link rel="stylesheet" href="__STATIC__/h5sdk/game/css/index.css">
  </head>
  <body>
    <div class="init">
      <div class="init_body">
        <a id="login" href="javascript:;" class="init_item">登录</a>
        <input type="text" id="amount" class="init_item" style="width: 100%; background-color: rgba(0, 0, 0, 0.5);"
               placeholder="请输入要充值的金额">
        <a id="pay" href="javascript:;" class="init_item">充值</a>
        <a id="uprole" href="javascript:;" class="init_item">发送角色信息</a>
        <a id="logout" href="javascript:;" class="init_item">退出登录</a>
        <a id="switch" href="javascript:;" class="init_item">切换账号</a>
      </div>
    </div>

    <script src="__STATIC__/h5sdk/js/huosdk.js?v={:config('js_version')}"></script>
    <script>
      if (/micromessenger/i.test(navigator.userAgent)) {
          $('#login, #switch').hide()
      }

      // 注册全局回调函数
      HuoSdk.callback = {
          init  : function (res) {
              console.info('init callback', res)
          },
          login : function (res) {
              console.info('login callback', res)
          },
          pay   : function (res) {
              console.info('pay callback', res)
          },
          uprole: function (res) {
              console.info('uprole callback', res)
          },
          logout: function (res) {
              console.info('logout callback', res)
              if (res.status === 2 && res.isSwitch) {
                  HuoSdk.login()
              }
          }
      }

      // 初始化
      HuoSdk.init({
          app_id: '{$app_id}',
          mem_id: '{$mem_id}'
      })

      // 登录
      document.querySelector('#login').onclick = function () {
          HuoSdk.login()
      }

      // 支付
      document.querySelector('#pay').onclick = function () {
          HuoSdk.pay({
              'order-order_id'     : new Date().getTime(),
              'order-currency'     : 'CNY',
              'order-cp_order_id'  : 10000,
              'order-product_price': $('#amount').val() || 1,
              'order-product_id'   : 1,
              'order-product_name' : '金币',
              'order-product_desc' : '',
              'order-ext'          : '123123',
              'role-event'         : 5,
              'role-server_id'     : '',
              'role-server_name'   : '',
              'role-role_id'       : '',
              'role-role_name'     : '',
              'role-role_level'    : 0,
              'role-role_vip'      : 0
          })
      }

      // 支付
      document.querySelector('#uprole').onclick = function () {
          HuoSdk.uprole({
              'role-event'      : 5,
              'role-server_id'  : random([1001, 1002, 2001, 2014, 3025]),
              'role-server_name': random(['五谷丰登', '南蛮入侵', '万箭齐发', '无懈可击']),
              'role-role_id'    : random([20323, 31233, 30012, 10323]),
              'role-role_name'  : random(['张三', '李四', '王五']),
              'role-role_level' : 0,
              'role-role_vip'   : 0,
              'role-onlineTime' : 0,
              'role-scene'      : '',
              'role-axis'       : ''
          })
      }

      // 登出
      document.querySelector('#logout').onclick = function () {
          HuoSdk.logout()
      }

      // 切换
      document.querySelector('#switch').onclick = function () {
          HuoSdk.logout(true)
      }

      // 随机值
      function random(arr) {
          var r = Math.floor(Math.random() * arr.length)
          return arr[r]
      }
    </script>
  </body>
</html>