1

build/webpack.base.conf.js

 'use strict'
+const webpack = require("webpack")
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
@@ -8,16 +9,16 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
+// const createLintingRule = () => ({
+//   test: /\.(js|vue)$/,
+//   loader: 'eslint-loader',
+//   enforce: 'pre',
+//   include: [resolve('src'), resolve('test')],
+//   options: {
+//     formatter: require('eslint-friendly-formatter'),
+//     emitWarning: !config.dev.showEslintErrorsInOverlay
+//   }
+// })
 
 module.exports = {
   context: path.resolve(__dirname, '../'),
@@ -40,7 +41,7 @@ module.exports = {
   },
   module: {
     rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      // ...(config.dev.useEslint ? [createLintingRule()] : []),
       {
         test: /\.vue$/,
         loader: 'vue-loader',
@@ -88,5 +89,13 @@ module.exports = {
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
-  }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+        $: 'jquery',
+        jQuery: 'jquery',
+        'window.jQuery': 'jquery',
+        'root.jQuery': 'jquery'
+    })
+  ]
 }

src/App.vue

@@ -5,21 +5,132 @@
     </keep-alive>
     <router-view v-if="!$route.meta.keepAlive"/>
     <vue-nav/>
+    <vue-baberrage
+      :isShow="barrageIsShow"
+      :barrageList="barrageList"
+      :loop="barrageLoop"
+      >
+    </vue-baberrage>
+    <div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div>
+    <!-- style="position: absolute; top: 20%;z-index: 20199"  -->
+    <audio ref="homeAudio" :loop="AudioPlayType ? true : false"  :src="url" controls></audio>
   </div>
 </template>
 
 <script>
+import { MESSAGE_TYPE } from 'vue-baberrage'
 import pageNav from './components/pageNav'
 export default {
   name: 'App',
   components: {
     'vue-nav': pageNav
+  },
+  data () {
+    return {
+      barrageIsShow: true,
+      barrageList: [],
+      barrageLoop: false,
+      proxy: {},
+      currentId: 0,
+      url: "/static/audio/bg_m_000.mp3",
+      AudioPlayType: 1,
+    }
+  },
+  mounted () {
+    let audio = this.$refs.homeAudio
+    let $this = this
+    audio.addEventListener('ended', function () {
+      if ($this.AudioPlayType === 0) {
+        $this.MsgBus.$emit('nextMusic')
+      }
+    }, false);
+    $this.connectServer()
+    this.MsgBus.$on('setBarrageShow', function (type) {
+      $this.barrageIsShow = type
+    })
+    // 监听音乐播放 暂停
+    this.MsgBus.$on('audioPlay', function (type) {
+      $this.setAudioPlay(type)
+    })
+    // 监听音乐播放设置
+    this.MsgBus.$on('audioType', function (type) {
+      $this.setAudioType(type)
+    })
+    // 监听音乐播放
+    this.MsgBus.$on('changeMusic', function (url) {
+      $this.url = url
+      setTimeout(()=>{
+        $this.setAudioPlay(0)
+      }, 50)
+    })
+    // setInterval(()=>{
+    //   let barrageObj = {
+    //     id: ++this.currentId,
+    //     avatar: 'https://profile.csdnimg.cn/E/6/D/3_nalaluky',
+    //     msg: '哦呦he好很社会合适的看阿萨德阿萨德~~~',
+    //     name: '一个不愿意透露姓名的网友',
+    //     time: 15,
+    //     type: MESSAGE_TYPE.NORMAL
+    //   }
+    //   $this.barrageList.push(barrageObj)
+    // }, 5000)
+  },
+  methods: {
+    setAudioType: function (type) {
+      this.AudioPlayType = type
+      this.$forceUpdate()
+    },
+    setAudioPlay: function (type) {
+      if (type == 0) {
+        this.$refs.homeAudio.play()
+      } else {
+        this.$refs.homeAudio.pause()
+      }
+    },
+    connectServer() {
+      var $this = this;
+      var conn = $.hubConnection("http://192.168.2.65:7838/signalr", {
+        qs: `i=888888&n=罗超&p=${encodeURIComponent(
+          "http://imgfile.oytour.com/New/Upload/User/20191018150051176.png"
+        )}`
+      });
+      $this.proxy = conn.createHubProxy("annualLeaveHub");
+      $this.getMsg();
+      conn
+        .start()
+        .done(data => {
+          $this.sendMsg();
+        })
+        .fail(data => {});
+    },
+    sendMsg () {
+      var $this = this;
+      $this.proxy.invoke("SendBarrage", '我擦很社会啊').done(msg => {
+          console.log(msg)
+      });
+    },
+    getMsg () {
+      var $this = this;
+      $this.proxy.on("barrage", data => {
+        let   barrage = data
+        let barrageObj = {
+          id: ++this.currentId,
+          avatar: barrage.p,
+          msg: barrage.m,
+          name: barrage.n,
+          time: 15,
+          type: MESSAGE_TYPE.NORMAL
+        }
+        this.barrageList.push(barrageObj)
+      })
+    }
   }
+
 }
 </script>
 
 <style>
-@import url("//at.alicdn.com/t/font_1574056_wu2f2wryiyk.css");
+@import url("//at.alicdn.com/t/font_1574056_qf60my177p.css");
 @import "./assets/css/init.css";
 @import "./assets/css/animate.css";
 #app {
@@ -29,4 +140,29 @@ export default {
   width: 100%;
   height: 100%;
 }
+.baberrage-stage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+.baberrage-msg{
+  font-size: 3rem;
+}
+.baberrage-item{
+  display: flex !important;
+  align-items: center !important;
+  padding: .6rem 1rem !important;
+}
+.baberrage-name{
+  color: rgb(115, 220, 255);
+  font-size: 3rem;
+  margin-left: .5rem;
+}
+.baberrage-item .baberrage-avatar{
+  position: initial !important;
+}
 </style>

src/assets/css/pageNav.css

@@ -6,6 +6,7 @@
   bottom: .5rem;
   left: 1rem;
   box-sizing: border-box;
+  z-index: 10010;
 }
 .pageNav .left_nav{
   padding: 1rem;
@@ -19,6 +20,8 @@
   position: relative;
   opacity: 0.1;
   transition: opacity linear 4s;
+  padding-right: 20rem;
+  box-sizing: border-box;
 }
 .pageNav .left_nav:hover{
   opacity: 1;
@@ -76,6 +79,33 @@
   color: #e1830a !important;
 }
 .control_btn{
+  position: absolute;
+  right: 12rem;
+}
+.music_box{
   position: absolute;
   right: 1rem;
+  display: flex;
+  align-items: center;
+}
+.music-select{
+  padding: .8rem 0;
 }
+.music-select input{
+  background: transparent;
+  color: #e9d5ab !important;
+  border: none;
+  width: 100px;
+  padding-right: 0 !important;
+  text-align: center; 
+}
+.music-select .el-input__suffix{
+  display: none;
+}
+.el-select-dropdown {
+  z-index: 10011 !important;
+}
+.music_box .iconfont{
+  font-size: 2.8rem;
+  cursor: pointer;
+}
\ No newline at end of file

src/components/pageNav.vue

@@ -13,7 +13,7 @@
             </div>
           </div>
         </template>
-        <p v-else class="item_name">{{item.Name}}</p>
+        <p v-else>{{item.Name}}</p>
       </div>
       <div class="control_btn">
         <div class="left_nav_item" v-for="(item, index) in controlMenu" @click="changeControlState(index)" :key="index" :index="index">
@@ -23,29 +23,78 @@
           <p class="item_name">{{item.Name}}</p>
         </div>
       </div>
-    </div>
-    <div class="right_nav">
-      aa
+      <div class="music_box">
+        <el-select v-model="value" @change="changeMusic" placeholder="请选择" class="music-select">
+          <el-option
+            popper-class="music-option"
+            v-for="item in options"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <template>
+          <i v-if="AudioType === 1" @click="changeAudioType(0)" class="iconfont iconxunhuan"></i>
+          <i v-else @click="changeAudioType(1)" class="iconfont iconliebiao"></i>
+        </template>
+        <template>
+          <i v-if="AudioStateIndex === 1" @click="changeAudioState(0)" class="iconfont iconbofang1"></i>
+          <i v-else @click="changeAudioState(1)" class="iconfont iconzanting"></i>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import {leftNavMenu, controlMenu} from '../assets/js/menuJson'
+import {musicOptions} from '../assets/js/musicJson'
 export default {
   name: 'pageNav',
   data () {
     return {
+      options: musicOptions,
+      value: '/static/audio/bg_m_000.mp3',
       leftNavMenu: leftNavMenu,
       controlMenu: controlMenu,
       activeIndex: 0,
       mouseIndex: -1,
-      animateClass: ''
+      animateClass: '',
+      AudioStateIndex: 1,
+      AudioType: 1
     }
   },
-  created () {},
-  mounted () {},
+  created () {
+  },
+  mounted () {
+    let $this = this
+    this.MsgBus.$on('nextMusic', function () {
+      $this.nextMusic()
+    })
+  },
   methods: {
+    nextMusic: function () {
+      for(let i = 0; i < this.options.length; i++) {
+        if (this.options[i].value === this.value) {
+          let num = i === this.options.length - 1 ? 0 : i + 1
+          this.value = this.options[num].value
+          this.changeMusic(this.options[num].value)
+          break;
+        }
+      }
+    },
+    changeAudioType: function (type) {
+      this.AudioType = type
+      this.MsgBus.$emit('audioType', type)
+    },
+    changeMusic: function (e){
+      this.MsgBus.$emit('changeMusic', e)
+      this.AudioStateIndex = 0
+    },
+    changeAudioState: function (type) {
+      this.AudioStateIndex = type
+      this.MsgBus.$emit('audioPlay', type)
+    },
     mouseOver: function (index) {
       this.mouseIndex = index
       this.animateClass = 'animated rollIn'
@@ -58,6 +107,7 @@ export default {
       let Name = this.controlMenu[index].Name
       if (Name === '弹幕') {
         console.log('dm')
+        this.MsgBus.$emit('setBarrageShow', this.controlMenu[index].state)
       } else if (Name === '声音') {
         console.log('sy')
         this.mutePage(this.controlMenu[index].state)
@@ -117,7 +167,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 @import "//at.alicdn.com/t/font_1574056_t1y09rcq99s.css";
 @import "../assets/css/pageNav.css";
 </style>

src/main.js

@@ -7,10 +7,14 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import socketio from 'socket.io-client'
 import MsgBus from './assets/js/msgBus'
+import { vueBaberrage } from 'vue-baberrage'
+import 'signalr'
 Vue.prototype.MsgBus = MsgBus
 Vue.config.productionTip = false
 Vue.use(ElementUI)
+Vue.use(vueBaberrage)
 Vue.prototype.$socketio = socketio
+
 /* 路由发生变化修改页面title */
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {