<template>
<div class="RankingList">
<van-tabs v-model="tabActive" @click="tabClick">
<van-tab title="基地"></van-tab>
<van-tab title="课程"></van-tab>
</van-tabs>
<div id="taobao-best">
<div class="swiper-container show-swiper swiper-container-horizontal swiper-container-ios" v-if="swiperData.length > 0">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(37px, 0px, 0px)">
<div
class="swiper-slide swiper-slide swiper-slide-active"
style="margin-right: 17px"
v-if="swiperData.length >= 1"
@click="goDetail(swiperData[0].id)"
>
<div class="goods" style="transform: scale3d(1.1, 1.1, 1); transition-duration: 0ms">
<img class="icon" src="@/assets/top1.png" alt="" />
<span class="lookNum">{{ swiperData[0].read_count }}人浏览</span>
<div class="cont">
<p class="label">
<span>{{ tabActive == 0 ? swiperData[0].baseName : swiperData[0].course_name }}</span>
</p>
<h3>{{ tabActive == 0 ? swiperData[0].baseInfo : swiperData[0].course_info }}</h3>
<div class="address">
<van-icon name="location" />
{{
tabActive == 0
? swiperData[0].province + swiperData[0].city + swiperData[0].area + swiperData[0].address
: swiperData[0].address
}}
</div>
<p class="bottomLabel">
<span>{{ tabActive == 0 ? swiperData[0].features : swiperData[0].baseName }}</span>
</p>
</div>
<img v-if="tabActive == 0" :src="swiperData[0].coverUrl ? swiperData[0].coverUrl : require('@/assets/def.png')" alt="" />
<img v-else :src="swiperData[0].coverUrl ? swiperData[0].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
</div>
</div>
<div
class="swiper-slide swiper-slide-next"
style="margin-right: 17px"
v-if="swiperData.length >= 2"
@click="goDetail(swiperData[1].id)"
>
<div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms">
<img class="icon" src="@/assets/top2.png" alt="" />
<span class="lookNum">{{ swiperData[1].read_count }}人浏览</span>
<div class="cont">
<p class="label">
<span>{{ tabActive == 0 ? swiperData[1].baseName : swiperData[1].course_name }}</span>
</p>
<h3>{{ tabActive == 0 ? swiperData[1].baseInfo : swiperData[1].course_info }}</h3>
<div class="address">
<van-icon name="location" />
{{
tabActive == 0
? swiperData[1].province + swiperData[1].city + swiperData[1].area + swiperData[1].address
: swiperData[1].address
}}
</div>
<p class="bottomLabel">
<span>{{ tabActive == 0 ? swiperData[1].features : swiperData[1].baseName }}</span>
</p>
</div>
<img v-if="tabActive == 0" :src="swiperData[1].coverUrl ? swiperData[1].coverUrl : require('@/assets/def.png')" alt="" />
<img v-else :src="swiperData[1].coverUrl ? swiperData[1].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
</div>
</div>
<div class="swiper-slide" style="margin-right: 17px" v-if="swiperData.length >= 3" @click="goDetail(swiperData[2].id)">
<div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms">
<img class="icon" src="@/assets/top3.png" alt="" />
<span class="lookNum">{{ swiperData[2].read_count }}人浏览</span>
<div class="cont">
<p class="label">
<span>{{ tabActive == 0 ? swiperData[2].baseName : swiperData[2].course_name }}</span>
</p>
<h3>{{ tabActive == 0 ? swiperData[2].baseInfo : swiperData[2].course_info }}</h3>
<div class="address">
<van-icon name="location" />
{{
tabActive == 0
? swiperData[2].province + swiperData[2].city + swiperData[2].area + swiperData[2].address
: swiperData[2].address
}}
</div>
<p class="bottomLabel">
<span>{{ tabActive == 0 ? swiperData[2].features : swiperData[2].baseName }}</span>
</p>
</div>
<img v-if="tabActive == 0" :src="swiperData[2].coverUrl ? swiperData[2].coverUrl : require('@/assets/def.png')" alt="" />
<img v-else :src="swiperData[2].coverUrl ? swiperData[2].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
</div>
</div>
<div class="swiper-slide" style="margin-right: 17px"></div>
</div>
</div>
</div>
<van-list v-model="loading" :finished="Finished" finished-text="没有更多了" @load="onLoad">
<ul class="dataList">
<li v-for="(n, i) in dataList" :key="i" @click="goDetail(n.id)">
<div class="img">
<span class="bot">{{ n.read_count }}人已浏览</span>
<img v-if="tabActive == 0" :src="n.coverUrl ? n.coverUrl : require('@/assets/def.png')" alt="" />
<img v-else :src="n.coverUrl ? n.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
</div>
<h3>{{ tabActive == 0 ? n.baseName : n.course_name }}</h3>
<p class="label">
<template v-for="(k, j) in n.labels">
<span v-if="k" :key="i + '' + j">{{ k }}</span>
</template>
</p>
<div class="address">
<van-icon name="location" />
{{ tabActive == 0 ? getNull(n.province) + getNull(n.city) + getNull(n.area) + getNull(n.address) : n.address }}
</div>
<p class="bottom">{{ tabActive == 0 ? n.features : n.course_info }}</p>
</li>
</ul>
</van-list>
</div>
</template>
<script>
import '@/common/swiper.min.css'
import Swiper from '@/common/swiper.min.js'
export default {
data() {
return {
tabActive: 0,
swiperData: [],
dataIndex: 0,
dataList: [],
loading: false,
Finished: false,
}
},
created() {},
methods: {
goDetail(id) {
if (this.tabActive == 0) {
this.$router.push({
path: '/base_detail',
query: { baseId: id },
})
} else {
this.$router.push({
path: '/abroad_detail',
query: { courseId: id },
})
}
},
tabClick(item) {
this.dataIndex = 1
this.dataList = []
this.swiperData = []
this.Finished = false
if (item == 0) {
this.GetStudyBaseList(1)
} else {
this.GetCourseList(1)
}
},
onLoad() {
var that = this
that.dataIndex++
setTimeout(() => {
if (that.tabActive == 0) {
that.GetStudyBaseList(that.dataIndex)
} else {
that.GetCourseList(that.dataIndex)
}
}, 1000)
},
GetStudyBaseList(page, callback) {
var that = this
this.http
.GetStudyBaseList({
pageIndex: page,
pageSize: 10,
cs: this.projectCity,
})
.then(function (res) {
if (res.status == 1) {
var data = res.data.items
data.forEach(function (n, i) {
var baseLabels = n.baseLabels
if (baseLabels) {
n.labels = baseLabels.split(',')
} else {
n.labels = []
}
if (page == 1) {
if (i < 3) {
that.swiperData.push(n)
} else {
that.dataList.push(n)
}
} else {
that.dataList.push(n)
}
})
that.loading = false
if (data.length < 10) {
that.Finished = true
}
setTimeout(function () {
that.setSwiper()
}, 1000)
}
})
},
GetCourseList(page, callback) {
var that = this
this.http
.GetCourseList({
pageIndex: page,
pageSize: 10,
cs: this.projectCity,
})
.then(function (res) {
if (res.status == 1) {
var data = res.data.items
data.forEach(function (n, i) {
var baseLabels = n.course_labels
if (baseLabels) {
n.labels = baseLabels.split(',')
} else {
n.labels = []
}
if (page == 1) {
if (i < 3) {
that.swiperData.push(n)
} else {
that.dataList.push(n)
}
} else {
that.dataList.push(n)
}
})
that.loading = false
if (data.length < 10) {
that.Finished = true
}
setTimeout(function () {
that.setSwiper()
}, 1000)
}
})
},
getNull(t) {
return t ? t : ''
},
setSwiper() {
new Swiper('.show-swiper', {
slidesPerView: 'auto',
watchSlidesProgress: !0,
slidesOffsetBefore: 37,
spaceBetween: 17,
resistanceRatio: 1,
controller: {
control: '',
},
on: {
progress: function (b) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
var slideProgress = this.slides[i].progress
var prevIndent = 4 == i ? 0.3228 : 0.0898
var scale = 1 > Math.abs(slideProgress + prevIndent) ? 0.1 * (1 - Math.abs(slideProgress + prevIndent)) + 1 : 1
slide.find('.goods').transform('scale3d(' + scale + ',' + scale + ',1)')
}
},
setTransition: function (b) {
for (var a = 0; a < this.slides.length; a++) this.slides.eq(a).find('.goods').transition(b)
},
touchMove: function () {},
touchEnd: function () {
;-1515 > this.translate && alert('\u8df3\u8f6c')
},
},
})
},
},
}
</script>
<style lang="stylus" scoped>
p{
margin: 20px 0
}
.RankingList{
}
#taobao-best {
position relative
.show-swiper {
padding 60px 0
}
.swiper-slide {
width 440px
.goods {
width 100%
box-sizing border-box
border-radius 16px
position relative
overflow hidden;
img{
width 100%
}
.icon{
position absolute
left 0
top 0
width 100px
}
.lookNum{
position absolute
top 10px
right 20px
background-color rgba(0,0,0,0.5)
color white
font-size 1.2rem
padding 4px 10px
border-radius 100px
}
.cont{
position absolute
bottom 0
left 0
width 100%
padding 0 20px
box-sizing border-box
background-image linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.5))
.label{
margin 0
span {
background-color rgba(0,0,0,0.5)
color #0EDBA1
display inline-block
padding 6px
}
}
h3{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
color white
font-size 1.6rem
margin 20px 0px
}
div{
position relative
padding-left 36px
box-sizing border-box
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color white
font-size 1.2rem
i{
position absolute
left: 0px;
top: 0px;
font-size: 1.4rem;
}
}
.bottomLabel{
span{
display inline-block
background-color #0EDBA1
font-size 1.2rem
display inline-block
border-radius 6px
padding 6px 10px
}
}
}
}
}
}
.dataList{
padding 0 40px
box-sizing border-box
li{
position relative
padding-left 300px
box-sizing border-box
margin-bottom 40px
min-height 280px
.img{
position absolute
left 0
top 0
width 270px
padding 0
img{
width 100%
height 270px
border-radius 10px
}
span{
display inline-block
background-color rgba(0,0,0,0.5)
color white
padding 6px 10px
font-size 1.2rem
position absolute
left 10px
}
.top{
top 10px
}
.bot{
bottom 10px
border-radius 100px
}
}
h3{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size 1.6rem
margin 0px
}
.label{
span{
display inline-block
margin-right 20px
padding 6px 16px
border-radius 6px
background-color #D0F8ED
color #0EDBA1
font-size 1.2rem
}
}
div{
position relative
padding-left 36px
box-sizing border-box
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color #333;
font-size: 1.4rem;
i{
position absolute
left: 0px;
top: 0px;
font-size: 1.4rem;
}
}
.address{
margin-top 20px
}
.bottom{
color #D4BCAB
font-size 1.2rem
}
}
}
</style>