digitalMen/components/wike-tabbar/wike-tabbar.vue

<template>
	<view>
		<view class="tabbar cu-bar flex-between bg-white" :class="isShowAnimate ? 'fadeInUp' : ''" :style="{'background-color':tabBar.bgColor,'border-top-color':tabBar.borderColor}"
		 v-show="onTabbar">
			<block v-for="(item, index) in tabBar.list" :key="index">
				<view class="action tabbar-item" :class="[item.showBig?'add-action':'']" :style="{color:item.pagePath==('/'+nowPath)?themecolor:tabBar.color}"
				 @click="clickTab(item)">
					<block v-if="tabBar.showType=='img'">
						<image class="tabbar-icon" :src="item.pagePath==('/'+nowPath)? item.selectedIconPath : item.iconPath"></image>
					</block>
					<block v-if="tabBar.showType=='iconfont'">
						<view :class="['tabbar-icon',item.fontClass]" :style="{'font-size':'22px','background-color':item.showBig?themecolor:''}"></view>
					</block>
					<text class="tabbar-text">{{ item.text }}</text>
					<text class="tabbar-item-num" v-if="item.num">{{item.num}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		props: {
			onTabbar: {
				type: Boolean,
				default: true
			},
			infonum: {
				type: String,
				default: ''
			},
			isShowAnimate: {
				type: Boolean,
				default: false
			},
			isglobalpartjob: {
				type: String,
				default: '1'
			},
			themecolor: {
				type: String,
				default: '#26B3A0'
			},
			is_aipainting:{
				type: String,
				default: ''
			}
		},
		computed: {
			...mapGetters(['appInfo'])
		},
		data() {
			return {
				showBig: false,
				tabBar: {
					color: '#333333',
					selectedColor: '#26B3A0',
					showType: "iconfont", //img/图片模式,iconfont/字体图标模式
					borderColor: "#d3d3d3",
					bgColor: "#ffffff",
					list: [{
							pagePath: "/pages/index/index",
							navigateType: "switchTab",
							showBig: false,
							fontClass: "tn-icon-home-capsule",
							"iconPath": "/static/images/tabs/index.png",
							"selectedIconPath": "/static/images/tabs/indexs.png",
							"text": "首页"
						},
						{
							pagePath: "/pages/template/template",
							navigateType: "switchTab",
							showBig: false,
							fontClass: "tn-icon-cube",
							"iconPath": "/static/images/tabs/joblist.png",
							"selectedIconPath": "/static/images/tabs/joblists.png",
							"text": "应用"
						},
						{
							pagePath: "/pages/painting/painting",
							navigateType: "switchTab",
							showBig: false,
							fontClass: "tn-icon-image",
							"iconPath": "/static/images/tabs/joblist.png",
							"selectedIconPath": "/static/images/tabs/joblists.png",
							"text": "绘画"
						},
						{
							pagePath: "/pages/signin/signin",
							navigateType: "switchTab",
							showBig: false,
							fontClass: "tn-icon-funds",
							"iconPath": "/static/images/tabs/joblist.png",
							"selectedIconPath": "/static/images/tabs/joblists.png",
							"text": "任务"
						},
						{
							pagePath: "/pages/user/user",
							navigateType: "switchTab",
							showBig: false,
							fontClass: "tn-icon-my",
							"iconPath": "/static/images/tabs/mine.png",
							"selectedIconPath": "/static/images/tabs/mines.png",
							"text": "我的"
						}
					]
				},


			};
		},
		
		onReady() {
			
			try {
				uni.hideTabBar({
					animation: false
				})
			} catch (e) {
				//TODO handle the exception
			}
			// setTimeout(function(){
			// 	uni.showTabBar({});
			// },600);
		},
		mounted() {
			// console.log(this.is_aipainting);
			if(this.tabBar.list.length>4&&this.is_aipainting == '2'){
				this.tabBar.list.splice(2, 1)
			}
			
			try {
				uni.hideTabBar({
					animation: false
				})
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			clickTab(item) {
				
				if (item.showBig == true) {
					this.showBig = true
				} else {
					uni[item.navigateType]({
						url: item.pagePath
					});
					this.showBig = false
				}
			},
			toggleDialog() {
				
				this.showBig = !this.showBig
			},
			toPost(e) {
				this.toggleDialog();
				uni.navigateTo({
					url: '/pages/' + e
				})
			},
			// 路由跳转
			jump(path, parmas) {
				if (Boolean(uni.getStorageSync('userInfo').telnum)) {
					this.$Router.push({
						path: path,
						query: parmas
					});
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
				
			}
		},
		computed: {
			...mapState({
				showLoginTip: state => state.user.showLoginTip,
			}),
			nowPath() {
				return getCurrentPages()[0] && getCurrentPages()[0].route;
			},
		}
	};
</script>

<style lang="scss">
	.tabbar {
		display: flex;
		justify-content: space-around;
		/* height: 8vh; */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		height: 98rpx;
		background-color: #ffffff;
		// border-top: 1px solid rgba(193, 192, 201, 0.5);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -10rpx 20rpx 0 rgba(137, 148, 143, .1);
		min-height: 128rpx;
		    padding: 0;
		    height: calc(100rpx + env(safe-area-inset-bottom) / 2);
		    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar::before {
		content: "";
		width: 100%;
		height: 152rpx;
		// background: url(https://ls11.cn/attachment/images/9/2019/09/TW284XJ028xWXH1mCh7pw7WhZjK4Jj.png) no-repeat;
		background-position: center;
		background-size: cover;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
		padding-bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) - 12rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) - 12rpx);
	}

	.flex-between {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tabbar-item {
		width: 33%;
		display: -webkit-inline-box;
		display: -webkit-inline-flex;
		display: -ms-inline-flexbox;
		display: inline-flex;
		flex-basis: 33%;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.tabbar-item.active {
		color: #fe8b1e;
	}

	.tabbar-item.big {
		position: relative;
		top: -23rpx;
		// font-size: 130%;

		.tabbar-icon {
			width: 92rpx;
			height: 92rpx;
		}
	}

	.tabbar-icon {
		width: 46rpx;
		height: 46rpx;
		display: block;
		margin: 0 auto;
		margin-bottom: 4rpx;
		// font-size: 46rpx;
		// line-height: 10rpx;
	}

	.tabbar-text {
		font-size: 12px;
		letter-spacing: 0;
		text-align: center;
		line-height: 14px;
		display: block;
		font-weight: 600;
		// color: #333;
	}

	.tabbar-item-num {
		position: absolute;
		top: 1vw;
		font-size: 20rpx;
		padding: 4rpx;
		border-radius: 50%;
		background-color: #ff4a39;
		color: #ffffff;
		width: 28rpx;
		height: 28rpx;
		text-align: center;
		line-height: 28rpx;
		left: 45rpx;
		margin: auto;
		right: 0;
	}

	.bg {
		position: fixed;
		z-index: 1007;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: .8;
	}

	.fixed-fabu {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1008;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;

		h2 {
			font-size: 18px;
			color: #333;
			font-weight: 400;
			text-align: center;
			margin: 20rpx 0;
		}

		.ul {
			padding: 0 50rpx;
		}
	}

	.close {
		width: 44px;
		height: 44px;
		display: block;
		margin: 35px auto;
	}

	@keyframes fabu_animate_in {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	.ani_fabu_in {
		animation: fabu_animate_in .5s 0s ease-in-out;
		animation-fill-mode: both;
		animation-iteration-count: 1
	}

	@keyframes close_rotate {
		0% {
			transform: rotate(0deg)
		}

		100% {
			transform: rotate(360deg)
		}
	}

	.close_rotate {
		animation: close_rotate .5s .1s ease-in-out;
		animation-fill-mode: both;
		animation-iteration-count: 1
	}

	.btn-personal-rec {
		border-radius: 10rpx;
		line-height: 150rpx;
		height: 150rpx;
		font-size: 50rpx;
		color: #fff;
		font-weight: bold;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 14rpx 34rpx rgba(41, 57, 88, 0.4);
	}

	.btn-personal-rec .btn-img {
		margin-right: 20rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.recruit {
		background: linear-gradient(to right, #03a9f48c, #03A9F4);
	}

	.partjob {
		background: linear-gradient(to right, #FF98008c, #FF9800);
		// line-height: 100rpx;
	}

	.resume {
		background: linear-gradient(to right, #FF57228c, #FF5722);
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}

		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	.fadeInUp {
		animation-name: fadeInUp;
		animation-duration: .5s;
		animation-delay: 0s;
	}
	
	
	
</style>