下料

components/nbd-photo-view.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="nvd-photo-view">
+		<!-- 空状态 -->
+		<view v-if="photos.length === 0" class="nvd-photo-view__empty">
+			<text class="nvd-photo-view__empty-text">暂无图片</text>
+		</view>
+
+		<!-- 图片网格 -->
+		<view v-else class="nvd-photo-view__grid">
+			<view
+				v-for="(photo, index) in photos"
+				:key="photo._id"
+				class="nvd-photo-view__item"
+				:style="{ width: `${750 / cols}rpx`, height: `${750 / cols}rpx` }"
+				@click="handlePreview(index)"
+			>
+				<image
+					class="nvd-photo-view__img"
+					:src="photo.src"
+					mode="aspectFill"
+				/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { parseAttachUrls } from '@/utils/request.js'
+
+const props = defineProps({
+	/** 逗号分隔的附件路径字符串，如 "FileUpLoad/a.png,FileUpLoad/b.png" */
+	attachUrl: { type: String, default: '' },
+	/** 每行显示列数 */
+	cols: { type: Number, default: 3 }
+})
+
+const photos = computed(() => {
+	if (!props.attachUrl) return []
+	return parseAttachUrls(props.attachUrl)
+})
+
+const handlePreview = (index) => {
+	const urls = photos.value.map((p) => p.src)
+	uni.previewImage({ current: index, urls })
+}
+</script>
+
+<style lang="scss" scoped>
+$radius: 10rpx;
+$gap: 10rpx;
+
+.nvd-photo-view {
+	width: 100%;
+
+	&__empty {
+		padding: 48rpx 24rpx;
+		text-align: center;
+
+		&-text {
+			font-size: 26rpx;
+			color: #8e99a4;
+		}
+	}
+
+	&__grid {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	&__item {
+		padding: 12rpx;
+		box-sizing: border-box;
+	}
+
+	&__img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border-radius: $radius;
+		background: #f0f2f5;
+        border: 1px solid #e0e0e0;
+	}
+}
+</style>