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.
530 lines
19 KiB
530 lines
19 KiB
<template>
|
|
|
|
<BaseContainer>
|
|
<NavBar :title="title" />
|
|
<view class="course-list index" id="app" v-cloak ref="index" style="-webkit-overflow-scrolling: touch;">
|
|
<!--幻灯片-->
|
|
<view v-if="swiperlist.length" class="header slider-banner">
|
|
<swiper class="swiper-wrapper">
|
|
<swiper-item v-for="(swiper,index) in swiperlist" :key="swiper.id" class="swiper-slide">
|
|
<navigator :url="swiper.url" hover-class="none">
|
|
<image :src="swiper.pic" mode="aspectFill" />
|
|
</navigator>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="nav" v-if="Recommendlist.length">
|
|
<view class="item" :class="where.subject_id==0 ? 'on':''" @click="where.subject_id=0">推荐</view>
|
|
<view class="item" v-for="item in Recommendlist" :class="where.subject_id==item.id ? 'on':''"
|
|
@click="where.subject_id=item.id">{{item.title}}</view>
|
|
</view>
|
|
<view class="studyCourse" ref="list">
|
|
<!--宫图-->
|
|
<view v-if="where.typesetting==2" class="layout-first">
|
|
<navigator v-for="(item, index) in updateList" :key="index" class="item" :url="getDetails(item)">
|
|
<view class="image">
|
|
<image :src="item.image" class="img" />
|
|
<view class="label">{{ item.typeName }}</view>
|
|
</view>
|
|
<view class="text">
|
|
<view class="name">{{ item.title }}</view>
|
|
<view class="label">
|
|
<template v-for="(itm, idx) in item.label">
|
|
<view v-if="idx < 2" :key="idx" class="cell">{{ itm }}</view>
|
|
</template>
|
|
</view>
|
|
<view class="group">
|
|
<template v-if="where.type==0">
|
|
<template v-if="item.is_pink">
|
|
<view v-if="item.pink_money <= 0" class="free">免费</view>
|
|
<view v-else class="money">¥<text>{{item.pink_money}}</text></view>
|
|
<text v-if="!item.is_light && item.type!=4"
|
|
class="total">共{{item.count}}节</text>
|
|
</template>
|
|
<template v-else>
|
|
<view v-if="item.money == 0" class="free">免费</view>
|
|
<view v-else class="money">¥<text>{{item.money}}</text></view>
|
|
<text v-if="!item.is_light && item.type!=4"
|
|
class="total">共{{item.count}}节</text>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<!--大图-->
|
|
|
|
<view class="swiper-list2 swiper-list3" v-else-if="where.typesetting==1">
|
|
<navigator class="item acea-row row-between-wrapper" v-for="vo in updateList" :url="getDetails(vo)">
|
|
<view class="pictrue">
|
|
<image :src="vo.image" />
|
|
<view class="label">{{ vo.typeName }}</view>
|
|
</view>
|
|
<view class="text-pic acea-row row-column">
|
|
<view class="name line1" v-text="vo.title"></view>
|
|
<view class="bottom acea-row row-between-wrapper">
|
|
<view class="acea-row row-middle">
|
|
<view class="num acea-row row-center-wrapper" v-for="(lab,index) in vo.label"
|
|
v-if="index < max" v-text="lab"></view>
|
|
</view>
|
|
<template v-if="where.type==0">
|
|
<template v-if="vo.is_pink">
|
|
<view v-if="vo.pink_money <= 0" class="free">免费<text
|
|
style="font-size:24rpx;color:#333;margin-left:10rpx"
|
|
v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
|
|
<view v-else class="money">¥<text>{{vo.pink_money}}</text><text
|
|
style="font-size:24rpx;color:#333;margin-left:10rpx"
|
|
v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
|
|
</template>
|
|
<template v-else>
|
|
<view v-if="vo.money == 0" class="free">免费<text
|
|
style="font-size:24rpx;color:#333;margin-left:10rpx"
|
|
v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
|
|
<view v-else class="money">¥<text>{{vo.money}}</text><text
|
|
style="font-size:24rpx;color:#333;margin-left:10rpx"
|
|
v-if="!vo.is_light && vo.type!=4">{{vo.count}}节</text></view>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<!--小图-->
|
|
<view class="swiper-list2" v-else-if="where.typesetting==3">
|
|
<navigator class="item acea-row" v-for="vo in updateList" :url="getDetails(vo)">
|
|
<view class="pictrue">
|
|
<image :src="vo.image" />
|
|
<view class="label">{{ vo.typeName }}</view>
|
|
</view>
|
|
<view class="text">
|
|
<view class="name line1" v-text="vo.title">非常语文课</view>
|
|
<view class="bottom acea-row row-middle">
|
|
<view class="num" v-for="(lab,index) in vo.label" v-if="index < max" v-text="lab">
|
|
</view>
|
|
</view>
|
|
<view class="group acea-row row-middle">
|
|
<template v-if="vo.is_pink">
|
|
<view v-if="vo.pink_money == 0" class="free">免费</view>
|
|
<view v-else class="money">¥<text>{{vo.pink_money}}</text></view>
|
|
<text v-if="!vo.is_light && vo.type!=4" class="total">共{{vo.count}}节</text>
|
|
</template>
|
|
<template v-else>
|
|
<view v-if="vo.money == 0" class="free">免费</view>
|
|
<view v-else class="money">¥<text>{{vo.money}}</text></view>
|
|
<text v-if="!vo.is_light && vo.type!=4" class="total">共{{vo.count}}节</text>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<!--纯图-->
|
|
<view class="list" v-else-if="where.typesetting==4">
|
|
<navigator class="item" v-for="vo in List" :url="getDetails(vo)" style="display: inherit">
|
|
<image :src="vo.image" />
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<p class="loading-line" style="background-color: #ffffff">
|
|
<text v-show="loading==true" class="fa fa-spinner loadingpic" style="font-size: 40rpx"></text>
|
|
<text v-if="List.length" v-text="loadTitle">加载更多</text>
|
|
</p>
|
|
<view v-if="loadend && !List.length" class="empty">
|
|
<image :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无课程" />
|
|
<view>暂无课程</view>
|
|
</view>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getUnifiedListMa,getUnifiedList
|
|
} from "@/api/index";
|
|
export default {
|
|
data() {
|
|
return {
|
|
where: {
|
|
type: 0,
|
|
recommend_id: 0,
|
|
page: 1,
|
|
limit: 10,
|
|
typesetting: 0,
|
|
subject_id: 0,
|
|
},
|
|
Recommendlist: [],
|
|
swiperlist: [],
|
|
loading: false,
|
|
loadend: false,
|
|
loadTitle: '上拉加载更多',
|
|
List: [],
|
|
max: 2,
|
|
title: ''
|
|
};
|
|
},
|
|
computed: {
|
|
updateList: function () {
|
|
return this.List.map(function (value) {
|
|
switch (value.type) {
|
|
case 1:
|
|
value.typeName = '图文';
|
|
break;
|
|
case 2:
|
|
value.typeName = '音频';
|
|
break;
|
|
case 3:
|
|
value.typeName = '视频';
|
|
break;
|
|
case 4:
|
|
value.typeName = '直播';
|
|
break;
|
|
case 5:
|
|
value.typeName = '专栏';
|
|
break;
|
|
default:
|
|
value.typeName = '其他';
|
|
break;
|
|
}
|
|
return value;
|
|
});
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
'where.subject_id': function (n) {
|
|
this.where.page = 1;
|
|
this.loadend = false;
|
|
this.$set(this, 'List', []);
|
|
this.get_unifiend_list();
|
|
}
|
|
},
|
|
mounted: function () {
|
|
//this.get_unifiend_list();
|
|
},
|
|
onLoad({ type, title, recommend_id }) {
|
|
this.where.type = type
|
|
this.where.recommend_id = recommend_id
|
|
this.title = title
|
|
this.get_list_info()
|
|
|
|
},
|
|
onReachBottom(){
|
|
this.loading == false && this.get_unifiend_list();
|
|
},
|
|
methods: {
|
|
get_list_info() {
|
|
getUnifiedListMa({
|
|
type: this.where.type,
|
|
recommend_id: this.where.recommend_id
|
|
}).then(res => {
|
|
const { type, recommend_id, typesetting, swiperlist, Recommendlist } = res.data
|
|
Object.assign(this.where, {
|
|
type,
|
|
recommend_id,
|
|
typesetting,
|
|
})
|
|
Object.assign(this, {
|
|
swiperlist,
|
|
Recommendlist
|
|
})
|
|
this.get_unifiend_list()
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
getDetails(vo) {
|
|
if (this.where.type === 1) {
|
|
return `/pages/article/news_detail?id=${vo.id}`
|
|
}
|
|
return vo.is_light ?`/pages/special/single_details?id=${vo.id}` :`/pages/special/details?id=${vo.id}`;
|
|
},
|
|
get_unifiend_list() {
|
|
if (this.loading) return;
|
|
if (this.loadend) return;
|
|
this.loadTitle = '';
|
|
this.loading = true;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
getUnifiedList(this.where).then(res=>{
|
|
var list = res.data.list;
|
|
var List =this.$util.SplitArray(list, this.List);
|
|
this.loading = false;
|
|
this.where.page = res.data.page;
|
|
this.loadend = list.length < this.where.limit;
|
|
this.loadTitle = this.loadend ? '我是有底线的' : '上拉加载更多';
|
|
this.$set(this, 'List', List);
|
|
uni.hideLoading();
|
|
}).catch(err=>{
|
|
this.loadTitle = '加载更多';
|
|
this.loading = false;
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.course-list.index .swiper-list2 {
|
|
padding-top: 26rpx;
|
|
padding-bottom: 26rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item {
|
|
padding-right: 20rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item~.item {
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .pictrue {
|
|
position: relative;
|
|
width: 250rpx;
|
|
height: 140rpx;
|
|
border-radius: .10rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.course-list.index .studyCourse .swiper-list3 .pictrue {
|
|
position: relative;
|
|
width: 710rpx;
|
|
height: 380rpx;
|
|
border-radius: .10rpx;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .pictrue image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .text {
|
|
position: relative;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .name {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .bottom {
|
|
margin-top: .10rpx;
|
|
flex: 1;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .bottom>.acea-row {
|
|
flex: 1;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .bottom .num {
|
|
flex-shrink: 0;
|
|
height: 40rpx;
|
|
padding-right: 12rpx;
|
|
padding-left: 12rpx;
|
|
border-radius: 3rpx;
|
|
background-color: rgba(44, 142, 255, .06);
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .bottom .num~.num {
|
|
margin-left: 14rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .group {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .free {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .money {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .money text {
|
|
font-size: 32rpx;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.course-list.index .swiper-list2 .item .total {
|
|
margin-left: .10rpx;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.layout-first {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-lines: multiple;
|
|
-webkit-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
justify-content: space-between;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
padding: 29rpx 20rpx;
|
|
}
|
|
|
|
.layout-first .item {
|
|
width: 345rpx;
|
|
margin-top: 29rpx;
|
|
}
|
|
|
|
.layout-first .item:nth-child(-n+2) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.layout-first .item .image {
|
|
position: relative;
|
|
height: 192rpx;
|
|
border-radius: .10rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout-first .item .image .img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.layout-first .item .text {
|
|
position: relative;
|
|
height: 161rpx;
|
|
padding-top: 14rpx;
|
|
}
|
|
|
|
.layout-first .item .text .name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.layout-first .item .text .label {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
margin-top: 12rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout-first .item .text .label .cell {
|
|
flex-shrink: 0;
|
|
height: 40rpx;
|
|
padding-right: 12rpx;
|
|
padding-left: 12rpx;
|
|
border-radius: 10rpx;
|
|
background-color: rgba(44, 142, 255, .06);
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
line-height: 40rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.layout-first .item .text .label .cell~.cell {
|
|
margin-left: 14rpx;
|
|
}
|
|
|
|
.layout-first .item .text .group {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-first .item .text .group .money {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.layout-first .item .text .group .money text {
|
|
font-size: 32rpx;
|
|
line-height: 45rpx;
|
|
}
|
|
|
|
.layout-first .item .text .group .free {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 45rpx;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.layout-first .item .text .group .total {
|
|
margin-left: 10rpx;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.empty {
|
|
margin-top: 100rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.empty image {
|
|
display: block;
|
|
width: 414rpx;
|
|
height: 305rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.layout-first .item .image .label {
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 10rpx;
|
|
padding-right: 11rpx;
|
|
padding-left: 11rpx;
|
|
border-radius: 3rpx;
|
|
background-color: rgba(0, 0, 0, .5);
|
|
font-size: 22rpx;
|
|
line-height: 34rpx;
|
|
color: #ffffff;
|
|
}
|
|
</style> |