kaoshi/addons/exam/uniapp/pages/index/index.vue

<template>
	<view>
		<!-- 骨架屏 -->
		<kz-skeleton v-if="showSkeleton" :showSkeleton="showSkeleton" backgroundColor="#fafafa" borderRadius="10rpx"></kz-skeleton>
		
		<!-- 添加小程序提示组件 -->
		<!-- #ifdef MP-WEIXIN -->
		<add-tip :tip="focusOnTip" :duration="1" />
		<!-- #endif -->
		
		<!-- banner -->
		<view class="tn-margin"><!-- :style="{paddingTop: vuex_custom_bar_height + 'px'}" -->
			<tn-swiper :list="banners" :height="350" :effect3d="false" mode="dot"></tn-swiper>
		</view>
		
		<!-- 公告 -->
		<view class="tui-rolling-news" v-if="headlines">
			<tui-icon name="news-fill" :size='22' color='#5677fc' class="margin-right-xs"></tui-icon>
			<swiper vertical autoplay circular interval="3000" class="tui-swiper">
				<swiper-item v-for="(notice,index) in notices" :key="index" class="tui-swiper-item" @click="clickNotice(notice.id)">
					<view class="tui-news-item">{{notice.name}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 首页简约风格组件 -->
		<kz-page-index-simple :banners="banners" v-if="pageStyle == 'simple'"></kz-page-index-simple>
		
		<!-- 首页多彩列表风格组件 -->
		<kz-page-index-color :banners="banners" :papers="papers" :rooms="rooms" v-else-if="pageStyle == 'color'"></kz-page-index-color>
		
		<!-- 悬浮组件 -->
		<tui-scroll-top :scrollTop="scrollTop" :isIndex="false" :isHideAd="showAdBtn" :isShare="showShareBtn" :customShare="false" @hideAd="() => {showAd = !showAd}" @goNotice="goNoticeList"></tui-scroll-top>
		
		<!-- 流量主组件 -->
		<!-- #ifdef MP-WEIXIN -->
		<view v-show="showAd">
			<kz-ad ref="adIndex" kind="BANNER" :config="ad" field="index_banner"></kz-ad>
			<kz-ad ref="adIndex" kind="VIDEO" :config="ad" field="index_video"></kz-ad>
			<kz-ad ref="adIndex" kind="VIDEO_PATCH" :config="ad" field="index_video_patch"></kz-ad>
		</view>
		<!-- #endif -->
		
		<!-- 登录组件 -->
		<login ref="login"></login>
		
		<!-- 底部导航栏组件 -->
		<tabbar :theme="tabbarStyle"></tabbar>
		
		<view class="margin-bottom-xl">
			<tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
		</view>
	</view>
</template>

<script>
	// import HeadLine from '@/components/headline/headline.vue'
	import AddTip from '@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';

	var interstitialAd = null;

	export default {
		components: {
			// HeadLine,
			AddTip
		},
		data() {
			return {
				focusOnTip: '点击「添加小程序」，下次访问更便捷',
				imgUrl: this.imgUrl,
				banners: [],
				system: null,
				ad: null,
				showAd: true,
				showSkeleton: true,
				headlines: [],
				notices: [],
				scrollTop: 0,
				showAdBtn: false,
				showShareBtn: false,
				hideTop: false,
				pageStyle: 'color',
				papers: [],
				rooms: [],
				tabbarStyle: '',
			}
		},
		onLoad(e) {
			this.getSetting()
		},
		onPageScroll(e) {
			if (!this.hideTop) {
				this.scrollTop = e.scrollTop;
			}
		},
		methods: {
			getSetting() {
				this.http('common/index', '', 'get').then(res => {
					if (!res.code) {
						uni.showToast({
							title: '获取数据失败，请刷新重试',
							icon: 'error'
						})
						return
					}

					// 公告
					this.headlines = res.data.notice
					this.notices = res.data.notices
					// 考卷
					this.papers = res.data.papers
					// 考场
					this.rooms = res.data.rooms

					// 系统配置数据
					let system = res.data.system
					if (system) {
						this.system = system
						uni.setStorageSync('system', system)
						
						// 轮播图
						if (system.banner) {
							let banners = []
							for (var image of (system.banner.split(','))) {
								banners.push({
									image: this.imgUrl + image
								})
							}
							this.banners = banners
							console.log('banners', this.banners)
							
							// 延迟加载：v-if导致组件未完全渲染
							// setTimeout(() => {
							// 	this.banners = system.banner.split(',')
							// 	console.log('banners', this.banners)
							// }, 200)
						}
					}
					
					// 页面配置数据
					let page = res.data.page
					if (page) {
						this.page = page
						uni.setStorageSync('page', page)
						
						// 页面风格
						this.pageStyle = 'color'
						// this.pageStyle = page.page_index_style ? page.page_index_style : 'simple'
						// 底部栏风格
						this.tabbarStyle = page.page_tabbar_style ? page.page_tabbar_style : 'simple'
						// 悬浮按钮
						this.showAdBtn = parseInt(page.page_index_ad_btn) == 1
						this.showShareBtn = parseInt(page.page_index_share_btn) == 1
					}

					// #ifdef MP-WEIXIN
					// 流量主数据
					let ad = res.data.ad;
					if (ad) {
						this.ad = ad
						uni.setStorageSync('ad', ad);

						// 插屏广告
						if (this.ad.index_cp_open == 1) {
							this.adUtils.interstitial.load(this.ad.index_cp)
							this.adUtils.interstitial.show()
						}

						// // 激励广告
						// this.adUtils.rewarded.load('adunit-69d6a49d4c5999c5', () => {
						//       //这里写你的任意奖励事件
						// });
						// this.adUtils.rewarded.show();
					}
					// #endif

					// 隐藏骨架屏
					this.showSkeleton = false
					this.$forceUpdate()
				})
			},
			
			// 点击悬浮按钮
			clickFabItem(e) {
				console.log('clickFabItem', e)
			},
			
			// 跳转公告列表
			goNoticeList() {
				this.utils.goto('notice-list')
			},
			
			// 点击公告，跳转公告详情
			clickNotice(id) {
				this.utils.goto('notice-detail?id=' + id)
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40 upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 30 upx;
		border-radius: 12 upx;
		width: 45%;
		margin: 0 2.5% 40 upx;
		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10 upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4 upx 4 upx 6 upx rgba(94, 185, 94, 0.4);
	}

	.nav-title {
		font-size: 32 upx;
		font-weight: 300;
	}

	.nav-title::first-letter {
		font-size: 40 upx;
		margin-right: 4 upx;
	}

	.nav-name {
		font-size: 28 upx;
		text-transform: Capitalize;
		margin-top: 20 upx;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40 upx;
		height: 6 upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100 upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40 upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36 upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30 upx;
		top: 30 upx;
		font-size: 52 upx;
		width: 60 upx;
		height: 60 upx;
		text-align: center;
		line-height: 60 upx;
	}

	.text-light {
		font-weight: 300;
	}

	@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40 upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40 upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	/*banner*/

	.tui-banner-box {
		width: 100%;
		padding-top: 20rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 320rpx;
	}

	.tui-banner-item {
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-slide-image {
		width: 100%;
		height: 320rpx;
		display: block;
		border-radius: 12rpx;
		/* transition: all 0.1s linear; */
	}

	.tui-banner-scale {
		transform: scaleY(0.9);
		transform-origin: center center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */
	/*banner*/
	
	/*公告*/
	.tui-rolling-news {
		width: 100%;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		background: #fff;
	}
	
	.tui-swiper {
		font-size: 28rpx;
		height: 50rpx;
		flex: 1;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center
	}
	
	.tui-news-item {
		line-height: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/*公告*/
</style>