<template>
|
<view>
|
<view class="grid-box">
|
<view class="image-box" v-for="(item,index) in imageList" :key="index">
|
<image :src="baseUrl+item" mode="aspectFit"></image>
|
<image src="/static/policy/close.png" mode="widthFix" @click="delImage(index)" class="close"></image>
|
</view>
|
<view class="cam-box" @click="upload" v-if="imageList.length < max">
|
<image src="/static/policy/carmea.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { upload } from '@/common/upload.js'
|
import { config } from '@/common/config.js'
|
export default {
|
props: {
|
max: {
|
type: Number,
|
default: 9
|
},
|
maxSize: {
|
type: Number,
|
default: 10 * 1024 * 1024
|
}
|
},
|
data() {
|
return {
|
imageList: [],
|
baseUrl: config.baseUrl
|
}
|
},
|
methods: {
|
upload() {
|
uni.chooseImage({
|
count: 9 - this.imageList.length,
|
success: val => {
|
const value = val.tempFiles.every(item => item.size < this.maxSize)
|
if(!value){
|
uni.showToast({
|
title: '照片尺寸过大',
|
icon: 'none'
|
})
|
return
|
}
|
// console.log(val.tempFilePaths)
|
// this.imageList.push(...val.tempFilePaths)
|
val.tempFilePaths.forEach(async item => {
|
await this.uploadImage(item)
|
})
|
}
|
})
|
},
|
async uploadImage(file) {
|
try{
|
const code = await upload(file)
|
this.imageList.push(code.fileName)
|
} catch(err) {
|
uni.showToast({
|
title: '文件上传失败，请稍后重试',
|
icon: 'none'
|
})
|
console.log(err)
|
}
|
},
|
delImage(index) {
|
this.imageList.splice(index,1)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.cam-box{
|
background-color: #F4F4F4;
|
border-radius: 10rpx;
|
width: 200rpx;
|
height: 200rpx;
|
text-align: center;
|
// line-height: 200rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
image{
|
width: 60rpx;
|
height: 60rpx;
|
}
|
}
|
.grid-box{
|
display: grid;
|
grid-template-columns: 1fr 1fr 1fr;
|
grid-gap: 20rpx;
|
}
|
.image-box{
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 10rpx;
|
position: relative;
|
image{
|
width: 100%;
|
height: 100%;
|
border: 2rpx solid #F4F4F4;
|
border-radius: 10rpx;
|
}
|
.close{
|
width: 44rpx;
|
height: 44rpx;
|
position: absolute;
|
top: -20rpx;
|
right: -20rpx;
|
border: none;
|
}
|
}
|
</style>
|
