save

components/common/audio/index.vue

+<template>
+  <div>
+    <!-- <audio ref="bgAudio" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3"/> -->
+  </div>
+</template>
+
+<script>
+
+import { mapState, } from 'vuex'
+export default {
+  data() {
+    const bgAudio = new Audio()
+    const uiClickAudio = new Audio()
+    return {
+      bgAudio,
+      uiClickAudio,
+    }
+  },
+  computed: {
+    ...mapState('audio', [
+      'play',
+      'uiClick',
+      'uiClickType',
+    ]),
+  },
+  watch: {
+    play() {
+      this.playBgAudio()
+    },
+    uiClick() {
+      const { uiClickType } = this
+      switch (uiClickType) {
+        case 'ui':
+          this.playClickAudio()
+          break
+        default:
+          this.playClickAudio()
+          break
+      }
+    },
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      console.log('初始化音频')
+      this.bgAudio.src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3' // 背景音乐
+      this.uiClickAudio.src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/ui_click.mp3' // 通用ui点击音乐
+    },
+    playBgAudio() {
+      this.bgAudio.play()
+    },
+    // ui点击音效
+    playClickAudio() {
+      this.uiClickAudio.currentTime = 0
+      this.uiClickAudio.play()
+    },
+  },
+}
+</script>

components/common/header/index.vue

@@ -28,7 +28,8 @@
       </div>
       <div class="center-bg"/>
       <div class="profile">
-        <img src="./static/profile/profile-pic.png" alt="" class="profile-img">
+        <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
+        <img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img">
         <img src="./static/profile/card.png" alt="" class="card-img">
       </div>
     </div>
@@ -80,10 +81,14 @@ export default {
       return {
         quit: () => {
           const { name } = this.$route
+          console.log('quit', name)
           switch (name) {
             case 'index-game-id': // 如果是游戏页面
               this.quitGame()
               break
+            case 'index':
+              this.network().quitAccount()
+              break
           }
         },
         fullScreen: () => {
@@ -101,6 +106,18 @@ export default {
         },
       }
     },
+    network() {
+      return {
+        quitAccount: () => {
+          this.$request({
+            url: '/api/player/logout',
+            method: 'post',
+          }).then(() => {
+            this.$router.replace({ path: '/login' })
+          })
+        },
+      }
+    },
     quitGame() {
       const { id } = this.$route.params
       const params = {
@@ -111,7 +128,8 @@ export default {
         method: 'get',
         params,
       }).then(({ data }) => {
-        this.$router.go(-1)
+        console.log('退出游戏页面')
+        this.$router.replace('/')
       })
     },
   },

directive/audio.js

+import Vue from 'vue'
+
+// 播放声音指令
+const audio = Vue.directive('audio', {
+  // 当被绑定的元素插入到 DOM 中时……
+  inserted: (el, binding, vnode) => {
+    el.onclick = () => {
+      const audioType = el.getAttribute('audio')
+      vnode.context.$store.commit('audio/UiClick', audioType)
+    }
+  }
+})
+
+export default { audio }

directive/permission.js

@@ -11,7 +11,10 @@ const authBtn = Vue.directive('authBtn', {
         el.parentNode.removeChild(el)
       }
     }, 300)
-  }
+  },
+  click: (el, binding) => {
+    console.log('点击')
+  },
 })
 
 export default { authBtn }

layouts/default.vue

@@ -3,12 +3,18 @@
     <div :style="style" class="sceen">
       <nuxt />
     </div>
+    <!-- 背景音乐组件 -->
+    <Audio/>
   </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import Audio from '@/components/common/audio/index'
 export default {
+  components: {
+    Audio,
+  },
   data() {
     return {
       zoom: 1,
@@ -24,20 +30,19 @@ export default {
   },
   created() {
     // this.GetConfig()
-    this.init()
+    this.initSceen()
+    window.onresize = () => {
+      this.initSceen()
+    }
   },
   methods: {
     ...mapActions({
       GetConfig: 'GetConfig',
     }),
-    init() {
-      window.onresize = () => {
-        console.log('window.innerWidth', window.innerWidth)
-        console.log('window.innerHeight', window.innerHeight)
-        let zoom = 1
-        zoom = window.innerWidth / 1080
-        // this.zoom = zoom
-      }
+    initSceen() {
+      let zoom = 1
+      zoom = window.innerWidth / 1080
+      this.zoom = zoom
     },
   },
 }

mixins/index.js

-
+import { mapMutations } from 'vuex'
 export default {
   data() {
     return {
     }
   },
   methods: {
+    ...mapMutations('audio', [
+      'UiClick',
+    ]),
+    UiClickAudio(type = 'ui') {
+      console.log('播放点击音乐', type)
+      this.UiClick(type)
+    },
     pagination: () => {
       return {
         sizeChange: (val) => {

nuxt.config.js

@@ -45,6 +45,7 @@ export default {
     { src: '@/plugins/axios', ssr: true },
     { src: '@/plugins/route', ssr: false },
     { src: './directive/permission', ssr: false }, // 按钮权限全局指令
+    { src: './directive/audio', ssr: false }, // 播放声音的指令
     // '@/plugins/icons',
   ],
   /*

pages/index.vue

 <template>
-  <div class="main-content">
+  <div class="main-layout">
     <Header/>
-    <div>
+    <div class="main-content">
       <nuxt-child
       />
     </div>
@@ -35,6 +35,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main-layout {
+  height: 100%;
+}
 .main-content {
   height: 100%;
   overflow: auto;

pages/index/game/_id.vue

@@ -10,13 +10,13 @@
     </div>
     <div class="option-block">
       <div class="left-option">
-        <img src="@/assets/images/temp/game/CREDIT-IN.gif" alt="" class="credit-in btn" @click="creditInShow = true">
-        <img src="@/assets/images/temp/game/CREDIT-OUT.png" alt="" class="credit-out btn" @click="network().outPoint()">
+        <img v-audio src="@/assets/images/temp/game/CREDIT-IN.gif" alt="" class="credit-in btn" @click="creditInShow = true">
+        <img v-audio src="@/assets/images/temp/game/CREDIT-OUT.png" alt="" class="credit-out btn" @click="network().outPoint()">
         <!-- credit-in 弹窗 -->
         <div :class="creditInShow ? 'show' : ''" class="credit-in-modal">
-          <div class="credit-in-modal-mark" @click="creditInShow = false"/>
+          <div v-audio class="credit-in-modal-mark" @click="creditInShow = false"/>
           <div class="credit-in-btn-block">
-            <div v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)">
+            <div v-audio v-for="(item, index) in credistList" :key="index" class="btn" @click="click().upPoint(item)">
               <img src="@/assets/images/temp/game/credit-in/btn-bg.png" alt="" class="btn-bg">
               <div class="value">{{ item }}</div>
               <div class="credist">Credist</div>
@@ -31,14 +31,14 @@
         <!-- 按钮 -->
         <div class="btn-block">
           <div class="box">
-            <div v-for="(item, index) in btnList1" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
+            <div v-audio v-for="(item, index) in btnList1" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
               <div v-if="item.buttonImgN" class="btn">
                 <img :src="item.buttonImgN | img" alt="">
               </div>
             </div>
           </div>
           <div class="box">
-            <div v-for="(item, index) in btnList2" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
+            <div v-audio v-for="(item, index) in btnList2" :key="index" class="game-btn btn" @click="click().gameBtn(item)">
               <div v-if="item.buttonImgN" class="btn">
                 <img :src="item.buttonImgN | img" alt="">
               </div>
@@ -47,9 +47,9 @@
         </div>
 
         <!-- play -->
-        <img src="@/assets/images/temp/game/play-button.png" alt="" class="play-btn btn" @click="network().button({ buttonValue: 2 })">
+        <img v-audio src="@/assets/images/temp/game/play-button.png" alt="" class="play-btn btn" @click="network().button({ buttonValue: 2 })">
         <!-- 自动下注 -->
-        <div class="auto">
+        <div v-audio class="auto">
           <img v-show="!isAuto" src="@/assets/images/temp/game/auto-spin-button.png" alt="" class="auto-btn btn" @click="isAuto = !isAuto">
           <img v-show="isAuto" src="@/assets/images/temp/game/auto-time-button.png" alt="" class="auto-btn btn" @click="isAuto = !isAuto">
         </div>
@@ -268,6 +268,7 @@ export default {
   box-sizing: border-box;
   left: 200px;
   top: 16px;
+  background: black;
   .bg {
     width: 100%;
     height: 100%;

pages/index/index.vue

 <template>
-  <div style="overflow: auto;">
-    <div v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)">
+  <div>
+    <div v-audio v-for="(item, index) in deviceList" :key="index" class="box btn" @click="click().joinGasme(item)">
       <div>
         gameNameEn: {{ item.gameNameEn }}
       </div>
@@ -42,7 +42,7 @@ export default {
             method: 'post',
             data,
           }).then(({ data }) => {
-            this.$router.push(`/game/${id}`)
+            this.$router.replace(`/game/${id}`)
           })
         },
       }

pages/login.vue

@@ -2,13 +2,13 @@
   <div>
     <input v-model="form.username" type="text" >
     <input v-model="form.password" type="text" >
-    <button @click="click().login()">登录</button>
+    <button v-audio @click="click().login()">登录</button>
+    <button v-audio>音乐</button>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-
+import { mapState, mapActions, mapMutations } from 'vuex'
 export default {
   data() {
     return {
@@ -23,6 +23,9 @@ export default {
       Login: 'Login',
       GetBaseInfo: 'GetBaseInfo',
     }),
+    test() {
+      console.log('test')
+    },
     click() {
       return {
         login: () => {
@@ -36,7 +39,7 @@ export default {
           // })
           this.Login(data).then((res) => {
             this.GetBaseInfo().then(({ data }) => {
-              this.$router.push({ path: '/' })
+              this.$router.replace({ path: '/' })
               this.loading = false
             }).catch(() => {
               this.loading = false

plugins/axios.js

@@ -4,7 +4,10 @@ import { getToken } from '@/utils/auth' // 验权
 const service = ({ $axios, app }, inject) => {
   $axios.interceptors.request.use(
     (config) => {
-      config.headers['Authorization'] = getToken()
+      console.log('config', config)
+      if (!config.url.includes('/api/player/login')) {
+        config.headers['Authorization'] = getToken()
+      }
       return config
     },
     error => Promise.reject(error),
@@ -15,7 +18,7 @@ const service = ({ $axios, app }, inject) => {
     const { code, msg, type } = data
     // console.log('响应拦截器', response.config.url)
     if (code !== 0) {
-      if (code === 10000) {
+      if (code === 401) {
         app.store.commit('Logout')
         return Promise.reject(msg)
       }

plugins/plugins.js

 import Vue from 'vue'
+import indexMixins from '@/mixins/index.js'
+Vue.mixin(indexMixins)
 
 Vue.filter('img', function(value) {
   return `${process.env.img_domain}${value}`

store/audio.js

+export const state = () => ({
+  play: '',
+  uiClick: '',
+  uiClickType: '',
+})
+
+export const mutations = {
+  SetAudioPlay: (state, data) => {
+    state.play = new Date().getTime()
+  },
+  UiClick: (state, type = 'ui') => {
+    state.play = new Date().getTime()
+    state.uiClickType = type
+    state.uiClick = new Date().getTime()
+  },
+}