实时喊话

src/project/beta/AppBroadcast1/LiveBroadcast.vue

@@ -5,6 +5,18 @@
       <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 100" :key="index">
+            <image :src="user.avatar" />
+            <div class="right">
+              <image src="./img/voice-icon.png" />
+              <span>23"</span>
+            </div>
+          </div>
+        </scroll-view>
+      </div>
       <div class="tips">
         <image src="./img/body.png" />
         <p>请先选择设备再按住下方按钮开始喊话~</p>
@@ -48,6 +60,7 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex'
   export default {
     name: 'LiveBroadcast',
 
@@ -55,18 +68,23 @@
 
     data () {
       return {
-        isShow: false,
-        startTime: 0,
         x: 0,
         y: 0,
         w: 0,
         h: 0,
+        isShowRecord: true,
         close: require('./img/close.png'),
         closeW: require('./img/close-w.png'),
-        isImpact: false
+        isShow: false,
+        isImpact: false,
+        startTime: 0
       }
     },
 
+    computed: {
+      ...mapState(['user'])
+    },
+
     mounted () {
 
       const close = document.querySelector('.close')
@@ -85,6 +103,7 @@
 
       onTouchend () {
         if (this.isShow && new Date().getTime() - this.startTime < 1500) {
+          this.isImpact = false
           this.isShow = false
           return this.$u.toast('说话时间太短')
         }
@@ -96,6 +115,7 @@
           return false
         }
 
+        this.isImpact = false
         this.submit()
       },
 
@@ -268,6 +288,77 @@
           text-align: center;
         }
       }
+
+      .record {
+        height: 100%;
+
+        & > h2 {
+          height: 116px;
+          line-height: 116px;
+          padding: 0 32px;
+          font-size: 38px;
+          font-weight: 600;
+          color: #333333;
+          background: #FFFFFF;
+        }
+
+        .record-wrapper {
+          height: calc(100% - 116px);
+          padding: 0 32px;
+
+          .record-item {
+            display: flex;
+            position: relative;
+            align-items: center;
+            margin-bottom: 32px;
+
+            &:last-child {
+              margin-bottom: 0;
+              padding-bottom: 32px;
+            }
+
+            & > image {
+              width: 76px;
+              height: 76px;
+              margin-right: 26px;
+              border-radius: 8px;
+            }
+
+            .right {
+              display: flex;
+              align-items: center;
+              position: relative;
+              height: 74px;
+              padding: 0 32px;
+              border-radius: 12px;
+              min-width: 160px;
+              max-width: 100%;
+              background: #C0DAFF;
+
+              &::after {
+                position: absolute;
+                top: 50%;
+                left: 0;
+                z-index: 1;
+                width: 0;
+                height: 0;
+                border-right: 12px solid #C0DAFF;
+                border-left: 12px solid transparent;
+                border-bottom: 12px solid transparent;
+                border-top: 12px solid transparent;
+                content: " ";
+                transform: translate(-100%, -50%);
+              }
+
+              image {
+                width: 20px;
+                height: 32px;
+                margin-right: 14px;
+              }
+            }
+          }
+        }
+      }
     }
 
     .bottom {