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.activityTypeId===3">
              <image src="./static/position.png" model="aspectFill"></image>
              <text>{{info.city}}</text>
            </view>
        </view>
        <view class="intro-wrap">{{info.activityName}}</view>

        <view class="info-wrap" v-if="info.activityState!==3">
            <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.text}}</view>
            </view>
        </view>

        <!-- 音频 -->
        <view class="audio-wrap" v-if="info.activityState===3">
            <view class="audio-item" v-for="item in audioList" :key="item.voiceUrl">
                <image class="icon" src="./static/audio-play.png" model="aspectFill"></image>
                <view class="name">{{item.voiceName}}</view>
                <view class="time">{{item.voicePlaySeconds}}</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="global-btn-yellow-change btn">报名线下参会(15/20)</view>
            <view class="global-btn-yellow-change btn">会议提醒</view>
            <p class="tips">(会前15分钟推送微信消息提醒)</p>
        </view>
  </view>
</template>

<script>
// 活动详情
import {apiActivityDetail,apiActivityAudios} from '@/api/activity'
export default {
  name: "ActivityDetail",
  data() {
    return {
      id: 0, //活动id
      infoList:[],
      info:null,
      audioList:[],//音频数据
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail()
    // setTimeout(()=>{
    //     uni.redirectTo({
    //         url: '/pages-activity/noAuthority'
    //     });
    // },2000)
  },
  methods: {
    async getDetail(){
      const res=await apiActivityDetail({activity_id:Number(this.id)})
      // 无权限
      if(res.code===403){

        return
      }
      if(res.code===200){
        this.info=res.data

        // 线上会议
        if(res.data.activityTypeId===1){
          this.infoList=[
            {
              label:'大陆拨号',
              text:res.data.mainlandTel,
              color:'yellow',
              type:'tel'
            },
            {
              label:'新加坡拨入',
              text:res.data.singaporeTel,
              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.americaTel,
              color:'yellow',
              type:'tel'
            },
            {
              label:'拨入密码',
              text:res.data.participationCode
            },
          ]
        }

        if(res.data.activityState===3){
          this.getAudios()
        }
      }
    },

    // 获取活动音频
    async getAudios(){
      const res=await apiActivityAudios({activity_id:Number(this.id)})
      if(res.code===200){
        this.audioList=res.data
      }
    },

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

    // 跳转webview 打开报告
    handleOpenReport(){
      uni.navigateTo({
        url:'/pages/webView?url='+this.info.reportLink
      })
    }
  }
};
</script>

<style lang="scss">
.top-wrap {
  width: 100%;
  height: 370rpx;
  background: linear-gradient(312deg, rgba(0, 0, 0, 0.8) 0%, rgba(43, 43, 43, 0.8) 100%);
  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: 17px;
    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;
        }
    }
    .yellow-color{
        color: $global-text-color-main;
    }
}

.audio-wrap{
    .audio-item{
        padding: 36rpx 34rpx;
        border-bottom: 1px solid $global-border-color;
        position: relative;
        .icon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 45rpx;
            width: 48rpx;
            height: 48rpx;
        }
        .name{
            margin-bottom: 10rpx;
        }
        .time{
            font-size: $global-font-size-mini;
        }
    }
}

.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>