详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)
[内容]当input输入框吊起键盘并且输入完后直接点击图片上传从系统相册返回的时候本身的那个tabbar会出来一半
重现步骤
[步骤]1.向input中输入内容(键盘属于吊起状态),点击选择图片,选择图片
[结果]原始的那个tabbar会出现半个
[期望]不出现tabbar
[如果语言难以表述清晰,可以拍一个视频或截图,有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX]1.4.7.20190113
[IDE版本号]
[windows版本号]
[mac版本号]10.14.2
App运行环境说明
[Android版本号]9.0.0.167
[iOS版本号]
[手机型号]华为mate10pro
[模拟器型号]
- 附件
- [IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
- [App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
- <template>
- <view class="container">
- <form @submit="formSubmit">
- <view class='info_box'>
- {{index}}
- <picker @change="bindSortChange" :value="sortIndex" :range="sortArray" class='item_box arrow'>
- <view class="picker">
- {{sortIndex == 'undefined' ?'分类':sortArray[sortIndex]}}
- </view>
- </picker>
- <input class='item_box' placeholder='标题' placeholder-style="color:#B1B1B1;" name="itemTitle" maxlength='32'></input>
- <view class='headImg' @tap='uploadImg' v-if="!headImgUrl" data-from='headImg'>头图上传</view>
- <image :src='headImgUrl' v-else style="width: 670upx;height: 260upx;margin-top: 30upx;" mode='aspectFill' @tap='prewImg'
- data-img="headImgUrl"></image>
<textarea placeholder="宣传内容" placeholder-style="color:#B1B1B1;" class='content_box' name="itemContent" maxlength='1024'
v-show="isShowM">
</textarea>
<view class='img_box'>
<block v-for="(item,index) in moreImgUrl" :key="index">
<image :src='item' class='small_img' mode='aspectFill' @tap='prewImg' :data-img="item"></image>
</block>
<view class='add_box' @tap='uploadImg' data-from='moreImg' :hidden='moreImgUrl.length == 5'>
<image src='../../../static/merchant/addIcon.png' class='addIcon'></image>
</view>
<view class='tip'>注:图片最大2M,最多可上传5张。</view>
</view>
<navigator url="../../switch-city/switch-city" hover-class="none" class='location item_box'>
<text class="titleR">{{city}}</text>
<image src='../../../static/merchant/gps.png' style='width:24upx;height:30upx;position:absolute;right:40upx;top:50%;margin-top:-15upx;'></image>
</navigator>
<input class='item_box' placeholder='请输入手机号' placeholder-style="color:#B1B1B1;" name="tel" type='number'></input>
<view class='total'>应付:<text class='money'>3 TBB</text></view>
<view class='check_box'>
<checkbox-group @change="checkboxChange">
<label class="checkbox">
<checkbox value="" :checked="agree" /><text style='margin-left:15upx;'>已阅读</text> </label> <text class='declaration'
@tap='isShowTip'>免责声明</text>
</checkbox-group>
</view>
</view>
<button formType="submit" class='sub'>发布</button>
</form>
<view class='mask' :hidden='isShowM' @tap='hiddenMask' catchtouchmove="preventTouchMove"></view>
<!-- 支付提示 -->
<view class='payBox' :hidden='isShowPay' catchtouchmove="preventTouchMove">
<view class='pay_title'>扣除</view>
<!-- <view class='pay_tip'>扣除发布信息费用</view> -->
<view class='pay_M'>3.0000 TBB</view>
<input placeholder='请输入账户密码' placeholder-style='font-size:30upx;color:#B1B1B1;' class='pay_input' password @input="myPassword"></input>
<button style='width:568upx;height:108upx;line-height:108upx;background:#3574FA;color:#fff;font-size:30upx;' @tap='ok'>确认发布</button>
</view>
<!-- 免責聲明 -->
<view class='disclaimer' :hidden='isShowD' catchtouchmove="preventTouchMove">
<view class='h2'>免责声明</view>
<scroll-view scroll-y class='d_content' catchtouchmove="preventTouchMove">
<view catchtouchmove="preventTouchMove">内容发布须知为了提高招商平台的信息质量,打击违法和虚假信息,保护用户的根本利益和体验,结合实际经验,制定本规定。</view>
<view catchtouchmove="preventTouchMove">一、以下信息禁止发布:</view>
<view>1 、无意义信息</view>
<view>2 、灌水信息</view>
<view>3 、重复信息</view>
<view>4 、非法/虚假信息</view>
<view>5 、非法信息(违法信息)非法信息是指涉嫌欺诈或违反社会道德规范或法律法规的信息</view>
<view>6 、分类不当</view>
<view>7 、违规信息</view>
<view>二、发帖内容含有以下信息的,审核不予通过</view>
<view>1 、内容里面填写电话为“ ① ③ ⑤ ① ② ③ ”、“一三五一”的将不予通过</view>
<view>2 、发布与类别不相符的信息将会被删除</view>
<view>3 、信息的标题和内容输入框里不要填写电话号码、 QQ 号码、邮箱,联系方式请填写在指定区域内</view>
<view>4 、发布的物品价格不符合市场正常规律,一旦发现是虚假信息将会被删除</view>
<view>5 、标题或信息无实质性内容(如关键词堆积、滥用特殊字符等),对浏览者没有任何引导作用的信息,将会被删除</view>
</scroll-view>
<button class='ok' @tap='isShowTip'>确定</button>
</view>
</view>
</template>
<script>
const telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
import {
chooseImage,
upLoadImg
} from '../../../utils/api.js'
import bus from '../../../utils/bus.js'
export default {
data() {
return {
sortArray: ['合伙人招募', '共同履约', '宣传', '其他'],
sortIndex: 'undefined',
isShowD: true,
isShowM: true,
agree: true,
city: '请选择区域',
isShowPay: true,
headImgUrl: '',
headImgPath: '',
moreImgUrl: [],
moreImgPath: [],
myPWD:''
}
},
onLoad: function(options) {
if (uni.getStorageSync('token') == "") {
uni.reLaunch({
url: '../../initial/initial'
})
}
bus.$on('cityChange', (city) => {
this.city = city
})
},
methods: {
formSubmit: function(e) {
if (uni.getStorageSync('token') == "") {
uni.navigateBack();
return;
}
let formData = e.detail.value;
let title = e.detail.value.itemTitle;
let content = e.detail.value.itemContent;
let phone = e.detail.value.tel;
if (this.sortIndex == 'undefined') {
uni.showToast({
icon: 'none',
title: '请选择类别',
})
return;
} else if (formData.itemTitle.replace(/\s+/g, "") == "") {
uni.showToast({
icon: 'none',
title: '标题不能为空',
})
return;
} else if (!this.headImgUrl) {
uni.showToast({
icon: 'none',
title: '请上传头图',
})
return;
} else if (formData.itemContent.replace(/\s+/g, "") == "") {
uni.showToast({
icon: 'none',
title: '宣传内容不能为空',
})
return;
} else if (this.city == '请选择区域') {
uni.showToast({
icon: 'none',
title: '请选择区域',
})
return;
} else if (formData.tel == "") {
uni.showToast({
icon: 'none',
title: '手机号不能为空',
})
return;
} else if (!telReg.test(formData.tel)) {
uni.showToast({
icon: 'none',
title: '请输入正确的手机号',
})
return;
} else if (!this.agree) {
uni.showToast({
icon: 'none',
title: '请确认勾选免责声明',
})
return;
} else {
this.title = formData.itemTitle
this.content = formData.itemContent
this.phone = formData.tel
this.isShowPay = false
this.isShowM = false
}
},
bindSortChange: function(e) {
if (uni.getStorageSync('token') == "") {
uni.navigateBack()
}
this.sortIndex = e.detail.value
},
// 免责
isShowTip: function() {
this.isShowD = !this.isShowD
this.isShowM = !this.isShowM
this.agree = true
},
// 图片上传
uploadImg: function(e) {
let fromImg = e.currentTarget.dataset.from;
let that = this;
let count = null
if (fromImg == 'headImg') {
count = 1
} else {
count = 5 - this.moreImgUrl.length
}
chooseImage(count, ['album', 'camera']).then(res => {
res.tempFilePaths.forEach((item, index) => {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
if (res.tempFiles[index].size > 2097152) {
uni.showToast({
title: '图片过大',
icon: 'none',
duration: 2000,
mask: true
})
return;
}
let tempFilePaths = res.tempFilePaths[index];
uni.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
upLoadImg('/user/uploadImage', tempFilePaths, 'adver').then(res => {
uni.hideToast();
if (res.statusCode == 200) {
let returnMsg = JSON.parse(res.data)
if (returnMsg.code == 200) {
let imgUrl = returnMsg.data.imgUrl;
let imgPath = returnMsg.data.imgPath;
if (fromImg == 'headImg') {
that.headImgUrl = imgUrl
that.headImgPath = imgPath
} else if (fromImg == 'moreImg') {
that.moreImgUrl = that.moreImgUrl.concat([imgUrl])
that.moreImgPath = that.moreImgPath.concat([imgPath])
}
} else {
uni.showToast({
title: returnMsg.msg,
icon: 'none'
})
}
} else {
uni.showToast({
title: '网络错误',
icon: 'none'
})
}
})
})
})
},
//图片预览
prewImg: function(e) {
let imgUrl = e.currentTarget.dataset.img;
uni.previewImage({
current: imgUrl,
urls: [imgUrl],
success: function(res) {
},
fail: function() {
}
})
},
// 同意协议
checkboxChange: function() {
this.agree = !this.agree
},
//隐藏支付窗口
hiddenMask: function() {
this.isShowPay = true
this.isShowM = true
this.isShowD = true
},
// 密码
myPassword: function(e) {
this.myPWD = e.detail.value
},
//禁止滑动
preventTouchMove() {
return;
}
}
}
</script>
<style>
/ pages/startTask/index.wxss /
.info_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item_box {
width: 590upx;
height: 68rpx;
line-height: 68rpx;
padding: 20rpx 40upx;
border: 2upx solid #bbb;
border-radius: 8upx;
margin-top: 30upx;
font-size: 30upx;
color: #b1b1b1;
position: relative;
}
/* 箭头 */
.arrow {
position: relative;
}
.arrow::after {
content: " ";
display: inline-block;
height: 18upx;
width: 18upx;
border-width: 0 4upx 4upx 0;
border-color: #888;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
margin-top: -8upx;
right: 28upx;
}
.headImg {
width: 670upx;
height: 260upx;
line-height: 260upx;
background: #f0f0f0;
border: 2upx solid #bbb;
border-radius: 8upx;
font-size: 30upx;
color: #afafaf;
letter-spacing: 0;
margin-top: 30upx;
text-align: center;
box-sizing: border-box;
}
.content_box {
width: 670upx;
height: 298upx;
margin-top: 30upx;
border: 2upx solid #bbb;
padding: 40upx;
box-sizing: border-box;
font-size: 30upx;
color: #afafaf;
letter-spacing: 0;
text-align: justify;
}
.img_box {
width: 670upx;
margin-top: 30upx;
display: flex;
flex-wrap: wrap;
}
.add_box {
width: 216upx;
height: 206upx;
line-height: 206upx;
border: 2upx solid #bbb;
border-radius: 8upx;
text-align: center;
box-sizing: border-box;
}
.small_img {
width: 216upx;
height: 206upx;
border: 2upx solid #bbb;
border-radius: 8upx;
margin-right: 10upx;
margin-bottom: 20upx;
box-sizing: border-box;
}
.small_img:nth-child(3n) {
margin-right: 0;
}
.addIcon {
width: 136upx;
height: 136upx;
vertical-align: middle;
}
.tip {
width: 100%;
font-size: 24upx;
color: #afafaf;
margin-top: 20upx;
}
.total {
width: 670upx;
font-size: 40upx;
color: #333;
text-align: left;
margin-top: 40upx;
}
.money {
color: #ff9e57;
}
.check_box {
width: 670upx;
text-align: left;
font-size: 24upx;
color: #afafaf;
margin-top: 30upx;
}
/* 更改默认多选框的样式 */
checkbox .wx-checkbox-input {
width: 24upx;
height: 24upx;
border-radius: 6upx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28upx;
height: 28upx;
line-height: 28upx;
text-align: center;
font-size: 22upx;
color: #3574fa;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
.declaration {
color: #3574fa;
line-height: 28upx;
}
.sub {
width: 670upx;
height: 108upx;
line-height: 108upx;
background: #3574fa;
border-radius: 8upx;
font-size: 30upx;
color: #fff;
margin-top: 30upx;
margin-bottom: 30upx;
}
/* 遮罩 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
}
/* 免责声明 */
.disclaimer {
position: fixed;
top: 50%;
left: 50%;
margin-left: -328upx;
margin-top: -498upx;
width: 656upx;
height: 996upx;
padding: 20upx;
box-sizing: border-box;
font-size: 24upx;
color: #333333;
letter-spacing: -0.06px;
line-height: 40upx;
background-color: #fff;
z-index: 9999;
}
.h2 {
font-size: 36upx;
color: #3574FA;
letter-spacing: -0.09px;
text-align: center;
margin-top: 20upx;
}
.d_content {
height: 692upx;
margin: 24upx 0 52upx 0;
padding: 20upx;
box-sizing: border-box;
}
.ok {
background: #3574FA;
border-radius: 8upx;
width: 568upx;
height: 108upx;
line-height: 108upx;
color: #fff;
}
/* 支付提示框 */
.payBox {
width: 656upx;
height: 532upx;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #333;
padding: 40upx 48upx;
box-sizing: border-box;
z-index: 9999;
border-radius: 6upx;
}
.pay_title {
font-size: 36upx;
color: #3574FA;
}
.pay_tip {
font-size: 24upx;
line-height: 34upx;
}
.pay_M {
font-size: 34px;
margin-bottom: 22upx;
}
.pay_input {
width: 570upx;
height: 114upx;
border: 2upx solid #BBBBBB;
border-radius: 6upx;
margin-bottom: 32upx;
text-align: left;
padding-left: 30upx;
box-sizing: border-box;
font-size: 30upx;
color: #B1B1B1;
}
</style>
[安装包]
联系方式
[QQ]2388306191