hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 图片支持多张上传

Browse Source
This commit is contained in:
苟川东 2025-04-18 10:48:46 +08:00
parent d05d048eb3
commit 78c4b847f7
1 changed files with 47 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
pages/order/arrived-on-site.vue
View File

@ -5,16 +5,17 @@
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
<text class="text">上门后请提交信息</text>
</view>
<view class="item upload flex-sb">
<view class="left">
<view class="item upload">
<view class="info">
<view class="title flex-l">拍照打卡</view>
<view class="desc flex-l">请上传上门的打卡照片</view>
</view>
<view class="right flex-c">
<view v-if="img" @click="delImg()" class="img-ctr">
<image class="img" mode="aspectFill" :src="img"></image>
<view class="imgs-ctr">
<view v-for="(imgUrl, index) in images" :key="index" @click="delImg(index)" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
<image class="img" mode="aspectFill" :src="imgUrl"></image>
</view>
<view v-else @click="upload()" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
<view @click="upload()" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
hover-start-time="0" hover-stay-time="50">
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
<view class="up flex-c">点击上传</view>
</view>
@ -40,7 +41,19 @@ import api from "../../api/api";
import {throttle} from "../../utils/throttle";
import enums from "../../utils/enums";
const img = ref('');
let url = 'https://allocatr.oss-cn-hangzhou.aliyuncs.com/uploads/20250418/560cb5b5baea2ba5a5ef479af7dc79e0.png'
const images = ref([
url,
url,
url,
url,
url,
url,
url,
url,
url,
url,
])
const upload = () => {
uni.chooseImage({
@ -76,8 +89,8 @@ const upload = () => {
}
let fullUrl = res.cdnurl + '/' + res.key
images.value.push(fullUrl)
helpers.showToast('上传成功')
img.value = fullUrl
},
fail(e) {
helpers.showToast('上传文件失败')
@ -92,14 +105,14 @@ const upload = () => {
});
}
const delImg = () => {
img.value = ''
const delImg = (idx) => {
images.value.splice(idx, 1)
helpers.showToast('图片已删除')
}
//预约上门时间
const submit = throttle(() => {
if (!img.value) {
if (!images.value) {
return helpers.showToast('请上传上门的打卡照片')
}
@ -112,16 +125,16 @@ const submit = throttle(() => {
uni.showLoading({
title: '提交中'
});
api.arrivedOnSite({order_dispatch_id: id.value, img: img.value}).then(() => {
uni.hideLoading();
uni.showToast({
title: '已上门',
icon: "success"
})
setTimeout(() => {
helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
}, 1000)
}).catch(() => {})
// api.arrivedOnSite({order_dispatch_id: id.value, images: images.value}).then(() => {
// uni.hideLoading();
// uni.showToast({
// title: '已上门',
// icon: "success"
// })
// setTimeout(() => {
// helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
// }, 1000)
// }).catch(() => {})
}
}
});
@ -200,8 +213,8 @@ const init = () => {
}
}
.upload {
.left {
width: 516rpx;
.info {
width: 100%;
height: 130rpx;
.title {
width: 100%;
@ -216,12 +229,17 @@ const init = () => {
color: var(--descriptionColor);
}
}
.right {
width: 130rpx;
height: 130rpx;
.imgs-ctr {
width: 100%;
min-height: 100rpx;
display: flex;
flex-wrap: wrap;
.img-ctr {
width: 100rpx;
height: 100rpx;
margin-right: 36rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
.img {
width: 100%;
height: 100%;
@ -233,6 +251,9 @@ const init = () => {
height: 100rpx;
background: var(--contentBgColor);
border-radius: 8rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
//margin-left: 36rpx;
.up {
width: 100%;
height: 36rpx;