dev/dcp-app-gate/components/guideAD.vue

<template>
	<view>
		<u-popup v-model="show" mode="center" class="adPopup">
			<view>
				<view class="close" @click="closeAD">
					{{$i18n.locale == 'zh' ? '跳过广告' : 'Close the AD'}}
					<text style="margin-left: 10upx;" v-if="date">{{date}}</text>
				</view>
			</view>
			<view style="width: 100%;" class="img">
<!--				<img src="../static/img/index/guideAD.png" alt="" style="width: 100%;">-->
				<u-image src="../static/img/index/guideAD.png" mode="widthFix" alt="" width="100%"></u-image>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: "guideAD",
	props:{
		show:{
			type:Boolean,
			default:false
		},
		time:{
			type:Number,
			default: 0
		},
	},
	data(){
		return{
			date:this.time,
			countDown:''
		}
	},
	mounted(){
		if(this.date){
			this.countDown = setInterval(()=>{
				this.date--;
			},1000)
		}
	},
	watch: {
		date(n,o) {
			console.log(n,o)
			if(n==0){
				this.closeAD()
			}
		}
	},
	methods:{
		closeAD(){
			this.show = false
			this.$emit('close',false)
			clearInterval(this.countDown)
		}
	}
}
</script>

<style scoped>
.adPopup {
	width: 530upx;
	margin: auto;
}
.adPopup .close{
	float: right;
	color: rgba(255,255,255,.8);
	display: inline-block;
	padding: 2upx 20upx;
	background-color: rgba(0,0,0,.3);
	margin-bottom: 10upx;
	border-radius: 80upx;
}
.adPopup /deep/ .u-mode-center-box{
	width: 100%!important;
	background-color: transparent;
}
.adPopup /deep/ .u-mode-center-box .u-drawer__scroll-view{
	background-color: transparent;
}
</style>