修改
This commit is contained in:
曹辉
parent
1f4ff4a54a
commit
dccb4d04e8
@ -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%;
|
||||
|
||||
@ -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
|
||||
})
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user