|
|
@@ -1,33 +1,37 @@
|
|
|
<template>
|
|
|
<div class="imageAIVerifyErr">
|
|
|
<el-dialog
|
|
|
- title="提示"
|
|
|
+ title="图像识别结果"
|
|
|
:visible.sync="vanPopup"
|
|
|
width="80%"
|
|
|
:append-to-body="true"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
custom-class="AIVerifyErrdialog">
|
|
|
<div class="AIVerifyErrMask">
|
|
|
<!-- <van-popup v-model="vanPopup" @close="close" :close-on-click-overlay="false"> -->
|
|
|
- <div class="title">图像识别结果</div>
|
|
|
- <div class="content">
|
|
|
+ <!-- <div class="title"></div> -->
|
|
|
+ <div class="contentAIVerify">
|
|
|
<div class="AIVerify">{{ contentMessage }}</div>
|
|
|
- <div class="uploadImg" @click="uploadImg" v-if="shopSignChange != 1">
|
|
|
- <div class="label"><span class="van-f-red">*</span>重新拍照上传</div>
|
|
|
- <div class="icon">
|
|
|
- <van-icon class="photo photos" name="photograph" size="22px" color="#969696" />
|
|
|
+ <div class="uploadImgAIVerify" @click="uploadImg" v-if="shopSignChange != 1">
|
|
|
+ <div class="labelAIVerify"><span class="van-f-red-AIVerify">*</span>重新拍照上传</div>
|
|
|
+ <div class="iconAIVerify">
|
|
|
+ <van-icon class="photoAIVerify" name="photograph" size="22px" color="#969696" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="uploadBtn" v-if="shotsNum >= 3 && shopSignChange != 1">
|
|
|
- <div class="tips"><van-icon name="question-o" @click="openTips" />上传后会有何影响</div>
|
|
|
- <div class="confirmUpload" @click="confirmUpload">仍要上传</div>
|
|
|
+ <div class="uploadBtnAIVerify">
|
|
|
+ <div class="tipsAIVerify" @click="openTips">
|
|
|
+ <van-icon name="question-o" />上传后会有何影响
|
|
|
+ </div>
|
|
|
+ <div class="confirmUploadAIVerify" @click="confirmUpload">仍要上传</div>
|
|
|
</div>
|
|
|
- <div class="uploadBtn" v-if="shopSignChange == 1">
|
|
|
- <div class="confirmUpload" @click="uploadImg">重新拍照</div>
|
|
|
- <div class="changeImage" @click="confirmUpload">更换门店照</div>
|
|
|
+ <div class="uploadBtnAIVerify" v-if="shopSignChange == 1">
|
|
|
+ <div class="confirmUploadAIVerify" @click="uploadImg">重新拍照</div>
|
|
|
+ <div class="changeImageAIVerify" @click="confirmUpload('isUpdate')">更换门店照</div>
|
|
|
</div>
|
|
|
- <div class="historyImage" v-if="shopSignChange == 1">
|
|
|
- <div class="initImage imageItem" v-if="imageAIVerifyData.createStoreUrl">
|
|
|
+ <div class="historyImageAIVerify" v-if="shopSignChange == 1">
|
|
|
+ <div class="initImage imageItemAIVerify" v-if="imageAIVerifyData.createStoreUrl">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.createStoreUrl"
|
|
|
width="100px"
|
|
|
@@ -35,7 +39,7 @@
|
|
|
@click="previewsImg(imageAIVerifyData.createStoreUrl)" />
|
|
|
<span>建店时店招</span>
|
|
|
</div>
|
|
|
- <div class="newestImage imageItem" v-if="imageAIVerifyData.lastVisitUrl">
|
|
|
+ <div class="newestImage imageItemAIVerify" v-if="imageAIVerifyData.lastVisitUrl">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.lastVisitUrl"
|
|
|
width="100px"
|
|
|
@@ -43,7 +47,7 @@
|
|
|
@click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
|
|
|
<span>上次拜访店招</span>
|
|
|
</div>
|
|
|
- <div class="presentImage imageItem" v-if="imageAIVerifyData.url">
|
|
|
+ <div class="presentImage imageItemAIVerify" v-if="imageAIVerifyData.url">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.url"
|
|
|
width="100px"
|
|
|
@@ -52,9 +56,9 @@
|
|
|
<span>本次拜访店招</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tipsRemark" v-if="shopSignChange == 1">
|
|
|
- <p>若历史照片拍摄不规范,请选择<span style="color: #81b337">更新门店照</span></p>
|
|
|
- <p>本次拜访店招会作为本店标准店招,未来每次拜访时校验</p>
|
|
|
+ <div class="tipsRemarkAIVerify" v-if="shopSignChange == 1">
|
|
|
+ <div>若历史照片拍摄不规范,请选择<span style="color: #81b337">更新门店照</span></div>
|
|
|
+ <div>本次拜访店招会作为本店标准店招,未来每次拜访时校验</div>
|
|
|
</div>
|
|
|
<!-- </van-popup> -->
|
|
|
</div>
|
|
|
@@ -71,16 +75,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="uploadBtn" v-if="shotsNum >= 3 && shopSignChange != 1">
|
|
|
- <div class="tips"><van-icon name="question-o" @click="openTips" />上传后会有何影响</div>
|
|
|
+ <div class="uploadBtnAIVerify" v-if="shotsNum >= 3 && shopSignChange != 1">
|
|
|
+ <div class="tipsAIVerify"><van-icon name="question-o" @click="openTips" />上传后会有何影响</div>
|
|
|
<div class="confirmUpload" @click="confirmUpload">仍要上传</div>
|
|
|
</div>
|
|
|
- <div class="uploadBtn" v-if="shopSignChange == 1">
|
|
|
+ <div class="uploadBtnAIVerify" v-if="shopSignChange == 1">
|
|
|
<div class="confirmUpload" @click="uploadImg">重新拍照</div>
|
|
|
- <div class="changeImage" @click="confirmUpload">更换门店照</div>
|
|
|
+ <div class="changeImageAIVerify" @click="confirmUpload">更换门店照</div>
|
|
|
</div>
|
|
|
- <div class="historyImage" v-if="shopSignChange == 1">
|
|
|
- <div class="initImage imageItem" v-if="imageAIVerifyData.createStoreUrl">
|
|
|
+ <div class="historyImageAIVerify" v-if="shopSignChange == 1">
|
|
|
+ <div class="initImage imageItemAIVerify" v-if="imageAIVerifyData.createStoreUrl">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.createStoreUrl"
|
|
|
width="100px"
|
|
|
@@ -88,7 +92,7 @@
|
|
|
@click="previewsImg(imageAIVerifyData.createStoreUrl)" />
|
|
|
<span>建店时店招</span>
|
|
|
</div>
|
|
|
- <div class="newestImage imageItem" v-if="imageAIVerifyData.lastVisitUrl">
|
|
|
+ <div class="newestImage imageItemAIVerify" v-if="imageAIVerifyData.lastVisitUrl">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.lastVisitUrl"
|
|
|
width="100px"
|
|
|
@@ -96,7 +100,7 @@
|
|
|
@click="previewsImg(imageAIVerifyData.lastVisitUrl)" />
|
|
|
<span>上次拜访店招</span>
|
|
|
</div>
|
|
|
- <div class="presentImage imageItem" v-if="imageAIVerifyData.url">
|
|
|
+ <div class="presentImage imageItemAIVerify" v-if="imageAIVerifyData.url">
|
|
|
<img
|
|
|
:src="imageAIVerifyData.url"
|
|
|
width="100px"
|
|
|
@@ -105,7 +109,7 @@
|
|
|
<span>本次拜访店招</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tipsRemark" v-if="shopSignChange == 1">
|
|
|
+ <div class="tipsRemarkAIVerify" v-if="shopSignChange == 1">
|
|
|
<p>若历史照片拍摄不规范,请选择<span style="color: #81b337">更新门店照</span></p>
|
|
|
<p>本次拜访店招会作为本店标准店招,未来每次拜访时校验</p>
|
|
|
</div>
|
|
|
@@ -195,9 +199,12 @@ export default {
|
|
|
this.$emit('uploadImgFun');
|
|
|
},
|
|
|
// 仍要上传
|
|
|
- confirmUpload() {
|
|
|
+ confirmUpload(isUpdate) {
|
|
|
this.$emit('close');
|
|
|
- this.$emit('confirmUpload', { data: this.imageAIVerifyData });
|
|
|
+ this.$emit('confirmUpload', {
|
|
|
+ data: this.imageAIVerifyData,
|
|
|
+ isUpdate: isUpdate ? 'true' : null,
|
|
|
+ });
|
|
|
},
|
|
|
close() {
|
|
|
this.$emit('close');
|
|
|
@@ -205,9 +212,11 @@ export default {
|
|
|
openTips() {
|
|
|
this.$dialog
|
|
|
.confirm({
|
|
|
- title: '系统提示',
|
|
|
+ title: '提示',
|
|
|
message: '不规范的照片上传后会更换本店标准店招,未来每次拜访时校验。',
|
|
|
showCancelButton: false,
|
|
|
+ className: 'openTips',
|
|
|
+ overlayClass: 'openTipsMask',
|
|
|
})
|
|
|
.then(() => {});
|
|
|
},
|
|
|
@@ -221,103 +230,123 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.el-dialog__wrapper {
|
|
|
- z-index: 99999999;
|
|
|
- .imageAIVerifyErr {
|
|
|
- .AIVerifyErrMask {
|
|
|
- width: 90%;
|
|
|
- padding: 8px;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .van-popup {
|
|
|
- width: 90%;
|
|
|
- padding: 8px;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .van-f-red {
|
|
|
+ z-index: 3333 !important;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(0, 0, 0, 0.5) !important;
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 6px !important;
|
|
|
+ }
|
|
|
+ .el-dialog__header {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .AIVerifyErrdialog {
|
|
|
+ width: 95% !important;
|
|
|
+ margin-top: 1vh !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ }
|
|
|
+ .AIVerifyErrMask {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ /* min-height: 180px; */
|
|
|
+ }
|
|
|
+ .van-popup {
|
|
|
+ width: 90%;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .van-f-red-AIVerify {
|
|
|
+ color: red;
|
|
|
+ width: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ .photoAIVerify {
|
|
|
+ /*margin-top: 9px;*/
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ .contentAIVerify {
|
|
|
+ .AIVerify {
|
|
|
+ padding: 6px 0;
|
|
|
+ font-size: 14px;
|
|
|
color: red;
|
|
|
- width: 8px;
|
|
|
- display: inline-block;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
- .photo {
|
|
|
- /*margin-top: 9px;*/
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
text-align: center;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- .content {
|
|
|
border-top: 1px solid #ccc;
|
|
|
- .AIVerify {
|
|
|
- padding: 6px;
|
|
|
- font-size: 14px;
|
|
|
- color: red;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- }
|
|
|
- .uploadImg {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- .uploadBtn {
|
|
|
- border-top: 1px solid #ccc;
|
|
|
+ .uploadImgAIVerify {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 8px 0;
|
|
|
- div {
|
|
|
- width: 40%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 6px;
|
|
|
- }
|
|
|
- .tips {
|
|
|
+ padding: 5px 0;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ .labelAIVerify {
|
|
|
font-size: 14px;
|
|
|
- color: #e7e734;
|
|
|
- }
|
|
|
- .confirmUpload {
|
|
|
- background-color: red;
|
|
|
- padding: 8px 0;
|
|
|
- }
|
|
|
- .changeImage {
|
|
|
- background-color: #81b337;
|
|
|
- padding: 8px 0;
|
|
|
}
|
|
|
}
|
|
|
- .historyImage {
|
|
|
+ }
|
|
|
+ .uploadBtnAIVerify {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 0;
|
|
|
+ div {
|
|
|
+ width: 40%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .imageItem {
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
}
|
|
|
- .tipsRemark {
|
|
|
- border-top: 1px solid #ccc;
|
|
|
- p {
|
|
|
+ .tipsAIVerify {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #e7e734;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .confirmUploadAIVerify {
|
|
|
+ background-color: red;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ .changeImageAIVerify {
|
|
|
+ background-color: #81b337;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .historyImageAIVerify {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 5px 0;
|
|
|
+ .imageItemAIVerify {
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ span {
|
|
|
font-size: 12px;
|
|
|
- padding: 3px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .tipsRemarkAIVerify {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ div {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.openTipsMask,
|
|
|
+.openTips {
|
|
|
+ z-index: 3334 !important;
|
|
|
}
|
|
|
</style>
|