From dccb4d04e8b164d21d270eb70ffe43f486eaf991 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E8=BE=89?= <814457906@qq.com>
Date: Wed, 22 Feb 2023 13:36:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/ProjectDetails/ProjectDetails.scss |  16 ++++
 pages/ProjectDetails/ProjectDetails.vue  |  69 ++++++++++++--
 pages/homepage/homepage.vue              | 114 ++++++++++++++++++++++-
 3 files changed, 188 insertions(+), 11 deletions(-)

diff --git a/pages/ProjectDetails/ProjectDetails.scss b/pages/ProjectDetails/ProjectDetails.scss
index efdb765..ea51639 100644
--- a/pages/ProjectDetails/ProjectDetails.scss
+++ b/pages/ProjectDetails/ProjectDetails.scss
@@ -4,6 +4,22 @@
 		padding-top: 10rpx;
 		font-size: 34rpx;
 		position: relative;
+		.swiper-box {
+			width: 100%;
+			height: 500rpx;
+		}
+		.swiper-item {
+			height: 500rpx;
+			text-align: center;
+			image{
+				width: 100%;
+				height: 500rpx !important;
+			}
+		}
+		video{
+			height: 100%;
+			width: 100%;
+		}
 		.mask {
 			.information {
 				width: 70%;
diff --git a/pages/ProjectDetails/ProjectDetails.vue b/pages/ProjectDetails/ProjectDetails.vue
index d0bb66d..733607e 100644
--- a/pages/ProjectDetails/ProjectDetails.vue
+++ b/pages/ProjectDetails/ProjectDetails.vue
@@ -1,13 +1,32 @@
 <template>
 	<view class="app">
-		<u-swiper v-if="lbinfo" :list="lbinfo" height="350" style='background-size: 100%;' mode='none'></u-swiper>
+		<view class="container">
+			<view>
+				<!-- 轮播图 -->
+				<swiper indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6'
+					:autoplay="autoplay" interval="3000" duration="1500" show-center-play-btn="true" class="swiper-box"
+					circular='true' @change="swiperChange">
+					<swiper-item v-for="(item ,index) in lbinfo" :key="index">
+						<view class="swiper-item" v-show="!splits(item)" wx-if="{item}">
+							<image v-if="item" :src="item" mode="widthFix"></image>
+						</view>
+						<view class="swiper-item" v-show="splits(item)" v-if="item">
+							<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
+								object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
+								show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
+								enable-play-gesture auto-pause-if-open-native show-mute-btn></video>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+		</view>
+		<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="350" style='background-size: 100%;' mode='none'></u-swiper> -->
 		<view class="item">
 			<view class="text" v-if='list.nurseItemName'>{{list.nurseItemName}}
 			</view>
 			<view class="text" v-else>暂无
 			</view>
 			<view class="classtype">
-
 			</view>
 			<!-- <view class="pingfen">
 			<u-rate :count="5" value="2"></u-rate>
@@ -60,6 +79,8 @@
 		data() {
 			return {
 				lbinfo: [], //轮播
+				autoplay: true, //自动切换轮播图
+				videoContext: '',
 				baseurl: '',
 				orderNo: '',
 				usershow: false, //完善信息开关
@@ -82,6 +103,40 @@
 			this.getlist(this.stationId, this.stationItemId, this.stationItemPriceId)
 		},
 		methods: {
+			swiperChange(e) {
+				let {
+					current,
+					source
+				} = e.detail
+				this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
+				//只有手动切换时开始轮播，并且上一页视频暂停
+				if (source === 'touch') {
+					this.videoContext.pause(); //暂停
+					this.autoplay = true
+				}
+			},
+			// 获取数据
+			GetBanner() {},
+			// 处理banner返回的是是视频还是图片
+			splits(url) {
+				if (url.indexOf('.') != -1) {
+					var ext = url.substring(url.lastIndexOf('.') + 1);
+					return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
+				}
+			},
+			// 点击开始/继续播放
+			play() {
+				this.autoplay = false
+				// this.videoContext.requestFullScreen()
+			},
+			// 视频暂停
+			pause() {
+				this.autoplay = true
+			},
+			// 视频结束
+			ended() {
+				this.autoplay = true
+			},
 			//预约
 			goappointments() {
 				let that = this
@@ -154,14 +209,12 @@
 					if (res.data.poserInfoList.length >= 1) {
 						res.data.poserInfoList.forEach(e => {
 							e.image = baseurl + e.posterPictureUrl
+							this.lbinfo.push(e.image)
 						})
-						this.lbinfo = res.data.poserInfoList
+						res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
+						this.lbinfo.push(res.data.poserInfoList[0].video)
 					} else {
-						this.lbinfo = []
-						var obj = {
-							image: this.baseurl + res.data.itemPictureUrl
-						}
-						this.lbinfo.push(obj)
+						this.lbinfo.push(this.baseurl + res.data.itemPictureUrl)
 					}
 					this.list = res.data
 				})
diff --git a/pages/homepage/homepage.vue b/pages/homepage/homepage.vue
index 69078b6..af5eeb7 100644
--- a/pages/homepage/homepage.vue
+++ b/pages/homepage/homepage.vue
@@ -1,6 +1,41 @@
 <template>
 	<view class="app">
-		<u-swiper :list="swiperImgUrls" effect3d='true' height='400' interval='5000' duration='2000'></u-swiper>
+		<!-- <u-swiper :list="swiperImgUrls" effect3d='true' height='400' interval='5000' duration='2000'></u-swiper> -->
+
+
+		<!-- <swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
+			:circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange">
+			<swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls">
+				<image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill">
+				</image>
+			</swiper-item>
+		</swiper> -->
+
+
+		<view class="container">
+			<view>
+				<swiper :indicator-dots="true" :current="currentIndex" :circular="true" previous-margin="80rpx"
+					next-margin="80rpx" :autoplay="autoplay" interval="5000" duration="2000" show-center-play-btn="true"
+					class="swiper-block" circular='true' @change="swiperChange">
+					<swiper-item v-for="(item ,index) in swiperImgUrls" :key="index" class="swiper-item">
+						<view v-show="!splits(item)" wx-if="{item}">
+							<image v-if="item" :src="item" :class="['slide-image', currentIndex === index?'active':'']"
+								mode="aspectFill">
+							</image>
+						</view>
+						<view v-show="splits(item)" v-if="item">
+							<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
+								object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
+								show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
+								enable-play-gesture auto-pause-if-open-native show-mute-btn :poster='poster'
+								:class="['slide-image', currentIndex === index?'active':'']"></video>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+		</view>
+
+
 		<view class="items">
 			<view class="item" @tap="gosite">
 				<image src="../../static/hlz.png" mode=""></image>
@@ -62,18 +97,57 @@
 		data() {
 			return {
 				swiperImgUrls: [],
+				autoplay: true, //自动切换轮播图
+				videoContext: '',
 				currentIndex: 0,
 				informationCategoryVOList: [], //咨询信息
 				informationCategorytotal: 0,
 				pageNum: 1,
 				pageSize: 5,
+				poster: '' //视频封面
 			};
 		},
 		onShow() {
 			this.pageNum = 1
+			this.swiperImgUrls = []
 			this.getPoserInfo();
 		},
 		methods: {
+			swiperChange(e) {
+				this.currentIndex = event.detail.current
+				let {
+					current,
+					source
+				} = e.detail
+				this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
+				//只有手动切换时开始轮播，并且上一页视频暂停
+				if (source === 'touch') {
+					this.videoContext.pause(); //暂停
+					this.autoplay = true
+				}
+			},
+			// 获取数据
+			GetBanner() {},
+			// 处理banner返回的是是视频还是图片
+			splits(url) {
+				if (url.indexOf('.') != -1) {
+					var ext = url.substring(url.lastIndexOf('.') + 1);
+					return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
+				}
+			},
+			// 点击开始/继续播放
+			play() {
+				this.autoplay = false
+				// this.videoContext.requestFullScreen()
+			},
+			// 视频暂停
+			pause() {
+				this.autoplay = true
+			},
+			// 视频结束
+			ended() {
+				this.autoplay = true
+			},
 			//跳转健康咨询item
 			gohealthitem(item) {
 				uni.navigateTo({
@@ -99,8 +173,10 @@
 						if (res.data.poserInfoList) {
 							res.data.poserInfoList.forEach(e => {
 								e.image = baseurl + e.posterPictureUrl
+								this.swiperImgUrls.push(e.image)
 							})
-							this.swiperImgUrls = res.data.poserInfoList
+							res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
+							this.swiperImgUrls.push(res.data.poserInfoList[0].video)
 						}
 						this.getHeathHousing();
 					}
@@ -186,11 +262,43 @@
 		},
 	}
 </script>
-
 <style lang="scss">
 	.app {
 		padding: 100rpx 0 0 0;
 
+		.swiper-block {
+			height: 500rpx;
+			width: 100%;
+		}
+
+		.swiper-item {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: flex-start;
+			overflow: unset;
+		}
+
+		.slide-image {
+			height: 300rpx;
+			width: 520rpx;
+			border-radius: 9rpx;
+			box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
+			margin: 0rpx 30rpx;
+			z-index: 1;
+		}
+
+		.active {
+			transform: scale(1.2);
+			transition: all 0.2s ease-in 0s;
+			z-index: 20;
+		}
+
+		video {
+			// height: 100%;
+			// width: 100%;
+		}
+
 		.Healthknowledge {
 			width: 100%;
 			padding: 40rpx 50rpx 50rpx;