205 lines
9.3 KiB
Vue
205 lines
9.3 KiB
Vue
<template>
|
|
<uni-tabbar class="myCustomTabbar uni-tabbar"
|
|
:style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }">
|
|
<div class="uni-tabbar__item" v-for="(item, index) in tabItems" :key="index" @click="handleTabItemTap(item)"
|
|
:class="{ 'call-phone-item': item.phoneIcon }">
|
|
<div class="uni-tabbar__bd">
|
|
<div class="uni-tabbar__icon">
|
|
<svg version="1.0" v-if="index === 0" :fill="selected === 0 ? '#fb322e' : '#000000'"
|
|
xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 0 ? '#fb322e' : '#000000'" stroke="none">
|
|
<path d="M7325 15449 c-172 -11 -228 -23 -445 -96 -193 -64 -233 -89 -1435
|
|
-898 -331 -223 -790 -531 -1335 -897 -381 -256 -579 -388 -1265 -849 -176
|
|
-119 -507 -341 -735 -494 -1275 -856 -1385 -930 -1465 -995 -329 -268 -553
|
|
-687 -595 -1115 -8 -78 -10 -1318 -7 -4305 3 -3807 5 -4202 19 -4275 70 -347
|
|
219 -635 448 -865 147 -148 267 -236 440 -320 157 -78 371 -139 545 -158 88
|
|
-9 11807 -9 11895 0 132 14 331 65 457 117 85 35 265 137 343 194 194 144 376
|
|
365 485 588 47 97 110 280 141 409 18 72 19 267 22 4320 2 2943 0 4273 -8
|
|
4338 -35 309 -194 659 -411 900 -137 153 -164 173 -964 710 -225 151 -558 375
|
|
-740 497 -181 122 -490 329 -685 460 -195 131 -472 317 -615 413 -143 97 -438
|
|
295 -655 440 -408 274 -855 574 -1350 907 -824 554 -1053 706 -1131 753 -195
|
|
117 -466 204 -679 217 -52 3 -111 7 -130 9 -19 1 -84 -1 -145 -5z m795 -2326
|
|
c885 -595 1228 -826 1800 -1209 499 -335 1064 -715 1600 -1075 168 -113 566
|
|
-380 885 -594 319 -214 583 -393 587 -399 4 -6 8 -1769 8 -3918 l0 -3908
|
|
-5557 0 -5558 0 2 3912 c2 3121 5 3915 15 3924 7 6 247 168 533 359 286 192
|
|
678 454 870 584 610 410 1145 769 1645 1105 267 179 611 410 765 513 154 104
|
|
546 367 870 585 325 218 646 435 715 482 77 53 133 85 145 83 11 -2 315 -202
|
|
675 -444z" />
|
|
</g>
|
|
</svg>
|
|
<svg v-if="index === 1" version="1.0" :fill="selected === 1 ? '#fb322e' : '#000000'"
|
|
xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 1 ? '#fb322e' : '#000000'" stroke="none">
|
|
<path d="M3950 15169 c-307 -14 -632 -62 -875 -130 -38 -11 -86 -24 -105 -29
|
|
-228 -64 -426 -142 -675 -267 -71 -36 -159 -83 -194 -104 -34 -22 -65 -39 -68
|
|
-39 -11 0 -293 -198 -382 -268 -279 -221 -558 -499 -767 -767 -213 -273 -335
|
|
-466 -462 -736 -105 -220 -117 -251 -183 -452 -92 -281 -149 -551 -186 -882
|
|
-17 -151 -18 -354 -18 -3730 0 -3902 -3 -3647 55 -3999 48 -292 156 -688 221
|
|
-808 5 -10 9 -22 9 -28 0 -9 14 -42 90 -205 107 -231 297 -537 479 -770 137
|
|
-176 383 -433 561 -588 58 -51 111 -97 118 -105 8 -7 30 -25 50 -40 21 -15 39
|
|
-29 42 -32 28 -28 363 -257 400 -273 8 -4 38 -20 65 -37 104 -63 400 -206 510
|
|
-247 40 -15 66 -25 108 -42 39 -17 140 -50 202 -66 33 -9 83 -22 110 -30 87
|
|
-23 286 -63 415 -84 297 -48 150 -46 3980 -46 3397 0 3623 1 3753 18 422 53
|
|
793 143 1042 252 17 8 55 23 85 35 64 25 315 148 380 186 25 15 59 35 75 44
|
|
139 79 455 300 540 377 12 10 59 52 105 92 103 91 310 298 405 406 39 44 78
|
|
89 88 100 24 26 204 266 244 325 30 45 98 155 134 217 11 18 29 50 41 70 38
|
|
67 154 297 172 343 10 25 24 61 33 80 109 252 210 629 254 955 39 288 39 239
|
|
39 3900 0 2202 -4 3561 -10 3630 -25 280 -61 498 -120 730 -36 137 -98 341
|
|
-119 390 -5 11 -15 36 -22 55 -36 99 -189 416 -251 519 -21 34 -38 65 -38 67
|
|
0 3 -28 46 -61 97 -441 661 -1042 1200 -1687 1515 -176 86 -329 150 -437 183
|
|
-22 6 -49 15 -60 19 -41 16 -164 51 -280 80 -304 75 -517 105 -860 120 -262
|
|
12 -6682 11 -6945 -1z m7085 -1654 c198 -24 293 -43 446 -90 600 -185 1142
|
|
-644 1454 -1230 162 -305 243 -609 265 -1000 13 -228 13 -6632 0 -6860 -12
|
|
-212 -24 -297 -72 -495 -22 -93 -53 -195 -68 -222 -6 -10 -10 -22 -10 -28 0
|
|
-25 -110 -251 -183 -375 -231 -392 -652 -782 -1051 -974 -319 -153 -574 -217
|
|
-956 -241 -223 -13 -6622 -14 -6850 0 -91 6 -196 15 -235 20 -614 92 -1133
|
|
390 -1553 893 -223 268 -402 617 -476 932 -81 340 -75 62 -76 3916 0 2288 3
|
|
3462 10 3535 52 542 239 976 601 1389 363 415 821 689 1329 795 237 49 99 48
|
|
3815 49 3002 1 3507 -1 3610 -14z" />
|
|
<path d="M4444 11249 c-16 -4 -48 -7 -71 -8 -23 0 -66 -7 -95 -15 -318 -84
|
|
-559 -342 -608 -652 -12 -76 -14 -201 -5 -271 42 -307 285 -580 595 -669 63
|
|
-18 173 -19 3205 -22 2709 -2 3150 0 3210 12 299 62 551 299 632 596 26 94 25
|
|
330 -1 420 -41 139 -98 239 -197 344 -142 153 -302 234 -504 257 -90 10 -6114
|
|
18 -6161 8z" />
|
|
<path d="M4300 7949 c-365 -30 -666 -303 -735 -668 -33 -170 -9 -346 69 -505
|
|
106 -213 305 -376 536 -438 l85 -23 2175 0 c2368 0 2247 -3 2393 56 222 89
|
|
399 276 474 499 100 297 25 617 -197 841 -139 141 -313 223 -500 235 -110 8
|
|
-4212 10 -4300 3z" />
|
|
</g>
|
|
</svg>
|
|
|
|
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" v-if="index === 2"
|
|
:fill="selected === 2 ? '#fb322e' : '#000000'" width="18" height="18" viewBox="0 0 1284.000000 1514.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
|
|
<g transform="translate(0.000000,1514.000000) scale(0.100000,-0.100000)" :fill="selected === 2 ? '#fb322e' : '#000000'" stroke="none">
|
|
<path d="M6180 15024 c-362 -24 -555 -47 -800 -95 -934 -182 -1825 -609 -2527
|
|
-1211 -523 -450 -909 -919 -1255 -1528 -62 -108 -204 -403 -264 -548 -292
|
|
-700 -426 -1373 -426 -2132 0 -876 190 -1686 578 -2462 93 -186 103 -206 202
|
|
-373 339 -571 817 -1110 1356 -1529 75 -59 86 -71 70 -77 -10 -4 -109 -35
|
|
-219 -69 -444 -137 -1077 -380 -1467 -563 -605 -284 -1070 -849 -1233 -1496
|
|
-48 -195 -60 -300 -60 -551 1 -265 14 -376 70 -595 125 -489 436 -933 881
|
|
-1262 298 -220 666 -360 1056 -402 67 -8 1417 -11 4285 -11 3705 0 4203 2
|
|
4313 15 492 61 903 258 1267 609 323 310 530 654 634 1050 115 442 93 962 -58
|
|
1366 -204 546 -601 993 -1109 1248 -353 177 -1205 502 -1682 642 -40 12 -72
|
|
25 -70 29 2 5 48 44 103 86 459 358 903 842 1221 1332 584 899 894 1943 894
|
|
3013 0 2093 -1181 4003 -3050 4934 -626 312 -1266 495 -1960 561 -157 15 -633
|
|
27 -750 19z m545 -1744 c644 -54 1245 -262 1780 -615 251 -166 472 -354 698
|
|
-595 548 -587 897 -1360 981 -2178 21 -200 21 -564 0 -764 -84 -818 -433
|
|
-1591 -981 -2178 -429 -458 -903 -776 -1474 -988 -454 -169 -906 -242 -1409
|
|
-229 -410 11 -748 71 -1120 199 -559 193 -1032 489 -1450 908 -622 621 -990
|
|
1395 -1091 2290 -17 150 -17 610 0 760 53 475 176 897 381 1307 189 380 405
|
|
679 710 983 653 654 1472 1028 2415 1103 98 8 451 6 560 -3z m115 -9490 c1007
|
|
-44 1919 -214 2858 -535 391 -133 976 -377 1077 -448 81 -58 149 -149 177
|
|
-240 32 -99 31 -264 -1 -352 -56 -154 -189 -286 -341 -338 l-65 -22 -4070 -3
|
|
c-2760 -2 -4095 1 -4149 8 -117 15 -213 64 -301 154 -114 116 -155 217 -155
|
|
381 1 109 11 160 52 243 39 78 128 164 223 214 146 75 634 274 936 381 1182
|
|
418 2493 612 3759 557z" />
|
|
</g>
|
|
</svg>
|
|
<!-- <uv-icon v-if="showIcon" :name="item.icon" custom-prefix="custom-icon" :size="item.size || 20" :color="themeInfo.iconColor"></uv-icon> -->
|
|
</div>
|
|
<div class="uni-tabbar__label" :style="{ fontSize: '10px', color: selected === index ? '#fb322e' : '#000000' }">
|
|
{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
</uni-tabbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import { isXiaohongshu } from "@/config/index.js";
|
|
|
|
// 主题色配置
|
|
import { useMainStore } from "@/store/index.js"
|
|
const { themeInfo } = useMainStore();
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
direction: {
|
|
type: String,
|
|
default: 'horizontal',
|
|
},
|
|
showIcon: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
selected: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['onTabItemTap']);
|
|
|
|
const tabItems = computed(() => {
|
|
if (isXiaohongshu) {
|
|
return [
|
|
{ label: t('tabbar.home'), icon: 'home1', index: 0, pagePath: 'pages/index/index' },
|
|
{ label: '', icon: 'telephone', index: 2, pagePath: '', size: 34, phoneIcon: true },
|
|
{ label: t('tabbar.book'), icon: 'book', index: 1, pagePath: 'pages/book/index' },
|
|
]
|
|
} else {
|
|
return [
|
|
{ label: t('tabbar.home'), icon: '/static/tabbar/home.svg', index: 0, pagePath: 'pages/index/index' },
|
|
// { label: t('tabbar.book'), icon: 'book', index:1, pagePath:'pages/book/index'},
|
|
// { label: '', icon: 'telephone', index:2, pagePath:'', size: 34, phoneIcon: true },
|
|
{ label: "订单", icon: '/static/tabbar/order.svg', index: 3, pagePath: 'pages/unlock/index' },
|
|
{ label: t('tabbar.personal'), icon: '/static/tabbar/user.svg', index: 4, pagePath: 'pages/personal/index' },
|
|
]
|
|
}
|
|
});
|
|
|
|
const handleTabItemTap = (index) => {
|
|
emit('onTabItemTap', index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.myCustomTabbar {
|
|
display: flex;
|
|
}
|
|
|
|
.uni-tabbar {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
z-index: 998;
|
|
}
|
|
|
|
.uni-tabbar__item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
font-size: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.uni-tabbar__bd {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
font-size: 0;
|
|
text-align: center;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
svg {
|
|
max-width: 100%;
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
}
|
|
</style>
|