30170

src/apps/AppBroadcast1/LiveBroadcast.vue

@@ -16,10 +16,12 @@
         <scroll-view scroll-y class="record-wrapper">
           <div class="record-item" v-for="(item, index) in recordList" :key="index">
             <image :src="user.avatar" />
-            <div class="right" :style="{width: item.duration + '%'}">
-              <image mode="aspectFit" @click="play(item.src, index)" v-if="!item.isPlay" src="./img/voice-icon.png" />
-              <image v-else @click="play(item.src, index)" src="./img/voice.gif" />
-              <span>{{ item.duration }}"</span>
+            <div class="right-wrapper">
+              <div class="right" :style="{width: 'calc(83px + ' + (item.duration / 2) + '%)'}">
+                <image mode="aspectFit" @click="play(item.src, index)" v-if="!item.isPlay" src="./img/voice-icon.png" />
+                <image v-else @click="play(item.src, index)" src="./img/voice.gif" />
+                <span>{{ item.duration }}"</span>
+              </div>
             </div>
           </div>
         </scroll-view>
@@ -147,7 +149,7 @@
     methods: {
       onLongtap () {
         if (!this.equipmentList.length) {
-          return this.$u.toast('请选择播发设备')
+          // return this.$u.toast('请选择播发设备')
         }
 
         this.isImpact = false
@@ -240,6 +242,14 @@
           let formData = {}
           formData = new FormData()
           formData.append('file', new window.File([blob], `${(new Date).getTime()}` ))
+                  this.$u.toast('播发成功')
+                  this.recordList.push({
+                    src: (window.URL || webkitURL).createObjectURL(blob),
+                    isPlay: false,
+                    duration: (duration / 1000).toFixed(0)
+                  })
+                  this.isShowRecord = true
+                  return
 
           this.$loading()
           this.$http.post(`/app/appdlbresource/uploadDlbFile`, formData).then(res => {
@@ -520,6 +530,11 @@
               border-radius: 8px;
             }
 
+            .right-wrapper {
+              // flex: 1;
+              width: calc(100% - 102px);
+            }
+
             .right {
               display: flex;
               align-items: center;
@@ -530,6 +545,7 @@
               min-width: 160px;
               max-width: 100%;
               background: #C0DAFF;
+              box-sizing: border-box;
 
               &::after {
                 position: absolute;