From 991f6f78fccb86b2718ab96969a69304daafe2b4 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期一, 03 十一月 2025 17:32:50 +0800
Subject: [PATCH] fix: 完成巡查
---
src/pages/routingInspection/upload.vue | 158 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 134 insertions(+), 24 deletions(-)
diff --git a/src/pages/routingInspection/upload.vue b/src/pages/routingInspection/upload.vue
index 5b69b44..4e18c6b 100644
--- a/src/pages/routingInspection/upload.vue
+++ b/src/pages/routingInspection/upload.vue
@@ -18,20 +18,25 @@
<view class="attachment-list">
<wd-status-tip v-if="attachmentList.length === 0" image="content" tip="鏆傛棤闄勪欢" />
- <view v-for="item in attachmentList" :key="item.id" class="attachment-card">
+ <view v-for="(item, index) in attachmentList" :key="item.id || index" class="attachment-card">
<view class="media-wrapper" @click="previewAttachment(item)">
<!-- 鍥剧墖棰勮 -->
<template v-if="isImageType(item.url)">
<image
- v-if="!item.loadError"
:src="getFullUrl(item.url)"
mode="aspectFill"
class="media-preview"
- @error="onImageError(item)"
- @load="onImageLoad(item)"
+ style="width: 100%; height: 100%"
+ @error="onImageError(item, index)"
+ @load="onImageLoad(item, index)"
+ :show-menu-by-longpress="true"
/>
+ <!-- 鍔犺浇涓伄缃� -->
+ <view v-if="item.loading" class="loading-mask">
+ <text class="loading-text">鍔犺浇涓�...</text>
+ </view>
<!-- 鍥剧墖鍔犺浇澶辫触鏄剧ず榛樿鍥炬爣 -->
- <view v-else class="file-icon-wrapper">
+ <view v-if="item.loadError" class="file-icon-wrapper error-overlay">
<wd-icon name="picture" size="48px" color="#ccc" />
<text class="file-name error-text">鍔犺浇澶辫触</text>
</view>
@@ -40,15 +45,15 @@
<!-- 瑙嗛棰勮 -->
<template v-else-if="isVideoType(item.url)">
<video
- v-if="!item.loadError"
:src="getFullUrl(item.url)"
class="media-preview"
:controls="false"
- :show-center-play-btn="false"
- @error="onVideoError(item)"
+ :show-center-play-btn="true"
+ @error="onVideoError(item, index)"
+ object-fit="cover"
/>
<!-- 瑙嗛鍔犺浇澶辫触鏄剧ず榛樿鍥炬爣 -->
- <view v-else class="file-icon-wrapper">
+ <view v-if="item.loadError" class="file-icon-wrapper error-overlay">
<wd-icon name="video" size="48px" color="#ccc" />
<text class="file-name error-text">鍔犺浇澶辫触</text>
</view>
@@ -73,15 +78,17 @@
</template>
<script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed, watch } from "vue";
import { useToast } from "wot-design-uni";
import AttachmentAPI from "@/api/product/attachment";
// H5 浣跨敤 VITE_APP_BASE_API 浣滀负浠ｇ悊璺緞锛屽叾浠栧钩鍙颁娇鐢� VITE_APP_API_URL 浣滀负璇锋眰璺緞
-let baseUrl = import.meta.env.VITE_APP_API_URL;
+let baseUrlValue = import.meta.env.VITE_APP_API_URL || "";
// #ifdef H5
-baseUrl = import.meta.env.VITE_APP_BASE_API;
+baseUrlValue = import.meta.env.VITE_APP_BASE_API || "";
// #endif
+
+const baseUrl = ref(baseUrlValue); // 浣跨敤ref浣垮叾鍦ㄦā鏉夸腑鍙闂�
// 澶栭儴鍙傛暟
const props = defineProps({
@@ -91,35 +98,100 @@
});
const toast = useToast();
-const attachmentList = ref<any[]>(props.detailData.files || []);
-const attachmentIds = ref<string[]>(props.detailData.attachmentId || []);
+
+// 鑾峰彇鍒濆鏁版嵁
+const getInitialData = () => {
+ // 澶勭悊涓嶅悓鐨勬暟鎹粨鏋�
+ let data = props.detailData;
+
+ // 濡傛灉鏄� ref 瀵硅薄锛岃幏鍙栧叾 value
+ if (data && typeof data === "object" && "value" in data) {
+ data = data.value;
+ }
+
+ // 濡傛灉鏄暟缁勶紝鐩存帴杩斿洖
+ if (Array.isArray(data)) {
+ return data.map((item) => ({
+ ...item,
+ loading: false,
+ loadError: false,
+ }));
+ }
+
+ // 濡傛灉鏈� files 灞炴��
+ if (data && data.files) {
+ const files = Array.isArray(data.files) ? data.files : [];
+ return files.map((item) => ({
+ ...item,
+ loading: false,
+ loadError: false,
+ }));
+ }
+
+ return [];
+};
+
+const attachmentList = ref<any[]>(getInitialData());
+const attachmentIds = ref<string[]>(attachmentList.value.map((item: any) => item.id) || []);
+
+// 鐩戝惉 props.detailData 鍙樺寲
+watch(
+ () => props.detailData,
+ (newVal) => {
+ const newData = getInitialData();
+ if (newData.length > 0) {
+ attachmentList.value = newData.map((item) => ({
+ ...item,
+ loading: false,
+ loadError: false,
+ }));
+ attachmentIds.value = newData.map((item: any) => item.id);
+ }
+ },
+ { deep: true, immediate: false }
+);
// 鑾峰彇瀹屾暣鐨勫浘鐗�/瑙嗛 URL
const getFullUrl = (url: string) => {
if (!url) return "";
+
// 濡傛灉宸茬粡鏄畬鏁寸殑 URL锛坔ttp 鎴� https 寮�澶达級锛岀洿鎺ヨ繑鍥�
if (url.startsWith("http://") || url.startsWith("https://")) {
return url;
}
+
+ // 妫�鏌� baseUrl 鏄惁鏈夋晥
+ if (!baseUrl.value) {
+ console.error("鉂� baseUrl鏈厤缃紝url:", url);
+ return url;
+ }
+
// 濡傛灉鏄浉瀵硅矾寰勶紝鎷兼帴鍩虹 URL
- return `${baseUrl}${url.startsWith("/") ? "" : "/"}${url}`;
+ const separator = url.startsWith("/") || baseUrl.value.endsWith("/") ? "" : "/";
+ return `${baseUrl.value}${separator}${url}`;
};
// 鍥剧墖鍔犺浇鎴愬姛
-const onImageLoad = (item: any) => {
+const onImageLoad = (item: any, index: number) => {
+ item.loading = false;
item.loadError = false;
+ attachmentList.value = [...attachmentList.value];
};
// 鍥剧墖鍔犺浇澶辫触
-const onImageError = (item: any) => {
- console.error("鍥剧墖鍔犺浇澶辫触:", item.url);
+const onImageError = (item: any, index: number) => {
+ console.error(`鍥剧墖鍔犺浇澶辫触 [${index}]:`, item.url);
+ item.loading = false;
item.loadError = true;
+ attachmentList.value = [...attachmentList.value];
};
// 瑙嗛鍔犺浇澶辫触
-const onVideoError = (item: any) => {
- console.error("瑙嗛鍔犺浇澶辫触:", item.url);
+const onVideoError = (item: any, index: number) => {
+ console.error(`瑙嗛鍔犺浇澶辫触 [${index}]:`, item.url);
+ item.loading = false;
item.loadError = true;
+ attachmentList.value = [...attachmentList.value];
};
// 鏂板闄勪欢
@@ -405,14 +477,23 @@
.attachment-card {
width: 100%;
- aspect-ratio: 1;
+ position: relative;
+
+ // 浣跨敤 padding-top 瀹炵幇姝ｆ柟褰紙鍏煎鎬ф洿濂斤級
+ &::before {
+ content: "";
+ display: block;
+ padding-top: 100%; // 楂樺害绛変簬瀹藉害
+ }
}
}
.media-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
@@ -421,6 +502,25 @@
width: 100%;
height: 100%;
object-fit: cover;
+ display: block;
+ }
+
+ .loading-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.3);
+ z-index: 5;
+
+ .loading-text {
+ font-size: 12px;
+ color: #fff;
+ }
}
.file-icon-wrapper {
@@ -448,6 +548,16 @@
color: #ff4757;
}
}
+
+ &.error-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(255, 255, 255, 0.9);
+ z-index: 5;
+ }
}
.delete-btn {
--
Gitblit v1.9.3