From afcb2be5069d7e3a63a1f01d7028bb6525149837 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 8 Jun 2022 10:53:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E5=96=8A=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../beta/AppBroadcast1/LiveBroadcast.vue      |  97 +++++++++++++++++-
 .../beta/AppBroadcast1/img/voice-icon.png     | Bin 0 -> 762 bytes
 2 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/project/beta/AppBroadcast1/img/voice-icon.png

diff --git a/src/project/beta/AppBroadcast1/LiveBroadcast.vue b/src/project/beta/AppBroadcast1/LiveBroadcast.vue
index 032c529f..44bd0489 100644
--- a/src/project/beta/AppBroadcast1/LiveBroadcast.vue
+++ b/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 {
diff --git a/src/project/beta/AppBroadcast1/img/voice-icon.png b/src/project/beta/AppBroadcast1/img/voice-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..17cd5b1fce40c1730996ccd62e9264fab226b3ed
GIT binary patch
literal 762
zcmeAS@N?(olHy`uVBq!ia0vp^B0#Lb!3HFSk|MSNDaPU;cPEB*=VV?2IWDOYo@u_m
z3|c@o2Loe!CIbsd2@p#GF#`kh0!9XAAk7F8TfhXD6<NRxXDfgdKC5}Rn}LBT#nZ(x
z#DjNfh_6RTpu}7wZf=*!ZrnOvDjfl*Te*Wd966OZ7G_*^YP$0zs9>UWxFCm{K%>2e
zZWK$`j)JLgTNJn)wJ&B|R0@iAF<BHm@AI?TqF-sx9!lF=yr1{p`o8Vwdwa|Clma8}
z9NKd4(6Y4iS+1I_IgGwHi}rYF-ZF2fR}3@Uv~7Jw*UhvOg(>lQGh&!@7}Iv~#xcLK
z<XiB0*Xul&bEYPj)BXB=<ehz)!(*>=KS}$+zUS0S%ggLWFQqGXmc)wn9{YQR?~|b5
z)kSle-cS4^`y>10dd~CS{LYp9H<qt$mY@7?_oBk$Q!clco{XKQC@XPh!eiTu{?>1o
zWiZ;dKQCW!my`R%*)LNshq*`xy|tLsztDqOPQ1HaA?=6oo)auR$qkvo+cez+=CGV&
z?&)@LK48>u`7mbr=1Ilhb+s~2m`k!ot&!^cI!T{PeeIMv(y4*2hZ!IAg{G_#-pBYa
zyvQ_Wa@C|Z^(6~Ju6JfHX*;7^5u<a-<PBTe8l}hT5ASSnp7c8X-}h}MPyT-~`w*r!
zq3F2opWIJ}S$ZPduGBH_39MKq;eB9sL#kZvq54LB@4BEJ>(T?(9i6<t&Uu!{b4Kgz
zx=Oq5Z!Kr-GFBC`cFruk!u_b{vQ=r4-Z|4}%V#UvhwC@!U98~JYB=$tIV(+uJ@)&W
z7xF7U@-A{(uO&Ct{Zb8QjQ+&Ti%KsoLiWv#pFcfu?k%+iyL(OQMVxoNPx*JgvM$%M
zZLXZQZC75LSlY3(I|NQ2G_@Bup4De*8+J<h@a*IF-f>rC>a@$8UAtl_!#$(3ao4p^
mW&ixNUf@UhV=KQO%Vh24=UJS5x;+e(?mS)nT-G@yGywo#6*n0G

literal 0
HcmV?d00001