175 lines
3.7 KiB
Vue
175 lines
3.7 KiB
Vue
<template lang="pug">
|
||
.radio
|
||
vue-video(
|
||
ref="video",
|
||
:url="playUrl",
|
||
:is-show="false",
|
||
v-if="playUrl.length != 0"
|
||
)
|
||
.title {{ radio.title }}
|
||
img.music_img(:src="radio.logo")
|
||
|
||
img.music_gif(
|
||
:src="status ? '/static/img/sound_spectrum.png' : '/static/img/sound_spectrum.gif'"
|
||
)
|
||
|
||
ul.action
|
||
li(@click="GetRadio")
|
||
img(src="/static/img/icon/live_broadcast_icon.png")
|
||
p 当前播放
|
||
li
|
||
img(
|
||
@click="PlayVideo",
|
||
:src="status ? '/static/img/radio_up.png' : '/static/img/radio_stop.png'"
|
||
)
|
||
li(@click="showMenu")
|
||
img(src="/static/img/icon/program_list_icon.png")
|
||
p 节目列表
|
||
|
||
van-popup(v-model="isShow", position="bottom", :style="{ height: '70%' }")
|
||
.menu_title 节目单
|
||
ul.menu_list
|
||
li(v-for="(item,index) in menuList" :key="index")
|
||
.left
|
||
.text
|
||
span {{ item.menu_name }}
|
||
.name {{ item.nick_name }}
|
||
img(src="/static/img/act-list.gif")
|
||
span {{ item.start_time }} - {{ item.end_time }}
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShow: false, // 控制节目单的显示隐藏，true显示，false 隐藏
|
||
active: 0,
|
||
status: true, // true 未播放，false 播放中
|
||
radio: {},
|
||
playUrl: [],
|
||
menuList: [] // 节目列表
|
||
};
|
||
},
|
||
created() {
|
||
this.GetRadio();
|
||
},
|
||
methods: {
|
||
async GetRadio() {
|
||
this.radio = await this.$http.index.radio();
|
||
this.playUrl = [
|
||
{
|
||
type: "application/x-mpegURL",
|
||
src: this.radio.play_url,
|
||
},
|
||
];
|
||
},
|
||
async showMenu() {
|
||
this.menuList = await this.$http.index.getMenuList();
|
||
console.log( this.menuList);
|
||
this.isShow = !this.isShow;
|
||
},
|
||
PlayVideo() {
|
||
// console.log(this.$refs.video);
|
||
if (this.status) {
|
||
this.$refs.video.onPlayerPlay();
|
||
} else {
|
||
this.$refs.video.onPlayerPause();
|
||
}
|
||
this.status = !this.status;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.radio {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.title {
|
||
font-size: 0.48rem;
|
||
color: #000000;
|
||
margin-bottom: 0.84rem;
|
||
margin-top: 1.347rem;
|
||
}
|
||
.music_img {
|
||
width: 7.467rem;
|
||
height: 7.467rem;
|
||
margin-bottom: 0.67rem;
|
||
}
|
||
.music_gif {
|
||
width: 7.467rem;
|
||
height: 1.2rem;
|
||
margin-bottom: 0.733rem;
|
||
}
|
||
.action {
|
||
display: flex;
|
||
width: 7.48rem;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
li {
|
||
text-align: center;
|
||
img {
|
||
width: 0.52rem;
|
||
height: 0.52rem;
|
||
margin-bottom: 0.173ren;
|
||
}
|
||
p {
|
||
font-size: 0.267rem;
|
||
color: #999999;
|
||
}
|
||
&:nth-child(2) {
|
||
img {
|
||
width: 1.6rem;
|
||
height: 1.6rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu_title {
|
||
font-size: 0.37rem;
|
||
font-weight: 500;
|
||
color: #000;
|
||
text-align: center;
|
||
border-bottom: 0.01rem solid #ccc;
|
||
line-height: 1.6rem;
|
||
}
|
||
.menu_list {
|
||
width: 100%;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 0.39rem;
|
||
border-bottom: 0.01rem solid #ccc;
|
||
height: 1.6rem;
|
||
justify-content: space-between;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
text-align: center;
|
||
span {
|
||
font-size: 0.37rem;
|
||
color: #000;
|
||
}
|
||
.name {
|
||
margin-top: 0.2rem;
|
||
font-size: 0.32rem;
|
||
color: #999;
|
||
}
|
||
}
|
||
img {
|
||
width: 0.37rem;
|
||
height: 0.39rem;
|
||
margin-left: 0.57rem;
|
||
}
|
||
}
|
||
span {
|
||
font-size: 0.37rem;
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |