优化

src/views/indes.vue

@@ -188,7 +188,10 @@
                 >{{ item.place.area.area }} {{ item.place.place }}
                 {{ item.houseNumber }}</span
               >
-              <span>{{ item.acceptDate | timeFormat("MM-dd HH:mm") }}</span>
+              <span>
+                <i v-if="item.callID" @click.stop="showAudio(item.callID)" class="dash dash-dianbohuifang"></i>
+                {{ item.acceptDate | timeFormat("MM-dd HH:mm") }}
+              </span>
             </div>
           </div>
         </div>
@@ -238,6 +241,11 @@
         </div>
       </div>
     </div>
+    <div class="mask" v-if="audioMask" @click="hideAudio()">
+      <audio controls autoplay="autoplay" id="bgMusic">
+        <source :src="audioSrc" type="audio/mpeg">
+      </audio>
+    </div>
   </div>
 </template>
 <script>
@@ -246,6 +254,8 @@ import { SM } from "./../http/http";
 export default {
   data() {
     return {
+      audioSrc:'',//音频路径
+      audioMask:false,//音频
       isAll:false,//是否显示全部事件权限
       wxClQuestions: localStorage.getItem("wxClQuestions"),
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
@@ -273,6 +283,30 @@ export default {
     };
   },
   methods: {
+    // 播放音频
+    showAudio(callID){
+      const toast = this.$createToast({
+        txt: "Loading...",
+        mask: true
+      });
+      toast.show();
+      this.$http
+        .post("service/bpm/data/fetchDataList/callrecord", {idx: 0, sum: 1, callrecord: {callAccept: callID}})
+        .then(res => {
+          toast.hide();
+          if (res.data.status == 200) {
+            res.data.list = res.data.list || [];
+            if(res.data.list.length){
+                this.audioMask = true;
+                this.audioSrc = this.$host+res.data.list[0].recordingFileName;
+            }
+          }
+        });
+    },
+    // 隐藏音频组件
+    hideAudio(){
+      this.audioMask=false;
+    },
     goTo(url){
       this.$router.push(url);
     },
@@ -442,6 +476,17 @@ export default {
 };
 </script>
 <style scoped lang="less">
+.mask{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background: rgba(0,0,0,.5);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .fl {
   float: left;
 }