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.
122 lines
2.4 KiB
122 lines
2.4 KiB
3 months ago
|
<template>
|
||
|
|
<view class="ketang">
|
||
|
|
<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">
|
||
|
|
<!-- <image :src="path+item.video_url" class="leftImg" mode="aspectFill"></image> -->
|
||
|
|
<video
|
||
|
|
id="myVideo"
|
||
|
|
:src="video_url"
|
||
|
|
:controls="true"
|
||
|
|
:autoplay="false"
|
||
|
|
style="width: 100%; height: 380rpx;"
|
||
|
|
></video>
|
||
|
|
<view class="title">
|
||
|
|
小学语文一年级上册
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default{
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
keyword:'',
|
||
|
|
class_type:null,
|
||
|
|
catagoryData:[
|
||
|
|
|
||
|
|
],
|
||
|
|
page:1,
|
||
|
|
total:0,
|
||
|
|
list:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async 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:{
|
||
|
|
clickHandle(val){
|
||
|
|
this.page = 1;
|
||
|
|
this.class_type = val.value;
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
async loadData() {
|
||
|
|
await uni.request({
|
||
|
|
url: '/wanlshop/gongyivideo/gettypelist',
|
||
|
|
success: res => {
|
||
|
|
this.catagoryData = res.data;
|
||
|
|
if(this.catagoryData.length>0){
|
||
|
|
this.class_type = this.catagoryData[0].value;
|
||
|
|
}
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async getList() {
|
||
|
|
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 = res.data.data;
|
||
|
|
this.total = res.total;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.loadData()
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.ketang{
|
||
|
|
background-color: #F2F3F4;
|
||
|
|
min-height: calc(100vh);
|
||
|
|
padding: 24rpx;
|
||
|
|
.list{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
.listItem{
|
||
|
|
width:calc(50% - 10rpx);
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 20rpx 0;
|
||
|
|
image{
|
||
|
|
width: 340rpx;
|
||
|
|
height: 380rpx;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
padding:20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|