danling/pages/splash/index.vue

<template>
	<view class="swipe-banner" v-if="show">
		<swiper class="flex1" style="height: 100vh;" :interval="interval" :show-indicators="true" :autoplay="autoPlay"
			@change="swiperChange" :infinite="true" :forbid-slide-animation="true">
			<swiper-item class="flex1" v-for="(img, index) in bannerList" :key="index">
				<view class="flex1" @tap="countdown2home(true,true)">
					<!-- #ifndef APP-PLUS -->
					<image class="flex1" mode="aspectFill" :style="{ width: screenWidth+ 'px' }" :src="img.src" />
					<!-- #endif -->

					<!-- #ifdef APP-PLUS -->
					<image class="flex1" resize="contain" :src="img.src" />
					<!-- #endif -->
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-to-home" @click="countdown2home(true,false)" v-if="showSkip">
			<text class="swiper-to-home-text">跳过<text class="swiper-to-home-delay-second"
					v-if="delaySecond>0 && delaySecond<300">{{delaySecond}}s</text></text>
		</view>
	</view>
</template>

<script>
	const SystemInfo = uni.getSystemInfoSync();

	export default {
		data() {
			return {
				bannerList: [],
				tempList: [
					// //引导图列表
					// {
					// 	src: '/static/splash_1.png',
					// 	swiper: true
					// },
					// {
					// 	src: '/static/splash_2.png',
					// 	swiper: true
					// },
					// {
					// 	src: '/static/splash_3.png',
					// 	swiper: true
					// },
					// {
					// 	src: '/static/splash_4.png',
					// 	swiper: true
					// },
					// {
					// 	src: '/static/splash_4.png',
					// 	swiper: false
					// }
				],
				autoPlay: false,
				currIndex: 0,
				screenWidth: SystemInfo.screenWidth,
				delaySecond: 100000, //默认不自动进入
				showSkip: false,
				countdown: null,
				show: false,
				interval: 1000
			}
		},
		onLoad() {
			//没用启用引导图或没有引导图
			// if(!this.$lln.config('enableSplash') || this.tempList.length==0){
			// 	this.$lln.href('/pages/index/index');
			// 	return false;
			// }

			this.$u.get('/home/start_up', {
				site: 0
			}).then(res => {
				this.bannerList = res.banner
				this.interval = res.time
				if (this.bannerList.length == 1) {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
					return false
				}
				// this.tempList.forEach(item => {
				// 	item.swiper = true
				// })
				// this.tempList.push({
				// 	show_img: this.tempList[this.tempList.length - 1].show_img,
				// 	swiper: false
				// })
				// console.log(this.tempList)
			})
			var splash = uni.getStorageSync('LLNAPI-SPLASH');
			if (splash) {
				//如果已存在直接跳过,注释当前代码会展示一张倒计时的品牌宣传图片
				// this.$lln.href('/pages/index/index?target=redirect');
				// return false;
			}

			this.show = true;
			this.showSkip = true;
			if (this.tempList.length == 1) {
				this.bannerList = this.tempList;
				//只有一张计时10秒
				this.delaySecond = 1;
				this.autoPlay = false;

				//倒计时进入首页
				this.countdown2home(false);
			} else {
				if (!splash) {
					this.bannerList = this.tempList.filter((x) => {
						return x.swiper;
					});
					this.autoPlay = true;
				} else {
					var masterBanner = [this.tempList[this.tempList.length - 1]];
					for (var i = 0; i < this.tempList.length; i++) {
						var item = this.tempList[i];
						if (!item.swiper) {
							masterBanner = item;
							break;
						}
					}
					//引导图已经加载过了，只展示一张图片
					this.bannerList = [masterBanner];
					//只有一张计时10秒
					this.delaySecond = 1;
					this.autoPlay = false;
					this.countdown2home(false);
				}
			}
		},
		methods: {
			swiperChange: function(e) {
				this.currIndex = e.detail.current;
				if (this.bannerList.length == this.currIndex + 1) {
					//最后一张暂停轮播
					this.autoPlay = false;
					this.delaySecond = 1;

					if (this.countdown) {
						this.showSkip = true;
						clearInterval(this.countdown);
					}
					//倒计时进入首页
					this.countdown2home(false);
				} else {
					console.log(this.delaySecond + '>>>>>>>>>>')
					if (this.countdown) {
						if (this.delaySecond > 3) {
							this.delaySecond = 100000;
							//停止倒计时
							clearInterval(this.countdown);
						}
					} else {
						this.delaySecond = 100000;
					}
				}
			},
			countdown2home: function(direct, isLastBanner) {
				var that = this;
				//手动进入
				if (direct) {
					if (!isLastBanner || (this.bannerList.length == this.currIndex + 1)) {
						if (this.countdown) {
							this.showSkip = false;
							clearInterval(this.countdown);
						}
						uni.setStorage({
							key: 'LLNAPI-SPLASH',
							data: false,
							success() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						});
					}
					return false;
				}
				if (this.delaySecond == -1) {
					//不进入，由用户手动点击进入
					return false;
				}

				//倒计时进入首页
				this.countdown = setInterval(() => {
					if (that.delaySecond < 2) {
						that.showSkip = false;
					}
					if (that.delaySecond > 300) {
						clearInterval(that.countdown);
					}
					if (that.delaySecond < 1) {
						clearInterval(that.countdown);
						uni.setStorage({
							key: 'LLNAPI-SPLASH',
							data: false,
							success() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						});
						return;
					}
					that.delaySecond--;
				}, 1000);
			}
		}
	};
</script>
<style>
	.swipe-banner {
		/* #ifndef APP-PLUS */
		display: flex;
		height: 100%;
		/* #endif */
		flex-direction: column;
		flex: 1;
		min-height: 100vh;
	}

	.flex1 {
		flex: 1;
		height: 100%;
	}

	.apptestnnnn {
		border-width: 1px;
		border-color: #4cd964;
		border-style: solid;
	}

	.apptest {
		border-width: 1px;
		border-color: #007aff;
		border-style: solid;
	}

	.swiper-to-home {
		position: absolute;
		z-index: 999;
		right: 40rpx;
		/* #ifndef MP */
		top: 80rpx;
		/* #endif */
		/* #ifdef MP */
		top: 168rpx;
		/* #endif */
	}

	.swiper-to-home-text {
		color: #ffffff;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		border-width: 1rpx;
		border-color: #ffffff;
		border-style: solid;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.swiper-to-home-delay-second {
		padding-left: 6rpx;
		color: #56eeff;
	}

	.indicator {
		width: 714rpx;
		height: 30rpx;
		position: absolute;
		bottom: 50rpx;
		left: 1rpx;
		item-color: #f6f6f6;
		item-selected-color: #fd575c;
		item-size: 20rpx;
	}
</style>