|
|
@@ -21,6 +21,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'xszf')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="xszFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('xszf')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('xszf')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -37,6 +41,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'xszb')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="xszBack"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('xszb')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('xszb')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -130,6 +138,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'sfzf')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="sfzFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('sfzf')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('sfzf')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -146,6 +158,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'sfzb')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="sfzBack"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('sfzb')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('sfzb')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -164,6 +180,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'yyzz')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="yyzzFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('yyzz')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('yyzz')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -260,6 +280,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'tbrf')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="tbrFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('tbrf')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('tbrf')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -276,6 +300,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'tbrb')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="tbrBack"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('tbrb')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('tbrb')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -294,6 +322,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'tbryyzz')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="tbryyzzFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('tbryyzz')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('tbryyzz')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -390,6 +422,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'bbrf')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="bbrFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('bbrf')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('bbrf')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -406,6 +442,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'bbrb')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="bbrBack"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('bbrb')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('bbrb')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -424,6 +464,10 @@
|
|
|
<el-upload v-else drag :auto-upload="false" :show-file-list="false" @change="uploadImage($event, 'bbryyzz')">
|
|
|
<div class="upload-box">
|
|
|
<img class="upload-image" :src="bbryyzzFront"/>
|
|
|
+ <div class="btns">
|
|
|
+ <span style="margin-right: 20px" @click.stop="handleViewImage('bbryyzz')"><el-icon><ZoomIn /></el-icon>查看大图</span>
|
|
|
+ <span @click.stop="handleDelImage('bbryyzz')"><el-icon><Delete /></el-icon>删除</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -506,6 +550,11 @@
|
|
|
<el-button plain type="primary" @click="handleCancel">取消</el-button>
|
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
</div>
|
|
|
+ <el-image-viewer
|
|
|
+ v-if="showImage"
|
|
|
+ :url-list="showImageUrl"
|
|
|
+ @close="showImage = false"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -1054,6 +1103,105 @@ const uploadImage = async (file, type) => {
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+let showImage = ref(false)
|
|
|
+let showImageUrl = ref([])
|
|
|
+const handleViewImage = (type) => {
|
|
|
+ showImage.value = true
|
|
|
+ switch (type) {
|
|
|
+ case 'xszf':
|
|
|
+ showImageUrl.value = [xszFront.value]
|
|
|
+ break;
|
|
|
+ case 'xszb':
|
|
|
+ showImageUrl.value = [xszBack.value]
|
|
|
+ break;
|
|
|
+ case 'sfzf':
|
|
|
+ showImageUrl.value = [sfzFront.value]
|
|
|
+ break;
|
|
|
+ case 'sfzb':
|
|
|
+ showImageUrl.value = [sfzBack.value]
|
|
|
+ break;
|
|
|
+ case 'yyzz':
|
|
|
+ showImageUrl.value = [yyzzFront.value]
|
|
|
+ break;
|
|
|
+ case 'tbrf':
|
|
|
+ showImageUrl.value = [tbrFront.value]
|
|
|
+ break;
|
|
|
+ case 'tbrb':
|
|
|
+ showImageUrl.value = [tbrBack.value]
|
|
|
+ break;
|
|
|
+ case 'tbryyzz':
|
|
|
+ showImageUrl.value = [tbryyzzFront.value]
|
|
|
+ break;
|
|
|
+ case 'bbrf':
|
|
|
+ showImageUrl.value = [bbrFront.value]
|
|
|
+ break;
|
|
|
+ case 'bbrb':
|
|
|
+ showImageUrl.value = [bbrBack.value]
|
|
|
+ break;
|
|
|
+ case 'bbryyzz':
|
|
|
+ showImageUrl.value = [bbryyzzFront.value]
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+const handleDelImage = (type) => {
|
|
|
+ switch (type) {
|
|
|
+ case 'xszf':
|
|
|
+ xszFrontResult.value = null
|
|
|
+ xszFront.value = ''
|
|
|
+ xszFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'xszb':
|
|
|
+ xszBackResult.value = null
|
|
|
+ xszBack.value = ''
|
|
|
+ xszBackFile.value = null
|
|
|
+ break;
|
|
|
+ case 'sfzf':
|
|
|
+ sfzFrontResult.value = null
|
|
|
+ sfzFront.value = ''
|
|
|
+ sfzFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'sfzb':
|
|
|
+ sfzBackResult.value = null
|
|
|
+ sfzBack.value = ''
|
|
|
+ sfzBackFile.value = null
|
|
|
+ break;
|
|
|
+ case 'yyzz':
|
|
|
+ yyzzFrontResult.value = null
|
|
|
+ yyzzFront.value = ''
|
|
|
+ yyzzFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'tbrf':
|
|
|
+ tbrFrontResult.value = null
|
|
|
+ tbrFront.value = ''
|
|
|
+ tbrFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'tbrb':
|
|
|
+ tbrBackResult.value = null
|
|
|
+ tbrBack.value = ''
|
|
|
+ tbrBackFile.value = null
|
|
|
+ break;
|
|
|
+ case 'tbryyzz':
|
|
|
+ tbryyzzFrontResult.value = null
|
|
|
+ tbryyzzFront.value = ''
|
|
|
+ tbryyzzFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'bbrf':
|
|
|
+ bbrFrontResult.value = null
|
|
|
+ bbrFront.value = ''
|
|
|
+ bbrFrontFile.value = null
|
|
|
+ break;
|
|
|
+ case 'bbrb':
|
|
|
+ bbrBackResult.value = null
|
|
|
+ bbrBack.value = ''
|
|
|
+ bbrBackFile.value = null
|
|
|
+ break;
|
|
|
+ case 'bbryyzz':
|
|
|
+ bbryyzzFrontResult.value = null
|
|
|
+ bbryyzzFront.value = ''
|
|
|
+ bbryyzzFrontFile.value = null
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
const handleCancel = () => {
|
|
|
emit('close')
|
|
|
@@ -1255,6 +1403,7 @@ defineExpose({
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ position: relative;
|
|
|
.icon-box{
|
|
|
text-align: center;
|
|
|
color: #999999;
|
|
|
@@ -1267,6 +1416,24 @@ defineExpose({
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .btns{
|
|
|
+ height: 30px;
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(0, 0, 0, .5);
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.m-b-5{
|
|
|
margin-bottom: 5px !important;
|