项目启动页:(提交至华为应用市场时,未审核通过,这个启动页点不动也滑不动)
<template>
<view class="">
<view v-if="showGuide" class="guide-container">
<swiper
:indicator-dots="true"
:autoplay="false"
:circular="false"
@change="swiperChange"
class="swiper"
>
<swiper-item v-for="(item, index) in guideImages" :key="index" @click="finishGuide(index)">
<image :src="item" mode="aspectFill" class="image" />
</swiper-item>
</swiper>
</view>
<view class="container" v-else>
<image
class="splash-image"
src="/static/images/imgs/lanch.png"
mode="aspectFill"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showGuide: true,
current: 0, // 初始化当前Swiper索引
guideImages: [
'/static/images/imgs/launch1.png',
'/static/images/imgs/launch2.png',
'/static/images/imgs/launch3.png'
]
}
},
onLoad() {
// 检查用户是否已启动过应用,如果已经启动,则跳过引导页
const hasLaunched = uni.getStorageSync('hasLaunched');
console.log('hasLaunched', hasLaunched)
if (hasLaunched) {
this.showGuide = false;
} else {
this.showGuide = true;
}
},
methods: { // 注意这里应为methods而不是motheds
swiperChange(e) {
this.current = e.detail.current;
},
finishGuide(e) {
if (e != 2) return
// 设置已启动标记
uni.setStorageSync('hasLaunched', true);
let token = uni.getStorageSync('token');
let type = uni.getStorageSync('access');
if (token) {
// 已登录,根据type跳转
if (type == null || type == '') {
uni.reLaunch({
url: '/pages/tabbar/worktable',
});
return;
}
if (type == '1101' || type == '1102' || type == '1103') {
let need_perfect_information = uni.getStorageSync('need_perfect_information');
if (need_perfect_information == 'notReviewed') {
uni.reLaunch({
url: '/pages/tabbar/unverified',
});
} else {
uni.reLaunch({
url: '/pages_hotel/tabbar/worktable'
});
}
} else if (['1104', '1105', '1106', '1107', '1108', '1109', '1113'].includes(type)) {
uni.reLaunch({
url: '/pages/tabbar/worktable'
});
}
} else {
// 未登录,跳转登录页
uni.reLaunch({
url: '/pages/login/login'
});
}
}
}
};
</script>
<style lang="scss" scoped>
.container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
.splash-image {
width: 100%;
height: 100%;
}
.loading-icon {
position: absolute;
bottom: 100rpx;
left: 50%;
transform: translateX(-50%);
}
}
/* 保持之前的样式 */
.guide-container {
position: relative;
height: 100vh;
}
.swiper {
height: 100%;
}
.image {
width: 100%;
height: 100%;
}
.btn-container {
position: absolute;
bottom: 80rpx;
left: 50%;
transform: translateX(-50%);
}
.btn {
width: 256rpx;
line-height: 62rpx;
background: linear-gradient( 90deg, #8DA7F4 0%, #366AF5 100%);
color: #FFFFFF;
font-weight: 500;
font-size: 32rpx;
border-radius: 24rpx;
}
</style>