86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<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>
|