110 lines
4.9 KiB
Vue
110 lines
4.9 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 v-if="index === 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18.733154296875" viewBox="0 0 18 18.733154296875"><path d="M18,17.733154C18,18.285454,17.552299,18.733154,17,18.733154L1,18.733154C0.44772005,18.733154,0,18.285454,0,17.733154L0,7.2222252C0,6.9136353,0.14246988,6.6223249,0.38606,6.4328756L8.3860998,0.21064496C8.7472,-0.070214987,9.2528,-0.070214987,9.6139002,0.21064496L17.613899,6.4328756C17.8575,6.6223249,18,6.9136353,18,7.2222252L18,17.733154ZM16,16.733154L16,7.7113056L9,2.266865L2,7.7113056L2,16.733154L16,16.733154Z" :fill="selected === 0 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
|
|
<svg v-if="index === 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="20" viewBox="0 0 18 20"><path d="M17,20L1,20C0.44772005,20,0,19.552299,0,19L0,1C0,0.44772005,0.44772005,0,1,0L17,0C17.552299,0,18,0.44772005,18,1L18,19C18,19.552299,17.552299,20,17,20ZM16,18L16,2L2,2L2,18L16,18ZM5,5L13,5L13,7L5,7L5,5ZM5,9L13,9L13,11L5,11L5,9ZM5,13L10,13L10,15L5,15L5,13Z" :fill="selected === 1 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
|
|
<svg v-if="index === 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="21" viewBox="0 0 16 21"><path d="M16,21L14,21L14,19C14,17.3431,12.6569,16,11,16L5,16C3.3431501,16,2,17.3431,2,19L2,21L0,21L0,19C0,16.2386,2.2385802,14,5,14L11,14C13.7614,14,16,16.2386,16,19L16,21ZM8,12C4.6862898,12,2,9.3136997,2,6C2,2.68629,4.6862898,0,8,0C11.3137,0,14,2.68629,14,6C14,9.3136997,11.3137,12,8,12ZM8,10C10.2091,10,12,8.2091398,12,6C12,3.7908602,10.2091,2,8,2C5.7908602,2,4,3.7908602,4,6C4,8.2091398,5.7908602,10,8,10Z" :fill="selected === 2 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></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>
|