miniprogram-jituan/single_list/single_list.vue

<template>
	<image v-if="props.url" @load="loaded" :style="'width:'+ headImg.w +'px;height:'+ headImg.h +'px'" :src="props.url"
		mode="scaleToFill"></image>
	<image class="row_img" :style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : ''"
		@load="v=>loadIndex(v,i)" :src="item.cover" @click="()=>open(item)" v-for="(item,i) in list" :key="i"
		mode="scaleToFill"></image>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from "vue";
	import {
		showPDF
	} from "../../unit/index.js";
	import config from "../../config/index.js";
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	onShareAppMessage(()=>{})
	onShareTimeline(()=>{})
	const info = uni.getSystemInfoSync();
	const props = defineProps({
		title: String,
		url: String,
		page: String
	})

	uni.setNavigationBarTitle({
		title: props.title
	})

	const list = ref([]);

	uni.request({
		url: config.base + props.page + ".json?" + Date.now(),
		success: res => {
			if (res.statusCode !== 200) return
			list.value = res.data || [];
		}
	})

	const headImg = ref({
		w: 0,
		h: 0
	})

	function loaded(v) {
		const w = info.windowWidth;
		const h = v.detail.height / v.detail.width * w;
		headImg.value = {
			w,
			h
		}
	}


	function loadIndex(v, i) {
		const w = info.windowWidth - 8;
		const h = v.detail.height / v.detail.width * w;
		list.value[i].style = {
			w,
			h
		};
	}

	function open(item) {
		if (!item.pdfUrl) {
			uni.showToast({
				title: "暂无数据",
				icon: "none"
			});
			return
		}
		const file_type = item.pdfUrl.split(".").reverse()[0];
		if (file_type === 'mp4') {
			wx.previewMedia({
				sources: [
					{
						url: item.pdfUrl,
						type: 'video'
					}
				]
			})
			return
		} else if (file_type === 'pdf') showPDF(item.pdfUrl);
	}
</script>

<style lang="scss">
	.row_img {
		display: block;
		margin: 4px 0 0 4px;
		border-radius: 7px;
	}
</style>