apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实名认证页代码优化

Browse Source
This commit is contained in:
zhouxueli
2025-09-11 23:07:46 +08:00
parent e02456e807
commit 9f2b343662
1 changed files with 75 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/rvDriverAuthentication/component/photoItem.vue
View File

@ -9,14 +9,15 @@
</van-radio-group>
</div>
<div class="photoWrap" v-if="inSure == 1">
<van-uploader :after-read="(file) => afterRead(file,'urlList')" class="customUploadMul"
:max-count="3" :disabled="!showFun()" deletable>
<van-uploader :after-read="(file) => afterRead(file,'urlList')" class="customUploadMul" @click-upload="(event)=>clickUpload(event,'urlList')">
<!-- -->
<!-- :max-count="3" v-model="fileList" multiple :deletable="true" -->
<template v-if="urlList.length > 0">
<div v-for="(item, index) in urlList" :key="'uploaded-' + index" class="uploaded-item">
<div v-for="(item, index) in urlList" :key="index" class="uploaded-item">
<img class="photo_item" mode="widthFix" :src="item.replace(/http:\/\//g, 'https://')" />
</div>
</template>
<template v-if="urlList.length < 3">
<template v-if="urlList.length < 3 && showFun()">
<div class="tipWrap">
<img class="photo_item" mode="widthFix" src="@/assets/authentication/carInfo_icon5.png"/>
<img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
@ -32,7 +33,7 @@
<span>{{title}}</span>
</div>
<div class="photo_img flex flex_between">
<van-uploader v-if="leftUrl" :after-read="(file) => afterRead(file,'leftImg')" class="customUpload" :disabled="!showFun()">
<van-uploader v-if="leftUrl" :after-read="(file) => afterRead(file,'leftImg')" class="customUpload" @click-upload="(event)=>clickUpload(event,'leftImg')">
<template v-if="form.leftImg">
<img class="photo_item" mode="widthFix" :src="form.leftImg.replace(/http:\/\//g, 'https://')" />
</template>
@ -41,7 +42,7 @@
<img class="camera" v-if="showFun()" src="@/assets/authentication/camera.png" />
</template>
</van-uploader>
<van-uploader v-if="rightUrl" :after-read="(file) => afterRead(file,'rightImg')" class="customUpload" :disabled="!showFun()">
<van-uploader v-if="rightUrl" :after-read="(file) => afterRead(file,'rightImg')" class="customUpload" @click-upload="(event)=>clickUpload(event,'rightImg')">
<template v-if="form.rightImg">
<img class="photo_item" mode="widthFix" :src="form.rightImg.replace(/http:\/\//g, 'https://')" />
</template>
@ -57,6 +58,8 @@
<script>
import {uploadImage} from "@/api/mine";
import { ImagePreview } from 'vant';
/*let baseUrl=''
if (window.location.href.includes('www.sinoassist.com')) {
baseUrl = 'https://www.sinoassist.com'
@ -101,21 +104,56 @@ export default {
mounted() {
setTimeout(()=>{
this.form.isInsure=this.inSure
// this.form.isInsure=1
},1500)
},
methods: {
async afterRead(file,type,index){ // 支持多文件上传
clickUpload(event,type){
if (!this.showFun()) {
let url=[]
if (type=='leftImg'){
url=[this.leftUrl?.replace(/http:\/\//g, 'https://')]
}else if(type=='rightImg'){
url= [this.rightUrl?.replace(/http:\/\//g, 'https://')]
}else{
url=this.urlList?.map(item => item?.replace(/http:\/\//g, 'https://'))
}
ImagePreview({
images: url,
closeable: true,
showIndex:false
});
console.log(url)
event.stopPropagation(); // 阻止事件冒泡
event.preventDefault(); // 阻止默认上传行为（如果支持）
return false; // 阻止后续逻辑
}
// 默认行为（允许上传）
},
async afterRead(file,type){ // 支持多文件上传
const formData = new FormData();
formData.append("file" , file.file);
let res = await uploadImage(formData)
if (type=='urlList' && (index==0 || index)){
this.$set( this.form.urlList,index,res.data)
}else if(type=='urlList'){
this.form[type].push(...this.urlList,res.data)
if (type=='urlList'){
console.log("this.urlList",this.urlList?.length)
if(this.urlList?.length==3){
const updatedList = [...this.urlList];
updatedList[2] = res?.data?.replace(/http:\/\//g, 'https://');
this.form.urlList = updatedList;
}else{
this.form.urlList=[res?.data?.replace(/http:\/\//g, 'https://'),...this.urlList]
}
const uniqueUrls = this.form.urlList?.reduce((acc, url) => {
if (!acc.includes(url)) {
acc.push(url);
}
return acc;
}, []);
this.$emit(type, uniqueUrls)
}else{
this.form[type] = res.data
}
this.$emit(type, this.form[type])
}
},
radioChange(val){
this.$emit('insureHandle',val)
@ -148,10 +186,23 @@ export default {
width: 100% !important;
display: flex;
flex-wrap: wrap;
/* ::v-deep .van-uploader__preview{
width: 100% !important;
}*/
}
.uploaded-item,.tipWrap{
width: calc(50% - 3px);
}
::v-deep .van-uploader__preview{
width: calc(50% - 3px);
margin: 0 0 8px 0;
.van-uploader__preview-image{
width: 100% !important;
}
}
::v-deep .van-uploader__preview:nth-child(odd){
margin-right: 5px !important;
}
}
.photo_wrap {
padding: 20px 12px 22px 17px;
@ -243,3 +294,8 @@ export default {
}
}
</style>
<style>
.van-image-preview{
z-index: 9999999999 !important;
}
</style>