mp_exhibitor_miniprog/pages/index/home.vue

<template>
  <page-layout>
    <nav-bar :show-title="false">
      <view class="top-container">
        <image class="logo" :src="logo"/>
        <view class="countdown">
          距开幕
          <view class="days"> 168</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">
              {{ 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="战略合作方">
          <u-swiper :items="part1" useComponentName="logoSwiper" key="logoSwiper" :autoplay="false" :height="250">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope">
                  <view class="partner" :key="index" @tap="onLogoClick(item)">
                    <image :src="item.url"/>
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel>
        <!-- <u-panel title="推荐展商" link="https://www.productronicachina.com.cn/partners">
          <u-swiper :items="partners" :height="250">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope.children">
                  <view class="partner" :key="index">
                    <image :src="item.icon" />
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel> -->
        <u-panel title="合作媒体" link="https://www.productronicachina.com.cn/partners">
          <u-swiper :items="part2" key="logoSwiper2" useComponentName="logoSwiper" :autoplay="false" :height="250">
            <template v-slot="{ scope }">
              <view class="partners">
                <template v-for="(item, index) in scope">
                  <view class="partner" :key="index" @tap="onLogoClick(item)">
                    <image :src="item.url"/>
                  </view>
                </template>
              </view>
            </template>
          </u-swiper>
        </u-panel>
      </view>
    </view>
    <contact-us :show.sync="showContactUs" :qrcode_url="q_url"/>
		<float-button @custom-event="updateContactStatus()"></float-button>
		<van-overlay :show="isShow">
			<view class="ad-wrapper">
				<view class="img-btn-box">
					<view class="ad-space" @tap="navigateToAdLink(adInfo.ad_link)">
						<image :src="adInfo.ad_file" mode="widthFix" class="ad-img" />
					</view>
					<view class="home-ad-close" @click="isShow = false">
						<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 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";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			PageLayout,
			floatButton,
			NavBar,
			UScrollView,
			USwiper,
			USearch,
			UPanel,
			NewsRecommend,
			ContactUs,
			PopupAd,
			VanOverlay
		},
		data() {
			return {
				navType: '',
				logo: '',
				searchKeyword: '',
				showContactUs: false,
				showPopupAd: false,
				q_url: '',
				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: ''
				}, {
					icon: 'icon-xiaochengxu-jiaotongzhinanicon',
					name: '交通指南',
					is_hide: false,
					link: 'https://www.productronicachina.com.cn/travel-stay-getting-there'
				}],
				images: [],
				videos: [],
				albumPics: [],
				// 合作方列表
				part1: [],
				part2: [],
				part3: [],
				isShow: true,
				adInfo: {
					ad_file: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200'
				}
			}
		},
		created() {
			this.getDashboardData()
			this.getAdData()
		},
		mounted() {
		    this.getSystemInfo(this,(res)=>{
		      this.navType = res
		    })
		  },
		methods: {
			onClickNavIcon(item) {
				if (item.link === '/pages/exhibitor/index') {
					this.$emit('switch-tab', 'exhibitor')
					return
				} 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() {
				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
				})
			},
			onLogoClick(item) {
				if (item.url) {
					this.navigateTo(item.href)
				}
			},
			updateContactStatus(data) {
				this.showContactUs = data.showContactUs
				this.q_url = data.q_url
			},
			getAdData() {
				getAdInfo({
					number: "IndexPopUp001"
				}).then(res => {
					this.adInfo = res.data[0]
				})
			},
			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: 500rpx;
			position: relative;

			.ad-space {
				width: 100%;

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

		.home-ad-close{
			position: absolute;
			top: -70rpx;
			right: -70rpx;
			.van-icon-close{
				font-size: 60rpx;
				color: #FFFFFF;
				cursor: pointer;
			}
		}
	}

	.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;
			}
		}
	}
  .countdown {
    display: flex;
    align-items: center;
    margin-left: 27rpx;
    font-size: $fontSize3;

	.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 {
			margin-top: 20rpx;
			font-size: $fontSize3;
			color: #555555;
		}

		.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;
			border-radius: 5rpx;
			border: 1rpx solid #D9D9D9;
			overflow: hidden;
		}

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