cbz-sj/components/custom-tab-bar/custom-tab-bar.vue

<template>
	<view class="tabbar hflex jbetween">
		<view class="tb vflex acenter" @click="toTab(1)">
			<image src="/static/images/tabbar/tab1_active.png" v-if="current == 1" class="icon"></image>
			<image src="/static/images/tabbar/tab1.png" v-else class="icon"></image>
			<view class="tab_text" :class="current == 1?'tab_text2': ''">商品</view>	
		</view>
		<view class="tb vflex acenter" @click="open">
			<image src="/static/images/tabbar/tab2.png" class="icon2"></image>
			<view class="tab_text" style="padding-top: 50rpx;">发布</view>	
		</view>
		<view class="tb vflex acenter" @click="toTab(3)">
			<image src="/static/images/tabbar/tab3_active.png" v-if="current == 3" class="icon"></image>
			<image src="/static/images/tabbar/tab3.png" v-else class="icon"></image>
			<view class="tab_text" :class="current == 3?'tab_text2': ''">我的</view>	
		</view>
		<u-popup :show="show" @close="close" round="10" mode="bottom" :safeAreaInsetBottom="false">
			<view class="popu">
				<view class="hflex">
					<block v-for="(item,index) in orderList" :key="index">
						<view class="vflex acenter" style="width: 25%;padding-top: 80rpx;" @click="toOrder(item.url)">
							<image :src="item.img" class="order_img"></image>
							<view class="order_text">{{item.name}}</view>
						</view>
					</block>
				</view>
				<view class="hflex acenter jcenter">
					<image src="/static/images/common/close.png" @click="close" class="close"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		name: 'custom-tab-bar',
		props: {
			current: {
				type: Number,
				value: 1
			}
		},
		data() {
			return {
				show: false,
				orderList: [
					{
						img: '/static/images/common/order1.png',
						name: '采购订单',
						url: '/pages/release/purchase/purchase'
					},
					{
						img: '/static/images/common/order2.png',
						name: '生产订单',
						url: '/pages/release/production/production'
					},
					{
						img: '/static/images/common/order3.png',
						name: '外协订单',
						url: '/pages/release/waixie/waixie'
					},
					{
						img: '/static/images/common/order4.png',
						name: '海运订单',
						url: '/pages/release/ocean/ocean'
					}
				]
			}
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			toOrder(url) {
				this.close()
				$api.jump(url)
				
			},
			toTab(index) {
				if(index == 1) {
					$api.jump('/pages/tabbar/index/index',2)
				} else {
					$api.jump('/pages/tabbar/mine/mine',2)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 750rpx;
		height: 182rpx;
		position: fixed;
		bottom: 0;
		z-index: 999999;
		background: url('/static/images/tabbar/tab_bg.png') no-repeat;
		background-size: 100%;
		box-sizing: border-box;
		padding: 20rpx 0 0;
		.tb {
			width: 250rpx;
			position: relative;
			.icon {
				width: 48rpx;
				height: 48rpx;
			}
			.tab_text {
				font-size: 20rpx;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				padding-top: 5rpx;
			}
			.tab_text2 {
				color: #5370FF;
			}
			.icon2 {
				position: absolute;
				top: -44rpx;
				left: 70rpx;
				width: 110rpx;
				height: 110rpx;
			}
		}
		.popu {
			width: 750rpx;
			height: 560rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0px 0px;
			.order_img {
				width: 128rpx;
				height: 128rpx;
			}
			.order_text {
				padding-top: 18rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #444444;
				line-height: 40rpx;
			}
			.close {
				margin-top: 140rpx;
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
</style>