安卓手机底部被软键盘顶起遮挡按钮的问题

<template>
  <section class="container">
    <div class="ask_wrap">
      <p class="ask-title">
        问题描述
      </p>
      <div class="ask_txt">
        <van-field v-model="msg"
                   autosize
                   :maxlength='300'
                   row='5'
                   type="textarea"
                   class='textarea'
                   placeholder="请输入问题内容"
                   @focus="handleFocus"
                   @blur="handleBlur" />
        <div class="text-tip">
          {{contentLen}}/300
        </div>
      </div>
      <div class="tip">
        提问的内容将在7个工作日内进行回复
      </div>
      <div class="btn-wrap">
        <button class="btn submit-btn"
                @click="submit" :class='{active: contentLen}'>确认提交</button>
      </div>
      <!-- :disabled="!isSubmit" -->
    </div>
    <footer v-show="isShowFooter" class='footer'>
      <div class="footer-main">
        <div class="footer-title">
          如需帮助:请拨打客服电话400-670-3600
        </div>
        <img src="../../assets/img/home_ic_logo1@3x.png" alt="">
      </div>
    </footer>
    <!-- 报名成功弹框 -->
    <success-alert v-if='showSuccess'
                   title='提交成功'
                   desc='关于您的疑惑我们会尽快回复，请注意查收'
                   padding='15px 20px 30px'
                   @close='showSuccess = false'>
    </success-alert>
  </section>
</template>
<script>
import { CellGroup, Field } from 'vant'
import { CheckForm } from '@/assets/js/mixin'
import successAlert from '@/components/success-alert'

export default {
  name: 'consultAsk',
  mixins: [CheckForm],
  components: {
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    successAlert
  },
  data () {
    return {
      isCertification: false,
      phone: '',
      email: '',
      msg: '',
      showSuccess: false,
      isShowFooter: true,
      originalHeight: 0
    }
  },
  computed: {
    phoneNumber: {
      get () {
        let phone = this.phone
        if (phone) {
          phone = phone.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim()
        }
        return phone
      },
      set (val) {
        this.phone = val.replace(/\s/g, '')
      }
    },
    contentLen () {
      return this.msg.length
    },
    isSubmit () {
      if (this.phone &&
        this.checkTel(this.phone) &&
        this.code) return true
      return false
    }
  },
  methods: {
    // 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题
    handleFocus () {
      if (!this.isIOS()) {
        this.isShowFooter = false
      }
    },
    // 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题
    handleBlur () {
      setTimeout(() => {
        this.isShowFooter = true
      }, 200)
    },
    submit () {
      if (!this.msg) {
        this.$toast('请填写问题内容')
        return
      }
      // this.$router.go(-1)
      let url = `/portal/${localStorage.getItem('appid')}/user/${localStorage.getItem('openid')}/suggestion`
      let params = {
        classify: 0,
        content: this.msg
      }
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '正在提交'
      })
      this.$posts(url, params).then(rsp => {
        this.$toast.clear()
        if (rsp.code === 200) {
          // this.$toast(rsp.message)
          this.showSuccess = true
          this.msg = ''
          // setTimeout(() => {
          //   this.$router.go(-1)
          // }, 800)
        } else {
          this.$toast(rsp.message)
        }
      }, e => {
        this.$toast.clear()
        // this.$toast(e.response.data.message)
      })
    },
    // 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题
    handleWindowSize () {
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight - 0 < this.originalHeight - 0) {
        // 当软键盘弹起，在此处操作
        this.isShowFooter = false
      } else {
        // 当软键盘收起，在此处操作
        this.isShowFooter = true
      }
    }
  },
  mounted () {
    this.originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', this.handleWindowSize)
  },
  created () {
    this.isCertification = localStorage.getItem('isAuth')
    this.phone = localStorage.getItem('userPhone') === 'undefined' ? '' : localStorage.getItem('userPhone')
    this.email = localStorage.getItem('userEmail') === 'undefined' ? '' : localStorage.getItem('userEmail')
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleWindowSize)
  }
}
</script>
<style lang="stylus" scoped>
.footer
  position fixed
  bottom 20px
  width 100%
  .footer-main
    display flex
    align-items center
    flex-direction column
    justify-content center
    width 100%
    .footer-title
      pacity 0.6
      font-family PingFangSC-Regular
      font-size 14px
      color #646363
      margin-bottom 28px
      letter-spacing 0.14px
    img
      width 93px
      height 18px
.tip
  margin-top 12px
  color #646363
  font-size 14px
.btn-wrap
  margin-top 54px
  display flex
  justify-content center
  .submit-btn
    width 300px
    height 45px
    font-size 16px
    color #fff
    background-color #B8B9BB
    &.active
      color #231916
      background-color #FFC700
.textarea
  width 100%
.container
  width 100%
  height 100vh
  background-color #F6F6F6
.ask_wrap >>>
  .field_wrap
    padding 14px 0
  label
    width 4em
  textarea
    font-size 16px
.ask_wrap
  position relative
  overflow hidden
  padding 16px 16px
  .ask-title
    font-size 16px
    color #000
    margin-bottom 12px
  .ask_field
    padding 0 15px
    border-radius $border-r
    background-color $color-ipt-bg
  .field
    margin 0
    border-bottom 1PX solid $color-bd
    border-radius 0
  .ask_txt
    border-radius 4px
    background-color #FEFEFE
    height 145px
    width 100%
    padding 11px 0 24px
    position relative
    .text-tip
      position absolute
      right 15px
      color #BEBEBE
      bottom 10px
      font-size 14px
    >>> .van-field
      background-color transparent
      font-size 14px
      height 110px
      line-height 24px
      padding 0px 15px
      box-sizing border-box
    >>> .van-cell::after
      display none
    >>> textarea
      font-size 14px!important
</style>