|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<view class="voice-play-page" v-if="isAuth">
|
|
|
<view class="top-filter-box">
|
|
|
- <image src="@/static/question/select.png" mode="aspectFill" />
|
|
|
- <text>筛选</text>
|
|
|
+ <image src="@/static/question/select.png" mode="aspectFill" @click="showFilter = true" />
|
|
|
+ <text @click="showFilter = true">筛选</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="empty-box" v-if="list.length==0&&finished">
|
|
@@ -12,15 +12,19 @@
|
|
|
/>
|
|
|
<view>暂无数据</view>
|
|
|
</view>
|
|
|
- <view class="list-wrap" v-else>
|
|
|
+ <view class="list-wrap" :style="{paddingBottom:IsVoiceAdmin&&'200rpx'}" v-else>
|
|
|
<view class="item" v-for="item in list" :key="item.BroadcastId">
|
|
|
<view class="title">{{item.BroadcastName}}</view>
|
|
|
<view class="time">发布时间:{{item.CreateTime|formatTime}}</view>
|
|
|
- <view class="flex audio-box">
|
|
|
- <image src="@/static/voice/pause.png" mode="widthFix" />
|
|
|
- <text>06:27</text>
|
|
|
+ <view class="flex audio-box" @click="handlePlay(item)">
|
|
|
+ <image
|
|
|
+ :src="item.BroadcastId==temAudio.id&&!temAudio.paused?require('@/static/voice/playing.png'):require('@/static/voice/pause.png')"
|
|
|
+ mode="widthFix"
|
|
|
+ />
|
|
|
+ <text v-if="item.BroadcastId==temAudio.id">{{temAudio.curTime|formatVoiceTime}}</text>
|
|
|
+ <text v-else>{{item.VoicePlaySeconds|formatVoiceTime}}</text>
|
|
|
</view>
|
|
|
- <image class="del-btn" src="@/static/voice/del.png" mode="widthFix" />
|
|
|
+ <image class="del-btn" src="@/static/voice/del.png" @click="handleDelItem(item)" mode="widthFix" v-if="item.IsAuthor" />
|
|
|
<button
|
|
|
class="share-btn"
|
|
|
open-type="share"
|
|
@@ -35,34 +39,42 @@
|
|
|
<view class="add-btn" v-if="IsVoiceAdmin">新建语音</view>
|
|
|
</navigator>
|
|
|
|
|
|
-
|
|
|
<!-- 筛选弹窗 -->
|
|
|
<van-popup
|
|
|
:show="showFilter"
|
|
|
position="bottom"
|
|
|
:close-on-click-overlay="true"
|
|
|
@close="showFilter = false"
|
|
|
+ round
|
|
|
>
|
|
|
<view class="fliter-wrap-list">
|
|
|
+ <view class="flex top">
|
|
|
+ <text style="color:#000">全部筛选</text>
|
|
|
+ <text style="color:#E3B377" @click="showFilter=false">取消</text>
|
|
|
+ </view>
|
|
|
<van-tree-select
|
|
|
- :items="items"
|
|
|
+ :items="options"
|
|
|
:main-active-index="mainActiveIndex"
|
|
|
:active-id="activeId"
|
|
|
@click-nav="onClickNav"
|
|
|
@click-item="onClickItem"
|
|
|
+ main-active-class="main-active-class"
|
|
|
+ content-active-class="content-active-class"
|
|
|
/>
|
|
|
</view>
|
|
|
</van-popup>
|
|
|
|
|
|
+ <van-dialog id="van-dialog" />
|
|
|
</view>
|
|
|
<noAuth :info="noAuthData" v-else/>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {apiVoiceList} from '@/api/voice'
|
|
|
+import {apiVoiceList,apiVoiceSectionList,apiVoicePlayRecord} from '@/api/voice'
|
|
|
import {apiGetSceneToParams} from '@/api/common'
|
|
|
import noAuth from './components/noAuth.vue'
|
|
|
const moment=require('@/utils/moment-with-locales.min')
|
|
|
+const innerAudioContext = uni.createInnerAudioContext();//播放音频实例
|
|
|
export default {
|
|
|
components:{
|
|
|
noAuth
|
|
@@ -70,6 +82,11 @@ export default {
|
|
|
filters:{
|
|
|
formatTime(e){
|
|
|
return moment(e).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ },
|
|
|
+ formatVoiceTime(e){
|
|
|
+ let m=parseInt(e/60)
|
|
|
+ let s=parseInt(e%60)
|
|
|
+ return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -86,21 +103,28 @@ export default {
|
|
|
noAuthData:null,
|
|
|
|
|
|
showFilter:false,
|
|
|
- options:[
|
|
|
- {
|
|
|
- text:'选项一',
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
+ options:[],
|
|
|
+ mainActiveIndex:0,
|
|
|
+ activeId:0,//选择的板块id
|
|
|
+
|
|
|
+ temAudio:{
|
|
|
+ paused:true,
|
|
|
+ url:'',//临时音频地址
|
|
|
+ duration:'',//时长
|
|
|
+ id:0,
|
|
|
+ curTime:''
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad(options){
|
|
|
this.init(options)
|
|
|
+ this.getOptionsList()
|
|
|
+ this.listenAudio()
|
|
|
},
|
|
|
onShareAppMessage({from,target}) {
|
|
|
console.log(from,target);
|
|
|
let path='/pages/voice/voice?voiceId=0'
|
|
|
- let title='FICC语音播报'
|
|
|
+ let title='语音播报'
|
|
|
let imageUrl=''
|
|
|
if(from=='button'){
|
|
|
title=`${target.dataset.item.SectionName}:${target.dataset.item.BroadcastName}`
|
|
@@ -119,6 +143,7 @@ export default {
|
|
|
this.list=[]
|
|
|
this.finished=false
|
|
|
this.getVoiceList()
|
|
|
+ this.getOptionsList()
|
|
|
setTimeout(() => {
|
|
|
uni.stopPullDownRefresh()
|
|
|
}, 1500)
|
|
@@ -137,6 +162,8 @@ export default {
|
|
|
const obj=JSON.parse(res.data)
|
|
|
this.voiceId=obj.voiceId
|
|
|
}
|
|
|
+ }else{
|
|
|
+ this.voiceId=options.voiceId||0
|
|
|
}
|
|
|
this.getVoiceList()
|
|
|
},
|
|
@@ -146,7 +173,8 @@ export default {
|
|
|
const res=await apiVoiceList({
|
|
|
page_index:this.page,
|
|
|
page_size:this.pageSize,
|
|
|
- broadcast_id:Number(this.voiceId)
|
|
|
+ broadcast_id:Number(this.voiceId),
|
|
|
+ section_id:Number(this.activeId)
|
|
|
})
|
|
|
if(res.code===200){
|
|
|
this.IsVoiceAdmin=res.data.IsVoiceAdmin
|
|
@@ -160,15 +188,164 @@ export default {
|
|
|
this.isAuth=false
|
|
|
this.noAuthData=res.data
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取筛选数据
|
|
|
+ async getOptionsList(){
|
|
|
+ const res=await apiVoiceSectionList()
|
|
|
+ if(res.code!==200) return
|
|
|
+ const arr=res.data||[]
|
|
|
+ this.options=arr.map(item=>{
|
|
|
+ let obj={
|
|
|
+ text:'',
|
|
|
+ children:[]
|
|
|
+ }
|
|
|
+ obj.text=item.VarietyName
|
|
|
+ obj.children=item.Children.map(_item=>{
|
|
|
+ return {
|
|
|
+ text:_item.SectionName,
|
|
|
+ id:_item.SectionId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return obj
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ onClickNav({detail}){
|
|
|
+ console.log(detail);
|
|
|
+ this.mainActiveIndex=detail.index
|
|
|
+ },
|
|
|
+
|
|
|
+ onClickItem({detail}){
|
|
|
+ console.log(detail);
|
|
|
+ if(this.activeId==detail.id){
|
|
|
+ this.activeId=0
|
|
|
+ }else{
|
|
|
+ this.activeId=detail.id
|
|
|
+ }
|
|
|
+ this.voiceId=0
|
|
|
+ this.page=1
|
|
|
+ this.list=[]
|
|
|
+ this.finished=false
|
|
|
+ this.getVoiceList()
|
|
|
+ this.showFilter=false
|
|
|
+ },
|
|
|
+
|
|
|
+ //删除音频
|
|
|
+ handleDelItem(item){
|
|
|
+ this.$dialog.confirm({
|
|
|
+ title:'',
|
|
|
+ message: '确定要删除该语音播报吗?',
|
|
|
+ confirmButtonText:'确定'
|
|
|
+ }).then(()=>{
|
|
|
+ apiVoiceDel({broadcast_id:Number(item.BroadcastId)}).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ uni.showToast({
|
|
|
+ message:'操作成功',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ this.page=1
|
|
|
+ this.list=[]
|
|
|
+ this.finished=false
|
|
|
+ this.getVoiceList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{})
|
|
|
+ },
|
|
|
+
|
|
|
+ handlePlay(item){
|
|
|
+
|
|
|
+ //没有初始化时
|
|
|
+ if(!innerAudioContext.src){
|
|
|
+ this.temAudio.id=item.BroadcastId
|
|
|
+ this.temAudio.duration=item.VoicePlaySeconds
|
|
|
+ this.temAudio.curTime=item.VoicePlaySeconds
|
|
|
+ innerAudioContext.src=item.VoiceUrl
|
|
|
+ innerAudioContext.play()
|
|
|
+ this.handleVoicePlayRecord(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if(innerAudioContext.paused){
|
|
|
+ innerAudioContext.play()
|
|
|
+ }else{
|
|
|
+ innerAudioContext.pause()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //音频播放事件
|
|
|
+ listenAudio(){
|
|
|
+ innerAudioContext.onPlay(()=>{
|
|
|
+ console.log('开始播放录音');
|
|
|
+ this.temAudio.paused=false
|
|
|
+ })
|
|
|
+ innerAudioContext.onPause(()=>{
|
|
|
+ console.log('录音播放暂停');
|
|
|
+ this.temAudio.paused=true
|
|
|
+ })
|
|
|
+ innerAudioContext.onStop(()=>{
|
|
|
+ console.log('录音播放停止');
|
|
|
+ this.temAudio.paused=true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.temAudio.id=0
|
|
|
+ }, 100);
|
|
|
+ innerAudioContext.src=''
|
|
|
+ })
|
|
|
+ innerAudioContext.onEnded(()=>{
|
|
|
+ console.log('录音播放自然结束');
|
|
|
+ this.temAudio.paused=true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.temAudio.id=0
|
|
|
+ }, 100);
|
|
|
+ innerAudioContext.src=''
|
|
|
+ })
|
|
|
+ innerAudioContext.onTimeUpdate(()=>{
|
|
|
+ this.temAudio.curTime=parseInt(this.temAudio.duration)-parseInt(innerAudioContext.currentTime)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //上报音频播放记录
|
|
|
+ async handleVoicePlayRecord(item){
|
|
|
+ const res=await apiVoicePlayRecord({
|
|
|
+ broadcast_id:item.BroadcastId
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ console.log('上报音频播放记录');
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style lang="scss">
|
|
|
+.voice-play-page{
|
|
|
+
|
|
|
+ .fliter-wrap-list{
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 53rpx;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ .top{
|
|
|
+ font-size: 32rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ }
|
|
|
+ .main-active-class{
|
|
|
+ border-color: #E3B377;
|
|
|
+ }
|
|
|
+ .content-active-class{
|
|
|
+ color: #E3B377;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.voice-play-page{
|
|
|
- padding: 34rpx;
|
|
|
+
|
|
|
.top-filter-box{
|
|
|
+ padding-left: 34rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
@@ -195,6 +372,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.list-wrap{
|
|
|
+ padding: 0 34rpx 34rpx 34rpx;
|
|
|
.item{
|
|
|
border-bottom: 1px solid #CDCDCD;
|
|
|
padding: 30rpx 0;
|
|
@@ -265,8 +443,4 @@ export default {
|
|
|
box-shadow: 0px 4rpx 20rpx rgba(160, 126, 84, 0.25);
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
-
|
|
|
-.fliter-wrap-list{
|
|
|
-
|
|
|
-}
|
|
|
</style>
|