You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
3.7 KiB
170 lines
3.7 KiB
<template>
|
|
<view class="content">
|
|
<view class="my-images">
|
|
<view class="my-image-item" @click="uploadImage" v-if="image_list.length < image_count">
|
|
<text class="lf-iconfont icon-jia my-image-item-after"></text>
|
|
</view>
|
|
<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="showMenu(index)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<!-- <view class="remove-image" @click.stop="removeInage(index)">
|
|
<text class="lf-iconfont icon-shanchu"></text>
|
|
</view> -->
|
|
<view class="mask">审核中</view>
|
|
</view>
|
|
</view>
|
|
<view class="tips-desc">！小提示：最多可上传9张个人形象照，使用本人近期真实照片为佳。</view>
|
|
<u-action-sheet :list="menu_list" v-model="show_menu" @click="clickSheet"></u-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
image_list: [],
|
|
image_count: 9,
|
|
menu_list: [{
|
|
text: '设为封面图',
|
|
}, {
|
|
text: '预览'
|
|
}, {
|
|
text: '删除',
|
|
color: 'red'
|
|
}],
|
|
show_menu: false,
|
|
click_index: null
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
// 显示操作菜单
|
|
showMenu(index){
|
|
this.click_index = index;
|
|
this.show_menu = true;
|
|
},
|
|
// 点击了操作菜单的某一项
|
|
clickSheet(current){
|
|
switch(current){
|
|
case 1: this.lookImage(this.click_index); break;
|
|
case 2: this.removeInage(this.click_index); break;
|
|
}
|
|
},
|
|
// 上传凭证图片
|
|
uploadImage(){
|
|
let current_count = this.image_count - this.image_list.length;
|
|
if(current_count == 0) return;
|
|
uni.chooseImage({
|
|
count: current_count,
|
|
complete: result => {
|
|
if(result.errMsg == "chooseImage:fail cancel"){
|
|
return; // 取消选择图片
|
|
}
|
|
let tempFiles = result.tempFiles;
|
|
let image_list = [];
|
|
let overstep = false;
|
|
tempFiles.map(item => {
|
|
// 上传的图片需小于10MB
|
|
if(item.size < 10464788){
|
|
image_list.push(item.path);
|
|
}else{
|
|
overstep = true;
|
|
}
|
|
})
|
|
if(overstep){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
this.image_list.push(...image_list);
|
|
}
|
|
})
|
|
},
|
|
// 预览图片
|
|
lookImage(current){
|
|
if(this.image_list.length <= 0) return;
|
|
this.$u.throttle(() => {
|
|
uni.previewImage({
|
|
urls: this.image_list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
// 移除图片
|
|
removeInage(current){
|
|
this.image_list.splice(current, 1);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 32rpx;
|
|
}
|
|
|
|
.my-images{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40rpx;
|
|
.my-image-item{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
background: #DDDDDD;
|
|
position: relative;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n){
|
|
margin-right: 0rpx;
|
|
}
|
|
&:nth-child(n+4){
|
|
margin-top: 12rpx;
|
|
}
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.remove-image{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
top: -18rpx;
|
|
color: #e74c3c;
|
|
font-size: 40rpx;
|
|
padding: 8rpx;
|
|
}
|
|
.mask{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 42rpx;
|
|
background-color: rgba(0,0,0,0.5);
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.my-image-item-after{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.tips-desc{
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
</style>
|