Commit c8a7e115 authored by xinzhedeai's avatar xinzhedeai

add:商户图片编辑、删除、相册选择每次一个。

parent 25b982ea
...@@ -244,3 +244,9 @@ select:disabled { ...@@ -244,3 +244,9 @@ select:disabled {
font-size: 16px; font-size: 16px;
transition: color 0.2s; transition: color 0.2s;
} }
.img-wrapper{
display: flex;
gap: .12rem;
}
\ No newline at end of file
...@@ -197,22 +197,23 @@ ...@@ -197,22 +197,23 @@
</select> </select>
</div> </div>
</div> </div>
<div> <div>
<h5 class="imager-item-title"> <h5 class="imager-item-title">
<span class="form-label">商家平面图</span> <span class="form-label">商家平面疏散</span>
<span></span> <span></span>
</h5> </h5>
<!-- 详情模式 --> <!-- 详情模式 -->
<!-- <div class="img-wrapper" style="display: flex;gap:.16rem;"> <!-- <div class="img-wrapper" style="display: flex;gap:.16rem;">
<div style="position: relative;" v-for="(imgItem, index) in formData.floorPlanPhotos"> <div style="position: relative;" v-for="(imgItem, index) in formData.floorEvacuationPlan">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.floorPlanPhotos, index)" /> @click="showImage(formData.floorEvacuationPlan, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete" <div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorPlan')"><i @click="handleDeleteFloorPlan(index, 'floorEvacuationPlan')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div> class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div> </div>
<div v-if="formData.floorPlanPhotos.length<4 && flag=='XG' "> <div v-if="formData.floorEvacuationPlan.length<4 && flag=='XG' ">
<van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')" <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorEvacuationPlan')"
class="uploader-wrapper" :deletable="false" :preview-image="false"> class="uploader-wrapper" :deletable="false" :preview-image="false">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset=""> <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
</van-uploader> </van-uploader>
...@@ -220,57 +221,59 @@ ...@@ -220,57 +221,59 @@
</div> --> </div> -->
<!-- 开始 --> <!-- 开始 -->
<div class="img-wrapper"> <div class="img-wrapper">
<div style="position: relative;width:1.6rem;float: left;margin-right: .1rem;" v-for="(imgItem, index) in formData.floorPlanPhotos"> <div style="position: relative;width:1.6rem;" v-for="(imgItem, index) in formData.floorEvacuationPlan">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.floorPlanPhotos, index)" /> @click="showImage(formData.floorEvacuationPlan, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete" <div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorPlan')"><i @click="handleDeleteFloorPlan(index, 'floorEvacuationPlan')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div> class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div> </div>
<div v-if="formData.floorPlanPhotos.length<4 && flag=='XG' "> <div v-if="formData.floorEvacuationPlan.length<4 && flag=='XG' ">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;"
alt="" srcset="" @click="paizhao('floorPlan',4)"> alt="" srcset="" @click="paizhao('floorEvacuationPlan',1)">
</div> </div>
</div> </div>
<!-- 结束 --> <!-- 结束 -->
</div> </div>
<div>
<h5 class="imager-item-title"> <div>
<span class="form-label">商家平面疏散图</span> <h5 class="imager-item-title">
<span></span> <span class="form-label">商家平面图</span>
</h5> <span></span>
<!-- 详情模式 --> </h5>
<!-- <div class="img-wrapper" style="display: flex;gap:.16rem;"> <!-- 详情模式 -->
<div style="position: relative;" v-for="(imgItem, index) in formData.floorEvacuationPlan"> <!-- <div class="img-wrapper" style="display: flex;gap:.16rem;">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <div style="position: relative;" v-for="(imgItem, index) in formData.floorPlanPhotos">
@click="showImage(formData.floorEvacuationPlan, index)" /> <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
<div v-if="flag=='XG'" class="van-uploader__preview-delete" @click="showImage(formData.floorPlanPhotos, index)" />
@click="handleDeleteFloorPlan(index, 'floorEvacuationPlan')"><i <div v-if="flag=='XG'" class="van-uploader__preview-delete"
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div> @click="handleDeleteFloorPlan(index, 'floorPlan')"><i
</div> class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
<div v-if="formData.floorEvacuationPlan.length<4 && flag=='XG' "> </div>
<van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorEvacuationPlan')" <div v-if="formData.floorPlanPhotos.length<4 && flag=='XG' ">
class="uploader-wrapper" :deletable="false" :preview-image="false"> <van-uploader :before-read="beforeRead" :after-read="(file) => afterRead(file, 'floorPlan')"
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset=""> class="uploader-wrapper" :deletable="false" :preview-image="false">
</van-uploader> <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" alt="" srcset="">
</div> </van-uploader>
</div> --> </div>
</div> -->
<!-- 开始 --> <!-- 开始 -->
<div class="img-wrapper"> <div class="img-wrapper">
<div style="position: relative;width:1.6rem;float: left;margin-right: .1rem;" v-for="(imgItem, index) in formData.floorEvacuationPlan"> <div style="position: relative;width:1.6rem;" v-for="(imgItem, index) in formData.floorPlanPhotos">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.floorEvacuationPlan, index)" /> @click="showImage(formData.floorPlanPhotos, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete" <div v-if="flag=='XG'" class="van-uploader__preview-delete"
@click="handleDeleteFloorPlan(index, 'floorEvacuationPlan')"><i @click="handleDeleteFloorPlan(index, 'floorPlanPhotos')"><i
class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div> class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i></div>
</div> </div>
<div v-if="formData.floorEvacuationPlan.length<4 && flag=='XG' "> <div v-if="formData.floorPlanPhotos.length<4 && flag=='XG' ">
<img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;" <img src="../image/code/upload.png" style="width:1.6rem;height: 1.6rem;"
alt="" srcset="" @click="paizhao('floorEvacuationPlan',4)"> alt="" srcset="" @click="paizhao('floorPlanPhotos',1)">
</div> </div>
</div> </div>
<!-- 结束 --> <!-- 结束 -->
</div> </div>
<div style="overflow: hidden;"> <div style="overflow: hidden;">
<h5 class="imager-item-title"> <h5 class="imager-item-title">
<span class="form-label">营业执照</span> <span class="form-label">营业执照</span>
...@@ -294,7 +297,7 @@ ...@@ -294,7 +297,7 @@
</div> --> </div> -->
<!-- 开始 --> <!-- 开始 -->
<div class="img-wrapper"> <div class="img-wrapper">
<div style="position: relative;width:1.6rem;float: left;margin-right: .1rem;" v-for="(imgItem, index) in formData.businessLicensePhotos"> <div style="position: relative;width:1.6rem;" v-for="(imgItem, index) in formData.businessLicensePhotos">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.businessLicensePhotos, index)" /> @click="showImage(formData.businessLicensePhotos, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete" <div v-if="flag=='XG'" class="van-uploader__preview-delete"
...@@ -332,7 +335,7 @@ ...@@ -332,7 +335,7 @@
</div> --> </div> -->
<!-- 开始 --> <!-- 开始 -->
<div class="img-wrapper"> <div class="img-wrapper">
<div style="position: relative;width:1.6rem;float: left;margin-right: .1rem;" v-for="(imgItem, index) in formData.storefrontPhotos"> <div style="position: relative;width:1.6rem;" v-for="(imgItem, index) in formData.storefrontPhotos">
<img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;" <img :src="previewUrl + imgItem" style="width: 1.6rem; height: 1.6rem;"
@click="showImage(formData.storefrontPhotos, index)" /> @click="showImage(formData.storefrontPhotos, index)" />
<div v-if="flag=='XG'" class="van-uploader__preview-delete" <div v-if="flag=='XG'" class="van-uploader__preview-delete"
......
...@@ -161,11 +161,11 @@ window.addEventListener('load', function () { ...@@ -161,11 +161,11 @@ window.addEventListener('load', function () {
console.log('chooseFileUpload方法', value) console.log('chooseFileUpload方法', value)
var photosVar = [] var photosVar = []
// 根据选择的图片不同进行区分设置 // 根据选择的图片不同进行区分设置
if(VUE.photosType === 'floorPlan'){ if(VUE.photosType === 'floorPlanPhotos'){
photosVar = VUE.formData.floorPlanPhotos photosVar = VUE.formData.floorPlanPhotos
}else if(VUE.photosType === 'businessLicensePhotos'){ }else if(VUE.photosType === 'businessLicensePhotos'){
photosVar = VUE.formData.businessLicensePhotos photosVar = VUE.formData.businessLicensePhotos
}else if(VUE.photosType === 'storeFront'){ }else if(VUE.photosType === 'storefrontPhotos'){
photosVar = VUE.formData.storefrontPhotos photosVar = VUE.formData.storefrontPhotos
}else if(VUE.photosType === 'floorEvacuationPlan'){ }else if(VUE.photosType === 'floorEvacuationPlan'){
photosVar = VUE.formData.floorEvacuationPlan photosVar = VUE.formData.floorEvacuationPlan
...@@ -186,7 +186,9 @@ window.addEventListener('load', function () { ...@@ -186,7 +186,9 @@ window.addEventListener('load', function () {
if (photosVar.length > maxSelectNum) { if (photosVar.length > maxSelectNum) {
const result = photosVar.slice(0, maxSelectNum) const result = photosVar.slice(0, maxSelectNum)
console.log('大小比较', photosVar.length > maxSelectNum, result) console.log('大小比较', photosVar.length > maxSelectNum, result)
photosVar = result photosVar = []
photosVar.push(...result)
} }
} }
}, },
...@@ -240,83 +242,83 @@ window.addEventListener('load', function () { ...@@ -240,83 +242,83 @@ window.addEventListener('load', function () {
}, },
// 处理平面图删除 // 处理平面图删除
handleDeleteFloorPlan(index, type) { handleDeleteFloorPlan(index, type) {
if(type === 'floorPlan'){ if(type === 'floorPlanPhotos'){
this.formData.floorPlanPhotos.splice(index, 1); this.formData.floorPlanPhotos.splice(index, 1);
}else if(type === 'license'){ }else if(type === 'businessLicensePhotos'){
this.formData.businessLicensePhotos.splice(index, 1); this.formData.businessLicensePhotos.splice(index, 1);
}else if(type === 'storeFront'){ }else if(type === 'storefrontPhotos'){
this.formData.storefrontPhotos.splice(index, 1); this.formData.storefrontPhotos.splice(index, 1);
}else if(type === 'floorEvacuationPlan'){ }else if(type === 'floorEvacuationPlan'){
this.formData.floorEvacuationPlan.splice(index, 1); this.formData.floorEvacuationPlan.splice(index, 1);
} }
}, },
beforeRead(file) { // beforeRead(file) {
if(!['image/png','image/jpeg','image/jpg'].includes(file.type)){ // if(!['image/png','image/jpeg','image/jpg'].includes(file.type)){
vant.Dialog.alert({ // vant.Dialog.alert({
title: '信息提示', // title: '信息提示',
message: '文件格式不正确' // message: '文件格式不正确'
}) // })
return; // return;
} // }
if (file.size > (10 * 1024 * 1024)) { // if (file.size > (10 * 1024 * 1024)) {
vant.Dialog.alert({ // vant.Dialog.alert({
title: '信息提示', // title: '信息提示',
message: '文件大小不可超过10M' // message: '文件大小不可超过10M'
}) // })
return false; // return false;
} // }
return true; // return true;
}, // },
afterRead(file, type) { // 调用爱山东中台系统,将数据流传递过去 // afterRead(file, type) { // 调用爱山东中台系统,将数据流传递过去
vant.Toast.loading({ // vant.Toast.loading({
message: '正在处理...', // message: '正在处理...',
forbidClick: true, // forbidClick: true,
loadingType: 'spinner', // loadingType: 'spinner',
}); // });
// 文件读取完成后的处理逻辑 // // 文件读取完成后的处理逻辑
const formData = new FormData(); // const formData = new FormData();
formData.append('file', file.file); // 通过FormData构建要上传的文件数据 // formData.append('file', file.file); // 通过FormData构建要上传的文件数据
// formData.append('biz_content',SM.encrypt('dangerjob', API_KEY_MAP["upload"]["publicKey"])); // // formData.append('biz_content',SM.encrypt('dangerjob', API_KEY_MAP["upload"]["publicKey"]));
// 发送HTTP POST请求 // // 发送HTTP POST请求
fetch(BASE_URL + '/common/upload', { // fetch(BASE_URL + '/common/upload', {
method: 'POST', // method: 'POST',
body: formData, // body: formData,
headers: { // headers: {
'Authorization': gemhoUtil.getCookie('token'), // 'Authorization': gemhoUtil.getCookie('token'),
} // }
}) // })
.then(response => { // .then(response => {
if (response.ok) { // if (response.ok) {
return response.json(); // return response.json();
} // }
throw new Error('Network response was not ok.'); // throw new Error('Network response was not ok.');
}) // })
.then(value => { // .then(value => {
console.log(value, 'value图片上********'); // 处理后端返回的数据 // console.log(value, 'value图片上********'); // 处理后端返回的数据
if(value){ // 返回信息不为空,则进行解密操作 // if(value){ // 返回信息不为空,则进行解密操作
if(type === 'floorPlan'){ // if(type === 'floorPlanPhotos'){
this.formData.floorPlanPhotos.push(value.fileName) // this.formData.floorPlanPhotos.push(value.fileName)
}else if(type === 'license'){ // }else if(type === 'businessLicensePhotos'){
this.formData.businessLicensePhotos.push(value.fileName) // this.formData.businessLicensePhotos.push(value.fileName)
}else if(type === 'storeFront'){ // }else if(type === 'storefrontPhotos'){
this.formData.storefrontPhotos.push(value.fileName) // this.formData.storefrontPhotos.push(value.fileName)
}else if(type === 'floorEvacuationPlan'){ // }else if(type === 'floorEvacuationPlan'){
this.formData.floorEvacuationPlan.push(value.fileName) // this.formData.floorEvacuationPlan.push(value.fileName)
} // }
// 可根据后端返回的数据做进一步处理,如显示上传成功信息等 // // 可根据后端返回的数据做进一步处理,如显示上传成功信息等
setTimeout(() => { // setTimeout(() => {
vant.Toast.clear() // vant.Toast.clear()
}, 0); // }, 0);
}else{ // }else{
this.afterRead(file) // this.afterRead(file)
} // }
}) // })
.catch(error => { // .catch(error => {
// console.error('There has been a problem with your fetch operation:', error); // // console.error('There has been a problem with your fetch operation:', error);
}); // });
}, // },
viewDetail(item) { viewDetail(item) {
let params = { let params = {
id: item.id, id: item.id,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment