208 lines
4.5 KiB
Vue
208 lines
4.5 KiB
Vue
<template>
|
|
<view class="">
|
|
<u-sticky :enable="enableIos">
|
|
<view class="search-box-ios">
|
|
<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" v-model="keywordIos"
|
|
:show-action="false" :animation="true" @search="getCourseListIos()"></u-search>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="swiper flex align-center justify-center">
|
|
<view class="swiper-box">
|
|
<swiper :indicator-dots="true" class="swiper " :autoplay="true" interval="5000" duration="500"
|
|
:circular="true" style="width: 100%;height: 350rpx;">
|
|
<swiper-item v-for="(item,index) in swiperListIos" :key='index' @tap="goPageIos(item.url)">
|
|
<image :src="item.imageUrl" mode="scaleToFill"
|
|
style="width: 100%;height: 100%;border-radius: 24rpx;"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="padding-lr">
|
|
<view class="" v-if="courseListIos.length">
|
|
<videoList @success="posterSuccessIos" :list="courseListIos" />
|
|
</view>
|
|
<empty title="暂无视频" :isShow='false' v-else></empty>
|
|
<u-loadmore v-if="courseListIos.length > 0" :status="statusIos" />
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import videoList from '../../../components/videoList/videoList.vue'
|
|
import empty from '@/components/empty.vue'
|
|
export default {
|
|
components: {
|
|
empty,
|
|
videoList
|
|
},
|
|
data() {
|
|
return {
|
|
enableIos: true,
|
|
statusIos: 'loadmore',
|
|
swiperListIos: [], //轮播图列表
|
|
courseListIos: [], //资源列表
|
|
pageIos: 1,
|
|
limitIos: 10,
|
|
pagesIos: 0,
|
|
|
|
sortIos: '',
|
|
keywordIos: '',
|
|
isPriceIos: '', //是否免费 2:免费
|
|
}
|
|
},
|
|
onShow() {
|
|
this.enableIos = true
|
|
this.getCourseListIos()
|
|
},
|
|
onHide() {
|
|
this.enableIos = false
|
|
},
|
|
onLoad(option) {
|
|
uni.setNavigationBarTitle({
|
|
title: option.title
|
|
})
|
|
this.getBannerListIos()
|
|
if (option.sort) {
|
|
this.sortIos = option.sort
|
|
}
|
|
if (option.isPrice) {
|
|
this.isPriceIos = option.isPrice
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
goPageIos(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
//点击回调
|
|
posterSuccessIos(item) {
|
|
uni.navigateTo({
|
|
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId
|
|
})
|
|
},
|
|
//最新热播
|
|
getCourseListIos() {
|
|
let data = {
|
|
limit: this.limitIos,
|
|
page: this.pageIos,
|
|
sort: this.sortIos ? this.sortIos : '',
|
|
title: this.keywordIos,
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
data.wxShow = 1
|
|
// #endif
|
|
// #ifdef MP-TOUTIAO
|
|
data.dyShow = 1
|
|
// #endif
|
|
if (this.isPriceIos) {
|
|
data.isPrice = this.isPriceIos
|
|
}
|
|
this.$u.api.courseList(data).then(res => {
|
|
if (res.code == 0) {
|
|
this.pagesIos = res.data.totalPage
|
|
if (this.pageIos < this.pagesIos) {
|
|
this.statusIos = 'loadmore'
|
|
} else {
|
|
this.statusIos = 'nomore'
|
|
}
|
|
// res.data.list.forEach(ret => {
|
|
// ret.courseLabel = ret.courseLabel ? ret.courseLabel.split(',') : []
|
|
// })
|
|
if (this.pageIos == 1) {
|
|
this.courseListIos = res.data.list
|
|
} else {
|
|
this.courseListIos = [...this.courseListIos, ...res.data.list]
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
uni.stopPullDownRefresh();
|
|
|
|
})
|
|
},
|
|
// 获取轮播图列表
|
|
getBannerListIos() {
|
|
this.$u.api.bannerList({
|
|
classify: '1'
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
res.data.forEach(d => {
|
|
if (d.state == 1) {
|
|
this.swiperListIos.push(d)
|
|
}
|
|
})
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
|
|
},
|
|
onReachBottom: function() {
|
|
if (this.pageIos < this.pagesIos) {
|
|
this.pageIos += 1
|
|
this.statusIos = 'loading'
|
|
this.getCourseListIos()
|
|
|
|
} else {
|
|
this.statusIos = 'nomore'
|
|
}
|
|
|
|
},
|
|
onPullDownRefresh: function() {
|
|
this.pageIos = 1;
|
|
this.getCourseListIos()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-box-ios {
|
|
width: 100%;
|
|
padding: 15upx 2.5%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 10rpx;
|
|
margin-top: 10rpx;
|
|
|
|
.swiper-box {
|
|
width: 686rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #5074FF;
|
|
}
|
|
|
|
.btn {
|
|
width: 150upx;
|
|
height: 60upx;
|
|
background: #5074FF;
|
|
border-radius: 30upx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
</style> |