You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
4.6 KiB
209 lines
4.6 KiB
<template>
|
|
<view class="ketangDetails">
|
|
<u-navbar class="navbar" bgColor="#fff" :autoBack="true" :placeholder="true">
|
|
<view class="u-nav-slot titleContent" slot="left">
|
|
<u-icon class="icon" name="arrow-left" :color="'#000'" size="20"></u-icon>
|
|
<text style="color:#000">{{title}}</text>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="videoContent">
|
|
<video
|
|
id="myVideo"
|
|
:src="path+videoSrc"
|
|
:controls="true"
|
|
:autoplay="false"
|
|
></video>
|
|
</view>
|
|
<view class="tabs">
|
|
<view class="tabItem" @click="getabItem(item)" v-for="item in list" :key="item.id">
|
|
<text :class="item.id==activeIndex?'active':''">{{item.name}}</text>
|
|
<view class="flag" v-if="item.id==activeIndex"></view>
|
|
</view>
|
|
</view>
|
|
<view class="bottomContent" v-if="activeIndex==0">
|
|
<u-collapse accordion>
|
|
<u-collapse-item>
|
|
<text slot="title" class="u-page__item__title__slot-title itemTitle">第一章</text>
|
|
<view class="u-collapse-content">
|
|
<view class="" v-for="item in 6" :key="item">
|
|
<image src="../../static/images/img/bof.png" mode=""></image>
|
|
<text>第一课 春眠不觉晓</text>
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
<!-- <u-collapse-item
|
|
title="组件全面"
|
|
>
|
|
<u-icon name="tags-fill" size="20" slot="icon"></u-icon>
|
|
<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
|
|
</u-collapse-item>
|
|
<u-collapse-item
|
|
title="众多利器"
|
|
>
|
|
<text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
|
|
<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
|
|
</u-collapse-item> -->
|
|
</u-collapse>
|
|
</view>
|
|
|
|
|
|
<!-- <u-search placeholder="搜索视频" bgColor="#ffffff" v-model="keyword" @search="getList" height="90rpx" :showAction="false"></u-search>
|
|
<u-tabs :list="catagoryData" keyName="name" lineColor="#EB6100"
|
|
:activeStyle="{'font-weight': 'bold','font-size': '36rpx','color': '#222222'}"
|
|
@click="clickHandle"></u-tabs>
|
|
<view class="list">
|
|
<view class="listItem" v-for="item in list" :key="item.id">
|
|
|
|
<video
|
|
id="myVideo"
|
|
:src="path+item.video_url"
|
|
:controls="true"
|
|
:autoplay="false"
|
|
style="width: 100%; height: 380rpx;"
|
|
></video>
|
|
<view class="title">
|
|
{{item.class_name}}
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
title:'',
|
|
list:[
|
|
{name:'课程表',id:0},
|
|
{name:'评论',id:1},
|
|
],
|
|
path:this.path,
|
|
videoSrc:'',
|
|
activeIndex:0,
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
// if(this.list.length<this.total){
|
|
// this.page++;
|
|
// await uni.request({
|
|
// url: '/wanlshop/gongyivideo/getvideolist',
|
|
// method:'post',
|
|
// data:{
|
|
// class_type:this.class_type,
|
|
// class_name:this.keyword,
|
|
// page:this.page,
|
|
// },
|
|
// success: res => {
|
|
// this.list.push(...res.data.data);
|
|
// }
|
|
// });
|
|
// }
|
|
},
|
|
methods:{
|
|
getabItem(val){
|
|
|
|
this.activeIndex = val.id
|
|
},
|
|
getDetails(id){
|
|
uni.request({
|
|
url: '/wanlshop/gongyivideo/getdetail',
|
|
method:'post',
|
|
data:{
|
|
id:id,
|
|
|
|
},
|
|
success: res => {
|
|
console.log(res,"mnb")
|
|
this.title = res.data.class_name;
|
|
this.videoSrc = res.data.video_url
|
|
}
|
|
});
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
console.log(option,"88")
|
|
this.getDetails(option.id)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ketangDetails{
|
|
background-color: #F2F3F4;
|
|
height: calc(100vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.videoContent{
|
|
height:460rpx;
|
|
width:100%;
|
|
#myVideo{
|
|
height:460rpx;
|
|
width:100%;
|
|
}
|
|
}
|
|
.tabs{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding:20rpx;
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
.tabItem{
|
|
border:1px solid red;
|
|
text-align: center;
|
|
text{
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
}
|
|
.flag{
|
|
width: 68rpx;
|
|
height: 8rpx;
|
|
background: #EB6100;
|
|
border-radius: 4rpx;
|
|
margin: 8rpx auto 0 auto;
|
|
}
|
|
.active{
|
|
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
}
|
|
}
|
|
.bottomContent{
|
|
border: 1px solid red;
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding:0 24rpx;
|
|
// ::v-deep
|
|
.itemTitle{
|
|
color:#000;
|
|
}
|
|
}
|
|
|
|
}
|
|
::v-deep .u-navbar__content__left{
|
|
width:100%;
|
|
}
|
|
.titleContent{
|
|
|
|
width: 100%;
|
|
text-align: center;
|
|
position: relative;
|
|
text{
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #000;
|
|
}
|
|
::v-deep .u-icon{
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
}
|
|
</style> |