[新增] 开屏页

[新增] ad弹窗广告组件

App.vue

@@ -7,6 +7,9 @@ export default {
 		 share: false,  // 分享默认为false
 	},
 	onLaunch: function(e) {
+		// 进入开屏广告页 TODO 暂时注释
+		// this.$url('/pages/index/openScreenAd/openScreenAd', {type: 'redirect'});
+		
 		// #ifdef MP-WEIXIN
 		var referrerInfo = e.referrerInfo;
         if (referrerInfo.appId) {

components/lf-adModal/lf-adModal.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="content" v-if="value">
+		<view class="box">
+			<image class="img" src="https://picsum.photos/200" mode="aspectFill" @click="clickAd"></image>
+			<view class="close" @click="close">
+				<text class="lf-iconfont icon-shanchu"></text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			value: {
+				type: Boolean,
+				default: true
+			}
+		},
+		created(){
+			
+		},
+		methods: {
+			clickAd(){
+				this.$msg('您点击了广告图')
+			},
+			close(){
+				this.$emit('update:value', false);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 100vw;
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: fixed;
+		left: 0;
+		top: 0;
+		.box{
+			width: 600rpx;
+			height: max-content;
+			.img{
+				width: 600rpx;
+				height: 840rpx;
+				border: 1rpx solid #979797;
+			}
+			.close{
+				width: 70rpx;
+				height: 70rpx;
+				margin: 34rpx auto 0;
+				border-radius: 50%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				text{
+					font-size: 80rpx;
+				}
+			}
+		}
+	}
+</style>

pages.json

@@ -647,7 +647,14 @@
             "style" : {
 				"navigationBarTitleText": "设置"
 			}
-        }
+        },
+		{
+			"path" : "pages/index/openScreenAd/openScreenAd",
+			"style" : {
+				"navigationBarTitleText": "欢迎使用",
+				"navigationStyle": "custom"
+			}
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -696,8 +703,12 @@
   			"name": "首页", //模式名称
   			"path": "pages/index/index/index", //启动页面，必选
   			"query": "" //启动参数，在页面的onLoad函数里面得到
-  		}
-		
+  		},
+		{
+			"name": "测试",
+			"path": "pages/index/openScreenAd/openScreenAd",
+			"query": ""
+		}
 		
   	]
   }

pages/index/index/index.vue

@@ -321,6 +321,8 @@
 			        </view>
 			    </view> 
 		</view>
+		<!-- ad广告弹出组件 TODO 暂时先注释 -->
+		<!-- <lf-ad-modal :value.sync="show_ad"></lf-ad-modal> -->
 		<!-- tabbar组件 -->
 		<lf-tabbar />
 	</block>
@@ -345,6 +347,7 @@
 	import  birthday  from '@/components/birthday/birthday.vue';
 	import lfNav from '@/components/lf-nav/lf-nav.vue';
 	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
+	import lfAdModal from '@/components/lf-adModal/lf-adModal.vue';
 	var app = getApp();
     export default {
         data() {
@@ -384,6 +387,7 @@
                 userInfo: '',
                 microData:"",
 				is_login:'',// 是否是登陆状态
+				show_ad: true
 					
             };
         },
@@ -405,7 +409,8 @@
 			indexGrouping,
 			birthday,
 			lfNav,
-			lfTabbar
+			lfTabbar,
+			lfAdModal
         },
 		
 		  onShow(e) {

pages/index/openScreenAd/openScreenAd.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="content">
+		<image class="img" src="https://picsum.photos/200" mode="aspectFill"></image>
+		<view class="tips" @click="next">跳过 {{ num }}s</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				num: 5,
+				timer: null
+			}
+		},
+		onLoad(){
+			this.timer = setInterval(() => {
+				this.num--;
+				if(this.num <= 0){
+					clearInterval(this.timer);
+					this.timer = null;
+					this.next();
+				}
+			}, 1000);
+		},
+		onUnload(){
+			if(this.timer){
+				clearInterval(this.timer);
+				this.timer = null;
+			}
+		},
+		methods: {
+			next(){
+				this.$url('/pages/index/index/index', {type: 'redirect'});
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		overflow: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.content{
+		position: relative;
+		width: 100vw;
+		height: 100vh;
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+		.tips{
+			position: absolute;
+			right: 32rpx;
+			top: 132rpx;
+			width: 144rpx;
+			height: 55rpx;
+			background-color: rgba(0,0,0,0.5);
+			color: #FFFFFF;
+			font-size: 26rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 28rpx;
+		}
+	}
+</style>