<template>
|
<view class="footer customer-footer">
|
<view
|
v-for="(item, index) in tabBar"
|
:key="index"
|
class="footer-item"
|
>
|
<view
|
class="item"
|
:class="{ cur: currentIndex === index }"
|
@click="go(index, item)"
|
>
|
<view class="footer-text">{{ item.text }}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
|
<script setup lang="ts">
|
import { ref, computed } from 'vue'
|
import { useNavigator } from '@/composables/useNavigator'
|
const { navigateTo, reLaunchTo} = useNavigator()
|
|
interface TabItem {
|
text: string
|
pagePath: string
|
}
|
|
// props
|
const props = defineProps<{
|
flg?: string
|
bussincess?: boolean
|
}>()
|
|
const tabBar = ref<TabItem[]>([
|
{ text: '首页', pagePath: '/pages/home/home' },
|
{ text: '影视地图', pagePath: '/sub-pages/film-map/index' },
|
{ text: '我的种草', pagePath: '/sub-pages/customer/shopping/shopping' },
|
{ text: '社区', pagePath: '/sub-pages/community/index' },
|
{ text: '我的', pagePath: '/sub-pages/mine/index' },
|
])
|
|
function normalizePath(path: string): string {
|
return path.replace(/^\/+/, '/')
|
}
|
|
const currentPath = computed(() => {
|
// getCurrentPages 是全局函数，类型断言一下
|
const pages = getCurrentPages() as { route: string }[]
|
const currentPage = pages[pages.length - 1]
|
return '/' + currentPage.route
|
})
|
|
const currentIndex = computed(() => {
|
return tabBar.value.findIndex(
|
(item) => normalizePath(item.pagePath) === normalizePath(currentPath.value)
|
)
|
})
|
|
function go(index: number, item: TabItem) {
|
// uni.reLaunch({
|
// url: item.pagePath,
|
// })
|
|
reLaunchTo(item.pagePath)
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import './main.scss';
|
|
.footer-icon {
|
width: 36rpx;
|
height: 36rpx;
|
margin-bottom: 4rpx;
|
}
|
</style>
|
