70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<view
|
|
v-if="visibleFiles.length"
|
|
class="feed-media"
|
|
:class="`feed-media--${layout}`"
|
|
>
|
|
<image
|
|
v-for="file in visibleFiles"
|
|
:key="file.fileId || file.ossId || file.accessUrl"
|
|
class="feed-media__image"
|
|
:src="file.accessUrl"
|
|
mode="aspectFill"
|
|
role="button"
|
|
:aria-label="imageLabel"
|
|
@click.stop="preview(file)"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
files: { type: Array, default: () => [] },
|
|
imageLabel: { type: String, default: "查看动态图片" },
|
|
});
|
|
|
|
const visibleFiles = computed(() =>
|
|
props.files.filter((file) => typeof file?.accessUrl === "string" && file.accessUrl),
|
|
);
|
|
const layout = computed(() => {
|
|
if (visibleFiles.value.length === 1) return "single";
|
|
if (visibleFiles.value.length === 2) return "double";
|
|
return "grid";
|
|
});
|
|
const preview = (file) => {
|
|
const urls = visibleFiles.value.map((item) => item.accessUrl);
|
|
if (!file?.accessUrl || !urls.length || typeof uni?.previewImage !== "function") return;
|
|
uni.previewImage({ current: file.accessUrl, urls });
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.feed-media {
|
|
display: grid;
|
|
gap: 8rpx;
|
|
margin-top: 16rpx;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
}
|
|
.feed-media--single {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.feed-media--double {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.feed-media--grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.feed-media__image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 190rpx;
|
|
background: rgba(120, 84, 48, 0.08);
|
|
}
|
|
.feed-media--single .feed-media__image {
|
|
height: 360rpx;
|
|
}
|
|
</style>
|