<template>
<div class="collection-page">
<div class="collection-content" v-if="!noOne">
<div class="top-play">
<img :src="playAllUrl" class="play-all-img">
<div>
收藏夹<span class="top-tips">（共{{total}}首）</span>
</div>
</div>
<ul
class="collection-list"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading">
<li v-for="(data,index) in showObj.audio" @click="showAudio(index)">
<div class="index">{{index+1}}</div>
<div class="text">
<div class="title">
{{data.title}}
</div>
<div class="sub-title">
{{data.sub_title}}
</div>
</div>
<img class="play-icon" v-if="index!==showObj.audioIndex" :src="playDefaultUrl"/>
<img class="play-icon" v-if="index===showObj.audioIndex" :src="playActiveUrl"/>
</li>
</ul>
</div>
<div v-if="noOne" class="unStart" >
<img :src="errorUrl" alt="">
<p>还没有收藏哦~</p>
<div @click="toList()">快去收藏添加吧~</div>
</div>
<!-- <div v-if="noOne" class="noOne">
<img :src="errorUrl">
<div class="text">
还没有收藏哦
<br>
快去课程里添加吧
</div>
<div class="btn" @click="toList()">
去添加
</div>
</div> -->
<foot-page/>
<audio-page ref="audioPage" v-if="showObj.audio.length>0" sc="0" v-show="showObj.show" :showObj="showObj"/>
</div>
</template>
<script>
import {getUserCollectApi} from "../../service/api";
import errorUrl from '../../assets/collectionless.png'
import playAllUrl from '../../assets/newLesson/audio-play-all.png'
import playDefaultUrl from '../../assets/newLesson/zDefaultIcon.png'
import playActiveUrl from '../../assets/newLesson/zIcon.png'
import footPage from '../public/bottomTab'
import audioPage from './audio'
export default {
name: "index",
components:{
footPage,
audioPage
},
data(){
return {
errorUrl:errorUrl,
playAllUrl:playAllUrl,
noOne:false,
playDefaultUrl:playDefaultUrl,
playActiveUrl:playActiveUrl,
showObj:{
audio:[],
audioIndex:0,
show:false
},
audioShow:false,
page:1,
loading:false,
total:0
}
},
mounted(){
this.initPage()
},
methods:{
loadMore(){
},
toList(){
this.$router.push({name:'map'})
},
showAudio(index){
this.showObj.audioIndex = index;
this.showObj.show = true
this.$refs.audioPage.onPlay()
},
initPage(){
getUserCollectApi({limit:100000}).then(res=>{
if(res.list.length < 1){
this.noOne =true
}else{
this.showObj.audio =res.list;
this.total = res.total;
}
})
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.audio-hear{background:url('https://static-cdn.changchangenglish.com/new-sing/static/imagesaudio-hear.png') no-repeat;background-size:18*@toVw 50*@toVw;display: inline-block}
._27377740323539322{height:14*@toVw;width:16*@toVw;background-position:0 0;}
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -14*@toVw;}
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -32*@toVw;}
.noOne{
padding-top: 86*@toVw;
text-align: center;
img{
width: 164*@toVw;
}
.text{
margin-top: 20*@toVw;
font-size:16px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
}
.btn{
margin-top: 26*@toVw;
width:91*@toVw;
height:32*@toVw;
border-radius:18*@toVw;
border:1*@toVw solid rgba(255,120,117,1);
line-height: 32*@toVw;
font-size:14px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,120,117,1);
}
}
.collection-page{
// background: #eeeeee;
.unStart{
text-align: center;
img{width:300*@toVw;}
p{line-height: 22px;font-size: 16px;color: #666666;}
div{width:250*@toVw;height: 40*@toVw;line-height:40*@toVw;background: #40A9FF;color: white;border-radius: 20*@toVw;margin-top: 72*@toVw }
}
.collection-content{
background: white;
position: absolute;
top: 20*@toVw;
border-radius: 8*@toVw;
left: 20*@toVw;
right: 20*@toVw;
bottom: 80*@toVw;
padding: 20*@toVw;
overflow: auto;
margin: auto;
.top-play{
height: 52*@toVw;
border-bottom: 1*@toVw solid #eee;
display: flex;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(0,0,0,1);
.top-tips{
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
}
img{
width: 25*@toVw;
margin-right: 10*@toVw;
}
div{
margin-left: 10*@toVw;
}
.play-all-img{
margin: auto 0;
width: 16*@toVw;
vertical-align: middle;
}
}
.collection-list{
list-style: none;
margin: 0;
padding: 0;
li{
height: 52*@toVw;
border-bottom: 1*@toVw solid #eee;
display: flex;
.index{
width: 15*@toVw;
margin: auto 0;
font-size:18*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
}
.text{
margin-left: 10*@toVw;
.title{
font-size:16*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(0,0,0,1);
}
.sub-title{
font-size:12*@toVw;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(153,153,153,1);
}
}
.play-icon{
width: 25*@toVw;
margin-right: 10*@toVw;
}
}
}
}
}
@media screen and (orientation: landscape) {
@toVw:100/667vw;
.audio-hear{background:url('https://static-cdn.changchangenglish.com/new-sing/static/imagesaudio-hear.png') no-repeat;background-size:18*@toVw 50*@toVw;display: inline-block}
._27377740323539322{height:14*@toVw;width:16*@toVw;background-position:0 0;}
.zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -14*@toVw;}
.zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -32*@toVw;}
.collection-page{
background: #eeeeee;
.collection-content{
background: white;
position: absolute;
top: 20*@toVw;
border-radius: 8*@toVw;
left: 20*@toVw;
right: 20*@toVw;
bottom: 50*@toVw;
padding: 20*@toVw;
overflow: auto;
margin: auto;
.top-play{
height: 52*@toVw;
border-bottom: 1*@toVw solid #eee;
display: flex;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(0,0,0,1);
.top-tips{
font-size:12px;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
}
img{
width: 25*@toVw;
margin-right: 10*@toVw;
}
div{
margin-left: 10*@toVw;
}
.play-all-img{
margin: auto 0;
width: 16*@toVw;
vertical-align: middle;
}
}
.collection-list{
list-style: none;
margin: 0;
padding: 0;
li{
height: 52*@toVw;
border-bottom: 1*@toVw solid #eee;
display: flex;
.index{
width: 15*@toVw;
margin: auto 0;
font-size:18*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(153,153,153,1);
}
.text{
margin-left: 10*@toVw;
.title{
font-size:16*@toVw;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(0,0,0,1);
}
.sub-title{
font-size:12*@toVw;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(153,153,153,1);
}
}
.play-icon{
width: 25*@toVw;
margin-right: 10*@toVw;
}
}
}
}
}
}
</style>