tabBar: {
    custom: true,
    list: [
      {
        pagePath: 'pages/storeManagePage/storeManagePage',
        text: '库存', 
      }, {
        pagePath: 'pages/my/my',
        text: '我的', 
      }
    ]
  } 

export default {
  navigationBarTitleText: '供应链',
  enablePullDownRefresh: true,  //使能微信小程序的下拉刷新
  backgroundTextStyle: 'dark', //顶部显示颜色为深色的三个点
  usingComponents: {
    'custom-tab-bar': '../custom-tab-bar'
  }
}

render () { return (
      <View className='app-page store-manage-page'>
         ...
　　　　　 </* 这里引入底部导航栏组件 */>　
        <custom-tab-bar></custom-tab-bar>
      </View>
    )
  }

/**
 * author： wang.p  2022-10-17
 * description: 自定义组件  
 * */

import Taro from '@tarojs/taro'
import React, {Component} from 'react';
import { CoverView, CoverImage } from '@tarojs/components'
import classnames from 'classnames';
import PropsType from 'prop-types';
import {connect} from "react-redux";
import {onChangeGlobalData} from "@/reducers/globalReducer";  
import './index.scss'

// 底部导航栏数组，可以放到后端数据库中，前端获取后缓存
const TabListData = [
  {
    pagePath: '/pages/storeManagePage/storeManagePage',
    text: '供应链',
    iconPath: '未选中图片路径.png',
    selectedIconPath: '已选中图片路径.png',
  }, {
    pagePath: '/pages/my/my',
    text: '我的',
    iconPath: '未选中图片路径.png',
    selectedIconPath: '已选中图片路径.png' ,
  }
]

class CustomTabBar extends Component {

  static propTypes = { 
    SelectedTabBar: PropsType.string,  // 激活的tabbar路径
    onChangeGlobalData: PropsType.func,  // 修改tabbar
  }

  state = {
    selected: 0,  // 当前激活的tab下标
    color: '#000',  // 字体颜色
    selectedColor: '#00bab4',  // 激活的字体颜色
    backgroundColor: '#ffffff',  // 背景色
    borderStyle: 'black',   // 边框颜色
  }

  componentDidMount() {
  }


  render() { 
    const {SelectedTabBar} = this.props;
    return (
      <CoverView className={classnames('custom-tab')}>
        {
          TabListData.map((item, index) => {
            return <CoverView className='custom-tab-item' onClick={this.switchTab.bind(this, item)}
                              data-path={item.pagePath} key={index}>
              <CoverImage className='custom-tab-item-img'
                          src={SelectedTabBar === item.pagePath ? item.selectedIconPath : item.iconPath}/>
              <CoverView className='custom-tab-item-text'
                         style={{color: SelectedTabBar === item.pagePath ? this.state.selectedColor : this.state.color}}>
                {item.text}
              </CoverView>
            </CoverView>
          })
        }
      </CoverView>
    )
  }

  /**
   * 切换Tab
   * */
  switchTab = (tabData) => {
    let that = this;
    const {pagePath, navigateTo} = tabData;
    if (navigateTo) {
      Taro.navigateTo({
        url: pagePath
      })
    } else {
      Taro.switchTab({
        url: pagePath,
        success: () => {
　　　　　　// 页面切换时，修改缓存的导航栏
          that.props.onChangeGlobalData({SelectedTabBar: pagePath});
        }
      })
    }
  }
}

const mapStateToProps = (state) => {
  const {SelectedTabBar} = state[StoreKeys.GlobalData];
  return {
    SelectedTabBar: SelectedTabBar
  };
};

const mapDispatchToProps = {
  onChangeGlobalData   // 这个是修改激活的tabbar信息，本人将其缓存在redux中
};

export default connect(mapStateToProps, mapDispatchToProps)(CustomTabBar)

.custom-tab {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 50Px;
  border-radius: 0;
  box-sizing: border-box;
  border-top: 1Px solid #f1f1f1;
  background-color: #FFFFFF;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &-img {
      margin: 0 auto;
      width: 28PX;
      height: 28Px;
    }

    &-text {
      margin-top: 4Px;
      font-size: 10Px;
    }
  }
}