mp_exhibitor_miniprog/pages/activity/detail.vue

<template>
  <page-layout class="activity-detail">
    <nav-bar title="同期活动" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="main-container">
        <view class="activity-head">
          <view class="activity-title">{{ meetingInfo.title || '' }}</view>
          <view class="activity-views">
            <view>
              浏览：
            </view>
            {{ meetingInfo.view || 0 }}
          </view>
          <view class="activity-props">
            <view class="activity-prop">
              <view class="activity-prop-label">举办时间:</view>
              <view class="activity-prop-text">{{ meetingInfo.time }}</view>
            </view>
            <view class="activity-prop">
              <view class="activity-prop-label">举办地点:</view>
              <view class="activity-prop-text">{{ meetingInfo.address }}</view>
            </view>
            <view class="activity-prop">
              <view class="activity-prop-label">主办单位:</view>
              <view class="activity-prop-text">{{ meetingInfo.meeting_host }}</view>
            </view>
          </view>
          <!--          <view class="activity-action">
                      <button open-type="share" :plain="true">
                        <view>
                          <view class="iconfont icon-zhuanfa"></view>
                          <view>分享</view>
                        </view>
                      </button>
                      <view @click="onCollect(meetingInfo)">
                        <view v-if="meetingInfo.is_collect" class="iconfont icon-favourites-filled-star-symbol active"></view>
                        <view v-else class="iconfont icon-Favourites-Add-Large"></view>
                        <view>收藏</view>
                      </view>
                    </view>-->
        </view>

        <view class="activity-image">
          <image :src="meetingInfo.image_url" :alt="meetingInfo.image_alt"
                 mode="aspectFill"/>
        </view>
        <u-panel class="activity-desc" :title="expand_content.active_title.value" :second="true">
          <u-content class="activity-desc-text" :content="meetingInfo.content"></u-content>
        </u-panel>
        <view class="activity-info-flag">
          <view class="iconfont icon-Exclamation-Circle-Large-1"></view>
        </view>
        <u-panel v-if="expand_content.topic_title.value" class="activity-desc"
                 :title="expand_content.topic_title.value " :second="true">
          <view class="activity-agenda"
                v-if="expand_content.topic_list.value && expand_content.speaker_title.value && expand_content.speaker_btn.value">
            <!--            <view class="activity-agenda-title">{{ expand_content.topic_title.value }}</view>-->
            <view class="activity-agenda-list">
              <view class="activity-agenda-item" v-for="item in expand_content.topic_list.value">
                <view class="iconfont icon-Check"></view>
                <view class="activity-agenda-item-text">{{ item[0].value }}</view>
              </view>
            </view>
            <view class="activity-agenda-guest-title">{{ expand_content.speaker_title.value }}</view>
            <view class="activity-agenda-guest-link">
              <van-button type="primary" @click="onClickGuestLink">
                <template>
                  <view>{{ expand_content.speaker_btn.value }}</view>
                  <view class="arrow iconfont icon-right-s"></view>
                </template>
              </van-button>
            </view>
          </view>
        </u-panel>
        <u-panel v-if="expand_content.schedule_desc.value" class="activity-desc"
                 :title="expand_content.schedule_title.value" :second="true">
          <view class="activity-schedule">
            <!--            <view class="activity-schedule-title">{{ expand_content.schedule_title.value }}</view>-->
            <view class="activity-schedule-desc">
              {{ expand_content.schedule_desc.value }}
            </view>
            <view class="activity-schedule-table table"
                  v-if="meetingInfo['expand_content'] && meetingInfo['expand_content']['schedule_list'] && meetingInfo['expand_content']['schedule_list']['value'].length > 0">
              <view class="thead">
                <view class="tr">
                  <view></view>
                  <view>时间</view>
                  <view>演讲题目</view>
                  <view>演讲嘉宾</view>
                </view>
              </view>
              <view class="tbody">
                <view class="tr" v-for="item in meetingInfo['expand_content']['schedule_list']['value']" >
                  <template v-if="item[0].value !=='' || item[1].value !=='' || item[2].value !==''">
                    <view>
                      <view class="iconfont icon-CalendarAdd1"></view>
                    </view>
                    <view>{{ item[0].value }}</view>
                    <view>{{ item[1].value }}</view>
                    <view>
                      <view>
                        {{ item[2].value }}
                      </view>
                      <!--                    {{ item.description }}-->
                    </view>
                  </template>
                </view>
              </view>
            </view>
          </view>
        </u-panel>
        <view class="main-image">
          <image :src="meetingInfo.main_image" :alt="meetingInfo.main_image_alt"
                 mode="widthFix"/>
        </view>

        <view class="activity-operation">

          <view class="activity-action">
            <button open-type="share" :plain="true">
              <view>
                <view class="iconfont icon-zhuanfa"></view>
                <view>分享</view>
              </view>
            </button>
            <view @click="onCollect(meetingInfo)">
              <view v-if="meetingInfo.is_collect" class="iconfont icon-favourites-filled-star-symbol active"></view>
              <view v-else class="iconfont icon-Favourites-Add-Large"></view>
              <view>收藏</view>
            </view>
          </view>
        </view>
        <!-- <disclaimer-text></disclaimer-text> -->
      </view>
    </u-scroll-view>
    <float-button></float-button>
    <van-dialog id="van-dialog"/>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import UContent from '@/components/common/u-content'
import DisclaimerText from '@/components/disclaimer-text/index.vue'
import {getMeetingInfo} from "@/api/meeting";
import {returnTimeFormat} from '@/utils'
import {meetingCancelCollect, meetingCollect, mettingView} from "@/api/exhibitor"
import floatButton from "@/components/layout/float-button"
import ContactUs from '@/pages/index/components/contact-us.vue'
import PageLayout from "@/components/layout/page-layout";
import UPanel from "@/components/common/u-panel";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    DisclaimerText,
    UContent,
    floatButton,
    ContactUs,
    UPanel
  },
  computed: {},
  data() {
    return {
      id: 0,
      favorited: true,
      meetingInfo: {},
      expand_content: {},
      shareInfo: {}
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getActiveInfo()
  },
  created() {
    uni.$on('refreshData', (val) => {
      if (val === 'pages/activity/detail') {
        this.getActiveInfo()
      }
    })
  },
  methods: {
    onShareAppMessage: function () {
      return this.shareInfo
    },
    onShareTimeline() {
      return this.shareInfo
    },
    saveMeetingView() {
      mettingView({id: this.id}).then(res => {

      })
    },
    onCollect(item) { // 收藏
      if (!this.checkAuth('/pages/activity/detail?id=' + this.id)) {
        return
      }
      if (item.is_collect === 1) {
        meetingCancelCollect({id: item.id}).then(res => {
          if (res.code === 0) {
            this.meetingInfo.is_collect = 0
          }
        })
      } else {
        meetingCollect({id: item.id}).then(res => {
          if (res.code === 0) {
            this.meetingInfo.is_collect = 1
          }
        })
      }
    },
    returnTimeFormatEvent(start_time, end_time) {
      return returnTimeFormat(start_time, end_time)
    },
    getActiveInfo() {
      this.saveMeetingView()
      this.showLoading()
      getMeetingInfo({id: this.id}).then(res => {
        this.meetingInfo = res.data
        this.meetingInfo.time = returnTimeFormat(res.data.start_date, res.data.end_date)
        this.expand_content = res.data.expand_content
        // this.meetingInfo.content = convertRichTextToWXML(res.data.content)
        this.shareInfo = {
          title: this.meetingInfo.title,
          path: '/pages/activity/detail?id='+this.id,
          imageUrl: this.meetingInfo.image_url ? this.meetingInfo.image_url : 'https://oss.productronicachina.com.cn/resources/common/up/0000001002/20250221/67b829f60c212.png'
        }
        this.hideLoading()
      })
    },
    onClickGuestLink() {
      this.navigateTo('/pages/activity/guest?id=' + this.id)
    }
  }
}
</script>

<style lang="scss">
.activity-detail {
  //padding-bottom: 140rpx;
  .main-container {
    padding-bottom: 140rpx;
  }
  .main-image {
    display: flex;
    width: 100%;

    image {
      //height: auto;
      //display: block;
    }
  }

  .activity-head {
    position: relative;
    font-weight: normal;
    font-size: $fontSize7;
    color: #333333;

    .activity-title {
      font-weight: bold;
    }

    .activity-action {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .activity-operation {
    @include display-flex-between;
    //margin-top: 32rpx;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 40rpx 0;
    padding: 40rpx 30rpx;
    background-color: #ffffff;
    z-index: 99;
  }

  .activity-views {
    display: flex;
    align-items: center;
    //grid-gap: 9px;
    font-size: $fontSize1;
    color: #555555;
    justify-content: flex-end;
  }

  .activity-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: $fontSize3;
    color: #555555;
    grid-gap: 10rpx;
    width: 100%;

    & > view {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconfont {
      font-size: 30rpx;
      margin-right: 6rpx;
    }

    .icon-Favourites-Add-Large {
      &.active {
        &::before {
          content: '\e669';
        }

        color: $textActionColor;
      }
    }

    button {
      font-size: $fontSize3;
      white-space: nowrap;
      line-height: inherit;
      background-color: transparent;
      border: none;

      view {
        display: flex;
        align-items: center;
        font-size: $fontSize3;
      }
    }
  }

  .activity-props {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 12rpx;
    margin-top: 10rpx;
    //padding-right: 210rpx;
    font-size: $fontSize2;

    .activity-prop {
      display: flex;
      align-items: flex-start;
      line-height: 1.6;
    }

    .activity-prop-label {
      padding-right: 4rpx;
      width: 140rpx;
    }

    .activity-prop-text {
      font-weight: bold;
    }
  }

  .activity-image {
    height: 407rpx;
    margin-top: 33rpx;
  }

  .activity-desc {
    display: block;
    margin-top: 47rpx;

    .activity-desc-title {
      font-size: $fontSize6;
      color: #333333;
      line-height: 38rpx;
    }

    .activity-desc-text {
      display: block;
      margin-top: 31rpx;
    }
  }

  .activity-info-flag {
    @include display-flex-center;
    height: 48rpx;
    margin-top: 37rpx;
    margin-bottom: 16rpx;
    background: linear-gradient(259deg, #EA7A01 0%, #F5A201 100%);
    border-radius: 6rpx;
    color: #FFFFFF;

    .iconfont {
      font-size: 22rpx;
    }
  }

  .activity-agenda {
    padding: 20rpx;
    background-color: #E8EBF1;
    border-radius: 6rpx;
    color: #333333;

    .activity-agenda-title, .activity-agenda-guest-title {
      font-weight: bold;
      font-size: $fontSize3;
      line-height: 35rpx;
    }

    .activity-agenda-list {
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 23rpx;
      margin-top: 20rpx;
    }

    .activity-agenda-item {
      display: flex;
      align-items: flex-start;
      font-size: $fontSize2;
    }

    .activity-agenda-item-text {
      margin-left: 4rpx;
    }

    .activity-agenda-guest-title, .activity-agenda-guest-link {
      margin-top: 20rpx;
    }

    .activity-agenda-guest-link {
      .van-button {
        font-size: $fontSize0;
        font-weight: bold;
      }
    }
  }

  .activity-schedule {
    margin-top: 49rpx;
    color: #333333;

    .activity-schedule-title {
      font-size: $fontSize6;
      line-height: 38rpx;
    }

    .activity-schedule-desc {
      margin-top: 20rpx;
      font-size: $fontSize2;
      line-height: 40rpx;
    }

    .activity-schedule-image {
      margin-top: 35rpx;
    }
  }

  .table {
    margin-top: 30rpx;

    .iconfont {
      color: #6A91CE;
      font-size: $fontSize2;
    }

    .thead {
      .tr {
        & > view {
          padding: 4rpx 16rpx;
          color: #7D7D7D;
        }
      }
    }

    .tbody {
      .tr {
        & > view {
          padding: 16rpx;
          background-color: #FFFFFF;
        }
      }
    }

    .tr {
      display: flex;
      margin-bottom: 8rpx;
      font-size: $fontSize1;

      & > view:nth-child(1) {
        width: 40rpx;
        margin-right: 8rpx;
        padding: 16rpx 0;
        display: flex;
        justify-content: center;
      }

      & > view:nth-child(2) {
        width: 214rpx;
      }

      & > view:nth-child(3) {
        width: 214rpx;
      }

      & > view:nth-child(4) {
        flex: 1;
      }
    }
  }
}
</style>