miniprogram-jituan/index/index.vue

<template>
	<view class="body">
		<view v-for="(item,i) in list" :key="i">
			<image v-if="item.cover" class="imgStryle"
				:style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : '' "
				@load="v=>loadIndex(v,i)" @click="() => tonext(item)" :src="item.cover" mode="scaleToFill" />
			<swiper @change="e=>change(i + '-' + e.detail.current)" v-if="item.swiper_list && item.swiper_list.length"
				:indicator-dots="true" :autoplay="autoplay"
				:style=" item.swiper_list[0].style ? 'height:' + item.swiper_list[0].style.h + 'px' : '' "
				:interval="3000" :duration="1000">
				<swiper-item v-for="(v, o) in item.swiper_list" :key="'swiper-item' + i">
					<video class="imgStryle videos" :id="`${i}-${o}`"
						:style=" v.style ? 'width:'+ v.style.w +'px;height:' + v.style.h + 'px' : '' " :src="v.url"
						:autoplay="item.current == o"
						@loadedmetadata="video_item=>videoLoadIndex(video_item.detail, i, o)" initial-time="0.01"
						@play="play" @ended="ended" :poster="v.cover" :enable-progress-gesture="false" controls></video>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import config from "../../config/index.js";
	import {
		onShareAppMessage,
		onShareTimeline,
		onReady
	} from '@dcloudio/uni-app'

	const info = uni.getSystemInfoSync();
	const list = ref([]);
	const autoplay = ref(true);
	let lastVideoId = undefined;
	onShareAppMessage(() => {})
	onShareTimeline(() => {})
	onReady(() => {

	})

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

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

	function videoLoadIndex(v, i, o) {
		const w = info.windowWidth - 16;
		const h = v.height / v.width * w;
		list.value[i].swiper_list[o].style = {
			w,
			h
		}
	}

	function tonext(T) {
		T.pageType === "detail" && uni.navigateTo({
			url: "/pages/brief/brief?title=" + T.subTitle + "&page=" + T.page
		});

		T.pageType === "single_row" && uni.navigateTo({
			url: "/pages/single_row/single_row?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
		})

		T.pageType === "single_list" && uni.navigateTo({
			url: "/pages/single_list/single_list?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
		})
	}

	function play(e) {
		autoplay.value = false;
		if (e.currentTarget.id === lastVideoId || !lastVideoId) {
			lastVideoId = e.currentTarget.id
			return
		}
		const oldVideo = wx.createVideoContext(lastVideoId, this);
		oldVideo.pause();
		lastVideoId = e.currentTarget.id
	}

	function ended() {
		autoplay.value = true;
	}

	function change(id) {
		if (!wx || !id || lastVideoId === id) return
		const nowVideo = wx.createVideoContext(id, this);
		nowVideo.play();
	}
</script>

<style lang="scss">
	.body {
		padding: 1em 0;

		.imgStryle {
			margin: 2px 8px;
			border-radius: 10px;
		}
	}
</style>