mp_exhibitor_miniprog/pages/activity/guest.vue

<template>
  <page-layout class="guest-detail">
    <nav-bar title="演讲嘉宾" @init="onInitNavbar"></nav-bar>
    <u-scroll-view>
      <view class="main-container" :class="{'loading':!init,'loaded':init}">
        <view class="activity-head">
          <view class="activity-title">{{ meetingInfo['title'] }}</view>
          <view class="activity-time">
            {{ meetingInfo['time'] }} | {{ meetingInfo['address'] }}
          </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-guest-list">
          <template v-for="(item, index) in meetingInfo['speech_schedule']">
            <template
                v-if="item['expand_content'] && item['expand_content']['schedule'] && item['expand_content']['schedule']['value']">
              <view class="activity-guest-item">
                <view class="activity-guest-title-1">演讲嘉宾</view>
                <view class="activity-guest"  v-for="(speaker_item,child_index) in item['expand_content']['schedule']['value']"
                      :key="child_index">
                  <view class="activity-guest-avatar">
                    <image :src="speaker_item[0]['value']" :alt="speaker_item[0]['alt']" mode="aspectFill"/>
                  </view>
                  <view class="activity-guest-info">
                    <view class="activity-guest-name">{{ speaker_item[1]['value'] }}</view>
                    <view class="activity-guest-alias">{{ speaker_item[2]['value'] }}</view>
                    <van-collapse :value="activeIndex" @change="(e) => onGuestCollapseChange(e, index,child_index)">
                      <van-collapse-item :title="speaker_item[3]['value']" :name="index + '-' + child_index">
                        <text>
                          {{ speaker_item[3]['value'] }}
                        </text>
                      </van-collapse-item>
                    </van-collapse>
                  </view>
                </view>
                <view class="activity-guest-title-2">演讲时间与主题</view>
                <view class="activity-guest-time">
                  {{item.time}}
                </view>
                <van-collapse class="subject-collapse" :value="item.active"  @change="(e) => onSubjectCollapseChange(e, index)">
                  <van-collapse-item :title="item.description" :name="item.title">
                    <text class="description">{{item.description}}</text>
                  </van-collapse-item>
                </van-collapse>
              </view>
            </template>
          </template>
        </view>
        <view class="activity-operation">
<!--          <view class="activity-views"></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>
    </u-scroll-view>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import VanCollapse from '@/wxcomponents/vant/collapse/index'
import VanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
import PageLayout from "@/components/layout/page-layout";
import {getMeetingInfo} from "@/api/meeting";
import {returnTimeFormat} from "@/utils";
import {meetingCancelCollect, meetingCollect} from "@/api/exhibitor";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    VanCollapse,
    VanCollapseItem
  },
  computed: {},
  onLoad(options) {
    this.id = options.id
    this.getActiveInfo()
  },
  data() {
    return {
      init: false,
      id: 0,
      favorited: true,
      activeIndex: '',
      guests: [{
        subjectCollapse: [],
        descCollapse: []
      }, {
        subjectCollapse: [],
        descCollapse: []
      }, {
        subjectCollapse: [],
        descCollapse: []
      }],
      meetingInfo: {},
      expand_content: {},
      shareInfo: {}
    }
  },
  created() {
  },
  methods: {
    onShareAppMessage: function () {
      return this.shareInfo
    },
    onShareTimeline() {
      return this.shareInfo
    },
    onCollect(item) { // 收藏
      if (!this.checkAuth('/pages/activity/guest?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
          }
        })
      }
    },
    getActiveInfo() {
      this.showLoading()
      getMeetingInfo({id: this.id}).then(res => {
        this.meetingInfo = res.data
        this.meetingInfo.time = returnTimeFormat(res.data.start_date, res.data.end_date)
        if (this.meetingInfo.speech_schedule) {
          this.meetingInfo.speech_schedule.sort((a, b) => {
            // 将日期字符串转换为时间戳（兼容 ISO 格式）
            const timeA = new Date(a.start_date.replace(' ', 'T')).getTime();
            const timeB = new Date(b.start_date.replace(' ', 'T')).getTime();
            return timeA - timeB;
          });
        }
        this.expand_content = res.data.expand_content
        this.meetingInfo.speech_schedule.forEach(item=>{
          item.active = []
          item.time = returnTimeFormat(item.start_date, item.end_date)
          item['expand_content']['schedule']['value'].forEach(child_item=>{
            child_item.active = []
          })
        })
        this.shareInfo = {
          title: this.meetingInfo.title,
          path: '/pages/activity/detail?id='+this.id,
          imageUrl: this.meetingInfo.image_url
        }
        this.hideLoading()
        setTimeout(()=>{
          this.init = true
        },500)
        // this.meetingInfo.content = convertRichTextToWXML(res.data.content)
      })
    },
    onSubjectCollapseChange(activeNames, index) {
      this.meetingInfo['speech_schedule'][index].active = activeNames
      this.$forceUpdate()

    },
    onGuestCollapseChange(activeNames, index,child_index) {
      this.activeIndex = activeNames
    }
  }
}
</script>

<style lang="scss">
.main-container {
  transition: .1s ease-in-out;
  &.loading {
    opacity: 0;
  }
  &.loaded {
    opacity: 1;
  }
}
.guest-detail {
  .van-collapse-item__content {
    padding-top: 0 !important;
  }
  .activity-head {
    position: relative;
    font-weight: normal;
    font-size: $fontSize6;
    color: #333333;

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

    .activity-time {
      margin-top: 25rpx;
      font-size: $fontSize2;
    }

    .activity-action {
      /*position: absolute;
      bottom: 0;
      right: 0;*/
      margin-left: auto;
      margin-top: 10rpx;
    }
  }

  .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 {
    font-size: $fontSize2;
    color: #555555;
  }

  .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-guest-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 41rpx;
    margin-top: 30rpx;
  }

  .activity-guest-item {
    padding: 27rpx 18rpx;
    background-color: #FFFFFF;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 10rpx;

    .van-hairline--top-bottom:after {
      opacity: 0;
    }

    .van-cell {
      padding: 0;
      line-height: inherit;
      background-color: transparent;

      &:after {
        content: unset;
      }
    }

    .van-cell {

    }

    .van-collapse {
      margin-top: 35rpx;
    }
    .van-collapse-item__title--expanded .van-cell__title {
      visibility: hidden;
    }
    .subject-collapse {
      .description {
        line-height: 1.6;
      }
      .van-collapse-item {
        border-radius: 6px;
        border: 1px solid #E3E9F1;
        position: relative;
      }
      .van-collapse-item__title--expanded {
        &:before {
          content:'';
          width: 100%;
          height: 100%;
          border: 4px solid rgba(232,116,0,0.34);
          position: absolute;
          border-radius: 6rpx;
          left: -8rpx;
          top: -8rpx;
        }

      }
    }
    .van-icon-arrow {
      font-size: $fontSize2;
    }



    .van-collapse-item__content {
      padding: 0;
      font-size: $fontSize2;
      background-color: transparent;
    }

    .van-cell__left-icon-wrap, .van-cell__right-icon-wrap {
      height: auto;
    }

    .van-cell__title {
      width: 0;
      background-color: transparent;
      font-size: $fontSize2;
      color: #333333;
      @include text-ellipsis;
    }
  }

  .subject-collapse {
    border-radius: 6rpx;
    background-color: #FFFFFF;

    &.van-collapse-expanded {
      .van-collapse {
        border-color: rgba(232, 116, 0, 0.34);
      }

      .van-cell {
        border: 1rpx dotted rgba(0, 0, 0, 0.15);
      }
    }

    .van-collapse {
      border: 4rpx solid #FFFFFF;
    }

    .van-collapse-item__title--expanded {
      .van-cell__title {
        color: #E87400;
        font-weight: bold;
        visibility: visible;
      }

      .van-icon-arrow {
        color: #E87400;
      }
    }

    .van-cell {
      padding: 31rpx 28rpx;
    }

    .van-cell__title {
      font-size: $fontSize3;
    }

    .van-collapse-item__content {
      font-size: $fontSize2;
      color: #535353;
      line-height: 30rpx;
      padding: 31rpx 28rpx 23rpx 28rpx;
    }
  }

  .activity-guest-title-1, .activity-guest-title-2 {
    font-size: $fontSize4;
    font-weight: bold;
    color: #323232;
  }

  .activity-guest-title-2 {
    margin-top: 39rpx;
  }

  .activity-guest-time {
    margin-top: 20rpx;
    font-size: $fontSize2;
    color: #333333;
  }

  .activity-guest {
    display: flex;
    background-color: #F6F6F6;
    border-radius: 10rpx;
    margin-top: 23rpx;
    padding: 28rpx;

    .activity-guest-info {
      flex: 1;

    }

    .activity-guest-name {
      font-weight: bold;
      font-size: $fontSize3;
      color: #333333;
      line-height: 35rpx;
    }

    .activity-guest-alias {
      margin-top: 8rpx;
      font-size: $fontSize1;
      color: #7D7D7D;
      line-height: 24rpx;
      letter-spacing: 2rpx;
    }

    .activity-guest-avatar {
      width: 96rpx;
      height: 96rpx;
      margin-right: 32rpx;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
  }
}
</style>