samehome/pages/index/index.vue

<template>
	<view class="main">
		<view class="nav-head">
			<view class="title">{{ i18n.HOME }}</view>
			<u-button class="button" color="#323045">{{ i18n.customerService }}</u-button>
		</view>

		<u-swiper class="swiper" :list="swiperList" previousMargin="48rpx" nextMargin="80rpx" circular :autoplay="true"
			radius="32rpx" bgColor="rgba(0,0,0,0)" height="360rpx"></u-swiper>
		<view class="message">
			<u-icon class="icon" name="../../static/home/ic_proclamation.png" size="60rpx" width="60rpx"></u-icon>
			<view class="text">{{ i18n.homeMessage }}</view>
		</view>
		<view class="btnDiv">
			<view class="item">
				<u--image class="img" :showLoading="true" src="../../static/home/img_recharge.png" width="144rpx"
					height="144rpx" @click="click"></u--image>
				<view class="text">{{ i18n.Recharge }}</view>
			</view>
			<view class="item">
				<u--image class="img" :showLoading="true" src="../../static/home/img_Mine.png" width="144rpx"
					height="144rpx" @click="click"></u--image>
				<view class="text">{{ i18n.Mine }}</view>
			</view>
			<view class="item">
				<u--image class="img" :showLoading="true" src="../../static/home/img_Subcription.png" width="144rpx"
					height="144rpx" @click="click"></u--image>
				<view class="text">{{ i18n.Subcription }}</view>
			</view>
		</view>
		<view class="steps">
			<view class="content">
				<view class="title">{{ i18n.TodaySteps }}</view>
				<u-button class="button" color="#00E8A2">{{ i18n.ReceiveEarnings }}</u-button>
			</view>
		</view>
		<view v-for="(item, index) in videoList" :key="index">
			<video class="video" :id="`video-${index}`" :enable-progress-gesture="false" :src="item.url"
				:poster="item.poster" :title="item.title" controls @play="stopOtherVideoPlay" :key="index" ></video>
		</view>
		<tab-bar :selectActive="1"></tab-bar>
	</view>
</template>

<script>
let videoPlayerObj = {};
export default {
	name: 'home',
	data() {
		return {
			swiperList: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			],
			videoList: [
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				},
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				},
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				},
				{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				},
			],
		}
	},
	onLoad() {

	},
	onShow() {
		// 生成播放器队列对象
		this.videoList.forEach((item, index) => {
			const VideoPlayer = uni.createVideoContext(`video-${index}`, this)
			videoPlayerObj[`video-${index}`] = VideoPlayer
		});
	},
	onHide() {
		this.stopAllVideoPlay()
	},
	computed: {
		i18n() {
			return this.$t('home')
		}
	},
	methods: {
		/**
		 *  在播放视频是暂停其他视频
		 * @param {*} e 
		 */
		stopOtherVideoPlay(e) {
			const keyArr = Object.keys(videoPlayerObj)
			keyArr.forEach(item => {
				if (item !== e.target.id) {
					videoPlayerObj[item].pause()
				}
			});
		},
		/**
		 *  在跳转其他页面时是暂停全部视频
		 * @param {*} e 
		 */
		stopAllVideoPlay() {
			const keyArr = Object.keys(videoPlayerObj)
			keyArr.forEach(item => {
				videoPlayerObj[item].pause()
			});
		},
	}
}
</script>

<style lang="scss">
.main {
	.nav-head {
		overflow: hidden;
		position: relative;
		top: 0rpx;
		height: 112rpx;
		// text-align: center;
		font-weight: 700;
		font-size: 36rpx;
		color: #fff;
		margin-top: 88rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		width: 100%;
		z-index: 8;
		border-bottom: 4rpx solid #323045;

		.title {
			margin-left: 48rpx;
		}

		.button {
			width: 286rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 90rpx;
			font-size: 28rpx;
			color: #F2FE8D !important;
			padding: 0;
			margin-right: 24rpx;
		}
	}

	.swiper {
		margin-top: 32rpx;
	}

	.message {
		margin: 24rpx 24rpx 32rpx;
		height: 96rpx;
		background: #211F32;
		border-radius: 16rpx;

		.icon {
			display: inline-block;
			vertical-align: top;
			margin: 18rpx 20rpx;
		}

		.text {
			display: inline-block;
			margin-top: 18rpx;
			height: 68rpx;
			width: 574rpx;
			font-size: 24rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			//显示4行
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.btnDiv {
		margin: 32rpx 48rpx;

		.item {
			display: inline-block;
			width: 218rpx;
			text-align: center;

			.img {
				margin: 0 36rpx 16rpx;
			}
		}
	}

	.steps {
		margin: 0 32rpx;
		width: 686rpx;
		height: 472rpx;
		background-color: #211F32;
		background-image: url(../../static/home/img_People.png);
		background-repeat: no-repeat;
		background-size: contain;
		border-radius: 16px;

		.content {
			margin-left: 246rpx;
			height: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			flex-direction: column;

			.title {
				font-size: 48rpx;
				height: 64rpx;
				line-height: 64rpx;
			}

			.button {
				width: 386rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 40rpx;
				font-size: 24rpx;
				color: #15141F !important;
				padding: 0;
				margin-right: 24rpx;
			}
		}
	}

	.video {
		margin: 32rpx 32rpx 0;
		width: 686rpx;
		height: 360rpx;
		border-radius: 32rpx;
	}

}
</style>