zyejMAll-mobile/sheep/components/s-tabbar/s-tabbar.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>