设置应用启动页（广告页）、首页活动弹窗

应用启动页（广告页）

homePage.vue：

<template>
    <view class="homePage" v-if="showPage">
        <image :src="bg" mode="widthFix"></image>
        <view class="skip" @click="skip">跳过{{second}}</view>
    </view>
</template>

<script>
    export default {
        name: "homePage",
        data() {
            return {
                showPage: true, //是否显示开屏图
                countDown: '', //计时器
                second: '4', //秒数
                bg: 'http://cdns.zqhuahui.com/11/2541717465910_.pic_hd.png', //背景
            };
        },
        created() {
            this.initTime()
        },
        onUnload() {
            if(this.countDown){
                clearInterval(this.countDown);
            }
        },
        methods: {
            initTime() {
                this.countDown = setInterval(() => {
                    if (this.second == 0) {
                        this.changePage();
                        clearInterval(this.countDown);
                    } else {
                        this.second = this.second - 1;
                    }
                }, 1000)
            },
            //点击跳过
            skip() {
                clearInterval(this.countDown);
                this.changePage();
            },
            changePage() {
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }
        }
    }
</script>

<style scoped>
    .homePage {
        width: 100vw;
        height: 100vh;
        position: relative;
    }
    .homePage image {
        width: 100vw;
        height: 100vh;
    }

    .skip {
        padding: 5rpx 20rpx;
        font-size: 28rpx;
        color: #EEEEEE;
        position: absolute;
        top: 153rpx;
        right: 53rpx;
        border: 1rpx solid #EEEEEE;
        border-radius: 25rpx;
    }
</style>

pages.json：

 // 放在pages数组中的第一项
{
    "path": "pages/homePage/homePage",
    "style": {
        "navigationBarTitleText": "开屏广告",
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white"
    }
},

首页活动弹窗

<!-- 弹框遮罩 -->
<view class="popup-mask" v-if="showPopup">
    <!-- 弹框内容 -->
    <view class="popup-content">
        <image :src="popupImg" mode="widthFix"></image>
        <view class="off" @click="this.showPopup = false"></view>
    </view>
</view>

data() {
	return {
		showPopup: false,
        popupImg: '',
	}
},
onLoad() {
    this.initConfig();
},
methods: {
    // 初始化配置项
    initConfig() {
        config().then(res => {
            if (res.code == 200) {
                if(res.data.home_alert_url && res.data.home_alert_status) {
                    this.popupImg = res.data.home_alert_url
                    this.showPopup = true
                }
            }
        })
    },
}

.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;

    .popup-content {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);

        .off {
            margin-top: 30rpx;
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            background-image: url('http://cdns.zqhuahui.com/Admin/OOQ2-x.png');
            background-size: cover;
        }
    }
}