first commit

历届学生/fontendsix/项目练习/上课项目/vue在包河/src/components/Radio.vue

@@ -0,0 +1,175 @@
+<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>