232 lines
7.4 KiB
Vue
232 lines
7.4 KiB
Vue
<template>
|
|
<view class="u-page__item" v-if="tabbar?.items?.length > 0">
|
|
<su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
|
|
:inactiveColor="tabbar.style.color" :activeColor="tabbar.style.activeColor" :midTabBar="tabbar.mode === 2"
|
|
:customStyle="tabbarStyle">
|
|
<su-tabbar-item v-for="(item, index) in Citrn" :key="item.text" :text="item.text" :name="item.url"
|
|
:isCenter="getTabbarCenter(index)" :centerImage="sheep.$url.cdn(item.iconUrl)"
|
|
@tap="sheep.$router.go(item.url)"
|
|
:vl="state.themeType">
|
|
<template v-slot:active-icon>
|
|
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
|
|
</template>
|
|
<template v-slot:inactive-icon>
|
|
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
|
|
</template>
|
|
</su-tabbar-item>
|
|
</su-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
unref,
|
|
ref,
|
|
reactive
|
|
} from 'vue';
|
|
import sheep from '@/sheep';
|
|
const app = computed(() => sheep.$store('app'));
|
|
const state = reactive({
|
|
themeType:app.value.platform.themeType
|
|
});
|
|
const tabbar = computed(() => {
|
|
return sheep.$store('app').template.basic?.tabbar;
|
|
});
|
|
console.log('--------', tabbar.value.items)
|
|
const Citrn = ref([]);
|
|
|
|
|
|
|
|
|
|
if (state.themeType == 'lv') {
|
|
Citrn.value = [{
|
|
text: "首页",
|
|
url: "/pages/index/index",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/fdece57673d74d956692edad8c83e85b62503f90f1286cfcbfa9e1c564e127f0.png"
|
|
},
|
|
{
|
|
text: "分类",
|
|
url: "/pages/index/category?id=3",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/3f681bdfd791d2170fff188be799c588b60a3ceb5b9cd22b8b94a1ae508783d4.png"
|
|
},
|
|
{
|
|
text: "购物车",
|
|
url: "/pages/index/cart",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/c8e2bc5e2d49ad959951e52c4f4020d6b794310389a09138e1b454be6d6086ec.png"
|
|
},
|
|
{
|
|
text: "我的",
|
|
url: "/pages/index/user",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/cfd3ca7242acfa44b890c66b43ea39dc83de0570a20718251c73785540085002.png"
|
|
}
|
|
];
|
|
} else if (state.themeType == 'blue') {
|
|
Citrn.value = [{
|
|
text: "首页",
|
|
url: "/pages/index/index",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/d353e289077f36dab00bb39b161e04364e8d5c1f8e86b2c8ad77e2efc8b38c80.png"
|
|
},
|
|
{
|
|
text: "分类",
|
|
url: "/pages/index/category?id=3",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/ffdbfc0244b68cbc0985339049e9b5b5cddf16e50cf4c0ec7326efd61dc5334d.png"
|
|
},
|
|
{
|
|
text: "购物车",
|
|
url: "/pages/index/cart",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/5d399948d0d391a2ae88fb29049ced561106d7bc6d3bae525c32f3f6dfb92677.png"
|
|
},
|
|
{
|
|
text: "我的",
|
|
url: "/pages/index/user",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/4a5387da733de9a9b2bfe921d0a3f09031cc6da7d3bf1b6125eb6635c9e5f7e9.png"
|
|
}
|
|
];
|
|
|
|
} else if (state.themeType == 'pink') {
|
|
Citrn.value = [{
|
|
text: "首页",
|
|
url: "/pages/index/index",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/0af8fd1f7dd91b22ce8480a4f75591d237f3a359a9d991e4eb333eda96f755fe.png"
|
|
},
|
|
{
|
|
text: "分类",
|
|
url: "/pages/index/category?id=3",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/15548546af5bd5e13ff5c69c5acab5ab0d3d0333b63d583fd0470f3d48bf4e76.png"
|
|
},
|
|
{
|
|
text: "购物车",
|
|
url: "/pages/index/cart",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/27ed7f014ba28a6c257c84c2ad6e8c73335d8e9df2076db4aedff1c5d03c66ba.png"
|
|
},
|
|
{
|
|
text: "我的",
|
|
url: "/pages/index/user",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/059277d5bfe7b44ee74cece09fbe8515f5d021f20b2a9729590265cdf893f31a.png"
|
|
}
|
|
];
|
|
|
|
} else if (state.themeType == 'orange') {
|
|
Citrn.value = [{
|
|
text: "首页",
|
|
url: "/pages/index/index",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/aab810be4dea52817656ac3ae17ed418561bc4b12b4e33116cb68abaf362311f.png"
|
|
},
|
|
{
|
|
text: "分类",
|
|
url: "/pages/index/category?id=3",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/c972bdc6808b37c9c88eac52bb8feb2bf787874a64b45a5ac3e41be60dee0994.png"
|
|
},
|
|
{
|
|
text: "购物车",
|
|
url: "/pages/index/cart",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/69febc6f7f2371180ae3e11c25bf46c046bdb1b80a14f0b5df3abbea060f47ac.png"
|
|
},
|
|
{
|
|
text: "我的",
|
|
url: "/pages/index/user",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
|
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/de40b82a64b9554092cc7c35621ce1a438bbf234e9b43567790a7b9bc1b8f618.png"
|
|
}
|
|
];
|
|
|
|
} else {
|
|
Citrn.value = [{
|
|
text: "首页",
|
|
url: "/pages/index/index",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
|
|
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/1-002.png"
|
|
},
|
|
{
|
|
text: "分类",
|
|
url: "/pages/index/category?id=3",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
|
|
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/2-002.png"
|
|
},
|
|
{
|
|
text: "购物车",
|
|
url: "/pages/index/cart",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
|
|
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/3-002.png"
|
|
},
|
|
{
|
|
text: "我的",
|
|
url: "/pages/index/user",
|
|
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
|
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/4-002.png"
|
|
}
|
|
];
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const tabbarStyle = computed(() => {
|
|
const backgroundStyle = tabbar.value.style;
|
|
if (backgroundStyle.bgType === 'color') {
|
|
return {
|
|
background: backgroundStyle.bgColor
|
|
};
|
|
}
|
|
if (backgroundStyle.bgType === 'img')
|
|
return {
|
|
background: `url(${sheep.$url.cdn(
|
|
backgroundStyle.bgImg,
|
|
)}) no-repeat top center / 100% auto`,
|
|
};
|
|
});
|
|
|
|
const getTabbarCenter = (index) => {
|
|
if (unref(tabbar).mode !== 2) return false;
|
|
return unref(tabbar).items % 2 > 0 ?
|
|
Math.ceil(unref(tabbar).items.length / 2) === index + 1 :
|
|
false;
|
|
};
|
|
|
|
const props = defineProps({
|
|
path: String,
|
|
default: '',
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {
|
|
padding: 0;
|
|
|
|
&__item {
|
|
&__title {
|
|
color: var(--textSize);
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
font-size: 15px;
|
|
|
|
&__slot-title {
|
|
color: var(--textSize);
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
&__slot-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
}
|
|
</style> |