音量控制等

components/common/audio/index.vue

@@ -22,6 +22,9 @@ export default {
       'uiClick',
       'uiClickType',
       'mute', // 静音状态
+      'volumeMachine',
+      'volumeBg',
+      'volumeButton',
     ]),
   },
   watch: {
@@ -48,6 +51,13 @@ export default {
         this.bgAudio.play()
       }
     },
+    volumeMachine() {},
+    volumeBg(value) {
+      this.bgAudio.volume = value / 100
+    },
+    volumeButton(value) {
+      this.uiClickAudio.volume = value / 100
+    },
   },
   mounted() {
     this.init()

components/common/menu.vue

+<template>
+  <div>
+    <div class="layout-menu">
+      <div class="menu-item">
+        <img class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png" alt="" @click="$refs.audioSettingDialog.show()">
+      </div>
+    </div>
+    <AudioSettingDialog ref="audioSettingDialog" />
+  </div>
+</template>
+
+<script>
+import AudioSettingDialog from '@/components/dialog/audio/index'
+export default {
+  components: {
+    AudioSettingDialog,
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-menu{
+  position: absolute;
+  right: 0;
+  top: 100px;
+  height: 300px;
+  width: 57px;
+  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .menu-item {
+    margin: 20px 0 20px -14px;
+    width: 50px;
+    img {
+      width: 50px;
+      display: block;
+      margin: auto;
+    }
+  }
+}
+</style>

components/dialog/audio/audio-size.vue

+<template>
+  <div class="audio-size">
+    <div class="title">{{ title }}</div>
+    <div class="slider">
+      <el-slider v-model="data"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      data: 1,
+    }
+  },
+  watch: {
+    value(value) {
+      this.data = value
+    },
+    data(value) {
+      this.$emit('input', value)
+      this.$emit('on-change', value)
+    },
+  },
+  created() {
+    this.data = this.value
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.audio-size {
+  .title {
+    margin: 4px 0;
+    text-align: left;
+  }
+  .slider {
+    /deep/ {
+      .el-slider__bar {
+        background-color: #17c2cc;
+      }
+      .el-slider__button {
+        border: solid 2px #17c2cc;
+        background-color: #17c2cc;
+      }
+    }
+  }
+}
+</style>

components/dialog/audio/index.vue

+<template>
+  <Dialog
+    ref="dialog"
+    width="542px"
+    height="450px"
+  >
+    <img v-audio class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
+    <div class="bg"/>
+    <div class="content">
+      <div class="title">设置</div>
+      <div class="message">
+        <div class="box">
+          <AudioSize :value="volumeMachine" title="机器音效" @on-change="(value) => handler().changeAudioMachine(value)" />
+          <AudioSize :value="volumeBg" title="背景音乐" @on-change="(value) => handler().changeAudioBg(value)" />
+          <AudioSize :value="volumeButton" title="按键音效" @on-change="(value) => handler().changeAudioButton(value)" />
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <div v-audio class="btn" type="primary" @click="cancel"/>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/dialog/index'
+import AudioSize from './audio-size'
+import { mapState, mapMutations, } from 'vuex'
+export default {
+  components: {
+    Dialog,
+    AudioSize,
+  },
+  props: {
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  computed: {
+    ...mapState([
+      'zoom',
+    ]),
+    ...mapState('audio', [
+      'volumeMachine',
+      'volumeBg',
+      'volumeButton',
+    ]),
+  },
+  watch: {
+    visible(value) {
+      if (value) {
+        this.$refs.dialog.show()
+      } else {
+        this.$refs.dialog.close()
+      }
+    },
+    volumeMachine(value) {
+      console.log('watch volumeMachine', value)
+    },
+  },
+  created() {
+    console.log('test volumeMachine', this.volumeMachine)
+  },
+  methods: {
+    ...mapMutations('audio', [
+      'SetVolumeMachine',
+      'SetVolumeBg',
+      'SetVolumeButton',
+    ]),
+    cancel() {
+      this.visible = false
+    },
+    show() {
+      this.visible = true
+    },
+    handler() {
+      return {
+        // 设置机器声音
+        changeAudioMachine: (value) => {
+          console.log('设置机器声音', value)
+          this.SetVolumeMachine(value)
+        },
+        // 设置背景音
+        changeAudioBg: (value) => {
+          console.log('设置背景音', value)
+          this.SetVolumeBg(value)
+        },
+        // 设置按键音
+        changeAudioButton: (value) => {
+          console.log('设置按键音', value)
+          this.SetVolumeButton(value)
+        },
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.close {
+  position: absolute;
+  right: 4px;
+  top: 0;
+  width: 40px;
+  z-index: 10;
+}
+.bg {
+  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop_up_bg.png);
+  background-size: 100% 100%;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+}
+.content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  .title {
+    text-align: center;
+    font-size: 28px;
+    font-weight: bold;
+    color: white;
+    margin-top: 20px;
+  }
+  .message {
+    text-align: center;
+    color: white;
+    margin-top: 10px;
+    font-size: 18px;
+    flex: 1;
+    .box {
+      width: 300px;
+      margin: auto;
+    }
+  }
+  .dialog-footer {
+    padding-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    .btn {
+      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png);
+      background-size: 100% 100%;
+      width: 400px;
+      height: 40px;
+      opacity: 0.80;
+      text-align: center;
+      line-height: 40px;
+      color: #5e4926;
+      font-size: 18px;
+      font-weight: bold;
+      margin: 0 36px;
+      &:hover {
+        opacity: 1;
+      };
+      &:active {
+        opacity: 0.80;
+      }
+    }
+  }
+  .footer-tip {
+    height: 30px;
+    line-height: 30px;
+    text-align: right;
+    padding: 4px 16px;
+    font-size: 12px;
+    color: #bc9a6c;
+  }
+}
+/deep/ .game-dialog {
+  position: relative;
+  background: transparent;
+  height: 320px;
+  padding: 0;
+  .el-dialog__header {
+    padding: 0;
+  }
+  .el-dialog__body {
+    max-height: inherit;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>

components/dialog/index.vue

 <template>
   <div v-show="visible" class="dialog-layout" >
     <div class="mark"/>
-    <div class="dlalog">
+    <div :style="{ height, }" class="dlalog">
       <slot/>
     </div>
   </div>
@@ -11,6 +11,12 @@
 export default {
   components: {
   },
+  props: {
+    height: {
+      type: [String],
+      default: '350px',
+    },
+  },
   data() {
     return {
       visible: false,

components/dialog/user-dialog/tab.vue

@@ -5,6 +5,7 @@
         <img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
         <img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
         <div class="text">{{ text }}</div>
+        <div v-if="index === 0" class="version">{{ process.env.baseURL }}</div>
       </div>
     </div>
   </div>
@@ -81,6 +82,15 @@ export default {
       z-index: 4;
       margin-top: 10px;
     }
+    .version {
+      font-size: 12px;
+      color: rgb(188, 188, 188);
+      position: absolute;
+      bottom: -10px;
+      text-align: center;
+      width: 100%;
+      z-index: 3;
+    }
   }
 }
 </style>

configs/.env.generate

@@ -2,3 +2,4 @@ baseURL=https://api.eslotsys-ptn1.com
 static_domain=https://api.eslotsys-ptn1.com/static/
 img_domain=https://kuawai.s3.ap-east-1.amazonaws.com/
 project_name='E-Slots'
+version='1.0.003'

configs/env.js

@@ -10,3 +10,4 @@ export const ossAccessKey = process.env.oss_access_key // oss key
 export const ossSecret = process.env.oss_secret // oss
 export const ossBucket = process.env.oss_bucket // oss
 export const ossRegion = process.env.oss_region // oss
+export const version = process.env.version // version

layouts/default.vue

@@ -62,6 +62,7 @@ export default {
       })
     }, false)
     this.visibilitychange() // 监听页面是否进入后台
+    this.initAudio() // 初始化音量
   },
   mounted() {
     this.$nextTick(() => {
@@ -78,6 +79,11 @@ export default {
       'SetInnerHeight',
       'SetHidePage',
     ]),
+    ...mapMutations('audio', [
+      'SetVolumeMachine',
+      'SetVolumeBg',
+      'SetVolumeButton',
+    ]),
     initSceen() {
       const { innerWidth, innerHeight } = window
       const isMobile = false
@@ -139,6 +145,15 @@ export default {
         }
       })
     },
+    // 初始化音量
+    initAudio() {
+      const volumeMachine = localStorage.getItem('volumeMachine')
+      const volumeBg = localStorage.getItem('volumeBg')
+      const volumeButton = localStorage.getItem('volumeButton')
+      this.SetVolumeMachine(volumeMachine === 'null' ? 100 : volumeMachine)
+      this.SetVolumeBg(volumeBg === 'null' ? 100 : volumeBg)
+      this.SetVolumeButton(volumeButton === 'null' ? 100 : volumeButton)
+    },
   },
 }
 </script>

pages/index.vue

@@ -6,6 +6,8 @@
       />
     </div>
     <Footer/>
+    <!-- 右侧菜单 -->
+    <Menu />
     <!-- 个人中心弹窗 -->
     <UserDialog ref="userDialog"/>
   </div>
@@ -14,6 +16,7 @@
 <script>
 import Header from '@/components/common/header/index'
 import Footer from '@/components/common/footer'
+import Menu from '@/components/common/menu'
 import { mapActions, mapMutations, mapState, } from 'vuex'
 import { Message } from 'element-ui'
 import openIM from '@/plugins/openIM'
@@ -23,6 +26,7 @@ export default {
   components: {
     Header,
     Footer,
+    Menu,
     UserDialog,
   },
   data() {

pages/index/game/components/WebRTCPlayer.vue

 
 <template>
-  <div>
-    <video ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill;" playsinline @click="(e) => handler().click(e)"/>
-  </div>
+  <video ref="jswebrtc" style="width: 100%;height: 100%;object-fit: fill;" playsinline @click="(e) => handler().click(e)"/>
 </template>
 
 <script>

pages/index/game/components/keyboard.vue

@@ -398,6 +398,7 @@ export default {
             url: '/api/game/button',
             method: 'get',
             params,
+            toast: false,
           }).then(({ data }) => {
             setTimeout(() => {
               this.loadingData[buttonValue] = false

pages/index/game/index.vue

@@ -17,9 +17,9 @@
       </div>
     </div>
     <!-- 音量控制，临时 -->
-    <div class="audio-ctrl-box">
+    <!-- <div class="audio-ctrl-box">
       <AudioCtrl />
-    </div>
+    </div> -->
     <!-- 底部键盘 -->
     <Keyboard v-if="deviceButtonPanel.id" :id="id" :device-button-panel="deviceButtonPanel" />
   </div>
@@ -201,7 +201,7 @@ export default {
   .live-play {
     width: 560px;
     height: 368px;
-    padding: 15px 15px 10px;
+    padding: 22px 15px 10px;
     position: relative;
     box-sizing: border-box;
     background: black;

pages/loading/data/images.json

@@ -90,5 +90,9 @@
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/downTip.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Maximize.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/Exit%20Button-1.png",
-  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/spin.png"
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/spin.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_menu_01.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pop_up_bg.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/logout_sel_zh.png"
 ]

pages/login.vue

@@ -4,7 +4,7 @@
     <input v-model="form.password" type="text" >
     <button v-audio @click="click().login()">登录</button>
     <button v-audio>音乐</button>
-    <div style="color: white;">version: 1.0.001</div>
+    <div style="color: white;">version: 1.0.002</div>
   </div>
 </template>
 

plugins/axios.js

@@ -13,7 +13,10 @@ const service = ({ $axios, app }, inject) => {
   )
 
   $axios.interceptors.response.use(response => {
-    const { data } = response
+    const { data, config, } = response
+    const {
+      toast, // 是否显示错误提示
+    } = config
     const { code, msg, type } = data
     // console.log('响应拦截器', response.config.url)
     if (code !== 0) {
@@ -22,7 +25,7 @@ const service = ({ $axios, app }, inject) => {
         return Promise.reject(msg)
       }
       console.log('一般错误')
-      if (msg) {
+      if (msg && toast !== false) {
         Message({
           message: msg,
           type: type || 'error',

plugins/plugins.js

@@ -9,9 +9,11 @@ Vue.use(VueClipboard) // 复制组件
 import {
   Message,
   Loading,
+  Slider,
 } from 'element-ui'
 
 Vue.use(Loading.directive)
+Vue.use(Slider)
 
 Vue.prototype.$message = Message
 Vue.prototype.$loading = Loading.service

store/audio.js

@@ -3,6 +3,9 @@ export const state = () => ({
   uiClick: '',
   uiClickType: '',
   mute: false, // 是否静音
+  volumeMachine: 100, // 机器音量
+  volumeBg: 100, // 背景音量
+  volumeButton: 100, // 按钮音量
 })
 
 export const mutations = {
@@ -18,4 +21,19 @@ export const mutations = {
   SetMute: (state, data) => {
     state.mute = data
   },
+  // 设置机器音量
+  SetVolumeMachine: (state, data) => {
+    state.volumeMachine = +data
+    localStorage.setItem('volumeMachine', data)
+  },
+  // 设置背景音量
+  SetVolumeBg: (state, data) => {
+    state.volumeBg = +data
+    localStorage.setItem('volumeBg', data)
+  },
+  // 设置按钮音量
+  SetVolumeButton: (state, data) => {
+    state.volumeButton = +data
+    localStorage.setItem('volumeButton', data)
+  },
 }