173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useSceneStore } from '../store/scene'
|
|
import { useCollectionStore } from '../store/collection'
|
|
|
|
const router = useRouter()
|
|
const sceneStore = useSceneStore()
|
|
const collectionStore = useCollectionStore()
|
|
|
|
// 当前路由路径
|
|
const currentRoute = computed(() => router.currentRoute.value.path)
|
|
|
|
// 是否在首页显示底部导航
|
|
const showHomeNav = computed(() => {
|
|
return currentRoute.value === '/'
|
|
})
|
|
|
|
// 是否显示场景导航
|
|
const showSceneNav = computed(() => {
|
|
const sceneRoutes = ['/qianmen', '/chongwen', '/wangfujing', '/longfusi', '/dongzhimen']
|
|
return sceneRoutes.includes(currentRoute.value)
|
|
})
|
|
|
|
// 福印收集进度
|
|
const collectionProgress = computed(() => {
|
|
return collectionStore.getCollectionProgress
|
|
})
|
|
|
|
// 跳转到AI春联生成页面
|
|
const goToAISpring = () => {
|
|
router.push('/ai-spring')
|
|
}
|
|
|
|
// 跳转到抽奖页面
|
|
const goToLottery = () => {
|
|
uni.uni.showToast({title: '抽奖功能开发中...', duration: 2000})
|
|
// router.push('/lottery')
|
|
}
|
|
|
|
// 跳转到福印收集页面
|
|
const goToCollection = () => {
|
|
uni.uni.showToast({title: '福印收集功能开发中...', duration: 2000})
|
|
// router.push('/collection')
|
|
}
|
|
|
|
// 返回首页
|
|
const goToHome = () => {
|
|
router.push('/')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="common-footer" v-if="showHomeNav">
|
|
<div class="footer-nav">
|
|
<div class="nav-item" @click="goToAISpring">
|
|
<div class="nav-icon">📝</div>
|
|
<div class="nav-text">AI春联</div>
|
|
</div>
|
|
<div class="nav-item" @click="goToLottery">
|
|
<div class="nav-icon">🎁</div>
|
|
<div class="nav-text">抽奖</div>
|
|
</div>
|
|
<div class="nav-item" @click="goToCollection">
|
|
<div class="nav-icon">🏮</div>
|
|
<div class="nav-text">福印</div>
|
|
<div class="progress-badge" v-if="collectionProgress > 0">
|
|
{{ collectionProgress }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 场景页面底部按钮 -->
|
|
<div class="scene-footer" v-if="showSceneNav">
|
|
<div class="scene-nav">
|
|
<Button type="primary" block @click="goToHome">
|
|
返回首页
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.common-footer {
|
|
width: 100%;
|
|
max-width: 750px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #fff;
|
|
border-top: 1px solid #eee;
|
|
z-index: 100;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.footer-nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 0.88rem;
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 0.4rem;
|
|
margin-bottom: 0.05rem;
|
|
}
|
|
|
|
.nav-text {
|
|
font-size: 0.2rem;
|
|
color: #666;
|
|
}
|
|
|
|
.nav-item:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.progress-badge {
|
|
position: absolute;
|
|
top: 0.1rem;
|
|
right: 0.2rem;
|
|
background-color: #ff6b35;
|
|
color: #fff;
|
|
font-size: 0.16rem;
|
|
padding: 0.02rem 0.08rem;
|
|
border-radius: 0.1rem;
|
|
min-width: 0.3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 场景页面底部按钮 */
|
|
.scene-footer {
|
|
width: 100%;
|
|
max-width: 750px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0.2rem;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border-top: 1px solid #eee;
|
|
z-index: 100;
|
|
}
|
|
|
|
.scene-nav {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 适配安全区域 */
|
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
.common-footer {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
height: calc(0.88rem + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.scene-footer {
|
|
padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
</style> |