选择设备修复下拉

src/apps/AppBroadcast/LiveBroadcast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="LiveBroadcast" @touchend="onTouchend" @touchmove="onTouchmove">
+  <div class="LiveBroadcast" @touchend="onTouchend" @touchmove.stop="onTouchmove">
     <div class="top" @click="toChoose" hover-class="bg-hover">
       <div class="left">
         <h2 v-if="!equipmentList.length">请选择设备</h2>
@@ -8,18 +8,18 @@
         <span v-if="equipmentList.length > 2">{{ equipmentList.length }}</span>
         <h2 v-if="equipmentList.length > 2">个设备</h2>
       </div>
-      <image src="./img/right.png" />
+      <image src="./img/right.png"/>
     </div>
     <div class="middle">
       <div class="record" v-if="isShowRecord">
         <h2>喊话记录</h2>
         <scroll-view scroll-y class="record-wrapper">
           <div class="record-item" v-for="(item, index) in recordList" :key="index">
-            <image :src="user.avatar" />
+            <image :src="user.avatar"/>
             <div class="right-wrapper">
               <div class="right" :style="{width: 'calc(83px + ' + (item.duration / 2) + '%)'}" @click="play(item.src, index)">
-                <image mode="aspectFit" v-if="!item.isPlay" src="./img/voice-icon.png" />
+                <image mode="aspectFit" v-if="!item.isPlay" src="./img/voice-icon.png"/>
-                <image v-else src="./img/voice.gif" />
+                <image v-else src="./img/voice.gif"/>
                 <span>{{ item.duration }}"</span>
               </div>
             </div>
@@ -27,19 +27,19 @@
         </scroll-view>
       </div>
       <div class="tips" v-if="!isShowRecord">
-        <image src="./img/body.png" />
+        <image src="./img/body.png"/>
         <p>请先选择设备再按住下方按钮开始喊话~</p>
       </div>
     </div>
     <div class="bottom" @touchstart="onLongtap">
-      <image src="./img/microphone.png" />
+      <image src="./img/microphone.png"/>
       <p>按住说话</p>
     </div>
     <div class="voice" :class="[isShow ? 'active' : '']">
       <div class="voice-bottom">
-        <image src="./img/voice-w.png" />
+        <image src="./img/voice-w.png"/>
       </div>
-      <image class="close" :class="[isImpact ? 'close-active' : '']" :src="isImpact ? closeW : close" />
+      <image class="close" :class="[isImpact ? 'close-active' : '']" :src="isImpact ? closeW : close"/>
       <p>松开发送</p>
       <div class="header-line">
         <span class="line1 animation"></span>
@@ -69,16 +69,15 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
-  import Recorder from 'recorder-core'
+import Recorder from 'recorder-core'
-  import 'recorder-core/src/engine/mp3'
+import 'recorder-core/src/engine/mp3'
-  import 'recorder-core/src/engine/mp3-engine'
+import 'recorder-core/src/engine/mp3-engine'
-  export default {
+
+export default {
   name: 'LiveBroadcast',
-
   appName: '实时喊话',
-
+  data() {
-    data () {
     return {
       x: 0,
       y: 0,
@@ -106,7 +105,7 @@
   computed: {
     ...mapState(['user']),
 
-      equipmentStr () {
+    equipmentStr() {
       if (!this.equipmentList.length) {
         return ''
       }
@@ -115,24 +114,21 @@
     }
   },
 
-    mounted () {
+  mounted() {
     this.$nextTick(() => {
       const close = document.querySelector('.close')
       this.x = close.offsetLeft
       this.y = close.offsetTop
       this.w = close.clientWidth
       this.h = close.clientHeight
-
-        document.body.addEventListener('touchmove', this.bindEvent, { passive: false })
     })
   },
 
-    destroyed () {
+  destroyed() {
-      document.body.removeEventListener('touchmove', this.bindEvent)
     this.recorder.close()
   },
 
-    onLoad () {
+  onLoad() {
     this.innerAudioContext = uni.createInnerAudioContext()
     this.innerAudioContext.autoplay = true
     this.innerAudioContext.onEnded(() => {
@@ -166,11 +162,11 @@
   },
 
   methods: {
-      bindEvent (e) {
+    bindEvent(e) {
       e.preventDefault()
     },
 
-      onLongtap () {
+    onLongtap() {
       this.time = 60
 
       if (!this.equipmentList.length) {
@@ -183,18 +179,18 @@
       this.record()
     },
 
-      toChoose () {
+    toChoose() {
       uni.navigateTo({
         url: './selectEquipment'
       })
     },
 
-      record () {
+    record() {
       this.recorder.start()
       this.timing()
     },
 
-      timing () {
+    timing() {
       if (this.time === 0) {
         this.stop()
 
@@ -207,7 +203,7 @@
       }, 1000)
     },
 
-      play (url, index) {
+    play(url, index) {
       if (this.currIndex === index) {
         this.innerAudioContext.destroy()
         this.recordList.forEach((v, index) => {
@@ -230,7 +226,7 @@
       })
     },
 
-      stop (isCancel) {
+    stop(isCancel) {
       clearTimeout(this.timingTimeout)
       this.recorder.stop((blob, duration) => {
         if (isCancel) {
@@ -240,7 +236,7 @@
 
         let formData = {}
         formData = new FormData()
-          formData.append('file', new window.File([blob], `${(new Date).getTime()}` ))
+        formData.append('file', new window.File([blob], `${(new Date).getTime()}`))
 
         this.$loading()
         this.$http.post(`/app/appdlbresource/uploadDlbFile`, formData).then(res => {
@@ -285,7 +281,7 @@
       })
     },
 
-      onTouchend () {
+    onTouchend() {
       if (!this.isShow) return
 
       if (this.isShow && new Date().getTime() - this.startTime < 1500) {
@@ -306,7 +302,7 @@
       this.stop()
     },
 
-      onTouchmove (e) {
+    onTouchmove(e) {
       if (this.isShow) {
         const x = e.touches[0].clientX
         const y = e.touches[0].clientY
@@ -319,15 +315,15 @@
       }
     },
 
-      submit () {
+    submit() {
 
     }
   }
-  }
+}
 </script>
 
 <style lang="scss" scoped>
-  .LiveBroadcast {
+.LiveBroadcast {
   height: 100vh;
   overflow: hidden;
   user-select: none;
@@ -685,5 +681,5 @@
   .header-line span.line20 {
     animation-delay: -0.1s;
   }
-  }
+}
 </style>