|
|
@@ -1,142 +0,0 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <!-- 占位符，防止底部内容被遮挡 -->
|
|
|
- <view class="tab-bar-placeholder" :style="{ paddingBottom: safeAreaBottom + 'px' }"></view>
|
|
|
- <view class="custom-tab-bar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
|
|
|
- <view class="tab-bar-item" v-for="(item, index) in list" :key="index" @click="switchTab(item, index)">
|
|
|
- <image class="tab-icon" :src="current === index ? item.selectedIconPath : item.iconPath"></image>
|
|
|
- <text class="tab-text" :style="{ color: current === index ? selectedColor : color }">{{ item.text }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: 'custom-tab-bar',
|
|
|
- props: {
|
|
|
- current: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- color: '#444444',
|
|
|
- selectedColor: '#09C567',
|
|
|
- safeAreaBottom: 0,
|
|
|
- list: [
|
|
|
- {
|
|
|
- pagePath: '/admin/home/workbench',
|
|
|
- iconPath: '/static/images/common/buy-no.png',
|
|
|
- selectedIconPath: '/static/images/common/buy-is.png',
|
|
|
- text: '买花'
|
|
|
- },
|
|
|
- {
|
|
|
- pagePath: '/admin/home/mall',
|
|
|
- iconPath: '/static/images/common/shop-tab_no.png',
|
|
|
- selectedIconPath: '/static/images/common/shop-tab.png',
|
|
|
- text: '店铺'
|
|
|
- },
|
|
|
- {
|
|
|
- pagePath: '/admin/home/order',
|
|
|
- iconPath: '/static/images/common/order-no.png',
|
|
|
- selectedIconPath: '/static/images/common/order-is.png',
|
|
|
- text: '订单'
|
|
|
- },
|
|
|
- {
|
|
|
- pagePath: '/admin/home/member',
|
|
|
- iconPath: '/static/images/common/member-no.png',
|
|
|
- selectedIconPath: '/static/images/common/member-is.png',
|
|
|
- text: '客户'
|
|
|
- },
|
|
|
- {
|
|
|
- pagePath: '/admin/home/me',
|
|
|
- iconPath: '/static/images/common/user-no.png',
|
|
|
- selectedIconPath: '/static/images/common/user-is.png',
|
|
|
- text: '我的'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- const sysInfo = uni.getSystemInfoSync();
|
|
|
- this.safeAreaBottom = sysInfo.safeAreaInsets ? sysInfo.safeAreaInsets.bottom : 0;
|
|
|
- // 隐藏原生tabbar，确保兼容性
|
|
|
- uni.hideTabBar({
|
|
|
- animation: false,
|
|
|
- fail: () => {}
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchTab(item, index) {
|
|
|
- if (this.current === index) return;
|
|
|
-
|
|
|
- // 原生 tabBar 页面列表
|
|
|
- const tabBarPages = [
|
|
|
- '/admin/home/workbench',
|
|
|
- '/admin/home/mall',
|
|
|
- '/admin/home/order',
|
|
|
- '/admin/home/member',
|
|
|
- '/admin/home/me',
|
|
|
- ];
|
|
|
-
|
|
|
- if (tabBarPages.includes(item.pagePath)) {
|
|
|
- uni.switchTab({
|
|
|
- url: item.pagePath
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 非原生 tabBar 页面使用 reLaunch 进行跳转，模拟 switchTab 效果
|
|
|
- uni.reLaunch({
|
|
|
- url: item.pagePath
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.tab-bar-placeholder {
|
|
|
- height: 110upx; /* 与 custom-tab-bar 基础高度一致 */
|
|
|
- background-color: transparent;
|
|
|
- width: 100%;
|
|
|
- box-sizing: content-box;
|
|
|
-}
|
|
|
-
|
|
|
-.custom-tab-bar {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 110upx; /* 基础高度 */
|
|
|
- background-color: #ffffff;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- border-top: 1upx solid #e5e5e5;
|
|
|
- z-index: 9999;
|
|
|
- /* box-sizing: content-box; 会通过行内样式增加 padding-bottom 来适配底部安全区 */
|
|
|
- box-sizing: content-box;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-bar-item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-icon {
|
|
|
- width: 54upx;
|
|
|
- height: 54upx;
|
|
|
- margin-bottom: 6upx;
|
|
|
-}
|
|
|
-
|
|
|
-.tab-text {
|
|
|
- font-size: 22upx;
|
|
|
-}
|
|
|
-</style>
|
