注意：.main元素高度是min-height:100vh; 根元素#app高度是min-height:100vh;
<template>
<div class="main">
<div class="cont">
<div class="tip-box">
<p>提示：请您尽可能提供文献详细信息，反馈时间：3个工作日内。</p>
<p>方式一：文献标题或DOI号或备注网址等；</p>
<p>方式二：期刊名称、出版年份等至少三项信息。</p>
</div>
<ul class="info-form">
<li class="info-item">
<p class="item-label required">领域</p>
<p class="item-cont select"
@click="showPicker('domain')">
<span class="text default"
v-if="!searchInfo.docDomain">请选择领域</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: '', // 领域
docTitle: '',
docPeriodical: '',
docPeriodicalYear: '',
docPageNum: '',
docAuthor: '',
docDoiNum: '',
docRemark: ''
},
// 领域相关
depOps: ['肺癌', '消化道肿瘤', '肉瘤头颈肿瘤', '血液肿瘤', '泌尿妇科肿瘤', '其他'],
// 显示蒙层
isShowPicker: false,
currentPicker: '',
// 解决安卓手机软键盘把页面顶上去回不来的问题
originHeight: 0
}
},
methods: {
handleSave () {
if (!this.searchInfo.docDomain) {
return this.$toast('请选择领域')
}
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失焦时，软键盘收起页面底部出现空白且下次聚焦不灵敏的问题
handleBlur () {
window.scrollTo(0, 0)
},
// 安卓软键盘收起，页面底部出现空白且无法滚动的问题
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>
网友评论