wx-csbwg-minapp/src/pages/home/components/Menu/index.tsx

import classNames from "classnames";
import { Image, View, Text, ScrollView } from "@tarojs/components";
import Taro, { FC } from "@tarojs/taro";
import { AtDrawer } from "taro-ui";
import { AtDrawerProps } from "taro-ui/types/drawer";
import { observer } from "mobx-react";
import { getSceneUrl } from "../../../../utils";
import baseStore from "../../../../store/base";
import CloseIcon from "../../../../images/icon_back_menu@2x.png";
import SearchIcon from "../../../../images/icon_search_black@2x-min.png";

import MapIcon from "../../../../images/icon_map_normal@2x-min.png";
import ActMapIcon from "../../../../images/icon_map_active@2x-min.png";
import CityIcon from "../../../../images/icon_build_normal@2x-min.png";
import ActCityIcon from "../../../../images/icon_build_active@2x-min.png";
import UserIcon from "../../../../images/icon_user_normal@2x-min.png";
import ActUserIcon from "../../../../images/icon_user_active@2x-min.png";

import "./index.scss";
import { useMemo } from "react";

export interface MenuProps extends AtDrawerProps {
  openSearch(): void;
}

export const Menu: FC<MenuProps> = observer((props) => {
  const LIST = useMemo(
    () => [
      {
        label: "要素地图",
        icon: MapIcon,
        activeIcon: ActMapIcon,
        children: [
          {
            label: "全部遗存",
            link: "",
          },
        ],
      },
      {
        label: "锡善之城",
        icon: CityIcon,
        activeIcon: ActCityIcon,
        children: [
          {
            label: "慈善博物馆",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(
                "https://houseoss.4dkankan.com/project/wuxicishanbwg/index.html?m=TEST"
              ),
          },
          {
            label: "慈善云学校",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(getSceneUrl(0)),
          },
          {
            label: "慈善堂",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(getSceneUrl(1)),
          },
          {
            label: "慈善广场",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(getSceneUrl(2)),
          },
          {
            label: "爱心林场",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(getSceneUrl(3)),
          },
        ],
      },
      {
        label: "用户中心",
        icon: UserIcon,
        activeIcon: ActUserIcon,
        children: [
          {
            label: "个人设定",
            link:
              "/subModule/pages/iframe/index?url=" +
              encodeURIComponent(getSceneUrl(4)),
          },
          {
            label: "用户反馈",
            link: "/subModule/pages/feedback/index",
            needAuth: true,
          },
          {
            label: "爱心币商城",
            link: "/subModule/pages/shopmall/index",
            needAuth: true,
          },
        ],
      },
    ],
    []
  );

  return (
    <AtDrawer {...props} className="menu" width={Taro.pxTransform(550)}>
      <Image
        src={CloseIcon}
        className="menu__close"
        onClick={() => props.onClose?.()}
      />
      <Image
        src={SearchIcon}
        className="menu__search"
        onClick={() => props.openSearch()}
      />

      <ScrollView scrollY style={{ height: "100%" }}>
        {LIST.map((item, idx) => {
          const isActive = idx === 0;

          return (
            <View
              key={item.label}
              className={classNames("menu-item", { active: isActive })}
            >
              <View
                className={classNames("menu-item__title", {
                  "is-active": isActive,
                })}
              >
                <Image
                  className="menu-item__title__icon"
                  src={isActive ? item.activeIcon : item.icon}
                />
                <Text>{item.label}</Text>

                {isActive && (
                  <View className="menu-item__title reflect">
                    <Image
                      className="menu-item__title__icon"
                      src={isActive ? item.activeIcon : item.icon}
                    />
                    <Text>{item.label}</Text>
                  </View>
                )}
              </View>

              {item.children.map((subItem) => (
                <View
                  className="menu-item__sub"
                  onClick={() => {
                    Taro.navigateTo({
                      url:
                        subItem.needAuth && !baseStore.isLogin
                          ? "/pages/login/index"
                          : subItem.link,
                    });
                  }}
                >
                  {subItem.label}
                </View>
              ))}
            </View>
          );
        })}
      </ScrollView>
    </AtDrawer>
  );
});