实时喊话

src/project/beta/AppBroadcast1/LiveBroadcast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="LiveBroadcast">
+  <div class="LiveBroadcast" @touchend="onTouchend" @touchmove="onTouchmove">
     <div class="top">
       <h2>请选择设备</h2>
       <image src="./img/right.png" />
@@ -10,14 +10,39 @@
         <p>请先选择设备再按住下方按钮开始喊话~</p>
       </div>
     </div>
-    <div class="bottom">
+    <div class="bottom" @longtap="onLongtap">
       <image src="./img/microphone.png" />
       <p>按住说话</p>
     </div>
-    <div class="voice">
-      <h2>00:00:13</h2>
-      <div class="voice-wrapper">
+    <div class="voice" :class="[isShow ? 'active' : '']">
+      <div class="voice-bottom">
+        <image src="./img/voice-w.png" />
       </div>
+      <image class="close" :class="[isImpact ? 'close-active' : '']" :src="isImpact ? closeW : close" />
+      <p>松开发送</p>
+      <div class="header-line">
+        <span class="line1 animation"></span>
+        <span class="line2 animation"></span>
+        <span class="line3 animation"></span>
+        <span class="line4 animation"></span>
+        <span class="line5 animation"></span>
+        <span class="line6 animation"></span>
+        <span class="line7 animation"></span>
+        <span class="line8 animation"></span>
+        <span class="line9 animation"></span>
+        <span class="line10 animation"></span>
+        <span class="line11 animation"></span>
+        <span class="line12 animation"></span>
+        <span class="line13 animation"></span>
+        <span class="line14 animation"></span>
+        <span class="line15 animation"></span>
+        <span class="line16 animation"></span>
+        <span class="line17 animation"></span>
+        <span class="line18 animation"></span>
+        <span class="line19 animation"></span>
+        <span class="line20 animation"></span>
+      </div>
+      <h2>00:00:13</h2>
     </div>
   </div>
 </template>
@@ -30,16 +55,65 @@
 
     data () {
       return {
-
+        isShow: false,
+        startTime: 0,
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        close: require('./img/close.png'),
+        closeW: require('./img/close-w.png'),
+        isImpact: false
       }
     },
 
-    onLoad () {
+    mounted () {
 
+      const close = document.querySelector('.close')
+      this.x = close.offsetLeft
+      this.y = close.offsetTop
+      this.w = close.clientWidth
+      this.h = close.clientHeight
     },
 
     methods: {
+      onLongtap () {
+        this.startTime = new Date().getTime()
+        this.isShow = true
+      },
 
+      onTouchend () {
+        if (this.isShow && new Date().getTime() - this.startTime < 1500) {
+          this.isShow = false
+          return this.$u.toast('说话时间太短')
+        }
+
+        if (this.isImpact) {
+          this.isShow = false
+          this.isImpact = false
+
+          return false
+        }
+
+        this.submit()
+      },
+
+      onTouchmove (e) {
+        if (this.isShow) {
+          const x = e.touches[0].clientX
+          const y = e.touches[0].clientY
+
+          if (x >= this.x && x <= this.x + this.w && y >= this.y && y <= this.y + this.h) {
+            this.isImpact = true
+          } else {
+            this.isImpact = false
+          }
+        }
+      },
+
+      submit () {
+
+      }
     }
   }
 </script>
@@ -50,6 +124,103 @@
     overflow: hidden;
     background: #F6F8FC;
 
+    .voice {
+      display: flex;
+      position: fixed;
+      flex-direction: column-reverse;
+      align-items: center;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      opacity: 0;
+      background: rgba(0, 0, 0, 0.67);
+      transition: all ease 0.5s;
+
+      &.active {
+        z-index: 1;
+        opacity: 1;
+      }
+
+      .voice-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 234px;
+        margin-top: 48px;
+        border-radius: 200px 200px 0 0;
+        background: linear-gradient(180deg, #9D9E9F 0%, #D4D5D6 100%);
+
+        image {
+          width: 96px;
+          height: 96px;
+        }
+      }
+
+      .header-line {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        width: 322px;
+        height: 164px;
+        padding: 0 20px;
+        border-radius: 20px;
+        background: #86B7FF;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          z-index: 1;
+          width: 0;
+          height: 0;
+          border-top: 18px solid #86B7FF;
+          border-right: 18px solid transparent;
+          border-left: 18px solid transparent;
+          content: ' ';
+          transform: translate(-50%, 100%);
+        }
+
+        span {
+          display: inline-block;
+          width: 6px;
+          height: 10px;
+          margin: 0 6px;
+          border: none;
+          border-radius: 4px;
+          background-color: #4B7CC3;
+        }
+      }
+
+      h2 {
+        margin-bottom: 48px;
+        font-weight: 400;
+        font-size: 96px;
+        color: #A2A3A4;
+        line-height: 134px;
+      }
+
+      & > p {
+        margin: 48px;
+        color: #A2A3A4;
+        font-size: 28px;
+      }
+
+      & > image {
+        width: 132px;
+        height: 132px;
+        transition: all ease 0.3s;
+      }
+
+      .close-active {
+        transform: scale(1.1);
+      }
+    }
+
     .top {
       display: flex;
       align-items: center;
@@ -115,5 +286,100 @@
         font-size: 30px;
       }
     }
+
+    .animation {
+      animation: note 0.24s ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
+    }
+
+    @keyframes note {
+      from {
+        transform: scaleY(1);
+      }
+      to {
+        transform: scaleY(4);
+      }
+    }
+
+    .header-line span.line1 {
+      animation-delay: -1s;
+    }
+
+    .header-line span.line2 {
+      animation-delay: -0.9s;
+    }
+
+    .header-line span.line3 {
+      animation-delay: -0.8s;
+    }
+
+    .header-line span.line4 {
+      animation-delay: -0.7s;
+    }
+
+    .header-line span.line5 {
+      animation-delay: -0.6s;
+    }
+
+    .header-line span.line6 {
+      animation-delay: -0.5s;
+    }
+
+    .header-line span.line7 {
+      animation-delay: -0.4s;
+    }
+
+    .header-line span.line8 {
+      animation-delay: -0.4s;
+    }
+
+    .header-line span.line9 {
+      animation-delay: -0.2s;
+    }
+
+    .header-line span.line10 {
+      animation-delay: -0.1s;
+    }
+
+    .header-line span.line11 {
+      animation-delay: -1s;
+    }
+
+    .header-line span.line12 {
+      animation-delay: -0.9s;
+    }
+
+    .header-line span.line13 {
+      animation-delay: -0.8s;
+    }
+
+    .header-line span.line14 {
+      animation-delay: -0.7s;
+    }
+
+    .header-line span.line15 {
+      animation-delay: -0.6s;
+    }
+
+    .header-line span.line16 {
+      animation-delay: -0.5s;
+    }
+
+    .header-line span.line17 {
+      animation-delay: -0.4s;
+    }
+
+    .header-line span.line18 {
+      animation-delay: -0.3s;
+    }
+
+    .header-line span.line19 {
+      animation-delay: -0.2s;
+    }
+
+    .header-line span.line20 {
+      animation-delay: -0.1s;
+    }
   }
 </style>