xinyilu/nurseWeChatAppletUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
曹辉 2023-02-21 17:47:08 +08:00
parent 7401c738ab
commit 593a804d65
2 changed files with 100 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/nursestation/nursestation.scss
View File

@ -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;

99
pages/nursestation/nursestation.vue
View File

@ -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
}