Bladeren bron

首页数据对接

xiaokuang 23 uur geleden
bovenliggende
commit
87f76e77fa
3 gewijzigde bestanden met toevoegingen van 168 en 137 verwijderingen
  1. 84 43
      components/common/u-swiper/index.vue
  2. 48 81
      pages/index/home.vue
  3. 36 13
      pages/news/components/news-recommend.vue

+ 84 - 43
components/common/u-swiper/index.vue

@@ -1,13 +1,22 @@
 <template>
 	<view class="swiper-container">
-		<swiper class="swiper" circular :indicator-dots="false" :circular="circular" :next-margin="nextMargin" :autoplay="autoplay" :interval="interval"
-					:duration="duration" :style="style" @change="onSwiperChange">
-			<template v-for="(item, index) in items">
+		<swiper class="swiper" circular :indicator-dots="false" :circular="circular" :next-margin="nextMargin"
+			:autoplay="autoplay" :interval="interval" :duration="duration" :style="style" @change="onSwiperChange">
+			<template v-for="(item, index) in logoList" v-if="useComponentName === 'logoSwiper' && loading">
+				<swiper-item :key="index">
+					<view class="image-wrapper">
+						<slot :scope="item"></slot>
+					</view>
+				</swiper-item>
+			</template>
+			<template v-for="(item, index) in items" v-if="useComponentName !== 'logoSwiper'">
 				<swiper-item :key="index">
 					<view class="image-wrapper" @tap="onImageClick(item)">
-						<image v-if="item.url" :mode="imageMode" :src="item.url" :style="imageStyle"/>
+						<image v-if="useComponentName === 'topSwiper'" :mode="imageMode" :src="item.url" :style="imageStyle" />
+						<image v-else-if="useComponentName === 'videoSwiper'" :mode="imageMode" :src="item.cover_url"
+							:style="imageStyle" />
 						<slot v-else :scope="item"></slot>
-						<view class="video-play" v-if="item.href && item.href.indexOf('.mp4') !== -1">
+						<view class="video-play" v-if="item.url && item.url.indexOf('.mp4') !== -1">
 							<view class="iconfont icon-playcircle"></view>
 						</view>
 					</view>
@@ -15,26 +24,23 @@
 			</template>
 		</swiper>
 		<!-- 自定义指示点 -->
-		<view v-if="indicatorDots" class="custom-indicator" :class="{ 'morphing': indicatoDotsStyle === 'morphing' }">
-			<view
-				v-for="(item, index) in items"
-				:key="index"
-				class="dot"
-				:class="{ 'active': current === index }"
-			></view>
+		<view v-if="indicatorDots && useComponentName === 'logoSwiper'" class="custom-indicator" :class="{ 'morphing': indicatoDotsStyle === 'morphing' }">
+			<view v-for="(item, index) in logoList" :key="index" class="dot" :class="{ 'active': current === index }"></view>
+		</view>
+		<view v-if="indicatorDots && useComponentName !== 'logoSwiper'" class="custom-indicator" :class="{ 'morphing': indicatoDotsStyle === 'morphing' }">
+			<view v-for="(item, index) in items" :key="index" class="dot" :class="{ 'active': current === index }"></view>
 		</view>
 		<van-overlay :show="showOverlay" @tap="onClickHideOverlay">
-		  <view class="overlay-wrapper">
+			<view class="overlay-wrapper">
 				<video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
-		  </view>
+			</view>
 		</van-overlay>
 	</view>
 </template>
 
 <script>
-	
 	import VanOverlay from '@/wxcomponents/vant/overlay/index'
-	
+
 	export default {
 		options: {
 			styleIsolation: 'shared'
@@ -44,6 +50,10 @@
 		},
 		props: {
 			items: Array,
+			useComponentName: {
+				type: String,
+				default: ''
+			},
 			borderRadius: {
 				type: Number
 			},
@@ -107,18 +117,25 @@
 				return style
 			}
 		},
-		watch: {
-		},
+		watch: {},
 		data() {
 			return {
 				showOverlay: false,
 				videoUrl: '',
-				current: 0
+				current: 0,
+				logoPage: 1,
+				loading: false,
+				logoList: []
 			}
 		},
-		created() {
+		created() {},
+		beforeDestroy() {
+			this.logoList = []
 		},
 		mounted() {
+			if (this.useComponentName === 'logoSwiper') {
+				this.getLogoPage()
+			}
 		},
 		methods: {
 			onClickHideOverlay() {
@@ -128,14 +145,26 @@
 				this.current = e.detail.current
 			},
 			onImageClick(item) {
-				if (item.href) {
-					if (item.href.indexOf('.mp4') !== -1) {
-						this.videoUrl = item.href
+				if (item.url) {
+					if (item.url.indexOf('.mp4') !== -1) {
+						this.videoUrl = item.url
 						this.showOverlay = true
 					} else {
 						this.navigateTo(item.href)
 					}
 				}
+			},
+			getLogoPage() {
+				this.logoPage = Math.floor(this.items.length / 8 - 0.000000000001)
+				for(let i=0; i<=this.logoPage; i++) {
+					let starPage = i*8
+					let lastPage = (starPage + 7)<this.items.length-1 ? (starPage + 7) : this.items.length-1
+					this.logoList[i] = []
+					for(let k=starPage; k<=lastPage; k++) {
+						this.logoList[i].push(this.items[k])
+					}
+				}
+				this.loading = true
 			}
 		}
 	}
@@ -143,7 +172,8 @@
 <style lang="scss" scoped>
 	.image-wrapper {
 		position: relative;
-		.video-play{
+
+		.video-play {
 			@include display-flex-center;
 			position: absolute;
 			top: 0;
@@ -156,52 +186,63 @@
 			margin: auto;
 			background-color: rgba(229, 117, 25, 0.5);
 			z-index: 1;
-			.iconfont{
+
+			.iconfont {
 				color: #FFFFFF;
 				font-size: 62rpx;
 			}
 		}
-		image{
+
+		image {
 			width: 100%;
 		}
 	}
-	.overlay-wrapper{
+
+	.overlay-wrapper {
 		@include display-flex-center;
 		height: 100%;
-		video{
+
+		video {
 			width: 100%;
 		}
 	}
-	.swiper-container{
+
+	.swiper-container {
 		position: relative;
 	}
+
 	/* 自定义指示点样式 */
 	.custom-indicator {
 		position: absolute;
 		bottom: 24rpx;
 		width: 100%;
-	  display: flex;
-	  justify-content: center;
-	  margin-top: 10rpx;
+		display: flex;
+		justify-content: center;
+		margin-top: 10rpx;
+
 		&.morphing {
-			.dot{
+			.dot {
 				margin: 0 5rpx;
 			}
-			.dot.active{
-				 width: 26rpx;
-				 border-radius: 8rpx;
-				 background-color: white;
+
+			.dot.active {
+				width: 26rpx;
+				border-radius: 8rpx;
+				background-color: white;
 			}
 		}
 	}
+
 	.dot {
-	  width: 12rpx;
-	  height: 12rpx;
-	  border-radius: 50%;
-	  background-color: #D9D9D9;
-	  margin: 0 2.5rpx;
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		background-color: #D9D9D9;
+		margin: 0 2.5rpx;
+
 		&.active {
-		  background-color: $buttonPrimaryColor; /* 当前激活的指示点颜色 */
+			background-color: $buttonPrimaryColor;
+			/* 当前激活的指示点颜色 */
 		}
 	}
 </style>

+ 48 - 81
pages/index/home.vue

@@ -2,21 +2,20 @@
 	<view class="content">
 		<nav-bar :show-title="false">
 			<view class="top-container">
-				<image class="logo" src="/static/img/logo.png" />
+				<image class="logo" :src="logo" />
 				<view class="countdown">
 					距开幕 <view class="days"> 168 </view> 天
 				</view>
 			</view>
 		</nav-bar>
-		<u-swiper :items="images" indicato-dots-style="morphing" :height="387" />
+		<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">
+					<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-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">
@@ -27,14 +26,14 @@
 			</view>
 			<view class="panel-group panel-group-1">
 				<u-panel title="精彩视频" link="https://www.productronicachina.com.cn/for-journalists-impression-videos">
-					<u-swiper :items="videos" :height="360" :autoplay="false" :border-radius="10" :image-width="508"
+					<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/for-journalists-impression-videos">
 					<view class="album">
 						<template v-for="(item, index) in albumPics">
 							<view class="album-pic" :key="index" @click="onClickAlbum(index)">
-								<image :src="item.src" mode="aspectFill" />
+								<image :src="String(item)" mode="aspectFill" />
 							</view>
 						</template>
 					</view>
@@ -47,19 +46,19 @@
 			</view>
 			<view class="panel-group">
 				<u-panel title="战略合作方" link="https://www.productronicachina.com.cn/partners">
-					<u-swiper :items="partners" :height="250">
+					<u-swiper :items.sync="part1" useComponentName="logoSwiper" :autoplay="false" :height="250">
 						<template v-slot="{ scope }">
 							<view class="partners">
-								<template v-for="(item, index) in scope.children">
+								<template v-for="(item, index) in scope">
 									<view class="partner" :key="index">
-										<image :src="item.icon" />
+										<image :src="item.url" />
 									</view>
 								</template>
 							</view>
 						</template>
 					</u-swiper>
 				</u-panel>
-				<u-panel title="推荐展商" link="https://www.productronicachina.com.cn/partners">
+				<!-- <u-panel title="推荐展商" link="https://www.productronicachina.com.cn/partners">
 					<u-swiper :items="partners" :height="250">
 						<template v-slot="{ scope }">
 							<view class="partners">
@@ -71,19 +70,19 @@
 							</view>
 						</template>
 					</u-swiper>
-				</u-panel>
+				</u-panel> -->
 				<u-panel title="合作媒体" link="https://www.productronicachina.com.cn/partners">
-					<u-swiper :items="partners" :autoplay="false" :height="250">
+					<u-swiper :items="part2" useComponentName="logoSwiper" :autoplay="false" :height="250">
 						<template v-slot="{ scope }">
 							<view class="partners">
-								<template v-for="(item, index) in scope.children">
+								<template v-for="(item, index) in scope">
 									<view class="partner" :key="index">
-										<image :src="item.icon" />
+										<image :src="item.url" />
 									</view>
 								</template>
 							</view>
 						</template>
-					</u-swiper>
+					</u-swiper>	
 				</u-panel>
 			</view>
 		</view>
@@ -111,7 +110,9 @@
 	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 { getDashboardInfo } from '@/api/index'
+	import {
+		getDashboardInfo
+	} from '@/api/index'
 
 	export default {
 		options: {
@@ -129,103 +130,58 @@
 		},
 		data() {
 			return {
+				logo: '',
 				searchKeyword: '',
 				showContactUs: false,
 				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: ''
 				}, {
 					icon: 'icon-xiaochengxu-jiaotongzhinanicon',
 					name: '交通指南',
+					is_hide: false,
 					link: 'https://www.productronicachina.com.cn/travel-stay-getting-there'
 				}],
 				images: [],
-				videos: [{
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
-					url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da5a8add02.jpeg?x-oss-process=image/resize,w_500',
-					url: 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com/common/2023/1113/655190052f376.mp4'
-				}],
-				albumPics: [{
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0387b5.jpeg?x-oss-process=image/resize,w_200'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d081488.jpeg?x-oss-process=image/resize,w_200'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d0dd2a1.jpeg?x-oss-process=image/resize,w_200'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d13e734.jpeg?x-oss-process=image/resize,w_200'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d1a47e6.jpeg?x-oss-process=image/resize,w_200'
-				}, {
-					src: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da4d214927.jpeg?x-oss-process=image/resize,w_200'
-				}],
+				videos: [],
+				albumPics: [],
 				// 合作方列表
-				partners: [{
-					name: '第一页',
-					children: [{
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
-					}]
-				}, {
-					name: '第二页',
-					children: [{
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a454718d/1 中国工控网.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b806511810/2 智汇工业.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a4536d7e/4 SMT China&化合物半导体.png'
-					}, {
-						icon: 'https://www.productronicachina.com.cn/resources/files/0626/667b7a451f071/3 中国电子制造&亚洲控制.png'
-					}]
-				}],
+				part1: [],
+				part2: [],
+				part3: []
 			}
 		},
 		created() {
@@ -244,7 +200,7 @@
 			},
 			onClickAlbum(index) {
 				const pics = this.albumPics.map(v => {
-					return v.src
+					return v
 				})
 				uni.previewImage({
 					current: index,
@@ -252,9 +208,18 @@
 				})
 			},
 			getDashboardData() {
-				getDashboardInfo('',process.env.CONFERENCE_WEBSITE).then(res => {
-					console.log(res.data.module1)
+				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
 				})
 			}
 		}
@@ -447,11 +412,13 @@
 			@include display-flex-center;
 			width: 150rpx;
 			height: 91rpx;
+			border-radius: 5rpx;
+			border: 1rpx solid #D9D9D9;
+			overflow: hidden;
 		}
 
 		image {
-			width: 127rpx;
-			height: 25rpx;
+			object-fit: contain;
 		}
 	}
 

+ 36 - 13
pages/news/components/news-recommend.vue

@@ -14,7 +14,7 @@
 <script>
 	import UTabs from '@/components/common/u-tabs'
 	import NewsItem from '@/pages/news/components/news-item.vue'
-	import { exhibitorsNewsList } from '@/api/exhibitor'
+	import { exhibitorsNewsList, newsList } from '@/api/exhibitor'
 	
 	export default {
 		components: {
@@ -29,11 +29,8 @@
 				default: 'home'
 			}
 		},
-		watch: {
-			exhibitorId(val) {
-				this.newsListParams.exhibitors_id = val
-				this.getNewsList()
-			}
+		mounted() {
+			this.getNewsList()
 		},
 		data() {
 			return {
@@ -49,7 +46,7 @@
 				newsListParams: {
 					page: 1,
 					page_size: 4,
-					exhibitors_id: 0
+					keyword: ''
 				},
 				newsListLoading: false
 			}
@@ -60,24 +57,50 @@
 			}
 		},
 		methods: {
-			getNewsList() {
-				if (this.newsListLoading === true) {
-					return
+			getList() {
+				if (this.tabActive === 'exhibitor') {
+					this.getExhibitorsNewsList()
 				}
+				if (this.tabActive === 'exhibition') {
+					this.getNewsList()
+				}
+			},
+			getNewsList() {
+				this.newsListLoading = true
+				newsList(this.newsListParams).then(res => {
+					if (res.data.data) {
+						if (this.newsListParams.page > 1) {
+							this.newsList = [...this.newsList, ...res.data.data]
+						} else {
+							this.newsList = res.data.data
+							this.newsListLastPage = res.data.last_page
+						}
+					} else {
+						this.showToast('系统繁忙,稍候再试')
+					}
+					this.newsListLoading = false
+				})
+			},
+			getExhibitorsNewsList() {
 				this.newsListLoading = true
 				exhibitorsNewsList(this.newsListParams).then(res => {
-					if (res.code === 0) {
+					if (res.data.data) {
 						if (this.newsListParams.page > 1) {
 							this.newsList = [...this.newsList, ...res.data.data]
 						} else {
 							this.newsList = res.data.data
+							this.newsListLastPage = res.data.last_page
 						}
+					} else {
+						this.showToast('系统繁忙,稍候再试')
 					}
 					this.newsListLoading = false
 				})
 			},
-			tabChange() {
-				
+			tabChange(e) {
+				this.tabActive = e.detail.value
+				this.newsListParams.page = 1
+				this.getList()
 			}
 		}
 	}