mp_exhibitor_miniprog/pages/activity/index.vue

<template>
  <page-layout class="activity-index">
    <nav-bar title="同期活动" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="true">
      <view class="main-container">
        <view class="activity-head">
          <view class="activity-head-title">同期活动</view>
          <view class="activity-head-desc">{{ meetingInfo.content }}</view>
          <view class="activity-head-image">
            <image fade-show :src="meetingInfo.img_url" mode="widthFix" style="width: 100%"></image>
          </view>
        </view>
        <van-empty v-if="activityList.length === 0" description="暂无数据"/>
        <view v-else class="activity-list">
          <template v-for="(item, index) in activityList">
            <activity-item :item="item" :key="index" platform="metting" @updateItemValue="updateItemValue()"/>
          </template>
        </view>
        <!-- <disclaimer-text></disclaimer-text> -->
      </view>
    </u-scroll-view>
    <float-button></float-button>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import ActivityItem from '@/pages/activity/components/activity-item.vue'
import DisclaimerText from '@/components/disclaimer-text/index.vue'
import {mettingList, getMeetingHeader} from '@/api/exhibitor'
import floatButton from "@/components/layout/float-button";
import PageLayout from "@/components/layout/page-layout";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    ActivityItem,
    DisclaimerText,
    floatButton  },
  data() {
    return {
      activityList: [],
      activityParams: {
        page: 1,
        page_size: 999,
        keyword: '',
      },
      activityListLoading: false,
      activityListLastPage: 1,
      mettingDesc: '',
      meetingInfo: {}
    }
  },
  created() {
    this.getMettingDesc()
    this.getList()
    uni.$on('refreshData', (val) => {
      if (val === 'activity') {
        this.getList()
      }
    })
  },
  methods: {
    getList() {
      this.showLoading()
      this.activityListLoading = true
      mettingList(this.activityParams).then(res => {
        if (res.data.data) {
          if (this.activityParams.page > 1) {
            this.activityList = [...this.activityList, ...res.data.data]
          } else {
            this.activityList = res.data.data
            this.activityListLastPage = res.data.last_page
          }
        } else {
          this.showToast('系统繁忙，稍候再试')
        }
        this.activityListLoading = false
        this.hideLoading()
      })
    },
    updateItemValue(e) {
      this.activityList.forEach((item) => {
        if (item.id === e.id) {
          item[e.key] = e.value
        }
      })
    },
    getMettingDesc() {
      getMeetingHeader().then(res => {
        this.meetingInfo = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.activity-head {
  color: #333333;

  .activity-head-title {
    font-weight: bold;
    font-size: $fontSize6;
    line-height: 49rpx;
  }

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

  .activity-favourites-text {
    white-space: nowrap;
  }
}

.activity-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 30rpx;
  margin-top: 40rpx;
  color: #333333;
}
</style>