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-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>
        <view class="activity-desc">
          <view class="activity-desc-title">{{ expand_content.active_title.value }}</view>
          <u-content class="activity-desc-text" :content="meetingInfo.content"></u-content>
        </view>
        <view class="activity-info-flag">
          <view class="iconfont icon-Exclamation-Circle-Large-1"></view>
        </view>
        <view class="activity-agenda">
          <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>
        <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">
            <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.speech_schedule">
                <view>
                  <view class="iconfont icon-CalendarAdd1"></view>
                </view>
                <view>{{ returnTimeFormatEvent(item.start_date,item.end_date) }}</view>
                <view>{{ item.title }}</view>
                <view>{{ item.description }}</view>
              </view>
            </view>
          </view>
          <!--          <view class="activity-schedule-image">
                      <image src="https://www.productronicachina.com.cn/resources/files/0812/66b9c058eb46a/TGV.jpg"
                             mode="aspectFit"/>
                    </view>-->
        </view>
        <view class="activity-operation">
          <view class="activity-views">浏览：{{ meetingInfo.total_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>
        <!-- <disclaimer-text></disclaimer-text> -->
      </view>
    </u-scroll-view>
    <contact-us :show.sync="showContactUs" :qrcode_url="q_url" />
    <float-button @custom-event="updateContactStatus()"></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} 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";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    DisclaimerText,
    UContent,
		floatButton,
		ContactUs
  },
  computed: {},
  data() {
    return {
      id: 0,
      favorited: true,
      meetingInfo: {},
      expand_content: {},
			showContactUs: false,
			q_url: ''
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getActiveInfo()
  },
  created() {

  },
  methods: {
    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() {
      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)
      })
    },
    onClickGuestLink() {
      this.navigateTo('/pages/activity/guest?id=' + this.id)
    },
		updateContactStatus(data) {
			this.showContactUs = data.showContactUs
			this.q_url = data.q_url
		}
  }
}
</script>

<style lang="scss">
.activity-detail {
  .activity-head {
    position: relative;
    font-weight: normal;
    font-size: $fontSize6;
    color: #333333;

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

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

  .activity-operation {
    @include display-flex-between;
    margin-top: 32rpx;
  }

  .activity-views {
    font-size: $fontSize2;
    color: #555555;
  }

  .activity-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 210rpx;
    font-size: $fontSize2;
    color: #555555;

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

    .iconfont {
      font-size: $fontSize2;
      margin-right: 4rpx;
    }

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

        color: $textActionColor;
      }
    }

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

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

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

    .activity-prop {
      display: flex;
      align-items: center;
    }

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

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

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

  .activity-desc {
    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 10rpx;
      }

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

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

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