113 lines
2.6 KiB
Plaintext
113 lines
2.6 KiB
Plaintext
<template>
|
||
<view class="guide-container">
|
||
<!-- 轮播图形式的引导页 -->
|
||
<swiper class="swiper" :indicator-dots="true" :autoplay="false" @change="onChange">
|
||
<swiper-item v-for="(item, index) in guideList" :key="index">
|
||
<image :src="item.image" mode="aspectFill" class="guide-image" />
|
||
<text class="guide-text">{{ item.text }}</text>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 最后一张显示进入按钮 -->
|
||
<button v-if="currentIndex === guideList.length - 1" class="enter-btn" @click="enterApp">
|
||
立即体验
|
||
</button>
|
||
<!-- 跳过按钮 -->
|
||
<text class="skip-btn" @click="enterApp">跳过</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import userState, { isLoggedIn } from '@/stores/user.uts'
|
||
import { appState } from '@/stores/app.uts'
|
||
import messageService from '@/services/websocket/message-service.uts'
|
||
// 响应式数据
|
||
const currentIndex = ref<number>(0)
|
||
type IList = { image : string, text : string }
|
||
// 引导页数据
|
||
const guideList = ref<Array<IList>>([
|
||
{ image: '/static/guide1.png', text: '功能介绍一' },
|
||
{ image: '/static/guide2.png', text: '功能介绍二' },
|
||
{ image: '/static/guide3.png', text: '功能介绍三' }
|
||
])
|
||
|
||
const isLogin = computed(() : boolean => {
|
||
return isLoggedIn.value
|
||
})
|
||
|
||
// 轮播切换事件
|
||
const onChange = (e : UniSwiperChangeEvent) => {
|
||
currentIndex.value = e.detail.current
|
||
}
|
||
// 进入应用
|
||
const enterApp = () => {
|
||
uni.setStorageSync('hasGuide', true)
|
||
if (isLoggedIn.value) {
|
||
// 连接实时消息通道（使用后端 appConf.socketUrl 与真实 token）
|
||
messageService.connectIfNeeded(appState.systemConf?.socketUrl ?? null)
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/login/index'
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
// 页面生命周期 - 检查是否首次启动
|
||
onLoad(() => {
|
||
const hasGuide = uni.getStorageSync('hasGuide') ?? null
|
||
if (hasGuide != null) {
|
||
// 非首次启动，直接跳转首页
|
||
enterApp()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.guide-container {
|
||
position: relative;
|
||
height: 100%;
|
||
}
|
||
|
||
.swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.guide-image {
|
||
width: 100%;
|
||
height: 80%;
|
||
}
|
||
|
||
.guide-text {
|
||
text-align: center;
|
||
padding: 30rpx;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.enter-btn {
|
||
position: absolute;
|
||
bottom: 200rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 300rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #007aff;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.skip-btn {
|
||
position: absolute;
|
||
top: 80rpx;
|
||
right: 40rpx;
|
||
padding: 10rpx 30rpx;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: #fff;
|
||
border-radius: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |