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">{{ mettingDesc }}</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>
    <contact-us :show.sync="showContactUs" :qrcode_url="q_url"/>
    <float-button @custom-event="updateContactStatus()"></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, mettingDesc} 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,
    ActivityItem,
    DisclaimerText,
    floatButton,
    ContactUs
  },
  data() {
    return {
      activityList: [],
      activityParams: {
        page: 1,
        page_size: 10,
        keyword: '',
      },
      activityListLoading: false,
      activityListLastPage: 1,
      mettingDesc: '',
      showContactUs: false,
      q_url: '',
    }
  },
  created() {
    this.getMettingDesc()
    this.getList()
  },
  methods: {
    getList() {
      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
      })
    },
    updateItemValue(e) {
      this.activityList.forEach((item) => {
        if (item.id === e.id) {
          item[e.key] = e.value
        }
      })
    },
    getMettingDesc() {
      mettingDesc().then(res => {
        this.mettingDesc = res.data
      })
    },
    updateContactStatus(data) {
      this.showContactUs = data.showContactUs
      this.q_url = data.q_url
    }
  }
}
</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>