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.

192 lines
3.8 KiB

<template>
<view class="wrap">
<view class="list">
<view class="list-topimg" v-if="news.length>0" @click="toDetail(news[0].id)">
<!-- <image src="" mode=""></image> -->
<view class="">
<image :src="host+news[0].poster" mode=""></image>
<view class="">
{{news[0].title}}
</view>
</view>
</view>
<view class="list-list">
<view class="list-item" v-for="(item,index) in news" @click="toDetail(item.id)">
<view class="list-img">
<image :src="host+item.poster" mode=""></image>
</view>
<view class="list-title">
{{item.title}}
</view>
<view class="list-type">
{{item.type?item.type.name:''}}
</view>
</view>
</view>
</view>
<tabbar :current-page="1"></tabbar>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
import util from "../../utils/util.js";
export default {
components: {
tabbar
},
data() {
return {
news: [],
imgUrls: [
// {
// url: '/resource/imgs/banner.jpg'
// },
// {
// url: '/resource/imgs/banner.jpg'
// }
],
currentPage: 0,
host: '',
currentSwiper: 0,
loading: true
}
},
onPullDownRefresh: function() {
this.loadVideos(1);
},
onReachBottom: function() {
this.loadVideos(this.currentPage + 1);
},
onShareAppMessage() {},
onLoad() {
this.host = util.HOST
this.loadVideos(1)
},
onReady() {},
onHide() {},
methods: {
toDetail(id){
uni.navigateTo({
url: '/packages/packagesInfo/pages/detail/index?id='+id,
});
},
loadVideos: function(n) {
var that = this;
util.request({
api: 'customer/get-training-videos',
data: {
page: n,
pageLength: 10
},
utilSuccess: function(t) {
var o = t.data;
console.log(o);
uni.stopPullDownRefresh();
if ((that.news.length < 10 && n > 1) || (0 == o.length && n > 1)) {
uni.showToast({
title: '已加载到最后一页',
icon: 'none'
});
} else {
var s;
var i = that.news;
if (1 == n) {
i = o;
} else {
(s = i).push.apply(s, o);
}
console.log(i);
that.currentPage = n
that.news = i
that.loading = false
}
},
utilFail: function(e) {
uni.stopPullDownRefresh();
if (1 == n) {
that.currentPage = n
that.news = i
}
util.alert(e);
}
});
},
}
}
</script>
<style lang="scss">
.wrap {
padding-bottom: 190rpx;
background: #E7F5F4;
.list {
&-topimg {
position: relative;
font-size: 0;
background: linear-gradient(to bottom, #0cc7a4, #E7F5F4);
>view{
padding: 30rpx;
padding-bottom:0;
image {
width: 100%;
border-radius: 8rpx 8rpx 8rpx 8rpx;
// box-shadow: 2rpx 0rpx 20rpx 0rpx #ddd;
}
>view {
text-align: center;
width: 80%;
position: absolute;
bottom: 0rpx;
left: 10%;
background: rgba(255, 255, 255, .7);
font-size: 28rpx;
padding: 20rpx 0;
border-radius: 50rpx 50rpx 0 0;
}
}
}
&-list{
padding: 30rpx;
}
&-item {
padding: 20rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
box-shadow: 2rpx 0rpx 20rpx 0rpx #ddd;
margin-bottom: 30rpx;
display: flex;
position: relative;
}
&-img {
image {
width: 219rpx;
height: 152rpx;
background: #303233;
border-radius: 4rpx 4rpx 4rpx 4rpx;
margin-right: 20rpx;
}
}
&-title {}
&-type {
color: #F7723F;
position: absolute;
bottom: 20rpx;
right: 20rpx;
}
}
}
</style>