first commit

项目合集/在包河/code/src/views/.pydio

@@ -0,0 +1 @@
+161eef9f-1843-4eac-99bc-24fac9af9574

项目合集/在包河/code/src/views/Home.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+  .home
+    van-tabs(v-model='active',
+      line-width="20"
+      animated
+      @change="changeTabs"
+      swipeable)
+      van-tab(title="包河Radio")
+        Radio
+      van-tab(title="包河TV")
+        Tv
+      van-tab(title="融媒直播")
+        Live
+</template>
+
+<script>
+
+import Radio from "./Radio";
+import Tv from "./Tv";
+import Live from "./Live";
+export default {
+  data () {
+    return {
+      active: 0
+    }
+  },
+  created() {
+    this.active = parseInt(this.$route.query.active)
+  },
+  methods: {
+    changeTabs(index) {
+      this.$router.push({
+        path: '/',
+        query: {
+          active: this.active
+        }
+      })
+    }
+  },
+  components: {
+    Radio,
+    Tv,
+    Live
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

项目合集/在包河/code/src/views/Live.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+  .Live
+    Recommend(theme="theme1" :list="RecommendList")
+    Comment(:comment-list="CommentList")
+    Swiper(:swiper="SwiperList")
+</template>
+
+<script>
+import Recommend from "../components/recommend";
+import Comment from "../components/Comment";
+import Swiper from "../components/Swiper";
+
+export default {
+  name: "Live",
+  components: {
+    Recommend,
+    Comment,
+    Swiper
+  },
+  provide: {
+    title: '相关推荐',
+  },
+  data() {
+    return {
+      // title: '相关推荐',
+      RecommendList: [
+        {
+          title: '合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这' ,
+          img: '/img/recommend_right.png',
+          date: '2019-10-6',
+          videoTime: '03:07'
+        },
+        {
+          title: '合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这' ,
+          img: '/img/recommend_right.png',
+          date: '2019-10-6',
+          videoTime: '03:07'
+        },
+        {
+          title: '合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这' ,
+          img: '/img/recommend_right.png',
+          date: '2019-10-6',
+          videoTime: '03:07'
+        },
+        {
+          title: '合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这' ,
+          img: '/img/recommend_right.png',
+          date: '2019-10-6',
+          videoTime: '03:07'
+        },
+        {
+          title: '合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这' ,
+          img: '/img/recommend_right.png',
+          date: '2019-10-6',
+          videoTime: '03:07'
+        },
+      ],
+      CommentList: [
+        {
+          logo: '/img/radio_up.png',
+          auth: '呆小瓜',
+          time: '3秒前',
+          zan: 15,
+          content: "这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字"
+        },
+        {
+          logo: '/img/radio_up.png',
+          auth: '哈哈哈',
+          time: '10秒前',
+          zan: 999,
+          content: "错误的分为非威风无法威锋网成为"
+        }
+      ],
+      SwiperList: [
+        '/img/banner.png','/img/banner.png','/img/banner.png','/img/banner.png','/img/banner.png'
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

项目合集/在包河/code/src/views/Radio.vue

@@ -0,0 +1,79 @@
+<template lang="pug">
+  .Radio
+    .title 包河之声
+    img(class="default_frontcover" :src="list.default_frontcover")
+    img(class="process" :src="GifIcon")
+
+    .action
+      img.refresh(src="/img/live_broadcast_icon.png")
+      img.play(:src="AudioIcon" @click="PlayAudio")
+      img.list(src="/img/program_list_icon.png")
+
+    video-player.video-player-box(ref='videoPlayer', v-show="false"
+      :options='playerOptions',
+      :playsinline='true')
+
+
+
+</template>
+
+<script>
+import 'videojs-contrib-hls';
+export default {
+  name: "Radio",
+  data() {
+    return {
+      list: {},
+      AudioIcon: "/img/radio_up.png",
+      GifIcon: "/img/sound_spectrum.png",
+      playerOptions: {
+        height: '360',
+        autoplay: false,
+        muted: false,
+        language: 'en',
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [{
+          type: 'application/x-mpegURL',
+          src: "http://vjs.zencdn.net/v/oceans.mp4",
+        }],
+        poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
+        notSupportedMessage: '此视频暂无法播放，请稍后再试'
+      }
+    }
+  },
+  created() {
+    this.GetRadio()
+  },
+  mounted() {
+
+  },
+  methods: {
+    async GetRadio() {
+      this.list = await this.$http.RadioService.Radio({});
+      console.log(this.list)
+      this.playerOptions.sources[0].src = "http://video.geekhelp.cn/vue34"
+      // this.playerOptions.sources[0].src = this.list.play_url
+    },
+    /**
+     * 点击按钮播放
+     * @constructor
+     */
+    PlayAudio() {
+      // 播放按钮
+      if (this.AudioIcon.includes("radio_up")) {
+        this.AudioIcon = "/img/radio_stop.png"
+        this.GifIcon = "/img/sound_spectrum.gif"
+        this.$refs.videoPlayer.player.play()
+      } else {
+        this.AudioIcon = "/img/radio_up.png"
+        this.GifIcon = "/img/sound_spectrum.png"
+        this.$refs.videoPlayer.player.pause()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@less/page/Radio.less";
+</style>

项目合集/在包河/code/src/views/Tv.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+  .TV
+    TvList(:list-data="list" :is-show="false" @change="EnterInfo")
+</template>
+
+<script>
+import TvList from "@/components/TvList"
+export default {
+  name: "Tv",
+  components: {
+    TvList
+  },
+  data() {
+    return {
+      list: [],
+      params: {
+        page: 1,
+        count: 15
+      }
+    }
+  },
+  async created() {
+    await this.GetTvList()
+  },
+  methods: {
+    EnterInfo(index) {
+      this.$router.push({
+        path: '/TvInfo',
+        query: {
+          id: index
+        }
+      })
+    },
+    async GetTvList() {
+      let res = await this.$http.TvService.TvList(this.params);
+      this.list = res;
+      console.log(res)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

项目合集/在包河/code/src/views/TvInfo.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .TvInfo
+    Video(:video-url="VideoUrl" v-if="VideoUrl.length != 0")
+    TvList(:list-data="list" :is-active="index" @change="EnterInfo")
+</template>
+
+<script>
+import TvList from "@/components/TvList";
+import Video from "@/components/Video";
+export default {
+  name: "TvInfo",
+  data() {
+    return {
+      list: [],
+      params: {
+        page: 1,
+        count: 15
+      },
+      VideoUrl: '',
+      index: this.$route.query.id
+    }
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.GetTvList()
+    next()
+  },
+  async created() {
+    await this.GetTvList()
+  },
+  methods: {
+    EnterInfo(index) {
+      this.index = index;
+      this.$router.push({
+        path: '/TvInfo',
+        query: {
+          id: index
+        }
+      })
+    },
+
+    async GetTvList() {
+      let res = await this.$http.TvService.TvList(this.params);
+      // this.VideoUrl = res[this.index].play_url;
+      this.VideoUrl = "http://video.geekhelp.cn/vue34";
+      this.list = res;
+    }
+  },
+  components: {
+    TvList,
+    Video
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

项目合集/在包河/code/src/views/realTimeInfo.vue

@@ -0,0 +1,67 @@
+<template lang="pug">
+  .realTimeInfo(v-if="Object.keys(list).length != 0")
+
+    .infoConten
+      p.title {{list.detail.title}}
+      p.text {{list.detail.publish_time}}  浏览量{{list.detail.viewer_count}}万
+      .content(v-html="list.detail.content")
+
+    Recommend(theme="theme1" :list="list.recommend" )
+    Comment(:comment-list="list.comment")
+</template>
+
+<script>
+import Comment from "@com/Comment";
+import Recommend from "@com/recommend";
+import Swiper from "@com/Swiper";
+
+export default {
+  name: "realTimeInfo",
+  data () {
+    return {
+      list: {}
+    }
+  },
+  provide: {
+    title: '相关推荐',
+  },
+  created() {
+    this.getData(this.$route.query.id)
+  },
+  methods: {
+    async getData(id) {
+      this.list  = await this.$http.DetailService.newsDetail({ id: id });
+    }
+  },
+  beforeRouteUpdate (to, from, next) {
+    this.getData(to.query.id)
+    next()
+  },
+  components: {
+    Recommend,
+    Comment,
+    Swiper
+  },
+}
+</script>
+
+<style scoped lang="less">
+.infoConten {
+  padding-left: 0.307rem;
+  padding-right: 0.307rem;
+  .title {
+    font-size: 0.533rem;
+    line-height: 0.72rem;
+    letter-spacing: 0.013rem;
+    color: #333333;
+    margin-bottom: 0.507rem;
+  }
+  .text {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.32rem;
+    color: #999999;
+    margin-bottom: 0.907rem;
+  }
+}
+
+</style>