You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<template>
|
|
<view class="tab-bar">
|
|
<view class="tab-bar-row">
|
|
<view class="tab-bar-col" @click="toUrl('/')">
|
|
<view>
|
|
<uni-icons v-if="nowPath === '/'" type="home-filled" size="30" color="#499495"></uni-icons>
|
|
<uni-icons v-else type="home" size="30" color="#7f7f7f"></uni-icons>
|
|
</view>
|
|
<view :class="nowPath === '/' ? 'active' : ''">首页</view>
|
|
</view>
|
|
<view class="tab-bar-col" @click="toUrl('/pages/main/bgcx/bgcx')">
|
|
<view>
|
|
<uni-icons v-if="nowPath === '/pages/main/bgcx/bgcx'" type="wallet-filled" size="30" color="#499495"></uni-icons>
|
|
<uni-icons v-else type="wallet" size="30" color="#7f7f7f"></uni-icons>
|
|
</view>
|
|
<view :class="nowPath === '/pages/main/bgcx/bgcx' ? 'active' : ''">报告查询</view>
|
|
</view>
|
|
<view class="tab-bar-col" @click="toUrl('/pages/main/order/order')">
|
|
<view>
|
|
<uni-icons v-if="nowPath === '/pages/main/order/order'" type="person-filled" size="30" color="#499495"></uni-icons>
|
|
<uni-icons v-else type="person" size="30" color="#7f7f7f"></uni-icons>
|
|
</view>
|
|
<view :class="nowPath === '/pages/main/order/order' ? 'active' : ''">我的订单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRoute } from 'vue-router';
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import {
|
|
onShow,onLoad
|
|
} from '@dcloudio/uni-app'
|
|
|
|
let nowPath = ref('/');
|
|
|
|
const route = useRoute();
|
|
|
|
onShow(()=>{
|
|
setTimeout(()=>{
|
|
document.title = '健康管理中心';
|
|
},300)
|
|
})
|
|
// 初始化 nowPath
|
|
onMounted(() => {
|
|
nowPath.value = route.path
|
|
});
|
|
|
|
// 监听路由变化
|
|
watch(
|
|
() => route.path,
|
|
(newPath) => {
|
|
console.log('路由路径已更新:', newPath);
|
|
nowPath.value = newPath.replace(/\/$/, ''); // 移除尾随斜杠
|
|
}
|
|
);
|
|
|
|
// 跳转方法
|
|
const toUrl = (url) => {
|
|
|
|
uni.redirectTo({ url }); // 非 TabBar 页面使用 navigateTo
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 110rpx;
|
|
z-index: 999;
|
|
}
|
|
.tab-bar-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 10rpx 40rpx;
|
|
}
|
|
.tab-bar-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #6f6f6f;
|
|
font-size: 22rpx;
|
|
}
|
|
.active {
|
|
color: #499495;
|
|
}
|
|
</style> |