Skip to content

G
GaoQuYingJiH5-ASD
Commit c8a7e115 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

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

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