hongze_yb_xcx/pages-voice/voiceDetail.vue

<template>
    <view class="voice-detail" v-if="isAuth">
        <!-- <view class="section-name">{{info.SectionName}}</view> -->
        <view class="title">{{info.BroadcastName}}</view>
        <view class="time">发布时间：{{info.PublishTime|formatTime}}</view>
        <view class="flex audio-box">
            <image 
                :src="voiceId==curVoiceId&&!curAudioPaused?require('@/static/voice/playing.png'):require('@/static/voice/pause.png')" 
                mode="aspectFill" 
                @click="handlePlayAudio" 
            />
            <slider
                activeColor="#E6B77D"
                :max="duration" 
                :value="curTime" 
                @change="handleAudioSliderChange($event)"
                block-size="12"
                class="slider"
            />
            <text class="left-time">{{curTime|formatVoiceTime}}</text>
            <text class="right-time">{{duration|formatVoiceTime}}</text>
        </view>
        <image class="del-btn" src="@/static/voice/del.png" mode="widthFix" @click="handleDel" v-if="info.IsAuthor"/>
        <image class="publish-btn" src="@/static/voice/publish.png" mode="widthFix" @click="handleSendMsg" v-if="info.CouldSendMsg"/>
        <sharePoster 
            :showSlot="true"
            :shareData="{
                type:'voice_detail',
                code_page:'pages-voice/voiceDetail',
                code_scene:JSON.stringify({voiceId:info.BroadcastId}),
                data:{
                    title:info.BroadcastName,
                    img:info.ImgUrl
                }
            }"
        >
            <image style="width:34rpx;height:34rpx;float: right;" src="@/static/voice/creat-poster-icon.png" mode="aspectFill" />
        </sharePoster>

        <!-- 图片部分 -->
        <view class="imgs-box">
            <image 
                v-for="item in info.Imgs"
                :key="item"
                :src="item" 
                mode="widthFix" 
                lazy-load="false"
                @click="preViewImg(item)"
            />
        </view>
          
        
        <view v-show="false"><audioBox v-if="showAudioPop"/></view>

        <van-dialog id="van-dialog" />

        <!-- 跳转去提问悬浮按钮 -->
        <dragButton :existTabBar="true">
            <navigator url="/pages-question/hasQuestion">
                <view class="to-question-fixed-box">
                    <image src="@/static/toquestion-icon.png" mode="widthFix" />
                    <text>我要提问</text>
                </view>
            </navigator>
        </dragButton>

    </view>
    <noAuth :info="noAuthData" v-else/>

</template>

<script>
import {apiVoicePlayRecord,apiVoiceDel,apiVoiceDetail,apiVoiceSendMsg} from '@/api/voice'
import {apiGetSceneToParams} from '@/api/common'
import noAuth from '@/pages/voice/components/noAuth.vue'
import audioBox from '@/components/audioBox/audioBox.vue'
import dragButton from '@/components/dragButton/dragButton.vue'
import sharePoster from '@/components/sharePoster/sharePoster.vue'
const dayjs=require('@/utils/dayjs.min')
export default {
    components:{
        noAuth,
        audioBox,
        dragButton,
        sharePoster
    },
    computed:{
        showAudioPop(){//是否显示音频弹窗
            return this.$store.state.audio.show
        },
        curVoiceId(){//当前正在播放的音频id
            return this.$store.state.audio.voiceId
        },
        curAudioPaused(){//当前音频是否暂停状态
            return this.$store.state.audio.paused
        },
        curTime(){
            let t=0
            if(this.voiceId==this.$store.state.audio.voiceId){
                t=this.$store.state.audio.curTime
            }
            return t
        }
    },
    filters:{
        formatTime(e){
            return dayjs(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() {
        return {
            voiceId:'',
            isAuth:true,
            noAuthData:null,
            info:{},

            // curTime:0,
            duration:0,
        }
    },
    onLoad(options){
        this.init(options)
    },

    onShareAppMessage(){
        const title=`${this.info.SectionName}:${this.info.BroadcastName}`
        return {
            title:title,
            imageUrl:this.info.ImgUrl
        }
    },

    methods: {
        async init(options){
            if(options.scene){
                const res=await apiGetSceneToParams({scene_key:options.scene})
                if(res.code===200){
                    const obj=JSON.parse(res.data)
                    this.voiceId=obj.voiceId
                }
            }else{
                this.voiceId=options.voiceId||0
            }
            this.getDetail()
        },

        async getDetail(){
            const res=await apiVoiceDetail({broadcast_id:Number(this.voiceId)})
            if(res.code===200){
                this.info=res.data
                uni.setNavigationBarTitle({ title: res.data.SectionName||'播报详情' })
                this.duration=Number(res.data.VoicePlaySeconds)||0
                this.isAuth=true
            }else if(res.code===403){
                this.isAuth=false
                this.noAuthData=res.data
            }
        },

        //删除
        handleDel(){
            this.$dialog.confirm({
                title:'',
                message: '确定要删除该语音播报吗？',
                confirmButtonText:'确定'
            }).then(()=>{
                apiVoiceDel({broadcast_id:Number(this.voiceId)}).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:'操作成功',
                            icon:'none'
                        })
                        setTimeout(() => {
                            uni.$emit('addVoiceSuccess')
                            uni.switchTab({
                                url: '/pages/voice/voice'
                            });
                        }, 1000);
                    }
                })
            }).catch(()=>{})
        },

        // 推送消息
        handleSendMsg(){
            this.$dialog.confirm({
                title:'',
                message: '该操作将推送模板消息和客群，确认推送吗？',
                confirmButtonText:'确认'
            }).then(()=>{
                apiVoiceSendMsg({broadcast_id:Number(this.voiceId)}).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:'操作成功',
                            icon:'none'
                        })
                        setTimeout(() => {
                            uni.$emit('addVoiceSuccess')
                            uni.switchTab({
                                url: '/pages/voice/voice'
                            });
                        }, 1000);
                    }
                })
            }).catch(()=>{})
        },

        //上报音频播放记录
        async handleVoicePlayRecord(){
            const res=await apiVoicePlayRecord({
                broadcast_id:Number(this.voiceId)
            })
            if(res.code===200){
                console.log('上报音频播放记录');
                this.$store.commit('audio/addAudioRecordId',{recordId:res.data,source:2})
            }
        },

        //点击播放\暂停音频
        handlePlayAudio(){
            if(this.$store.state.audio.voiceId==this.voiceId){
                if(this.globalBgMusic.paused){
                    this.globalBgMusic.play()
                }else{
                    this.globalBgMusic.pause()
                }
            }else{
                const list=[{url:this.info.VoiceUrl,time:this.info.VoicePlaySeconds,title:this.info.BroadcastName,}]
                this.$store.commit('audio/addAudio',{
                    list:list,
                    voiceId:this.voiceId
                })
                this.handleVoicePlayRecord()
            }
        },


        //拖动音频播放进度条
        handleAudioSliderChange(e){
            const value=e.detail.value
            this.globalBgMusic.seek(value)
        },

        //预览图片
        preViewImg(item){
            wx.previewImage({
                current: item, // 当前显示图片的 http 链接
                urls: this.info.Imgs||[] // 需要预览的图片 http 链接列表
            })
        }


    },
}
</script>

<style lang="scss" scoped>
    .voice-detail{
        padding: 50rpx 34rpx;
        .section-name{
            background: #FDF8F2;
            border-radius: 8rpx;
            border: 1px solid #E3B377;
            display: inline-block;
            padding: 19rpx 27rpx;
            margin-bottom: 40rpx;
        }
        .title{
            font-size: 32rpx;
            line-height: 38rpx;
            margin-bottom: 20rpx;
        }
        .time{
            color: #999;
            font-size: 28rpx;
            line-height: 33rpx;
        }
        .audio-box{
            background-color: #FDF8F2;
            height: 123rpx;
            align-items: center;
            margin-top: 50rpx;
            margin-bottom: 40rpx;
            padding: 0 30rpx;
            position: relative;
            .left-time{
                position: absolute;
                bottom: 20rpx;
                left: 100rpx;
                color: #999999;
                font-size: 20rpx;
            }
            .right-time{
                position: absolute;
                bottom: 20rpx;
                right: 40rpx;
                color: #999999;
                font-size: 20rpx;
            }
            image{
                width: 40rpx;
                height: 48rpx;
                flex-shrink: 0;
                margin-right: 30rpx;
            }
            .slider{
                flex: 1;
                margin: 0 10rpx;
            }
        }
        .del-btn{
            float: left;
            width: 36rpx;
            height: 36rpx;
        }
        .publish-btn{
            float: right;
            width: 36rpx;
            height: 36rpx;
            margin-left: 40rpx;
        }
        .imgs-box{
            margin-top: 120rpx;
            image{
                width: 100%;
                margin-bottom: 40rpx;
            }
        }
    }
</style>