H5 vue - scatte和唤起键盘bug

1. shiyong

<!--  -->
<template>
  <div class="formInvite">
    <div class="formInvite-tel">
      <input
        type="text"
        ref="resize"
        placeholder="请输入手机号"
        @focus="inpFocus"
        @blur="inpBlur"
        v-model="phone"
      />
    </div>
    <div class="formInvite-yz">
      <input placeholder="请输入验证码" @focus="inpFocus" @blur="inpBlur" type="text" />
      <span>58秒后重发</span>
    </div>
    <div class="back formInvite-bt">注册</div>
  </div>
</template>


<script>

// foucse
export default {
  data () {
    return {
      phone: "15511115555"
    };
  },
  computed: {},
  beforeMount () { },
  mounted () {

  },
  methods: {

  },
  watch: {}

}

</script>

<style lang='scss' scoped>
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
  font-size: 14px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
  font-size: 14px;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999999;
  font-size: 14px;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
  font-size: 14px;
}

$width-inp: 290px;

.formInvite {
  width: 100%;
  @extend .flex;
  justify-content: center;
  flex-direction: column;
  &-tel {
    width: $width-inp;
    height: 40px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(253, 238, 241, 1);
      border-radius: 6px;
      border: none;
      outline: none;
      font-size: 14px;
      padding: 0 15px;
      // letter-spacing: 0.2px;
    }
  }

  &-yz {
    margin: 10px 0;
    width: $width-inp;
    height: 40px;
    @extend .flex;
    input {
      padding: 0 15px;
      width: 174px;
      height: 100%;
      background: rgba(253, 238, 241, 1);
      border-radius: 6px;
      border: none;
      outline: none;
      color: #333333;
      font-size: 14px;
      padding: 0 15px;
    }

    span {
      width: 100px;
      height: 40px;
      @extend .flex;
      justify-content: center;
      background: rgba(255, 180, 68, 0.42);
      border-radius: 6px;
      border: 1px solid rgba(252, 255, 106, 1);
      font-size: 16px;
      color: rgba(252, 255, 106, 1);
    }
  }

  &-bt {
    @extend .flex;
    justify-content: center;
    color: rgba(255, 255, 255, 1);
    width: $width-inp;
    font-size: 16px;
    height: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    background: linear-gradient(
      180deg,
      rgba(255, 234, 26, 1) 0%,
      rgba(255, 186, 11, 1) 100%
    );
    box-shadow: 0px 4px 1px 0px rgba(176, 108, 3, 1);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
  }
}
</style>

2minx

/*
 * @Description:
 * @Author: 熊成强
 * @Date: 2019-07-17 15:45:06
 * @LastEditTime: 2019-09-27 09:12:22
 * @LastEditors: xcq
 */

let mixin = {
  data () {
    return {
      isCanScroll: false
    }
  },
  watch: {
    isCanScroll (val) {
      if (val) {
        this.$refs.resize.scrollIntoView();
      }
    },
  },
  mounted () {
  },
  methods: {
    // ios键盘收起操作
    isIphoneX () {
      return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
    },

    inpBlur () {
      //输入焦点处理
      let scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
      //console.log(scrollTop)
      window.scrollTo(0, scrollTop - 10)

      let val = this.isandroid();
      if (!val) {
        // true 滚动后的元素上边框与浏览器顶部对齐
        this.isCanScroll = true;
      }
    },
    // ios键盘唤起监听
    inpFocus () {
      let val = this.isandroid();
      if (!val) {
        // 事件监听，false 滚动后的元素下边框与浏览器顶部对齐
        this.isCanScroll = false;
      }
    },
    //判断是否是安卓
    isandroid () {
      let u = navigator.userAgent,
        app = navigator.appVersion;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      if (isAndroid) {
        return true;
      } else {
        return false;
      }
    }
  }
}

export default mixin

3 scatte

/*
 * @Description: scatter.js
 * @Author: wangyun
 * @Date: 2019-07-06 14:45:59
 * @LastEditTime: 2019-07-25 10:28:58
 */

import ScatterJs from 'scatterjs-core'
import EosPlugin from 'scatterjs-plugin-eosjs2'
import {
  JsonRpc,
  Api
} from 'eosjs'

ScatterJs.plugins(new EosPlugin())

const debug = process.env.NODE_ENV !== 'production'

let devNetWork = ScatterJS.Network.fromJson({
  blockchain: 'eos',
  protocol: 'https',
  host: 'api-kylin.eosasia.one',
  port: 443,
  chainId: '5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191'
})

let proNetWork = ScatterJS.Network.fromJson({
  blockchain: 'eos',
  protocol: 'https',
  host: 'api-mainnet.starteos.io',
  port: 443,
  chainId: 'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906'
})

let network = debug ? devNetWork : proNetWork


// const network = {
// blockchain: 'eos',
// protocol: 'http',
// host: 'jungle2.cryptolions.io',
// port: 80,
// chainId: 'e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473'
// } // jungle2

let rpc = new JsonRpc(network.fullhost())
let scatterConnected = false
let loginAccount = null

export default {
  async s_connect() {
    if (scatterConnected === false) {
      if (await ScatterJs.connect('USDE', {
          network
        }) === false) {
        return {
          result: false,
          error: 'please install scatter first'
        }
      }

      let identity = await ScatterJs.getIdentity()

      loginAccount = identity.accounts.find(a => a.blockchain === 'eos')
      if (loginAccount === null) {
        return {
          result: false,
          error: 'occur erros while getting scatter identity'
        }
      }

      scatterConnected = true
    }
    return {
      result: true,
      error: '',
      loginAccount: loginAccount
    }
  },

  async s_logout() {
    if (loginAccount) {
      await ScatterJs.forgetIdentity()
    }
  },
  s_getAccountName() {
    if (loginAccount !== null) {
      return loginAccount.name
    } else {
      return ''
    }
  },

  async s_getUSDEamount() {
    if (scatterConnected === false || loginAccount === null) {
      return {
        result: false,
        error: 'need to login before getting amount data'
      }
    }
    let rows = null
    try {
      let token = debug ? 'eosiofortoke' : 'usdetotokens' // touken认证
      rows = await rpc.get_currency_balance(token, loginAccount.name, 'USDE')
    } catch (e) {
      return {
        result: false,
        error: e
      }
    }
    return {
      result: true,
      rows: rows
    }
  }, // 获取USDE数量
  async s_buy(options, sign = true) {
    if (scatterConnected === false || loginAccount === null) {
      return {
        result: false,
        error: 'need to login before getting table data'
      }
    }

    console.log(loginAccount)
    const eos = ScatterJs.eos(network, Api, {
      rpc,
      beta3: true
    })
    let txJson = null
    let action = {
      actions: [{
        // account: 'eosiofortoke', // 测试
        // account: 'usdetotokens', //线上
        account: debug ? 'eosiofortoke' : 'usdetotokens',
        name: 'transfer',
        authorization: [{
          actor: loginAccount.name,
          permission: loginAccount.authority
        }],
        data: {
          from: loginAccount.name,
          to: `bitchgetters`,
          quantity: `${Number(options.money).toFixed(4)} USDE`,
          memo: 'test0123456789',
        }
        //  packed_trx 
        // `wish:${options.count} EOS|${options.content}`
      }]
    }
    try {
      if (sign) {
        txJson = await eos.transact(action, {
          broadcast: false,
          forceActionDataHex: true,
          sign: true,
          blocksBehind: 3,
          expireSeconds: 60
        })
      } else {
        txJson = await eos.transact(action, {
          blocksBehind: 3,
          expireSeconds: 60
        })
      }
    } catch (e) {
      return {
        result: false,
        error: e
      }
    }
    return {
      result: true,
      json: txJson
    }

  }
}