assess-app/components/en-utils/en-tab/en-tab.vue

<template>
	<view class="">
		<view class="tab-box tab_height sys-background-fff">
			<view class="tab-item " :class="{'tab-check':tabIndex==index}" @click="setTab(item.path,index)"
				v-for="(item,index) in tabList" :key="index">
				<view class="tab-content">
					<image class="tab-img"
						:src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/${tabIndex==index?item.selectedIconPath:item.iconPath}.png`">
					</image>
					<view class="tab-text sys-size-24 text-color-dominant">{{item.name}}</view>
				</view>
			</view>
			<!-- 		<view class="tab-item" :class="{'tab-check':tabIndex===2}" @click="setTab(2)">
			<view class="tab-content">
				<image v-if="tabIndex===2" class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/task-select.png"></image>
				<image v-else class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/task-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant">任务</view>
			</view>
		</view>
		<view class="tab-item" :class="{'tab-check':tabIndex===3}" @click="setTab(3)">
			<view class="tab-content">
				<image v-if="tabIndex===3" class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/loan-select.png"></image>
				<image v-else class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/loan-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant ">贷后</view>
			</view>
		</view>
		<view class="tab-item" :class="{'tab-check':tabIndex===4}" @click="setTab(3)">
			<view class="tab-content">
				<image v-if="tabIndex===4" class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/statistics-select.png"></image>
				<image v-else class="tab-img" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/tabBar/statistics-default.png"></image>
				<view class="tab-text sys-size-24 text-color-dominant ">统计</view>
			</view>
		</view> -->
		</view>
		<view class="zw">

		</view>
	</view>
</template>

<script>
	export default {
		name: 'en-tab',
		props: {
			'tabIndex': {
				default: 0
			}
		},
		data() {
			return {
				tabList: [{
						name: '市场',
						path: '/pages/loan/loan',
						iconPath: 'loan-default',
						selectedIconPath: 'loan-select',
					},
					{
						name: '我的',
						path: '/pages/index/index',
						iconPath: 'home-default',
						selectedIconPath: 'home-select',
					},
					// {
					// 	name: '任务',
					// 	path: '/pages/task/task',
					// 	iconPath: 'task-default',
					// 	selectedIconPath: 'task-select',
					// },

					// {
					// 	name: '统计',
					// 	path: '/pages/statistics/statistics',
					// 	iconPath: 'statistics-default',
					// 	selectedIconPath: 'statistics-select',
					// },
				]
			};
		},
		created() {
			this.getTabHeight()
		},
		methods: {
			setTab(path) {
				uni.switchTab({
					url: path
				})
			},
			getTabHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab_height').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						uni.setStorageSync('tab_height', data.height)
					}
				}).exec();
			}
		},

	}
</script>

<style lang="scss">
	.zw {
		height: 120rpx;
	}

	.tab-box {
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		padding-bottom: 14rpx;
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;

		.tab-item {
			// width: 50%;
			display: flex;
			justify-content: center;

			.tab-content {
				padding-top: 25rpx;
				width: 108rpx;
				height: 130rpx;
				box-sizing: border-box;
				border-radius: 0 0 100rpx 100rpx;
				text-align: center;

				.tab-img {
					width: 42rpx;
					height: 42rpx;
				}

				.tab-text {
					font-weight: 400;
					line-height: 34rpx;
					color: #333333;
				}
			}

		}

		.tab-check {
			.tab-content {
				background-color: rgba(15, 177, 128, 0.1);

				.tab-text {
					font-weight: 500;
					color: #0FB180;
				}
			}
		}
	}
</style>