|
|
|
@ -24,10 +24,13 @@ |
|
|
|
请根据示例图上传清晰照片 |
|
|
|
</view> |
|
|
|
<view class="authen-pic"> |
|
|
|
<view> |
|
|
|
<view @click="lookImage(1,image_list.length-1)" v-if="image_list.length"> |
|
|
|
<image :src="image_list[image_list.length-1]" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|
|
|
</view> |
|
|
|
<view v-else> |
|
|
|
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|
|
|
</view> |
|
|
|
<view @tap="ChooseImage"> |
|
|
|
<view @tap="uploadImage(1)"> |
|
|
|
<view> |
|
|
|
<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon> |
|
|
|
</view> |
|
|
|
@ -39,10 +42,13 @@ |
|
|
|
<text style="color: #E21196;">*</text><text class="lf-m-l-10 lf-color-222">上传身份证正面</text> |
|
|
|
</view> |
|
|
|
<view class="authen-pic" style="margin-top: 60rpx;"> |
|
|
|
<view> |
|
|
|
<view @click="lookImage(2,image_list_back.length-1)" v-if="image_list_back.length"> |
|
|
|
<image :src="image_list_back[image_list_back.length-1]" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|
|
|
</view> |
|
|
|
<view v-else> |
|
|
|
<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image> |
|
|
|
</view> |
|
|
|
<view @tap="ChooseImage"> |
|
|
|
<view @tap="uploadImage(2)"> |
|
|
|
<view> |
|
|
|
<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon> |
|
|
|
</view> |
|
|
|
@ -64,120 +70,76 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
hostImg: '', |
|
|
|
frontPic: '', |
|
|
|
backPic: '' |
|
|
|
image_list: [], |
|
|
|
image_list_back: [], |
|
|
|
image_count: 6, |
|
|
|
content: '', |
|
|
|
frontImg: '', |
|
|
|
backImg: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
checkImgInfo(tempFilePath, suc){ |
|
|
|
uni.getImageInfo({ |
|
|
|
src: tempFilePath, |
|
|
|
success (res) { |
|
|
|
let type = res.type; |
|
|
|
console.log('checkImgInfo...', type); |
|
|
|
if(type == 'png' || type == 'jpeg' || type == 'jpg'){ |
|
|
|
suc && suc(true); |
|
|
|
} else { |
|
|
|
suc && suc(false); |
|
|
|
} |
|
|
|
}, |
|
|
|
fail(err) { |
|
|
|
suc && suc(false); |
|
|
|
} |
|
|
|
}) |
|
|
|
// 预览图片 |
|
|
|
lookImage(type,index){ |
|
|
|
if(type == 1) { |
|
|
|
this.$u.throttle(() => { |
|
|
|
uni.previewImage({ |
|
|
|
urls: this.image_list, |
|
|
|
current: index |
|
|
|
}); |
|
|
|
}, 500); |
|
|
|
}else { |
|
|
|
this.$u.throttle(() => { |
|
|
|
uni.previewImage({ |
|
|
|
urls: this.image_list_back, |
|
|
|
current: index |
|
|
|
}); |
|
|
|
}, 500); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
// 选择图片 |
|
|
|
ChooseImage(e) { |
|
|
|
let that = this; |
|
|
|
// 移除图片 |
|
|
|
removeInage(current){ |
|
|
|
this.image_list.splice(current, 1); |
|
|
|
}, |
|
|
|
// 上传凭证图片 |
|
|
|
uploadImage(type){ |
|
|
|
let current_count = this.image_count - this.image_list.length; |
|
|
|
if(current_count == 0) return; |
|
|
|
uni.chooseImage({ |
|
|
|
count: 1, |
|
|
|
sizeType: ['original'], // 可以指定是原图original还是压缩图compressed ，默认二者都有 |
|
|
|
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 |
|
|
|
success: res => { |
|
|
|
that.hostImg = res.tempFilePaths[0]; |
|
|
|
let tempFile = res.tempFiles.shift(); |
|
|
|
let tempFilePath = res.tempFilePaths.shift(); |
|
|
|
console.log('临时路径',res) |
|
|
|
that.checkImgInfo(tempFilePath, (res) => { |
|
|
|
// 过滤不是图片不是png、jpeg 格式 |
|
|
|
if(res){ |
|
|
|
if(tempFile.size > 10000000){ |
|
|
|
uni.showModal({ |
|
|
|
title: '', |
|
|
|
content: '您选择的图片过大：'+ (tempFile.size / 1024000).toFixed(2) +"M，请点击确定重新上传", |
|
|
|
success: res2 => { |
|
|
|
if(res2.confirm){ |
|
|
|
uni.chooseImage({ |
|
|
|
count: 1, |
|
|
|
sizeType: ['compressed'], |
|
|
|
sourceType: ['album', 'camera'], |
|
|
|
success: (res3) => { |
|
|
|
console.log(res3) |
|
|
|
let tempFilePath = res3.tempFilePaths.shift(); |
|
|
|
that.frontPic = res3.tempFilePaths |
|
|
|
that.is_wx_reduce = true; |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} else{ |
|
|
|
that.frontPic = res3.tempFilePaths |
|
|
|
count: current_count, |
|
|
|
complete: result => { |
|
|
|
let tempFiles = result.tempFiles; |
|
|
|
let image_list = []; |
|
|
|
let overstep = false; |
|
|
|
tempFiles.map(item => { |
|
|
|
// 上传的图片需小于10MB |
|
|
|
if(item.size < 10464788){ |
|
|
|
if(type == 1) { |
|
|
|
this.image_list.push(item.path) |
|
|
|
console.log(this.image_list) |
|
|
|
// this.frontImg = item.path |
|
|
|
}else { |
|
|
|
// this.backImg = item.path |
|
|
|
this.image_list_back.push(item.path) |
|
|
|
} |
|
|
|
} else { |
|
|
|
uni.showModal({ |
|
|
|
title: '', |
|
|
|
content: '选择的图片须为jpg、jpeg或png格式', |
|
|
|
showCancel: false, |
|
|
|
confirmColor: '#1697EE' |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
overstep = true; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 上传图片到服务器 |
|
|
|
upload(url){ |
|
|
|
let that = this; |
|
|
|
let uploads = []; |
|
|
|
// 商品banner图上传 |
|
|
|
if (that.img_list.length > 0) { |
|
|
|
for (let i = 0; i < that.img_list.length; i++) { |
|
|
|
let upload_img = new Promise((resolve, reject) => { |
|
|
|
that.uploadFile(that.img_list[i], (res) => { |
|
|
|
resolve(res); |
|
|
|
}, (err) => { |
|
|
|
reject(err); |
|
|
|
}); |
|
|
|
}) |
|
|
|
uploads.push(upload_img); |
|
|
|
} |
|
|
|
} |
|
|
|
if(uploads.length == 0) { |
|
|
|
that.realSubmitInfo([]); |
|
|
|
return |
|
|
|
} |
|
|
|
Promise.all(uploads).then((result) => { |
|
|
|
let img_url_list = []; |
|
|
|
if(result.length > 0){ |
|
|
|
img_url_list = result; |
|
|
|
} |
|
|
|
if(img_url_list) { |
|
|
|
that.realSubmitInfo(img_url_list); |
|
|
|
if(overstep){ |
|
|
|
uni.showModal({ |
|
|
|
title: '温馨提示', |
|
|
|
content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！', |
|
|
|
showCancel: false |
|
|
|
}) |
|
|
|
} |
|
|
|
// this.image_list.push(...image_list); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}).catch(err => { |
|
|
|
that.is_publish = false; // 恢复提交按钮 |
|
|
|
uni.showModal({ |
|
|
|
title: '', |
|
|
|
content: '图片上传失败，请重新提交', |
|
|
|
confirmColor: '#1697EE' |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
