flossom-miniapp/src/custom-tab-bar/index.tsx

import classnames from "classnames";
import { Component } from "react";
import Taro from "@tarojs/taro";

// 不能用原生组件，遮罩层会遮不住
import { CoverView, CoverImage, Block, View, Image } from "@tarojs/components";

/** 自定义组件 **/
// import PopupAlert from "../components/popup/popup-alert";
/** 自定义组件 **/

import "./index.less";
export default class Index extends Component {
  state = {
    isShowPrivacyPopup: true,
    isMask: false,
    isNotRegister: false,
    selected: 2,
    color: "#999",
    selectedColor: "#000",
    backgroundColor: "#ffffff",
    borderStyle: "black",
    list: [
      {
        pagePath: "pages/index/index",
        text: "主页",
        iconPath: "/img/tabar/1.png",
        selectedIconPath: "/img/tabar/11.png",
      },
      {
        pagePath: "pages/activity/activity",
        text: "活动",
        iconPath: "/img/tabar/2.png",
        selectedIconPath: "/img/tabar/22.png",
      },
      {
        pagePath: "pages/detect/detect",
        text: "发现",
        iconPath: "/img/tabar/3.png",
        selectedIconPath: "/img/tabar/33.png",
      },
      {
        pagePath: "pages/shop/shop",
        text: "商城",
        iconPath: "/img/tabar/4.png",
        selectedIconPath: "/img/tabar/44.png",
      },
      {
        pagePath: "pages/user/user",
        text: "我的",
        iconPath: "/img/tabar/5.png",
        selectedIconPath: "/img/tabar/55.png",
      },
    ],
  };

  switchTab(index, url) {
    // let urlArray = ["pages/index/index", "pages/user/user"];
    // if (!urlArray.includes(url)) {
    //   let mobile = Taro.getStorageSync("mobile");
    //   if (mobile) {
    //     this.setSelected(index);
    //     Taro.switchTab({ url: "/" + url });
    //   } else {
    //     this.setState({ isNotRegister: true });
    //   }
    // } else {
    //   this.setSelected(index);
    //   Taro.switchTab({ url: "/" + url });
    // }
    this.setSelected(index);
    Taro.switchTab({ url: "/" + url });
  }

  setSelected(idx: number) {
    this.setState({
      selected: idx,
    });
  }

  openMask = () => {
    this.setState({
      isMask: true,
    });
  };

  closeMask = () => {
    this.setState({
      isMask: false,
    });
  };

  // closeAlert = () => {
  //   this.setState({
  //     isNotRegister: false,
  //   });
  // };

  render() {
    const { list, selected, color, selectedColor, isMask, isNotRegister } =
      this.state;

    return (
      <Block>
        {/* <PopupAlert
          isShow={isNotRegister}
          title="提示"
          content="暂未授权注册，请点击注册"
          confirmButtonText="确定"
          textAlgin="center"
          type="1"
          close={this.closeAlert}
          confirm={this.closeAlert}
        /> */}
        <View className={classnames({ "tab-bar-layer": isMask })}>
          <View className={classnames("tab-bar")}>
            {/* <View className="tab-bar-border"></View> */}
            {list.map((item, index) => {
              return (
                <View
                  key={item.pagePath}
                  className="tab-bar-item"
                  onClick={this.switchTab.bind(this, index, item.pagePath)}
                >
                  <Image
                    style={{
                      width: "40rpx",
                      height: "40rpx",
                    }}
                    src={
                      selected === index ? item.selectedIconPath : item.iconPath
                    }
                  />
                  <View
                    style={{
                      color: selected === index ? selectedColor : color,
                      fontWeight: selected === index ? "500" : "bold",
                      fontSize: "22rpx",
                      marginTop: "10rpx",
                      fontFamily: "PingFang SC",
                    }}
                  >
                    {item.text}
                  </View>
                </View>
              );
            })}
          </View>
        </View>
      </Block>
    );
  }
}