admin/lichebao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

音频播放器

Browse Source
This commit is contained in:
老叶
2021-12-23 16:37:37 +08:00
parent f1cf644902
commit 1618eb617c
10 changed files with 345 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+2 -1
View File
@@ -30,7 +30,8 @@
"pages/distribute/storePoster/index",
"pages/distribute/storePoster/modelList/index",
"pages/allot/detail/index",
"pages/allot/list/index"
"pages/allot/list/index",
"pages/audioPlay/index"
],
"echarts": [
{
commons/css/base/imgSize.wxss
+1 -1
View File
@@ -1,4 +1,4 @@
.img-24x24{width:32rpx;height:32rpx;box-sizing:border-box;}
.img-24x24{width:24rpx;height:24rpx;box-sizing:border-box;}
.img-45x45{width:45rpx;height:45rpx;box-sizing:border-box;}
.img-50x50{width:50rpx;height:50rpx;box-sizing:border-box;}
.img-55x55{width:55rpx;height:55rpx;box-sizing:border-box;}
commons/css/base/margin.wxss
+1
View File
@@ -33,6 +33,7 @@
.ml45{margin-left:45rpx;}
.ml50{margin-left:50rpx;}
.ml60{margin-left:60rpx;}
.ml65{margin-left:65rpx;}
.ml70{margin-left:70rpx;}
.ml80{margin-left:80rpx;}
.ml110{margin-left:110rpx;}
commons/css/thirdparty/iconfont.wxss
Vendored
+15 -3
View File
File diff suppressed because one or more lines are too long
pages/audioPlay/index.js
+131
View File
@@ -0,0 +1,131 @@
const innerAudioContext = wx.createInnerAudioContext();
let interval = null
Page({
data: {
currentime:0,
currentx:'00:00'
},
onLoad: function (options) {
let res = {"code":200,"data":{"list":[{"content":"【帆神】拨打电话","record_url":"https:\/\/media.liche.cn\/liche\/xz_video_b0f8821632330b5f\/1f06c26a0da82604.mp3","second":5,"imgs":[],"c_time":"2021.07.27"},{"content":"【老叶】拨打电话","record_url":"https:\/\/media.liche.cn\/liche\/xz_video_65efc63e86180ab0\/12c3837809e69d57.mp3","second":5,"imgs":[],"c_time":"2021.07.27"},{"content":"【老叶】拨打电话","record_url":"https:\/\/img.liche.cn\/liche\/xz_video_e41408d91a337343\/3177bd021db3c7cd.mp3","second":5,"imgs":[],"c_time":"2021.07.27"},{"content":"【老叶】拨打电话(未接通)","record_url":"","second":0,"imgs":[],"c_time":"2021.07.27"},{"content":"【老叶】拨打电话(未接通)","record_url":"","second":0,"imgs":[],"c_time":"2021.07.27"},{"content":"【lccsw】【lccsw】分配客户","record_url":"","second":0,"imgs":[],"c_time":"2021.07.22"},{"content":"【admin】后台分配","record_url":"","second":0,"imgs":[],"c_time":"2021.07.22"}],"total":7,"statistics":[{"name":"去电","val":5,"color":"#f3f6fc"},{"name":"短信","val":0,"color":"#fffaeb"},{"name":"到店","val":"0","color":"#f1f9f8"},{"name":"试驾","val":"0","color":"#fff6f8"}]},"msg":""}
let list = res.data.list
list.forEach(item => {
if(item.record_url){
item.alltime=this.format(item.second)
}
})
this.setData({
logslist:list,
})
innerAudioContext.onEnded(() => {
this.offaudio()
})
},
//生命周期函数--监听页面隐藏
onHide: function () {
this.offaudio()
},
//生命周期函数--监听页面卸载
onUnload: function () {
this.offaudio()
},
onShow(){
this.offaudio()
},
//时间格式话
format(t) {
let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60)
t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2)
return t
},
//点击
handle_slider_move_start(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentIndex:e.currentTarget.dataset.index,
play:false,
})
},
//拖动中
hanle_slider_changing(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentime:e.detail.value,
currentx:this.format(parseInt(e.detail.value))
})
innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
},
//拖动结束
hanle_slider_change(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentime:e.detail.value,
currentx:this.format(parseInt(e.detail.value))
})
innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
innerAudioContext.seek(parseInt(this.data.currentime))
},
//离开页面
offaudio() {
this.setData({
currentIndex:'-1',
play: false,
currentime:0,
currentx:'00:00'
})
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:0,
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,
currentx:this.format(this.data.currentime + 1)
})
}, 1000)
},
})
pages/audioPlay/index.json
+3
View File
@@ -0,0 +1,3 @@
{
"usingComponents": {}
}
pages/audioPlay/index.wxml
+51
View File
@@ -0,0 +1,51 @@
<view class="inner40">
<view class="pl15 pr15">
<view class="relative mt40 overflowhidden">
<view class="font-22 relative z-index-1">
<i class="iconfont bg-fff icon-genzong mr10"></i>
<text>用户跟踪</text>
</view>
<view class="orderDtail-log mt40 relative" wx:if="{{logslist.length>0}}">
<block wx:for="{{logslist}}" wx:for-index="index" wx:key="index">
<view class="orderDtail-log-item pl40 relative">
<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 class="relative mt10 wp80 pt5 pb5 pl180 bg-e3f5f3 color-36afa2 font-30 ulib-r10" wx:if="{{!!item.record_url}}">
<i bindtap="audioPlay" data-index="{{index}}" class="absolute box-middle left-0 ml20 iconfont {{play?'icon-zanting1':'icon-bofang'}}" wx:if="{{currentIndex==index}}"></i>
<i bindtap="audioPlay" data-index="{{index}}" class="absolute box-middle left-0 ml20 iconfont icon-bofang" wx:else></i>
<text class="absolute box-middle left-0 ml65 font-20">{{currentIndex==index?currentx:'00:00'}} / {{item.alltime}}</text>
<slider
bindtouchstart="handle_slider_move_start"
bindchanging="hanle_slider_changing"
bindchange="hanle_slider_change"
data-index="{{index}}"
min="0"
step="0.000001"
block-size="12"
max="{{item.second}}"
block-color="#5ec6bb"
activeColor="#36afa2"
backgroundColor="#d1eeeb"
value="{{currentIndex==index?currentime:0}}"
/>
</view>
<view wx:if="{{item.imgs.length>0}}">
<block wx:for="{{item.imgs}}" wx:for-item="img" wx:for-index="j" wx:key="j">
<image bindtap="previewImage" data-current="{{img}}" data-index="{{index}}" class='img-125x75 mr10 bds-1-eb ulib-r5' src='{{img}}' mode='aspectFill'></image>
</block>
</view>
</view>
<i class="absolute box-middle mt15 bg-fff line-height-11 font-22 color-999 iconfont icon-jiantou-up z-index-1" wx:if="{{index+1 != logslist.length}}"></i>
<text class="absolute orderDtail-log-line2 z-index-0" wx:if="{{index != logslist.length-1}}"></text>
<!-- <text class="absolute orderDtail-log-line z-index-0"></text> -->
<text class="absolute orderDtail-log-dot z-index-1"></text>
</view>
</block>
</view>
</view>
</view>
</view>
pages/audioPlay/index.wxss
+67
View File
@@ -0,0 +1,67 @@
.height-24{
height:24rpx;
}
.orderDtail-log-item{
padding-bottom: 40rpx;
line-height: 1.6;
}
.orderDtail-log-item:first-child{
margin-top: 0;
}
.orderDtail-log-line{
top: 8rpx;
left:16rpx;
width:2rpx;
height:2rpx;
}
.orderDtail-log-line::before{
content:'';
position:absolute;
left:0;
bottom:8rpx;
background-color: #1a1a1a;
width:2rpx;
height:1000rpx;
}
.orderDtail-log-line2{
top:8rpx;
bottom:-8rpx;
left:16rpx;
width:2rpx;
background-color: #1a1a1a;
}
.orderDtail-log-dot{
top: 8rpx;
left:6rpx;
width: 23rpx;
height: 23rpx;
border-radius: 100%;
background-color: #fff;
}
.orderDtail-log-dot::before{
width: 18rpx;
height: 18rpx;
background-color: #fff;
}
.orderDtail-log-dot::after{
width: 12rpx;
height: 12rpx;
background-color: #1a1a1a;
}
.orderDtail-log-dot::before,.orderDtail-log-dot::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 100%;
}
.orderDtail-log .orderDtail-log-content{
position:relative;
top:-20rpx;
}
.icon-jiantou-up{
left:6rpx;
}
pages/customer/detail/index.js
+56 -4
View File
@@ -25,7 +25,6 @@ Page({
stateList:[],//状态数组
isShowSelectStatus:false,//是否变更状态弹窗
currentIndex:'-1',//日志播放录音
currentime:'',//日志播放录音
play: false,//日志播放录音
isShowNote:false,//新增日志弹窗
note:'',//日志
@@ -49,6 +48,9 @@ Page({
cf_clues:'',//线索来源
defeat_reason:'',//战败理由
submitFlag:false,
currentime:0,
currentx:'00:00'
},
onLoad(options) {
for (let key in options) {
@@ -219,10 +221,17 @@ Page({
params['size'] = 10;
params['id'] = this.data.id;
_.apiQuery.getAppCustomerlogs(params).then(res => {
let list = res.data.list
list.forEach(item => {
if(item.record_url){
item.alltime=this.format(item.second)
}
})
this.setData({
statistics:res.data.statistics?res.data.statistics:this.data.statistics,
pageNo: this.data.pageNo + 1,
logslist: this.data.logslist.concat(res.data.list),
logslist: this.data.logslist.concat(list),
load: true,
loading: false,
})
@@ -427,11 +436,53 @@ Page({
})
},
//时间格式话
format(t) {
let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60)
t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2)
return t
},
//点击
handle_slider_move_start(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentIndex:e.currentTarget.dataset.index,
play:false,
})
},
//拖动中
hanle_slider_changing(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentime:e.detail.value,
currentx:this.format(parseInt(e.detail.value))
})
innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
},
//拖动结束
hanle_slider_change(e){
clearTimeout(interval)
innerAudioContext.stop()
this.setData({
currentime:e.detail.value,
currentx:this.format(parseInt(e.detail.value))
})
innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
innerAudioContext.seek(parseInt(this.data.currentime))
},
//离开页面
offaudio() {
this.setData({
currentIndex:'-1',
play: false,
currentime:0,
currentx:'00:00'
})
innerAudioContext.stop()
clearTimeout(interval)
@@ -444,7 +495,7 @@ Page({
innerAudioContext.stop()
this.setData({
currentIndex:e.currentTarget.dataset.index,
currentime:this.data.logslist[e.currentTarget.dataset.index].second,
currentime:0,
play:true,
})
innerAudioContext.src = this.data.logslist[e.currentTarget.dataset.index].record_url
@@ -470,7 +521,8 @@ Page({
countDown:function () {
interval = setInterval(res => {
this.setData({
currentime:this.data.currentime - 1,
currentime:this.data.currentime + 1,
currentx:this.format(this.data.currentime + 1)
})
}, 1000)
},
pages/customer/detail/index.wxml
+18 -5
View File
@@ -123,11 +123,24 @@
<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 class="relative mt10 wp80 pt5 pb5 pl180 bg-e3f5f3 color-36afa2 font-30 ulib-r10" wx:if="{{!!item.record_url}}">
<i bindtap="audioPlay" data-index="{{index}}" class="absolute box-middle left-0 ml20 iconfont {{play?'icon-zanting1':'icon-bofang'}}" wx:if="{{currentIndex==index}}"></i>
<i bindtap="audioPlay" data-index="{{index}}" class="absolute box-middle left-0 ml20 iconfont icon-bofang" wx:else></i>
<text class="absolute box-middle left-0 ml65 font-20">{{currentIndex==index?currentx:'00:00'}} / {{item.alltime}}</text>
<slider
bindtouchstart="handle_slider_move_start"
bindchanging="hanle_slider_changing"
bindchange="hanle_slider_change"
data-index="{{index}}"
min="0"
step="0.000001"
block-size="12"
max="{{item.second}}"
block-color="#5ec6bb"
activeColor="#36afa2"
backgroundColor="#d1eeeb"
value="{{currentIndex==index?currentime:0}}"
/>
</view>
<view wx:if="{{item.imgs.length>0}}">
<block wx:for="{{item.imgs}}" wx:for-item="img" wx:for-index="j" wx:key="j">