cnic_buyer/pages/index/first.vue

<template>
	<view class="body">
		<!-- 启动页广告 -->
		<view class="open_bg">
			<view class="open_text"><text @click="gotopage(1)">{{ countdownTime2 }}s skip</text></view>
			<swiper class ="open_bgimg" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
				<swiper-item v-for="(item,index) in open_img" :key="item.block_pic">
				    <image :src="item.block_pic" mode="" @click="imgTopage(item.block_link)" style="width: 100%;height: 100%;"></image>	
				</swiper-item>
			</swiper>
			<!-- <image  :src="open_img" style="width: 100%;height: 100%;z-index: -1;" @click="imgTo(open_img)"></image> -->
			
		</view>
		
		
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest4} from '../../api/index.js'
	export default {
		data(){
			return {
				open_img:[],
				 indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				countdownTime2:5,
				heightOne:0,
				heightTwo:0,
				count:false
			}
		},
			
		onLoad() {
			let that = this;
			let s = 0;
			let time = setInterval(() => {
				uni.getNetworkType({
					success: (res) => {
						console.log(res.networkType, s);
						if (res.networkType == 'none') {
							uni.showToast({
								icon: 'none',
								title: 'Please connect to the network',
								duration: 3000,
							})
						} else if (res.networkType !== 'none') {
							that.typee = 2;
							clearInterval(time);
							
						}
					}
				})
				s++;
			}, 1000);
			this.getMes()
			// this.getCountdownTime()
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true);
			// #endif
			
			
		},
		// created(){
		// 	this.getCountdownTime()
		// },
		methods:{
			getMes(){
				let data={_action:'getpagedata',pagecode:'001-STARTPAGE'}
				// setTimeout( () =>{
					defaultRequest(data).then( res =>{
						console.log('1',res)
						let img
						let url 
						if(res.error == 0){
							res.data.zones.map( item =>{
								if(item.zone_code ==  "KAIPIN"){
									img = item.blocks
									url = item.blocks[0].block_link
									this.open_img = img
									if(this.open_img.length > 0){
								      setTimeout( () =>{
										  this.getCountdownTime()
									  },500)
									}
								}
							})
							 
							 
							 console.log(this.open_img)
							  this.popUrl = url
						}
					})
				// },5000)
				
			},
			//5秒倒计时
			getCountdownTime() {
				 uni.hideTabBar();
				uni.setTabBarStyle({
				 backgroundColor: "#ccc",
				  borderStyle: "black",
				  // selectedColor: "#999",
				  // color: "#999",
				});
								// let timer2 = setInterval(() => {
								// 	// uni.hideTabBar();
								// 		this.countdownTime2--;
								// 	if (this.countdownTime2 < 1) {
								// 		clearInterval(timer2)
								// 		this.countdownTime2 = 0
								// 	}
								// 	if(this.countdownTime2  ==0 &&!this.count){
								// 	uni.switchTab({
								// 		url:'./index'
								// 	})
								// 	uni.showTabBar()
								// 	}
								// }, 1000)
							
							
						},
			gotopage(e){
				if(e==1){
					uni.switchTab({
						url:'./index'
					})
				}
				
			},
			imgTopage(item){
				this.count = true
				console.log(111)
				console.log(item,'item')
				const i = item.indexOf('?')
				const str = item.substring(i)
				if(item.includes('goodid')){
						uni.navigateTo({
							url:'../productDetails/index'+str+'&first=2'
						})
					}
				else if(item.includes('goodslist')){
						uni.navigateTo({
							url:'../category/productList'+ str+'&first=1'
						})
					}
			
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		background-color: #000;
	}
	.open_bg{
		height: 100vh;
		 width: 100%;
		top:0;
		color: white;
		z-index: -1;
	    bottom: var(--window-bottom,0);
		background-size:100% 100%;
		background: center center no-repeat;
		// image{
		// 	height: 100%;
		// 	width: 100%;
		// }
		 .open_text{
		 	right:0;
		 	top:50rpx;
			
		 	height: 50rpx;
		 	width: 120rpx;
		 	font-size: 28rpx;
		 	margin-right: 10rpx;
		 	margin-top: 10rpx;
		 	 background-color:#ececec;
		 	 background-color:rgba(0,0,0,0.5);
		 	line-height: 50rpx;
		 	opacity: 0.5;
		 	text-align: center;
		 	position: absolute;
		 	z-index:99;
		 	border-radius: 5rpx;
		 }
		 
		.open_bgimg{
			margin: 0;
			padding: 0;
			top:0;
			height: 100%;
			width: 100%;
			position: relative;
			color:white;
			image{
				height: 100%;
				width: 100%;
			}
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); 
			
		
		
			
		}
		
	}
	
</style>