注意：.main元素高度是min-height:100vh; 根元素#app高度是min-height:100vh;

<template>
  <div class="main">
    <div class="cont">
      <div class="tip-box">
        <p>提示：請您盡可能提供文獻詳細信息案疲，反饋時間：3個工作日內(nèi)燥狰。</p>
        <p>方式一：文獻標題或DOI號或備注網(wǎng)址等摩梧；</p>
        <p>方式二：期刊名稱渗稍、出版年份等至少三項信息。</p>
      </div>
      <ul class="info-form">
        <li class="info-item">
          <p class="item-label required">領(lǐng)域</p>
          <p class="item-cont select"
            @click="showPicker('domain')">
            <span class="text default"
              v-if="!searchInfo.docDomain">請選擇領(lǐng)域</span>
            <span class="text">{{searchInfo.docDomain}}</span>
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">文獻標題</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入文獻標題"
              v-model="searchInfo.docTitle"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">期刊名稱</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入期刊名稱"
              v-model="searchInfo.docPeriodical"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">出版年份</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入出版年份"
              maxlength="4"
              v-model="searchInfo.docPeriodicalYear"
              oninput="value=value.replace(/[^\d]/g,'')"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">卷期/頁碼</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入卷期/頁碼"
              v-model="searchInfo.docPageNum"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">作者</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入作者"
              v-model="searchInfo.docAuthor"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">DOI號</p>
          <p class="item-cont">
            <input type="text" placeholder="請輸入DOI號"
              v-model="searchInfo.docDoiNum"
              @blur="handleBlur()">
          </p>
        </li>
        <li class="info-item">
          <p class="item-label">備注</p>
          <p class="item-cont">
            <textarea type="text" rows="5" placeholder="備注"
              v-model="searchInfo.docRemark"
              @blur="handleBlur()">
            </textarea>
          </p>
        </li>
      </ul>
      <div class="btn"
        @click="handleSave()">提交</div>
    </div>
    <van-popup
      v-model="isShowPicker"
      position="bottom">
      <!-- 科室 -->
      <van-picker v-if='currentPicker === "domain"'
        class="picker-wrapper"
        :class="{android: !isIOS()}"
        show-toolbar
        ref="depPicker"
        value-key='value'
        :columns="depOps"
        @cancel="cancelSelect"
        @confirm="confirmDep" />
    </van-popup>
  </div>
</template>
<script>
import { Popup, Picker } from 'vant'
export default {
  components: {
    [Popup.name]: Popup,
    [Picker.name]: Picker
  },
  data () {
    return {
      isLoading: false,
      // 表單
      searchInfo: {
        docDomain: '', // 領(lǐng)域
        docTitle: '',
        docPeriodical: '',
        docPeriodicalYear: '',
        docPageNum: '',
        docAuthor: '',
        docDoiNum: '',
        docRemark: ''
      },
      // 領(lǐng)域相關(guān)
      depOps: ['肺癌', '消化道腫瘤', '肉瘤頭頸腫瘤', '血液腫瘤', '泌尿婦科腫瘤', '其他'],
      // 顯示蒙層
      isShowPicker: false,
      currentPicker: '',
      // 解決安卓手機軟鍵盤把頁面頂上去回不來的問題
      originHeight: 0
    }
  },
  methods: {
    handleSave () {
      if (!this.searchInfo.docDomain) {
        return this.$toast('請選擇領(lǐng)域')
      }
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}/document/request/${localStorage.getItem('userId')}`
      let params = {
        wxAppid: this.WXAPPID,
        reqOrigin: 'DOC_SUPPORT',
        reqOriginType: 'FULL_TEXT_ACCESS'
      }
      params = Object.assign(params, this.searchInfo)
      this.$posts(url, params).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$router.push({ name: 'docSuccess' })
        }
      })
    },
    // 確定選擇科室
    confirmDep (data) {
      this.searchInfo.docDomain = data
      this.isShowPicker = false
    },
    // 顯示擇選擇組件
    showPicker (type) {
      this.currentPicker = type
      this.isShowPicker = true
    },
    // 隱藏選擇
    cancelSelect () {
      this.isShowPicker = false
    },
    // 解決IOS失焦時，軟鍵盤收起頁面底部出現(xiàn)空白且下次聚焦不靈敏的問題
    handleBlur () {
      window.scrollTo(0, 0)
    },
    // 安卓軟鍵盤收起，頁面底部出現(xiàn)空白且無法滾動的問題
    resizeHandler () {
      if (!this.isIOS()) {
        const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
        if (resizeHeight < this.originHeight) {
          console.log('彈起')
          document.querySelector('.main').setAttribute('style', 'height:' + this.originHeight + 'px;')
        } else {
          console.log('收起')
          document.querySelector('.main').setAttribute('style', 'height:100%;')
        }
      }
    }
  },
  created () {
    if (!localStorage.getItem('userId')) {
      this.$router.push({ name: 'login' })
    }
  },
  mounted () {
    this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', this.resizeHandler, false)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler, false)
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  min-height 100vh
  background #fff
  display flex
  flex-direction column
  justify-content space-between
  ::-webkit-input-placeholder /* WebKit browsers */
    font-size 14px !important
    color #BFBFBF !important
  :-moz-placeholder /* Mozilla Firefox 4 to 18 */
    font-size 14px !important
    color #BFBFBF !important
  ::-moz-placeholder /* Mozilla Firefox 19+ */
    font-size 14px !important
    color #BFBFBF !important
  :-ms-input-placeholder /* Internet Explorer 10+ */
    font-size 14px !important
    color #BFBFBF !important
  .cont
    width 100%
    .tip-box
      width 100%
      background: rgba(232, 154, 74, 0.1);
      line-height 20px
      font-size 12px
      color #E89A4A
      padded_box(border-box, 8px 11px 8px 16px)
    .info-form
      width 100%
      padded_box(border-box, 16px)
      .info-item
        width 100%
        display flex
        & + .info-item
          margin-top 12px
        .item-label
          width 63px
          line-height 36px
          font-size 14px
          color #666666
          &.required::before
            content '*'
            font-size 14px
            color #E6212A
            margin-right 2px
        .item-cont
          flex 1
          margin-left 18px
          &.select
            border-radius: 4px;
            border: 1px solid #E2E2E2;
            padded_box(border-box, 8px 24px 8px 8px)
            background url('~assets/img/icon_select@3x.png') no-repeat right 8px center/ 16px
            .text
              font-size 14px
              color #333
              &.default
                color #BFBFBF
          input
            width 100%
            height 36px
            line-height 20px
            font-size 14px
            color #333333
            border-radius: 4px;
            border: 1px solid #E2E2E2;
            padded_box(border-box, 8px)
            -webkit-appearance: none;
            box-shadow none
          textarea
            width 100%
            line-height 20px
            font-size 14px
            color #333333
            border-radius: 4px;
            border: 1px solid #E2E2E2;
            padded_box(border-box, 8px)
            resize none
            -webkit-appearance: none;
            box-shadow none
    .btn
      width 300px
      height 45px
      background #E6212A
      line-height 45px
      text-align center
      font-size 16px
      color #fff
      border-radius 23px
      margin 26px auto 0
</style>