录音播放

commons/css/base/background.wxss

@@ -26,4 +26,6 @@
 .bg-f3f6fc{background-color:#f3f6fc;}
 .bg-fffaeb{background-color:#fffaeb;}
 .bg-f1f9f8{background-color:#f1f9f8;}
-.bg-fff6f8{background-color:#fff6f8;}
+.bg-fff6f8{background-color:#fff6f8;}
+
+.bg-e3f5f3{background-color:#e3f5f3;}

pages/customer/detail/index.js

@@ -1,5 +1,7 @@
 import _ from '../../../commons/js/commons'
 const app = getApp()
+const innerAudioContext = wx.createInnerAudioContext();
+let interval = null
 Page({
   data: {
     tabid:0,
@@ -21,6 +23,9 @@ Page({
     statuskey:-10,//状态值
     stateList:[],//状态数组
     isShowSelectStatus:false,//是否变更状态弹窗
+    currentIndex:'-1',//日志播放录音
+    currentime:'',//日志播放录音
+    play: false,//日志播放录音
   },
   onLoad(options) {
     for (let key in options) {
@@ -34,11 +39,25 @@ Page({
     this.getAppCustomerlogs()
     this.getAppCustomersTabs()
 
+    innerAudioContext.onEnded(() => {
+      this.offaudio()
+    })
+
   },
   onshow() {
 
   },
 
+  //生命周期函数--监听页面隐藏
+  onHide: function () {
+    this.offaudio()
+  },
+
+  //生命周期函数--监听页面卸载
+  onUnload: function () {
+    this.offaudio()
+  },
+
   //获取客户详情
   getAppCustomersDetails(){
     let params = {};
@@ -250,6 +269,54 @@ Page({
     })
   },
 
+  //离开页面
+  offaudio() {
+    this.setData({
+      currentIndex:'-1',
+      play: false,
+    })
+    innerAudioContext.stop()
+    clearTimeout(interval)
+  },
+
+  //操作录音
+  audioPlay: function (e) {
+    clearTimeout(interval)
+    if(this.data.currentIndex != e.currentTarget.dataset.index){
+      innerAudioContext.stop()
+      this.setData({
+        currentIndex:e.currentTarget.dataset.index,
+        currentime:this.data.logslist[e.currentTarget.dataset.index].second,
+        play:true,
+      })
+      innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
+      innerAudioContext.play()
+      this.countDown()
+    }else{
+      if(this.data.play){
+        this.setData({
+          play:false,
+        })
+        innerAudioContext.pause()
+      }else{
+        this.setData({
+          play:true,
+        })
+        innerAudioContext.play()
+        this.countDown()
+      }
+    }
+  },
+
+  //播放录音时间
+  countDown:function () {
+    interval = setInterval(res => {
+      this.setData({
+        currentime:this.data.currentime - 1,
+      })
+    }, 1000)
+  },
+
   //页面相关事件处理函数--监听用户下拉动作
   onPullDownRefresh(){
     this.setData({

pages/customer/detail/index.wxml

@@ -75,6 +75,12 @@
               <view class="orderDtail-log-content">
                 <view class="font-22 color-999">{{item.c_time}}</view>
                 <view class="font-28 text-break" style="min-height:50rpx;">{{item.content}}</view>
+                <view bindtap="audioPlay" data-index="{{index}}" class="relative mt10 wp60 pt10 pb10 pl20 pr30 {{currentIndex == index?'bg-36afa2 color-fff':'bg-e3f5f3 color-36afa2'}} ulib-r750 ulib-rlt0" wx:if="{{!!item.record_url}}">
+                  <i class="iconfont mr10 icon-yinpin"></i>{{currentIndex == index?currentime:item.second}}”
+                  <view class="absolute right-0 box-middle mr20 font-20" wx:if="{{currentIndex == index}}">
+                    {{play?'播放中':'已暂停'}}
+                  </view>
+                </view>
               </view>
               <i class="absolute left-0 box-middle mt40 bg-fff line-height-11 font-22 color-999 iconfont icon-jiantou" wx:if="{{index+1 != logslist.length}}"></i>
               <text class="absolute orderDtail-log-dot"></text>