ImageTabBar.vue
2.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<view class="bar safe-bottom">
<view
v-for="item in items"
:key="item.key"
class="item"
@click="go(item.path)"
>
<image
class="ico"
:src="current === item.key ? item.selectedIcon : item.icon"
mode="aspectFit"
/>
<text :class="['txt', current === item.key ? 'txt-on' : '']">{{
item.text
}}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { getMpToken } from "@/utils/api/http";
import { getMpLoginChannel } from "@/utils/api/mpSession";
import { markUploadFormClearOnNextEnter } from "@/utils/uploadTabClear";
const props = defineProps<{
current: "home" | "upload" | "user";
}>();
/* 小程序里自定义组件内图片需相对组件目录，否则 /static 可能加载失败；与 pages.json tabBar 同源文件 */
// #ifdef MP
const TAB = "../static/tabbar";
// #endif
// #ifndef MP
const TAB = "/static/tabbar";
// #endif
const items = [
{
key: "home" as const,
path: "/pages/home/home",
text: "首页",
icon: `${TAB}/home.png`,
selectedIcon: `${TAB}/home_on.png`,
},
{
key: "upload" as const,
path: "/pages/upload/upload",
text: "上传",
icon: `${TAB}/up.png`,
selectedIcon: `${TAB}/up_on.png`,
},
{
key: "user" as const,
path: "/pages/user/user",
text: "我的",
icon: `${TAB}/my.png`,
selectedIcon: `${TAB}/my_on.png`,
},
];
function go(url: string) {
// #ifdef MP-WEIXIN
if (url === "/pages/upload/upload" || url === "/pages/user/user") {
const ok = !!getMpToken() && getMpLoginChannel() === "weixin";
if (!ok) {
const tab = url.includes("upload") ? "upload" : "user";
uni.reLaunch({ url: `/pages/login/login?tab=${tab}` });
return;
}
}
// #endif
// 从上传页切到其他 tab 时再标记清空；选图/拍照也会触发页面 onHide，不能依赖 onHide 清表单
if (props.current === "upload" && url !== "/pages/upload/upload") {
markUploadFormClearOnNextEnter();
}
uni.switchTab({ url });
}
</script>
<style scoped>
.bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
display: flex;
height: 100rpx;
align-items: center;
justify-content: space-around;
border-top: 1rpx solid #e5e7eb;
background: #fff;
box-sizing: content-box;
}
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
}
.item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100rpx;
}
.ico {
width: 48rpx;
height: 48rpx;
}
.txt {
margin-top: 6rpx;
font-size: 22rpx;
color: #6b7280;
}
.txt-on {
color: #4a90e2;
font-weight: 500;
}
</style>