微信 小程序布局 水平选照片

 
 
<view class="hong-container">
<!-- 1头部选照片 -->
<view class='hong-top'>
<view class='top-box flex'>
<view class='top-only'>
<view class='only-pic'>
<view class='pic-a' bindtap='addImg' data-pic='0'>
<image class='image-full' src='../../../imgs/user/addpic.png'></image>
</view>
<view class='pic-b' bindtap='addImg' data-pic='0'>
<image class='image-full' src='{{imgbox[0]}}'></image>
</view>
</view>
<view class='only-text'>
<text>本人职业照</text>
</view>
</view>
<view class='top-only'>
<view class='only-pic'>
<view class='pic-a' bindtap='addImg' data-pic='0'>
<image class='image-full' src='../../../imgs/user/addpic.png'></image>
</view>
<view class='pic-b' bindtap='addImg' data-pic='0'>
<image class='image-full' src='{{imgbox[1]}}'></image>
</view>
</view>
<view class='only-text'>
<text>身份证正面照</text>
</view>
</view>
<view class='top-only'>
<view class='only-pic'>
<view class='pic-a' bindtap='addImg' data-pic='0'>
<image class='image-full' src='../../../imgs/user/addpic.png'></image>
</view>
<view class='pic-b' bindtap='addImg' data-pic='0'>
<image class='image-full' src='{{imgbox[2]}}'></image>
</view>
</view>
<view class='only-text'>
<text>身份证反面照</text>
</view>
</view>
<view class='top-only'>
<view class='only-pic'>
<view class='pic-a' bindtap='addImg' data-pic='0'>
<image class='image-full' src='../../../imgs/user/addpic.png'></image>
</view>
<view class='pic-b' bindtap='addImg' data-pic='0'>
<image class='image-full' src='{{imgbox[3]}}'></image>
</view>
</view>
<view class='only-text'>
<text>企业执照</text><text style='font-size:22rpx'>(选填)</text>
</view>
</view>
</view>
</view>
<!-- 2表单填写 -->
<view class='hong-contant'>
<form>
<view>
 
</view>
</form>
</view>
</view>
//---------------------------------------------------------------------------------------------------------------------------
 
/* 1头部选照片 */
.hong-top{
100%;
">#f7f7f7;
padding-bottom: 20rpx;
 
}
.hong-top .top-box{
height: 250rpx;
padding: 0 14rpx;
">#fff;
box-sizing: border-box;
}
.hong-top .top-only{
25%;
padding: 20rpx 10rpx 0;
height: 100%;
box-sizing: border-box;
}
.hong-top .only-pic{
100%;
height: 160rpx;
">#f7f7f7;
box-sizing: border-box;
position: relative;
}

.hong-top .pic-a{
100%;
height: 100%;
padding: 33rpx;
border: 1px dashed #CCC;
box-sizing: border-box;
}
.hong-top .pic-b{
100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.hong-top .pic-a,.pic-b{
position: absolute;
left: 0;
top: 0;
}
.hong-top .only-text{
font-size: 24rpx;
padding-top: 20rpx;
text-align: center;
}
 
//-------------------------------------------------------------------------------------
data: {
// 图片盒子
imgbox:[]
},
// 店铺图片信息临时保存
addImg: function (e) {
var imgbox = this.data.imgbox;
var picid = e.currentTarget.dataset.pic;
var that = this;
var n = 4;
if (4 > imgbox.length > 0) {
n = 4 - imgbox.length;
} else if (imgbox.length == 4) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths

if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (4 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);

} else {
imgbox[picid] = tempFilePaths[0];
}
that.setData({
imgbox: imgbox
});

}
})
},
 
//----------------------------------------------------------
//图片上传请求
for (var i = 0; i < imgbox.length; i++) {
wx.uploadFile({
url: app.globalData.hpUrl + 'addFindversionpic?uid=' + user.id + '&&cid=' + result,
filePath: imgbox[i],
name: 'files',
header: {
'content-type': 'multipart/form-data'
},
formData: {
openid: that.data.openid
},
success: function (res) {

let truePic = res.data;
console.log(truePic)
if (truePic) {
wx.showToast({
title: '提交成功',
icon: 'success',
duration: 1500
})
setTimeout(function () {
wx.navigateTo({
url: "/pages/index/edition/edition"
})
}, 1500);
} else {
wx.showModal({
title: '提示',
content: '提交失败,请检测从新提交',
showCancel: false,
success: function (res) {
}
})
}
}
})
}
原文地址:https://www.cnblogs.com/dianzan/p/8005949.html