junzitang/pages/index/StartUpPage.vue

<template>
	<view class="img-view" :class="['qn-page-' + theme]">
		<block v-if="startUpPage.isEnable && startUpPage.img">
			<view @click="goPageS('/pages/index/index', 'switchTab')" class="go-index-btn">跳过 {{ time }} s</view>
			<view class="startUpPage-view">
				<image @click="goPageS(startUpPage.url, startUpPage.switchTab)" class="start-img" :src="startUpPage.img" mode="aspectFill"></image>
			</view>
		</block>
	</view>
</template>

<script>
import amap from '@/access/amap-wx.js';
export default {
	data() {
		return {
			startUpPage: {
				img: '',
				isEnable: false,
				time: 5
			},
			time: 5,
			timesInterval: null
		};
	},
	watch: {
		// 监听倒计时，当时间为0时跳转页面，在这里监听的原因是为了跳出setInterval,防止setInterval不会终止，而不停的跳转首页
		time(val) {
			if (val === 0) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	},
	async onLoad() {
		// #ifdef MP-TOUTIAO
		uni.switchTab({
			url: '/pages/index/index'
		});
		return;
		// #endif
		// #ifdef MP-WEIXIN || APP-PLUS || H5
		await this.getBasicField();
		// #endif
	},
	methods: {
		goPageS(url, type) {
			if (!url) {
				return;
			}
			clearInterval(this.timesInterval);
			this.goPage(url, type);
		},
		// 获取商城基本设置
		async getBasicField() {
			// startUpPage，启动页设置
			await this.$u.api
				.getBasicField({
					field: ['startUpPage']
				})
				.then(({ data }) => {
					if (!data.startUpPage || !data.startUpPage.isEnable || !data.startUpPage.img) {
						uni.switchTab({
							url: '/pages/index/index'
						});
						return;
					}
					if (data.startUpPage && data.startUpPage.isEnable && data.startUpPage.img) {
						this.startUpPage = data.startUpPage;
						this.time = this.startUpPage.time;
						this.timesInterval = setInterval(() => {
							if (this.time === 0) {
								clearInterval(this.timesInterval);
							} else {
								this.time = this.time - 1;
							}
						}, 1000);
					}
				});
		}
	}
};
</script>

<style scoped lang="scss">
.img-view {
	position: relative;
	width: 750upx;
	height: 100vh;
	.logo-view {
		height: 300rpx;
		text-align: center;
		background-color: #ffffff;
		.logo-view-in {
			transform: translateY(60rpx);
			.en-logo {
				height: 120rpx;
				width: 120rpx;
				display: block;
				margin: 0 auto;
			}
			.en-name {
				font-size: 36rpx;
				padding-top: 20rpx;
			}
		}
	}
	.go-index-btn {
		position: absolute;
		bottom: 350upx;
		right: 20upx;
		font-size: 26upx;
		color: #fff;
		background-color: rgba($color: #000000, $alpha: 0.4);
		width: 150upx;
		height: 55upx;
		line-height: 55upx;
		text-align: center;
		border-radius: 66upx;
		z-index: 9;
	}
	.startUpPage-view {
		width: 750upx;
		height: 100vh;
		overflow: hidden;
		background-color: #ffffff;
		.start-img {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
}
</style>