mp_exhibitor_miniprog/pages/index/home.vue

<template>
  <page-layout class="home-container">
<!--    <u-loading :loading="loading"></u-loading>-->
    <nav-bar :show-title="false">
      <view class="top-container">
        <image class="logo" :src="logo" mode="aspectFit"/>
        <view class="countdown">
          距开幕
          <view class="days"> {{ time }}</view>
          天
        </view>
      </view>
    </nav-bar>
    <u-swiper :items="images" useComponentName='topSwiper' indicato-dots-style="morphing" :height="387"/>
    <view class="main-container">
      <u-search v-model="searchKeyword" placeholder="搜索关键词" @search="onClickSearch"/>
      <view class="nav-icons">
        <template v-for="(item, index) in navIcons">
          <view class="nav-icon-wrapper" :key="index" v-if="!item.is_hide">
            <view class="nav-icon" @click="onClickNavIcon(item)">
              <view v-if="item.icon.indexOf('.svg') !== -1" :style="'background-image:url(' + item.icon +  ')'"></view>
              <view v-else-if="item.icon.indexOf('icon-') !== -1" :class="'iconfont ' + item.icon"></view>
            </view>
            <view class="nav-text" :class="item.name ? 'show' : ''">
              {{ item.name }}
            </view>
          </view>
        </template>
      </view>
      <view class="panel-group panel-group-1">
<!--        <u-panel title="精彩视频" link="/pages/video/index">
          <u-swiper :items="videos" useComponentName="videoSwiper" :height="360" :autoplay="false" :border-radius="10"
                    :image-width="508" :image-height="286" next-margin="100rpx"/>
        </u-panel>-->
        <u-panel title="精彩图集"
                 link="https://www.productronicachina.com.cn/data-facts-impressions-impressions-videos">
          <u-swiper :items="albumPics" useComponentName="imageSwiper" :height="360" :border-radius="10"
                    :image-width="508" :image-height="286" next-margin="100rpx"/>
          <!-- <view class="album">
            <template v-for="(item, index) in albumPics">
              <view class="album-pic" :key="index" @click="onClickAlbum(index)">
                <image :src="String(item)" mode="aspectFill" />
              </view>
            </template>
          </view> -->
        </u-panel>
      </view>
      <view class="panel-group">
        <u-panel title="新闻" link="/pages/news/index">
          <news-recommend recommend-type="home" news-type="exhibition"/>
        </u-panel>
      </view>
      <view class="panel-group logo-group">
        <u-panel title="战略合作方" m-title="*排名不分先后" v-if="!part1_ishide">
          <u-swiper :items="part1" useComponentName="logoSwiper" image-mode="aspectFit" key="logoSwiper"
                    :autoplay="false" :height="getPartHeight(part1)">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope">
                  <view class="partner" :key="index" @tap="onLogoClick(item)">
                    <image mode="aspectFit" :src="item.url"/>
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel>
        <u-panel title="推荐展商" link="/pages/exhibitor/index" m-title="*排名不分先后" v-if="!part3_ishide">
          <u-swiper :items="part3" useComponentName="logoSwiper" image-mode="aspectFit" key="logoSwiper"
                    :autoplay="false" :height="getPartHeight(part3)">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope">
                  <view class="partner" :key="index" @tap="onLogoClick(item)">
                    <image mode="aspectFit" :src="item.url"/>
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel>
        <u-panel title="合作媒体" link="https://www.productronicachina.com.cn/partners" m-title="*排名不分先后"
                 v-if="!part2_ishide">
          <u-swiper :items="part2" key="logoSwiper2" image-mode="aspectFit" useComponentName="logoSwiper"
                    :autoplay="false" :height="getPartHeight(part2)">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope">
                  <view class="partner" :key="index" @tap="onLogoClick(item)">
                    <image mode="aspectFit" :src="item.url"/>
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel>
      </view>
    </view>
    <float-button></float-button>
    <van-overlay :show="isShow">
      <view class="ad-wrapper">
        <view class="img-btn-box">
          <view class="ad-space" v-if="adInfo && adInfo.ad_file" @tap="navigateToAdLink(adInfo.ad_link)">
            <image show-menu-by-longpress :src="adInfo.ad_file" mode="widthFix" class="ad-img"/>
          </view>
          <view class="home-ad-close" @click="closeAd()">
            <van-icon name="close"/>
          </view>
        </view>
      </view>
    </van-overlay>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import ULoading from '@/components/common/u-loading'
import USwiper from '@/components/common/u-swiper'
import USearch from '@/components/common/u-search'
import UPanel from '@/components/common/u-panel'
import NewsRecommend from '@/pages/news/components/news-recommend.vue'
import ContactUs from '@/pages/index/components/contact-us.vue'
import PopupAd from '@/pages/index/components/popup-ad.vue'
import floatButton from "@/components/layout/float-button"
import VanOverlay from '@/wxcomponents/vant/overlay/index'
import {
  getDashboardInfo,
  getAdInfo
} from '@/api'
import PageLayout from "@/components/layout/page-layout";
import {exhibitorsList} from "@/api/exhibitor";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    floatButton,
    NavBar,
    UScrollView,
    USwiper,
    USearch,
    UPanel,
    NewsRecommend,
    ContactUs,
    PopupAd,
    ULoading,
    VanOverlay
  },
  data() {
    return {
      loading: true,
      logo: '',
      searchKeyword: '',
      showPopupAd: false,
      navIcons: [{
        icon: 'icon-xiaochengxu-guanyuzhanhuiicon',
        name: '',
        is_hide: false,
        link: 'https://www.productronicachina.com.cn/zh-cn/productronica-china-2025'
      }, {
        icon: 'icon-xiaochengxu-zhanshangmingluicon',
        name: '',
        is_hide: false,
        link: '/pages/exhibitor/index'
      }, {
        icon: 'icon-zhanpinziliaoicon',
        name: '',
        is_hide: false,
        link: '/pages/exhibitor/exhibit'
      }, {
        icon: 'icon-zhantaihuodongicon',
        name: '',
        is_hide: false,
        link: '/pages/activity/index'
      }, {
        icon: 'icon-zhanshangxinwenicon',
        name: '',
        is_hide: false,
        link: '/pages/news/index?type=exhibitor'
      }, {
        icon: 'icon-xiaochengxu-zhanguanpingmiantuicon',
        name: '',
        is_hide: false,
        link: 'https://www.productronicachina.com.cn/for-visitors-fairgrounds-map'
      }, {
        icon: 'icon-xiaochengxu-guanzhongzhinanicon',
        name: '',
        is_hide: false,
        link: '/pages/files/index'
      }, {
        icon: 'icon-xiaochengxu-jiaotongzhinanicon',
        name: '',
        is_hide: false,
        link: 'https://www.productronicachina.com.cn/travel-stay-getting-there'
      }],
      images: [],
      videos: [],
      albumPics: [],
      // 合作方列表
      part1: [],
      part2: [],
      part3: [],
      part1_ishide: false,
      part2_ishide: false,
      part3_ishide: false,
      adInfo: {
        ad_file: ''
      },
      isShow: false,
      time: 160
    }
  },
  computed: {},
  created() {
    this.getDashboardData()
    this.getAdData()
    this.time = this.getCountdown(2025,3,27,0,0,0).days
  },
  mounted() {

  },
  methods: {
    getCountdown(targetYear, targetMonth, targetDay, targetHour = 0, targetMinute = 0, targetSecond = 0) {
      const targetDate = new Date(targetYear, targetMonth - 1, targetDay, targetHour, targetMinute, targetSecond);
      const now = new Date();
      const timeDifference = targetDate - now;

      if (timeDifference <= 0) {
        return {
          days: 0,
          hours: 0,
          minutes: 0,
          seconds: 0,
          finished: true
        };
      }

      const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

      return {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds,
        finished: false
      };
    },
    getPartHeight(part) {
      let height = 0
      if (part.length > 3) {
        height = 250
      } else if (part.length <= 3) {
        height = 120
      }
      return height
    },
    closeAd() {
      this.$store.commit('HIDE_AD')
      this.isShow = false
    },
    onClickNavIcon(item) {
      // this.navigateTo(item.link)
      if (item.link === '/pages/exhibitor/index') {
        this.$emit('switch-tab', 'exhibitor')
        this.$store.commit('SET_PAGE', 'exhibitor');
      } else if (item.link === '/pages/activity/index') {
        this.$emit('switch-tab', 'activity')
        this.$store.commit('SET_PAGE', 'activity');
      } else if (item.link === '/pages/exhibitor/exhibit') {
        this.$emit('switch-tab', 'product')
        this.$store.commit('SET_PAGE', 'product');
      } else {
        this.navigateTo(item.link)
      }
    },
    onClickSearch() {
      this.navigateTo('/pages/index/search?query=' + this.searchKeyword)
    },
    onClickAlbum(index) {
      const pics = this.albumPics.map(v => {
        return v
      })
      uni.previewImage({
        current: index,
        urls: pics
      })
    },
    getDashboardData() {
      this.loading = true
      getDashboardInfo('', process.env.CONFERENCE_WEBSITE).then(res => {
        this.logo = res.data.module0.url
        this.images = res.data.module1
        let module2 = res.data.module2
        for (var i = 0; i < module2.length; i++) {
          this.navIcons[i].name = module2[i].name
          this.navIcons[i].is_hide = module2[i].is_hide
        }
        this.videos = res.data.module3.video
        this.albumPics = res.data.module3.image
        this.part1 = res.data.module4.part1.logo
        this.part2 = res.data.module4.part2.logo
        this.part3 = res.data.module4.part3.logo
        this.part1_ishide = res.data.module4.part1.is_hide
        this.part2_ishide = res.data.module4.part2.is_hide
        this.part3_ishide = res.data.module4.part3.is_hide
        setTimeout(()=>{
          this.loading = false
        },1000)
      })
    },
    onLogoClick(item) {
      if (item.id) {
        this.navigateTo('/pages/exhibitor/detail?id=' + item.id)
      } else if (item.url) {
        this.navigateTo(item.href)
      }
    },
    getAdData() {
      getAdInfo({
        number: "IndexPopUp001"
      }).then(res => {
        this.adInfo = res.data[0]
        if (this.adInfo && this.adInfo.ad_file) {
          this.isShow = this.$store.state.app.adIsShow
        } else {
          this.isShow = false
        }
      })
    },
    navigateToAdLink(href) {
      this.navigateTo(href)
    }
    // onVisitClick() {
    // 	getBuoyInfo().then(res => {
    // 		let jump_url = res.data.visit_jump_url
    // 		this.navigateTo(jump_url)
    // 	})
    // },

  }
}
</script>

<style lang="scss">
.ad-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .img-btn-box {
    display: flex;
    justify-content: center;
    width: 600rpx;
    position: relative;

    .ad-space {
      width: 100%;

      .ad-img {
        width: 100%;
      }
    }
  }

  .home-ad-close {
    position: absolute;
    bottom: -118rpx;

    .van-icon-close {
      font-size: 68rpx;
      color: #FFFFFF;
      cursor: pointer;
    }
  }
}

.logo {
  width: 150rpx;
  height: 37rpx;
}

.panel-group {
  margin-top: 43rpx;
  background-color: #FFFFFF;

  &.logo-group {
    padding-bottom: 30rpx;
  }

  &.panel-group-1 {
    margin-top: 0;
  }
}

.top-container {
  display: flex;
  align-items: center;

  .countdown {
    display: flex;
    align-items: center;
    margin-left: 27rpx;
    font-size: $fontSize3;

    .days {
      color: #F97316;
      font-size: $fontSize6;
      font-weight: bold;
      padding: 0 4rpx;
    }
  }
}

.search-container {
  .search-input {
    height: 64rpx;
    border-radius: 50rpx;
    background-color: #FFFFFF;
    box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15);
    border: 2rpx solid #D9D9D9;
    padding: 4rpx;
    overflow: hidden;

    .van-field__placeholder {
      font-size: $fontSize2;
    }

    .van-cell__left-icon-wrap {
      height: 50rpx;
    }

    .van-field__control {
      font-size: $fontSize2;
      height: 50rpx;
    }
  }

  .van-search {
    --search-padding: 0rpx;
    --search-input-height: 34rpx;
    --search-background-color: #FFFFFF;
    padding-right: 24rpx;
    font-size: $fontSize2;
  }

  .search-text {
    font-size: $fontSize2;
  }

  .van-search__action {
    color: #333333;
  }

  .van-icon {
    color: #D4D4D6;
  }

  .van-cell {
    padding: 2rpx 0rpx 2rpx !important;
  }
}

.nav-icons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 53rpx;
  margin-top: 47rpx;
  margin-bottom: 41rpx;

  .nav-icon-wrapper {
    @include display-flex-center;
    flex-direction: column;
    cursor: pointer;
  }

  .nav-text {
    height: 20rpx;
    margin-top: 20rpx;
    font-size: $fontSize3;
    color: #555555;
    /*opacity: 0;
    transition: .1s ease-in-out;
    transform: translateY(10rpx);
    &.show {
      opacity: 1;
      transform: translateY(0);
    }*/
  }

  .nav-icon {
    @include display-flex-center;
    width: 73rpx;
    height: 73rpx;
    border-radius: 50%;
    overflow: hidden;
    background-color: $buttonPrimaryColor;

    .iconfont {
      font-size: 46rpx;
      color: #FFFFFF;
    }

    & > view {
      width: 46rpx;
      height: 46rpx;
      background-size: 46rpx 46rpx;
    }
  }
}

.album {
  display: grid;
  grid-auto-flow: row;
  grid-gap: 15rpx;
  height: 500rpx;
  width: fit-content;
  grid-template-areas: "a b b" "c d f" "c e f";

  .album-pic {
    width: 196rpx;
    height: 155rpx;
    border-radius: 10rpx;
    overflow: hidden;

    &:nth-child(1) {
      grid-area: a;
    }

    &:nth-child(2) {
      width: 418rpx;
      height: 155rpx;
      grid-area: b;
    }

    &:nth-child(3) {
      grid-area: c;
    }

    &:nth-child(4) {
      grid-area: d;
    }

    &:nth-child(5) {
      grid-area: e;
    }

    &:nth-child(6) {
      grid-area: f;
    }

    &:nth-child(3),
    &:nth-child(6) {
      width: 196rpx;
      height: 324rpx;
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 9rpx;
  grid-row-gap: 13rpx;

  .partner {
    @include display-flex-center;
    width: 100%;
    height: 120rpx;
    padding: 16rpx;
    border-radius: 5rpx;
    border: 1rpx solid #D9D9D9;
    overflow: hidden;
  }

  image {
    object-fit: contain;
  }
}
</style>