From 593a804d65ff5695c67b41d18133c191eccac3e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E8=BE=89?= <814457906@qq.com>
Date: Tue, 21 Feb 2023 17:47:08 +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/nursestation/nursestation.scss | 18 ++++-
 pages/nursestation/nursestation.vue  | 99 +++++++++++++++++++++++-----
 2 files changed, 100 insertions(+), 17 deletions(-)

diff --git a/pages/nursestation/nursestation.scss b/pages/nursestation/nursestation.scss
index 7dbba4d..141da13 100644
--- a/pages/nursestation/nursestation.scss
+++ b/pages/nursestation/nursestation.scss
@@ -1,6 +1,22 @@
 	.app{
 		padding:10rpx 0 0 0;
 	}
+		.swiper-box {
+			height: 500rpx;
+			width: 100%;
+		}
+		.swiper-item {
+			display: block;
+			height: 500rpx;
+			line-height: 500rpx;
+			text-align: center;
+		}
+
+	video{
+		height: 100%;
+		width: 100%;
+	}
+	
 		.mask {
 			.information {
 				width: 70%;
@@ -50,7 +66,7 @@
 		.content {
 		font-size: 36rpx;
 		padding-bottom: 10rpx;
-		margin-top: -80rpx;
+		// margin-top: -80rpx;
 		z-index: 999;
 		::v-deep .u-tabs{
 			padding-bottom: 10rpx;
diff --git a/pages/nursestation/nursestation.vue b/pages/nursestation/nursestation.vue
index a5c736e..6fceaea 100644
--- a/pages/nursestation/nursestation.vue
+++ b/pages/nursestation/nursestation.vue
@@ -1,6 +1,39 @@
 <template>
 	<view class="app">
-		<u-swiper v-if="lbinfo" :list="lbinfo" height="450" 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 Banners" :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>
+
+		<!-- <swiper class="swiper" circular>
+			<swiper-item>
+				<view class="swiper-item ">A</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="swiper-item">B</view>
+			</swiper-item>
+			<swiper-item>
+				<video  @play = 'videoplay'
+					src="http://192.168.16.30:8088/profile/posterVideoUrl/2023/02/21/QQ录屏20221019175958_20230221170920A01781ba346416.mp4"></video>
+			</swiper-item>
+		</swiper> -->
+		<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="450" style='background-size: 100%;' mode='none'></u-swiper> -->
 		<view class="content">
 			<view class="righttext">
 				<view class="title" v-if="list.nurseStationName">
@@ -68,7 +101,8 @@
 						{{item.name}}
 					</view>
 				</view>
-				<u-tabs v-if="choicetab==false" :list="tabList" :current="classifycurrent" @change="change"></u-tabs>
+				<u-tabs v-if="choicetab==false" :list="tabList" :current="classifycurrent" @change="change">
+				</u-tabs>
 				<view class="" v-if="servelist.length>0&&choicetab==false" style="margin:0">
 					<view class="item" v-for="item in servelist" :key="" v-show='choicetab==false'
 						@click.stop='goProjectDetails(item)'>
@@ -77,7 +111,7 @@
 						</view>
 						<view class="day">
 							{{item.advanceAppointDuration=='HALF_DAY'?'(半天)':''}}
-								{{item.advanceAppointDuration=='ONE_DAY'?'(全天)':''}}
+							{{item.advanceAppointDuration=='ONE_DAY'?'(全天)':''}}
 						</view>
 						<!-- <view class="pingfen">
 						<u-rate :count="5" value="2"></u-rate>
@@ -144,8 +178,10 @@
 	export default {
 		data() {
 			return {
+				Banners: [], //轮播图
+				autoplay: true, //自动切换轮播图
+				videoContext: '',
 				baseurl: '',
-				lbinfo: [], //轮播list
 				usershow: false, //完善信息开关
 				choicetab: false, //切换
 				list: [], //护理站list
@@ -186,10 +222,47 @@
 			this.getInfo()
 		},
 		onLoad(options) {
+			let that = this
+			this.GetBanner()
 			this.nurseStationId = options.nurseStationId
 			this.distance = options.distance
 		},
 		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
+			},
+
 			testTabClick(item) {
 				this.tabIndex = item.id
 				if (item.id == 0) {
@@ -259,6 +332,7 @@
 			getInfo() {
 				introductionList(this.nurseStationId).then(res => {
 					if (res.code == 200) {
+						this.Banners = []
 						this.serveinfo()
 						this.productinfo()
 						res.data.morningOpenStartTime = res.data.morningOpenStartTime.slice(0, 5)
@@ -279,21 +353,14 @@
 						if (res.data.poserInfoList.length >= 1) {
 							res.data.poserInfoList.forEach(e => {
 								e.image = baseurl + e.posterPictureUrl
-
+								this.Banners.push(e.image)
 							})
-							this.lbinfo = res.data.poserInfoList
+							res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
+							this.Banners.push(res.data.poserInfoList[0].video)
 						} else {
-							this.lbinfo = []
-							var obj = {
-								image: res.data.stationPictureUrl
-							}
-							this.lbinfo.push(obj)
-							var obj2 = {
-								image: res.data.stationIntroducePcitureUrl
-							}
-							this.lbinfo.push(obj2)
+							this.Banners.push(res.data.stationPictureUrl)
+							this.Banners.push(res.data.stationIntroducePcitureUrl)
 						}
-
 						if (res.data.nurseStationLabelList) {
 							this.nurseStationLabelList = res.data.nurseStationLabelList
 						}