wxml:
<!-- 资质信息 -->
<view class="apply_info">
<span>资质信息</span>
<span>请上传经营者门头照、营业执照</span>
<!-- 图片上传 -->
<view class="upload">
<view wx:for="{{zizhiImg}}" wx:key="index">
<view class="upload_image_view" wx:if="{{item.img!=''}}">
<image src="{{item.img}}"
data-srcs="{{item.img}}"
bindtap="chuantupian_Image"
mode="aspectFill">
</image>
<tui-icon catchtap="detele_chuantupian_Image"
data-index="{{index}}"
name="close" size="{{26}}"
unit="rpx">
</tui-icon>
</view>
<view style="height:300rpx;height:220rpx"
wx:else bindtap='chuantupian'
data-index="{{index}}">
<span>+添加</span>
<span>{{item.msg}}</span>
</view>
</view>
</view>
</view>
css:
.apply_info>span:nth-child(1),.apply_userinfo>span:nth-child(1){
font-size:32rpx;
font-weight: bold;
color: #1A1A1A;
line-height: 66rpx;
display: block;
margin-left: 27rpx;
margin-top: 50rpx;
}
.apply_info>span:nth-child(2),.apply_userinfo>span:nth-child(2){
font-size:28rpx;
font-weight: bold;
color: #1d181880;
line-height: 30rpx;
display: block;
margin-left: 27rpx;
}
.upload{
display: flex;
flex-direction: rcolumn ;
justify-content: space-around;
}
.upload>view{
width: 300rpx;
height: 220rpx;
background-color: #e2dfdffa;
margin-top:30rpx;
border-radius: 10rpx;
}
.upload>view:nth-child(1) span:nth-child(1){
display: block;
font-size:32rpx;
color:#F74262;
padding-top: 25%;
text-align: center;
}
.upload>view:nth-child(1) span:nth-child(2){
display: block;
font-size:28rpx;
color:rgba(102, 100, 100, 0.6);
text-align: center;
}
.upload>view:nth-child(2) span:nth-child(1){
display: block;
font-size:32rpx;
color:#F74262;
padding-top: 25%;
text-align: center;
}
.upload>view:nth-child(2) span:nth-child(2){
display: block;
font-size:28rpx;
color:rgba(102, 100, 100, 0.6);
text-align: center;
}
js:
var app = getApp()
const url = app.globalData.url
const myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/
Page({
// 资质选择图片上传
chuantupian: function (e) {
var _this = this;
let {index}=e.currentTarget.dataset
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
success: function (res) {
console.log(res)
const isLtSize = res.tempFiles[0].size / 1024 / 1024 < 7;
if (!isLtSize) {
wx.showToast({
title: '图片大小不能大于7M',
icon:'none'
})
return false;
}else{
wx.showLoading({
title: '上传中...',
})
var tempFilePath = res.tempFilePaths[0]
wx.uploadFile({
url: url + 'api/images/upload',
filePath: tempFilePath,
name: 'image',
filetype: 'image',
header: {
"Content-Type": "application/x-www-form-urlencoded",
},
formData: {
name: 'user'
},
success: function (res) {
wx.hideLoading()
let re = JSON.parse(res.data)
if(re.meta.code==0){
wx.showToast({
title: '上传成功',
})
let img='zizhiImg['+ index + '].img';
_this.setData({
[img]:re.data.pic,
})
}else{
wx.showToast({
title: re.meta.message,
icon:'none'
})
}
},
fail: function (err) {
wx.hideLoading()
// reject(new Error('err'));
}
})
}
}
})
} ,
// 点击当前资质图片预览(单个)
chuantupian_Image: function(e) {
let {srcs} = e.currentTarget.dataset;
wx.previewImage({
current: srcs,
urls: [srcs]
})
},
// 删除当前资质图片
detele_chuantupian_Image:function(e){
let that=this;
let {index} = e.currentTarget.dataset;
let img='zizhiImg['+ index + '].img';
wx.showModal({
title: '图片删除',
content: '确定要删除当前图片吗?删除后需要重新上传是否确定?',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
that.setData({
[img]:''
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
如图:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})