QianNiaoShop/components/Tabbar/index.vue

<template>
	<u-tabbar :value="value" :list="tabbar_list" active-color="#4076D6" inactive-color="#B8C0C8" :border-top="false"></u-tabbar>
</template>

<script>
import indexIcon from '../../static/Tar_bar_slices/index.png'
import indexIconFill from '../../static/Tar_bar_slices/index-fill.png'
import orderIcon from '../../static/Tar_bar_slices/order.png'
import orderIconFill from '../../static/Tar_bar_slices/order-fill.png'
import goodsIcon from '../../static/Tar_bar_slices/goods.png'
import goodsIconFill from '../../static/Tar_bar_slices/goods-fill.png'
import userIcon from '../../static/Tar_bar_slices/user.png'
import userIconFill from '../../static/Tar_bar_slices/user-fill.png'
import myIcon from '../../static/Tar_bar_slices/my.png'
import myIconFill from '../../static/Tar_bar_slices/my-fill.png'
export default {
	model: {
		props: 'value'
	},
	props: {
		value: {
			type: Number,
			default: 0
		}
	},
	computed: {
		tabbar_list() {
			return [
				{
					iconPath: indexIcon,
					selectedIconPath: indexIconFill,
					text: '工作台',
					customIcon: false,
					pagePath: '/pages/index/index'
				},
				{
					iconPath: orderIcon,
					selectedIconPath: orderIconFill,
					text: '订单',
					customIcon: false,
					pagePath: '/pages/order/index'
				},
				{
					iconPath: goodsIcon,
					selectedIconPath: goodsIconFill,
					text: '商品',
					customIcon: false,
					pagePath: '/pages/goods/index'
				},
				{
					iconPath: userIcon,
					selectedIconPath: userIconFill,
					text: '客户',
					customIcon: false,
					pagePath: '/pages/customer/CustomerList'
				},
				{
					iconPath: myIcon,
					selectedIconPath: myIconFill,
					text: '我的',
					customIcon: false,
					pagePath: '/pages/user/index'
				}
			];
		}
	}
};
</script>

<style>
	.u-tabbar__content__item__text .u-line-1{
		font-size: 20rpx !important;
	}
</style>