|
|
<template>
|
|
|
<z-paging-swiper class="wrap">
|
|
|
|
|
|
<!-- 视频播放 -->
|
|
|
<view class="playvideo" v-if="playvideo">
|
|
|
<view class="playvideowrap">
|
|
|
<video ref="videos" id="videos" :autoplay="true" @play="playFullScreen" :src="videoUrl"
|
|
|
play-btn-position="center"></video>
|
|
|
<view class="closevideo" @click="playvideo=false,videoUrl=''">X</view>
|
|
|
</view>
|
|
|
<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
|
|
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
|
|
<template #top>
|
|
|
<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
|
<!-- 真正的导航栏内容 -->
|
|
|
<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
|
|
|
<view class="back" @click="goback">
|
|
|
<u-icon name="arrow-left"></u-icon>
|
|
|
</view>
|
|
|
<view>{{menutitle}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<z-tabs v-if="showTabs" ref="tabs" :name-key="'title'" :value-key="'id'" :active-style="activeStyle" :inactive-style="nomalStyle" :scroll-count="2"
|
|
|
:list="tabList" :current="current" @change="tabsChange" />
|
|
|
</view>
|
|
|
</template>
|
|
|
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
|
|
|
<swiper class="swiper" :current="current" @transition="swiperTransition"
|
|
|
@animationfinish="swiperAnimationfinish">
|
|
|
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
|
|
<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
|
|
|
<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
|
|
|
<swiper-list-item ref="listItem" @playvideo="getVideo" :menuTitle="menutitle" :menuId="firstMenuId" :tabIndex="index" :currentIndex="current"></swiper-list-item>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
</z-paging-swiper>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import swiperListItem from "./components/swiper-list-item.vue"
|
|
|
import zTabs from "@/components/z-tabs/z-tabs.vue"
|
|
|
import {
|
|
|
shareInfo
|
|
|
} from "@/common/util.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
zTabs,
|
|
|
swiperListItem
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
navBarBoxHeight: 0,
|
|
|
navBarHeight:0,
|
|
|
navBarTop:0,
|
|
|
menutitle: '',
|
|
|
tabList: [],
|
|
|
firstMenuId:'',
|
|
|
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
|
|
showTabs:false,
|
|
|
nomalStyle: {
|
|
|
},
|
|
|
activeStyle: {
|
|
|
color: '#fff',
|
|
|
background: '#de242f',
|
|
|
},
|
|
|
playvideo:false,
|
|
|
videoUrl:''
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return shareInfo
|
|
|
},
|
|
|
onShareTimeline(){
|
|
|
return shareInfo
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
|
this.navBarHeight = MenuButton.height
|
|
|
this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
|
|
|
console.log(option.id)
|
|
|
this.getMenu(option.id)
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
playFullScreen(){
|
|
|
let videoContext = uni.createVideoContext('videos', this)
|
|
|
console.log("videoContext",videoContext)
|
|
|
videoContext.requestFullScreen()
|
|
|
},
|
|
|
getVideo(e){
|
|
|
this.videoUrl = e
|
|
|
this.playvideo = true
|
|
|
},
|
|
|
goback() {
|
|
|
uni.switchTab({
|
|
|
url: '/pages/index/index'
|
|
|
})
|
|
|
},
|
|
|
async getMenu(meunId){
|
|
|
const res = await this.$u.api.baseFormIndex({
|
|
|
page: 1,
|
|
|
page_size: 9999,
|
|
|
table_name: 'study_columns',
|
|
|
})
|
|
|
const pArr = res.data.filter(item=>item.id==meunId)
|
|
|
const cArr = res.data.filter(item=>item.pid==meunId)
|
|
|
this.menutitle = pArr[0].title
|
|
|
if(cArr.length>0){
|
|
|
this.tabList = cArr
|
|
|
this.firstMenuId = cArr[0].id
|
|
|
this.showTabs = true
|
|
|
}else{
|
|
|
this.tabList = pArr
|
|
|
this.firstMenuId = meunId
|
|
|
this.showTabs = false
|
|
|
}
|
|
|
|
|
|
},
|
|
|
// tabs通知swiper切换
|
|
|
tabsChange(index,value) {
|
|
|
this.current = index;
|
|
|
this.firstMenuId = value
|
|
|
console.log(index,value)
|
|
|
},
|
|
|
// swiper滑动中
|
|
|
swiperTransition(e) {
|
|
|
this.$refs.tabs.setDx(e.detail.dx);
|
|
|
},
|
|
|
// swiper滑动结束
|
|
|
swiperAnimationfinish(e) {
|
|
|
this.current = e.detail.current;
|
|
|
this.tabList.map((item,index)=>{
|
|
|
if(this.current===index){
|
|
|
this.firstMenuId = item.id
|
|
|
}
|
|
|
})
|
|
|
this.$refs.tabs.unlockDx();
|
|
|
},
|
|
|
// 如果要通知当前展示的z-paging刷新，请调用此方法
|
|
|
reloadCurrentList() {
|
|
|
this.$refs.listItem[this.current].reload();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.wrap {
|
|
|
.navBarBox {
|
|
|
// position: fixed;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
// z-index: 999;
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
margin-bottom:24rpx;
|
|
|
.navBar {
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
// position: absolute;
|
|
|
width:100%;
|
|
|
.back {
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::v-deep .z-tabs-list-container {
|
|
|
.z-tabs-list{
|
|
|
padding-left:20rpx;
|
|
|
}
|
|
|
.z-tabs-item {
|
|
|
padding: 0 10rpx;
|
|
|
|
|
|
.z-tabs-item-title {
|
|
|
padding: 10rpx 30rpx;
|
|
|
font-size: 26rpx;
|
|
|
border-radius: 10rpx;
|
|
|
background-color: #f5f6f8;
|
|
|
color: #333;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.z-tabs-item-title-active::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
bottom: -15rpx;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%,0);
|
|
|
border-left: 15rpx solid transparent;
|
|
|
border-right: 15rpx solid transparent;
|
|
|
border-top: 15rpx solid #de242f;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.z-tabs-bottom {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.swiper {
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
::v-deep .zp-paging-container-content{
|
|
|
padding-bottom:20rpx;
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
.playvideo {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 11;
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
&>.playvideowrap {
|
|
|
width: 95%;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
video {
|
|
|
width: 100%
|
|
|
}
|
|
|
|
|
|
.closevideo {
|
|
|
color: #fff;
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
border: 1px solid #fff;
|
|
|
border-radius: 50rpx;
|
|
|
position: absolute;
|
|
|
text-align: center;
|
|
|
line-height: 50rpx;
|
|
|
/* display: inline-block; */
|
|
|
right: 0rpx;
|
|
|
top: -25rpx // transform: translate(0,-50%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style> |
