cqcarbonwxapp/pages/index/guide.vue

<template>
	<view class="pages">
		<view class="hold-status-bar show">
			<!-- 占据了状态栏位置 -->
		</view>
		<view class="guide-img" :class="{isheight:isheight}">
			<swiper class="swiper" 
			:indicator-dots="swiper.indicatorDots" 
			:indicator-color="swiper.indicatorColor"  
			:indicator-active-color="swiper.indicatorActiveColor" 
			:autoplay="swiper.autoplay" 			
			:interval="swiper.interval" :duration="swiper.duration">
				<swiper-item>
					<view class="adv-item"><image :src="$getimg +'guide01-s1.png'" class="pic" mode="widthFix"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="adv-item" style="background-color: #26C896;"><image :src="$getimg +'guide02.png'" class="pic" mode="widthFix"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="adv-item" style="background-color: #26C896;"><image :src="$getimg +'guide03.png'" class="pic" mode="widthFix"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="adv-item" style="background-color: #26C896;" @click="goIndex">
						<image :src="$getimg +'guide04.png'" class="pic" mode="widthFix"></image>
						<view class="tip-btn-wrap">
							<text class="tip-btn">立即体验</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <div id="universal-preloader">
				<div class="preloader">
					<span class="preloader-time"><i id="preloader-time-num">{{preloaderTime}}</i>秒后关闭</span>
				</div>
			</div> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				preloaderTime:5,
				$getimg:this.$getimg,
				isheight:false,
				swiper: {
					indicatorDots: true,
					autoplay: false,
					interval: 9000,
					duration: 500,
					indicatorColor:"rgba(171, 234, 213, 1)",
					indicatorActiveColor:"rgba(54, 206, 149, 1)",
				},
			}
		},
		onShow() {
			// console.log('config',this.$getimg);
		},
		onLoad() {
			// console.log(this.config.version);
			let self = this;
			uni.getSystemInfo({
			    success: function (res) {
					console.log('getSystemInfo',res);
					let windowscale = res.windowHeight/res.screenWidth;//屏幕高宽比 
					console.log('res.windowHeight',res.windowHeight);
					console.log('res.screenWidth',res.screenWidth);
					console.log('windowscale',windowscale);
					if(res.windowHeight>800){
						self.isheight = true;						
					}
			    }
			}); 
		},
		onReady() {
			// 从本地缓存中同步获取指定 key 对应的内容，用于判断是否是第一次打开应用
			 const launch = uni.getStorageSync('launchFlag');
			 console.log('launch',launch);
			 const version = uni.getStorageSync('version');
			 if(!version){
				uni.setStorage({
				  key: 'version',
				  data: this.config.version
				});
			 }
			 if (launch&&version==this.config.version) {
			   // 如果已经有，直接去首页
				this.goIndex();
			 } else {
			   // 没有值，跳到引导页，并存储，下次打开就不会进去引导页
			   // uni.setStorage({
			   //   key: 'launchFlag',
			   //   data: true
			   // });
				// this.lxfEndtime();
			 }
			
		},
		methods: {
			goIndex(){
				uni.setStorage({
				  key: 'version',
				  data: this.config.version
				});
				uni.setStorage({
				  key: 'launchFlag',
				  data: true
				});
				uni.redirectTo({
				    url: '/pages/login/loginType',
					fail(err) {
						// console.log(err)
					}
				});
			},
			lxfEndtime(){
				let that = this;
				let $i;
				if(that.preloaderTime!=0){
					that.preloaderTime--;
					$i=setTimeout(function(){that.lxfEndtime()},1000);
				}else{					
					clearTimeout($i);
					this.goIndex();
				}
			}
		}
	}
</script>

<style scoped>
.guide-img{position: fixed;left: 0;right: 0;top:40rpx;bottom: 0;display: block;}
.guide-img.isheight{top: 115rpx;}
.swiper{height: 100%;}
.adv-item{height: 100%;position: relative;}
.guide-img .pic{width: 100%;height: 100%;/* max-height: 100%; */}
.adv-item .tip-btn-wrap{position: fixed;left: 0;bottom: 60rpx;right: 0;text-align: center;}
.adv-item .tip-btn{display: inline-block;width: 454rpx;height: 100rpx;line-height: 100rpx;font-size: 35rpx;font-weight: 600;letter-spacing: 6rpx;color: #24C696;background-color: #fff;border-radius: 100rpx;}

/* #universal-preloader{position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:1;background:rgba(0,0,0,0.1) !important;filter:Alpha(opacity=100);background:#000;z-index:1020;}
#universal-preloader>.preloader{position: relative;width: 100%;height: 100%;}
.universal-preloader-preloader{width: 100%;min-height: 100%;}
.preloader-time{position: absolute;right: 24px;top: 24px;font-size: 24rpx;display: inline-block;background: #fff;padding: 3px 8px;border-radius: 10px;}
#preloader-time-num{font-style: normal;margin-right: 5rpx;color: #57992c;} */
</style>