|
|
@@ -2,8 +2,16 @@
|
|
|
<view class="custom-nav">
|
|
|
<view class="status_bar"></view>
|
|
|
<view class="nav-content">
|
|
|
- <view class="nav-left" v-if="showBack" @click="goBack">
|
|
|
- <uni-icons type="back" size="20" color="#333"></uni-icons>
|
|
|
+ <view class="nav-left" @click="leftTypeComputed !== 'none' && handleLeft()">
|
|
|
+ <template v-if="leftTypeComputed === 'back'">
|
|
|
+ <uni-icons type="back" size="20" color="#333"></uni-icons>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="leftTypeComputed === 'home'">
|
|
|
+ <text class="home-text">首页</text>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 占位,保持左右对称 -->
|
|
|
+ </template>
|
|
|
</view>
|
|
|
<view class="nav-title">{{ title }}</view>
|
|
|
<view class="nav-right"></view>
|
|
|
@@ -12,19 +20,39 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, computed } from 'vue'
|
|
|
+import { computed } from 'vue'
|
|
|
|
|
|
interface Props {
|
|
|
title: string
|
|
|
- showBack?: boolean
|
|
|
+ // leftType: 'back' | 'home' | 'none',默认 'back'
|
|
|
+ leftType?: 'back' | 'home' | 'none'
|
|
|
}
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
- showBack: true
|
|
|
+ leftType: 'back'
|
|
|
})
|
|
|
|
|
|
-const goBack = () => {
|
|
|
- uni.navigateBack()
|
|
|
+const leftTypeComputed = computed(() => props.leftType || 'back')
|
|
|
+
|
|
|
+const handleLeft = () => {
|
|
|
+ const t = leftTypeComputed.value
|
|
|
+ if (t === 'home') {
|
|
|
+ // 若首页为 tabBar 页,优先使用 switchTab
|
|
|
+ try {
|
|
|
+ uni.switchTab({ url: '/pages/index/index' })
|
|
|
+ } catch (e) {
|
|
|
+ // fallback 到 reLaunch / navigateTo
|
|
|
+ try {
|
|
|
+ uni.reLaunch({ url: '/pages/index/index' })
|
|
|
+ } catch (e2) {
|
|
|
+ uni.navigateTo({ url: '/pages/index/index' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (t === 'back') {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -48,7 +76,7 @@ const goBack = () => {
|
|
|
.nav-content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: 44px;
|
|
|
+ height: 52px; /* increased to give more vertical space */
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
|
|
|
@@ -59,12 +87,18 @@ const goBack = () => {
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
+.home-text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
.nav-title {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
+ font-size: 18px; /* slightly larger */
|
|
|
+ font-weight: 600;
|
|
|
color: #333;
|
|
|
+ padding-block: 6px; /* nudge title down a bit for more top margin */
|
|
|
}
|
|
|
|
|
|
.nav-right {
|