hongze_yb_xcx/pages-activity/detail.vue

<template>
    <view class="activity-detail" v-if="info">
        <view
            class="top-wrap"
            :style="'background-image:url(' + info.speakerBackgroundPic + ')'"
        >
            <view class="status status-before" v-if="info.activityState === 1"
                >未开始</view
            >
            <view class="status status-before" v-if="info.activityState === 2"
                >进行中</view
            >
            <view class="status status-before" v-if="info.activityState === 3"
                >已结束</view
            >
            <view class="title">{{ info.activityTypeName }}</view>
            <view class="name">主讲人：{{ info.speaker }}</view>
            <view class="time"
                >活动时间：{{
                    info.startTime | formatActivityTime(info.endTime)
                }}</view
            >
            <view class="flex city" v-if="info.city">
                <image src="./static/position.png" model="aspectFill"></image>
                <text>{{ info.city }}</text>
            </view>
        </view>
        <view class="intro-wrap">{{ info.reportName?info.reportName.split('】')[1]:info.activityName }}</view>
        

        <!-- 音频 -->
        <view class="audio-wrap" v-if="info.activityState === 3">
            <view
                class="audio-item"
                v-for="(item,index) in audioList"
                :key="item.voiceUrl"
            >
                <image 
                  class="icon" 
                  :src="(activeAudioUrl==item.voiceUrl&&item.playStatus)?'./static/audio-doing.png':'./static/audio-play.png'" 
                  model="aspectFill" 
                  @click="handlePlayAudio(item)">
                </image>
                <view class="name">{{ item.voiceName }}</view>
                <view class="time">{{activeAudioUrl==item.voiceUrl?activeAudioTime:0|formarVoiceTime}} / {{ item.voicePlaySeconds|formarVoiceTime }}</view>
                <slider 
                    class="audio-slider" 
                    activeColor="#e3b377"
                    :max="item.voicePlaySeconds" 
                    :value="activeAudioUrl==item.voiceUrl?activeAudioTime:0" 
                    @change="handleAudioSliderChange($event,item)"
                    block-size="20"
                />
            </view>
        </view>

        <view class="info-wrap">
            <view
                class="flex item"
                v-for="item in infoList"
                :key="item.label"
                @click="handleClickInfoItem(item)"
            >
                <view class="label">{{ item.label }}：</view>
                <view :class="['content', item.color && 'yellow-color',item.type=='copy'&&'link']">
                  {{item.text}}
                </view>
                <view class="copy-btn" v-if="item.type == 'copy'" @click="handleCopyLink(item.text)">复制链接</view>
            </view>
        </view>

        <!-- 报告链接 -->
        <view class="info-wrap" v-if="info.reportLink">
            <view class="flex item" @click="handleOpenReport">
                <view class="label">相关报告：</view>
                <view class="yellow-color">查看报告链接</view>
            </view>
        </view>

        <view class="btn-wrap" v-if="info.activityState === 1">
            <view
                :class="[info.registerState == 1?'global-btn-disable':'global-btn-yellow-change' ,'btn']"
                v-if="info.firstActivityTypeId === 3"
                @click="handleSetRegister"
                >{{
                    info.registerState == 0
                        ? "报名线下参会"
                        : "取消报名线下参会"
                }}({{ info.registeredNum>info.limitPeopleNum?info.limitPeopleNum:info.registeredNum }}/{{ info.limitPeopleNum }})</view
            >
            <view
                :class="[
                    info.hasRemind == 1
                        ? 'global-btn-disable'
                        : 'global-btn-yellow-change',
                    'btn',
                ]"
                @click="handleSetRemind"
                >{{ info.hasRemind == 1 ? "取消会议提醒" : "会议提醒" }}</view
            >
            <p class="tips">(会前15分钟推送微信消息提醒)</p>
        </view>

        <!-- 弹窗 -->
        <van-popup :show="pupData.show" @close="pupData.show = false" :close-on-click-overlay="false">
            <view class="global-pup">
                <view class="content">
                    <rich-text :nodes="pupData.content"></rich-text>
                </view>
                <view class="flex bot" v-if="pupData.type == 'contact'">
                    <view @click="pupData.show = false" style="color: #a9afb8">取消</view>
                    <view @click="handleCallPhone(pupData.mobile)">拨号</view>
                </view>
                <view class="flex bot" v-else-if="pupData.type == 'apply'">
                    <view @click="pupData.show = false" style="color: #a9afb8">取消</view>
                    <view @click="handleApply">立即申请</view>
                </view>
                <view class="flex bot" v-else>
                    <view @click="pupData.show = false">知道了</view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// 活动详情
import {
    apiActivityDetail,
    apiActivityAudios,
    apiActivityAddRemind,
    apiActivityCancelRemind,
    apiActivityRegister,
    apiActivityCancelRegister
} from "@/api/activity";
import {baseApiUrl} from '@/utils/config.js'
export default {
    name: "ActivityDetail",
    filters:{
      formarVoiceTime(e){
        let minus=parseInt(e/60)
        let sec=e%60
        return `${minus}:${sec>9?sec:'0'+sec}`
      }
    },
    data() {
        return {
            id: 0, //活动id
            infoList: [],
            info: null,
            audioList: [], //音频数据

            activeAudioUrl:'',//正在播放的背景音频地址
            activeAudioTime:0,//

            pupData: {
                show: false,
                content: "", //弹窗html字符串
                type: "",
                mobile: "",
            },
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.getDetail();
        this.getAudios()
    },
    onUnload(){
        this.handleSaveAudioMsg()
    },
    onShareAppMessage() {
        let title=''
        if(this.info.firstActivityTypeId==1){
            title=this.info.reportName.split('】')[1]||this.info.activityName
        }else{
            title=this.info.activityName
        }
        const token=uni.getStorageSync('token')
        
        let imgUrl=baseApiUrl+`/activity/getActivityShareImg?activity_id=${this.id}`

        return {
            title: title,
            imageUrl:imgUrl
        }
    },
    methods: {
        async getDetail() {
            const res = await apiActivityDetail({ activity_id: Number(this.id) });
            // 无权限
            if (res.code === 403) {
                uni.redirectTo({
                    url: "/pages-activity/noAuthority?data=" + JSON.stringify(res.data),
                });
                return;
            }
            if (res.code === 200) {
                this.info = res.data;

                let arr = [
                    {
                        label: "大陆拨号",
                        text: res.data.mainlandTel,
                        color: "yellow",
                        type: "tel",
                    },
                    {
                        label: "香港拨入",
                        text: res.data.hongKongTel,
                        color: "yellow",
                        type: "tel",
                    },
                    {
                        label: "台湾拨入",
                        text: res.data.taiwanTel,
                        color: "yellow",
                        type: "tel",
                    },
                    {
                        label: "新加坡拨入",
                        text: res.data.singaporeTel,
                        color: "yellow",
                        type: "tel",
                    },
                    {
                        label: "美国拨入",
                        text: res.data.americaTel,
                        color: "yellow",
                        type: "tel",
                    },
                    {
                        label: "拨入密码",
                        text: res.data.participationCode,
                    },
                ];
                this.infoList = arr.filter((item) => {
                    return item.text;
                });
                // 研究员线下沙龙
                if (res.data.firstActivityTypeId === 3) {
                    // this.infoList.push({label: "活动地址",text: res.data.city + res.data.address})
                    if(res.data.linkParticipants){
                      this.infoList.push({label: "网络参会",text: res.data.linkParticipants,color: "yellow",type: "copy"})
                    }
                }
            }
        },

        // 获取活动音频
        async getAudios() {
            const res = await apiActivityAudios({ activity_id: Number(this.id) });
            if (res.code === 200&&res.data) {
                const audioPlayPaused=this.globalBgMusic.paused// true 当前没有音频在播放
                if(audioPlayPaused===false){// 当前有音频在播放
                    this.activeAudioUrl=uni.getStorageSync('activityAudioUrl')
                }

                console.log('是否有音频在播放',audioPlayPaused===false);
                
                this.audioList = res.data.map(item=>{
                    let obj={...item,playStatus:false}
                    if(audioPlayPaused===false){
                        if(item.voiceUrl==this.globalBgMusic.src){
                            obj.playStatus=true
                        }
                    }
                    return obj
                });

                if(audioPlayPaused===false){
                    this.activeAudioTime=this.globalBgMusic.currentTime
                    this.globalBgMusic.onTimeUpdate(()=>{
                        this.activeAudioTime=parseInt(this.globalBgMusic.currentTime)
                    })
                }
            }
        },

        // 播放音频
        handlePlayAudio(e){
            if(this.globalBgMusic.src==e.voiceUrl&&e.playStatus){// 同一个音频 并且是播放状态 则暂停
                console.log('同一个音频 并且是播放状态 则暂停');
                console.log('音频实例',this.globalBgMusic.src);
                this.globalBgMusic.pause()
            }else if(this.globalBgMusic.src==e.voiceUrl&&!e.playStatus){//同一个音频 并且是暂停状态 则直接播放
                console.log('同一个音频 并且是暂停状态 则直接播放');
                console.log('音频实例',this.globalBgMusic.src);
                this.globalBgMusic.play()
            }else{
                this.globalBgMusic.title=e.voiceName
                this.globalBgMusic.src=e.voiceUrl
                this.activeAudioUrl=e.voiceUrl
                this.activeAudioTime=0
            }

            this.globalBgMusic.onCanplay(()=>{
                console.log('onCanplay');
                this.globalBgMusic.play()
            })
          
            this.globalBgMusic.onPlay(()=>{
                console.log('onplay');
                e.playStatus=true
            })
            this.globalBgMusic.onPause(()=>{
                console.log('onPause');
                e.playStatus=false
            })
            this.globalBgMusic.onStop(()=>{
                console.log('onStop');
                e.playStatus=false
                this.activeAudioTime=0
            })
            this.globalBgMusic.onEnded(()=>{
                console.log('onEnded');
                e.playStatus=false
                this.activeAudioTime=0
            })
            this.globalBgMusic.onError((e)=>{
                console.log('onError',e);
            })
            this.globalBgMusic.onTimeUpdate(()=>{
                if(this.globalBgMusic.src==e.voiceUrl){
                    this.activeAudioTime=parseInt(this.globalBgMusic.currentTime)
                }
            })
        },

        //音频进度条拖动
        handleAudioSliderChange(e,item){
            const value=e.detail.value
            item.currentPlayTime=value
            // 如果当前activeAudioUrl 不等于拖动的这个音频
            if(item.voiceUrl!=this.globalBgMusic.src){
                this.handlePlayAudio(item)
            }else{
                this.globalBgMusic.seek(value)
                this.globalBgMusic.play()
            }

        },

        // 存储音频播放的信息
        handleSaveAudioMsg(){
            // 当音频暂停（不是停止）时 主动调一次停止
            const audioPlayPaused=this.globalBgMusic.paused
            if(audioPlayPaused===true){
                this.globalBgMusic.stop()
            }
            uni.setStorageSync('activityAudioUrl',this.activeAudioUrl)
        },

        // 点击信息项
        handleClickInfoItem(e) {
            if (e.type === "tel" && e.text) {
                uni.makePhoneCall({
                    phoneNumber: e.text,
                });
            }
        },

        // 跳转webview 打开报告
        handleOpenReport() {
            uni.navigateTo({
                url: "/pages-activity/reportDetail",
                success:(res)=>{
                    res.eventChannel.emit('webUrl', { url:  this.info.reportLink})
                }
            });
        },

        // 复制链接
        handleCopyLink(text){
          uni.setClipboardData({
              data: text,
              success: function () {
                  uni.showToast({
                    title:"复制成功,可在浏览器内打开",
                    icon:"none"
                  })
              },
              fail:function(){
                  uni.showToast({
                    title:"复制失败",
                    icon:"none"
                  })
              }
          });
        },

        // 设置会议提醒
        async handleSetRemind() {
            if (this.info.hasRemind == 1) {
                this.handleCancelRemind();
            } else {
                this.handleAddRemind();
            }
        },
        // 添加提醒
        async handleAddRemind() {
            const res = await apiActivityAddRemind({ activity_id: Number(this.info.activityId) });
            if (res.code === 200) {
                this.pupData.content = `<h4 style="text-align:center;margin-bottom:5px">设置成功</h4>
                                        <p>关注【弘则研究】公众号，接收会前15分钟微信提醒，并及时获取活动信息变更通知</p>`;
                this.pupData.show = true;
                this.handleUpateRemindStatus();
            } else if (res.code === 4001) {
                if (res.data.type == "time") {
                    this.pupData.content = `<p>会议开始前15分钟内无法设置会议提醒</p>`;
                    this.pupData.type = "time";
                }
                this.pupData.show = true;
            }
        },
        //取消提醒
        async handleCancelRemind() {
            const res = await apiActivityCancelRemind({ activity_id: Number(this.info.activityId) });
            if (res.code === 200) {
                uni.showToast({
                    title: "取消提醒成功",
                    icon: "none",
                });
                this.handleUpateRemindStatus();
            }else if(res.code===403){
                uni.showToast({
                    title:res.msg,
                    icon:"none"
                })
            }
        },
        // 更新列表提醒状态
        handleUpateRemindStatus() {
            if (this.info.hasRemind == 1) {
                this.info.hasRemind = 0
            } else {
                this.info.hasRemind = 1
            }
            uni.$emit('activityDetailSetRemind', { id: this.info.activityId })
        },

        // 设置报名
        handleSetRegister() {
            if (this.info.registerState == 1) {
                this.handleCancelRegister();
            } else {
                this.handleAddRegister();
            }
        },
        // 线下报名
        async handleAddRegister() {
            const res = await apiActivityRegister({ activity_id: Number(this.info.activityId) })
            if (res.code === 200) {
                this.pupData.content = `<h4 style="text-align:center;margin-bottom:5px">报名成功</h4>
                                        <p>关注【弘则研究】公众号，接收会前1小时微信提醒，并及时获取活动信息变更通知</p>`
                this.pupData.show = true
                this.handleUpdateRegister()
            } else if (res.code === 4001) {
                if (res.data.type == 'time') {
                    this.pupData.content = `<p>活动开始前15分钟内无法设置会议提醒</p>`
                    this.pupData.type = 'time'
                } else if (res.data.type == 'full') {
                    this.pupData.content = `<p>此活动报名人数已满，请留意下期活动</p>`
                    this.pupData.type = 'full'
                }
                this.pupData.show = true
            }
        },
        //取消线下报名
        async handleCancelRegister() {
            const res = await apiActivityCancelRegister({ activity_id: Number(this.info.activityId) })
            if (res.code === 200) {
                uni.showToast({
                    title: "取消报名成功",
                    icon: "none"
                })
                this.handleUpdateRegister()
            }else if(res.code===403){
                uni.showToast({
                    title:res.msg,
                    icon:"none"
                })
            }
        },
        //更新列表报名状态
        handleUpdateRegister() {
            if (this.info.registerState == 1) {
                this.info.registerState = 0
            } else {
                this.info.registerState = 1
            }
            this.getDetail()
            uni.$emit('activityDetailSetRegister', { id: this.info.activityId })
        }
    },
};
</script>

<style lang="scss">
.activity-detail {
    background: #fff;
}
.top-wrap {
    width: 100%;
    height: 370rpx;
    // background: linear-gradient(
    //     312deg,
    //     rgba(0, 0, 0, 0.8) 0%,
    //     rgba(43, 43, 43, 0.8) 100%
    // );
	background-color: #666666;
    color: $global-text-color-white;
    padding-top: 144rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .status {
        position: absolute;
        top: 0;
        left: 0;
        width: 116rpx;
        line-height: 44rpx;
        border-radius: 0px 0px 16rpx 0px;
        color: $global-text-color-white;
        text-align: center;
        font-size: $global-font-size-sm;
    }
    .status-before {
        background-color: #e3b377;
    }
    .status-progress {
        background-color: #3385ff;
    }
    .status-end {
        background-color: #a2a2a2;
    }
    .title {
        font-size: 19px;
        font-weight: bold;
    }
    .name {
        margin-top: 15rpx;
        margin-bottom: 40rpx;
    }
    .time {
        opacity: 0.8;
        font-size: $global-font-size-sm;
    }
    .city {
        font-size: $global-font-size-sm;
        align-items: center;
        position: absolute;
        right: 40rpx;
        bottom: 59rpx;
        image {
            width: 32rpx;
            height: 32rpx;
        }
    }
}
.intro-wrap {
    background-color: #fff;
    box-shadow: 0px 3px 12px rgba(196, 196, 196, 0.16);
    font-size: $global-font-size-lg;
    font-weight: bold;
    padding: 28rpx 34rpx;
}
.info-wrap {
    padding: 30rpx 34rpx;
    .item {
        margin-bottom: 30rpx;
        .label {
            flex-shrink: 0;
        }
        .copy-btn {
            background-color: #e3b377;
            color: #fff;
            padding: 4rpx 8rpx;
            font-size: 12px;
            margin-left: 4rpx;
        }
        .link{
            width: 300rpx;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
    }
    .yellow-color {
        color: $global-text-color-main;
    }
}

.audio-wrap {
    padding: 0 94rpx 0 34rpx;
    .audio-item {
        padding-top: 36rpx;
        // border-bottom: 1px solid #E8DED2;
        position: relative;
        .icon {
            position: absolute;
            top: 50rpx;
            right: 0;
            width: 48rpx;
            height: 48rpx;
        }
        .name {
            margin-bottom: 10rpx;
        }
        .time {
            font-size: $global-font-size-mini;
        }
        .audio-slider{
            margin: 20rpx 0 20rpx 20rpx; 
        }
    }
}

.btn-wrap {
    .btn {
        width: 380rpx;
        line-height: 70rpx;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40rpx;
    }
    .tips {
        font-size: $global-font-size-sm;
        color: $global-text-color-999;
        text-align: center;
    }
}
</style>