feat: 图片支持多张上传

pages/order/arrived-on-site.vue

@@ -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="item upload">
-        <view class="left">
+        <view class="info">
           <view class="title flex-l">拍照打卡</view>
           <view class="desc flex-l">请上传上门的打卡照片</view>
         </view>
-        <view class="right flex-c">
+        <view class="imgs-ctr">
-          <view v-if="img" @click="delImg()" class="img-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="img"></image>
+            <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 = () => {
+const delImg = (idx) => {
-  img.value = ''
+  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(() => {
+        // api.arrivedOnSite({order_dispatch_id: id.value, images: images.value}).then(() => {
-          uni.hideLoading();
+        //   uni.hideLoading();
-          uni.showToast({
+        //   uni.showToast({
-            title: '已上门',
+        //     title: '已上门',
-            icon: "success"
+        //     icon: "success"
-          })
+        //   })
-          setTimeout(() => {
+        //   setTimeout(() => {
-            helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
+        //     helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
-          }, 1000)
+        //   }, 1000)
-        }).catch(() => {})
+        // }).catch(() => {})
       }
     }
   });
@@ -200,8 +213,8 @@ const init = () => {
       }
     }
     .upload {
-      .left {
+      .info {
-        width: 516rpx;
+        width: 100%;
         height: 130rpx;
         .title {
           width: 100%;
@@ -216,12 +229,17 @@ const init = () => {
           color: var(--descriptionColor);
         }
       }
-      .right {
+      .imgs-ctr {
-        width: 130rpx;
+        width: 100%;
-        height: 130rpx;
+        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;