bitcooo/components/tabBar/tabBar.vue

<template>
		<view class="index-header ">
			<view class="con">
				<view class="tabbar_item" @click="goToPage(1)">
					<view class="uni-tabbar_bd">
						<view class="uni-tabbar_icon">
						<image :src="'/static/tongyonh/'+(selectActive==1?'Uniona':'Union')+'.png'" mode="aspectFit" class="img1"></image>
						</view>
						<view class="uni-tabbar_label"  :class="['text', selectActive==1?'active':'']">
						{{i18n.Wallet}}
						</view>
					</view>
				</view>
			<view class="tabbar_item" @click="goToPage(2)" v-if="showTwo">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==2?'nft_icon2':'nft_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==2?'active':'']">
							{{i18n.NFT}}
					</view>
				</view>
			</view>
			<view class="tabbar_item" @click="goToPage(3)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==3?'market_icona':'market_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==3?'active':'']">
						{{i18n.Market}}
					</view>
				</view>
			</view>
			<!-- <view class="tabbar_item" @click="goToPage(4)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==4?'Discover_icona':'Discover_icon')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==4?'active':'']">
							{{i18n.Discover}}
					</view>
				</view>
			</view> -->
			<view class="tabbar_item" @click="goToPage(5)">
				<view class="uni-tabbar_bd">
					<view class="uni-tabbar_icon">
					<image :src="'/static/tongyonh/'+(selectActive==5?'Profile_icon':'Profile_icona')+'.png'" mode="aspectFit" class="img1"></image>
					</view>
					<view class="uni-tabbar_label"  :class="['text', selectActive==5?'active':'']">
						{{i18n.Profile}}
					</view>
				</view>
			</view>
			</view>
			</view>
</template>
<script>

	const COMPONENT_NAME = 'tabBar'
	export default {
		name: COMPONENT_NAME,
	
	  
		
		props: {
		selectActive: {
			type: Number,
			default () {
				return 1
			}
		},
		},
		data() {
			return {
				status:'',
				showTwo:true,
				address:'',
			}
		},
		computed: {
		
		},
		mounted() {
			// 拿收藏品
		      this.getCollection();
		},
		methods: {
		async getCollection(){
			if(uni.getStorageSync('wallet')){
				this.address=uni.getStorageSync('wallet').address
			}else{
				this.address=uni.getStorageSync('walletInfo').BTC[0].address
			}
			let params = {
				address: this.address
			}
			const response = await this.$api.getNftProjectList(params)
			console.log(response.data,777)
			if(response.data.length==0||!response.data){
				 this.showTwo=false;
			}
			
		},
		goToPage(num) {
				if(num == 1) {
					uni.reLaunch({
						url: '/pages/menu/wallet/index'
					})
					
				} else if (num == 2) {
				uni.reLaunch({
					url: '/pages/menu/collection/index'
				})
				} else if (num == 3) {
					uni.reLaunch({
						url: '/pages/menu/market/index'
					})
				}else if (num == 4) {
					uni.reLaunch({
						url: '/pages/menu/discover/index'
					})
				}else if (num == 5) {
					uni.reLaunch({
						url: '/pages/menu/profile/index'
					})
				}
				
			}

	},
	computed: {
		i18n() {
			return this.$t('index')
		},
	}
	}
</script>


<style scoped lang="scss">
	.active{
		color: #5B53FF !important;
	}
	.uni-tabbar_label {
		color: rgb(153, 153, 153);
		    font-size: 10px;
		    line-height: normal;
		    margin-top: 3px;
			position: relative;
			    text-align: center;
    font-size: 20rpx !important;
}
	.uni-tabbar_icon{
		width: 24px !important;
		    height: 24px !important;
			position: relative;
			    display: inline-block;
			    margin-top: 5px;
	}
	.uni-tabbar_icon image {
	    width: 100%;
	    height: 100%;
	}
	.uni-tabbar_bd{
		height: 100rpx;
		position: relative;
		    -webkit-flex-direction: column;
		    flex-direction: column;
		    cursor: pointer;
	}
.con{
	width: 100%;
	background-color: rgb(247, 247, 250);
	    position: fixed;
	   bottom: 0;
	   left: 0;
	padding-top: 28rpx;
	    padding-bottom: 30rpx ;
	    background-image: -webkit-linear-gradient(bottom, #FAF8F8, #FFFFFF) !important;
	    background-image: linear-gradient(to top, #FAF8F8, #FFFFFF) !important;
		border-top: 2rpx solid #F7F4F4;
		display: flex;
		    z-index: 998;
		    box-sizing: border-box;
}
.tabbar_item{
	display: -webkit-box;
	width: 150rpx;
	height: 100rpx;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
		webkit-flex-direction: column;
		    flex-direction: column;
		    -webkit-box-flex: 1;
		    -webkit-flex: 1;
		    flex: 1;
		    font-size: 0;
		    text-align: center;
		    -webkit-tap-highlight-color: rgba(0,0,0,0);
}	
	
</style>