微信小程序个人中心菜单

 该组件用于生成一个用户个人中心的菜单列表页面，一行显示两个，该组件需要传入当前登录的用户角色，根据不同的角色渲染出不同的菜单列表。

组件结构目录：

js文件：

// index.js

import React, { PureComponent } from 'react';
import PropTypes from "prop-types";
import Taro from '@tarojs/taro';
import {Image, View} from "@tarojs/components";
import './index.less';
import feedbackInfo from './Images/feedbackInfo.png';
import myInfo from './Images/myInfo.png';
import orderInfo from './Images/orderInfo.png';
import patientInfo from './Images/patientInfo.png';
import refundInfo from './Images/refund.png'
import patrolInfo from './Images/patrol.png'
import orderconfirmationInfo from './Images/orderconfirmation.png'
import vieworderInfo from './Images/vieworder.png'
import completeInfo from './Images/complete.png'
import schedulingInfo from './Images/Scheduling.png'
import {USER_MENU_URL} from './Enum';


class UserMenuList extends PureComponent {
  static propTypes = {
    roleName: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  userMenuItems = {
    // 公共
    common: [

    ],
    // 医院科室管理（caregiver）
    manager: [
      {text:"培训情况",icon:()=>{
          return <Image className='itemsIcon' src={completeInfo} />
        }},
      {text:"消息通知",url:USER_MENU_URL.MESSAGE_NOTICE,icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"预约确认",url:USER_MENU_URL.APPLY_CONFIRM,icon:()=>{
          return <Image className='itemsIcon' src={orderconfirmationInfo} />
        }},
      {text:"结算确认",url:USER_MENU_URL.SETTLE_CONFIRM,icon:()=>{
          return <Image className='itemsIcon' src={orderconfirmationInfo} />
        }},
      {text:"订单查看",icon:()=>{
          return <Image className='itemsIcon' src={vieworderInfo} />
        }},
      {text:"现场巡查",url:USER_MENU_URL.INSPECT,icon:()=>{
          return <Image className='itemsIcon' src={patrolInfo} />
        }},
    ],
    // 客户(customer)
    customer: [
      {text:"我的资料",url:USER_MENU_URL.PROFILE,icon:()=>{
          return <Image className='itemsIcon' src={myInfo} />
        }},
      {text:"我的订单",url:USER_MENU_URL.MYORDER,icon:()=>{
          return <Image className='itemsIcon' src={orderInfo} />
        }},
      {text:"病人信息",url:USER_MENU_URL.USERPATIENTINFO ,icon:()=>{
          return <Image className='itemsIcon' src={patientInfo} />
        }},
      {text:"投诉建议",icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"我要退款",url:USER_MENU_URL.REFUND,icon:()=>{
          return <Image className='itemsIcon' src={refundInfo} />
        }},
    ],
    caregiver: [
      {text:"我的排班",url:USER_MENU_URL.MySchedule ,icon:()=>{
          return <Image className='itemsIcon' src={schedulingInfo} />
        }},
      {text:"组内排班",url:USER_MENU_URL.GROUP_SCHEDULE,icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"工作记录",url:USER_MENU_URL.WORK_HISTORY,icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"我的工资",url:USER_MENU_URL.MySalary,icon:()=>{
          return <Image className='itemsIcon' src={refundInfo} />
        }},
      {text:"消息通知",icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"培训情况",icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
      {text:"订单评价",url:USER_MENU_URL.CAREGIVER_ORDER_EVALUATION,icon:()=>{
          return <Image className='itemsIcon' src={feedbackInfo} />
        }},
    ],

  };


  handleItemClick = (item) => {
    if (item.url) {
      Taro.navigateTo({
        url: item.url
      });
    }
  };

  renderMenuItems = () => {
    const { roleName } = this.props;
    const { common, ...menuItems } = this.userMenuItems;
    const combinedMenuItems = common.concat(menuItems[roleName] || []);
    return combinedMenuItems.map((item, index) => (
      <View className='userMenuItemsBox' key={index} onClick={() => this.handleItemClick(item)}>
        {item.icon()}
        {item.text}
       {/* <AtBadge value='3' className='notificationBadge'>
        </AtBadge>*/}
      </View>
    ));
  };

  render() {
    return (
      <View id='userMenuItems'>
        {this.renderMenuItems()}
      </View>
    );
  }
}

export default UserMenuList;

less文件 ：

// index.less

.userMenuItemsBox {
  background: linear-gradient(to bottom, rgba(148, 190, 231, 0.44), #2B85E4FF);
  color: white;
  font-size: 45rpx;
  font-weight: bold;
  box-sizing: border-box;
  width: 45%;
  height: 150rpx;
  margin: 2% 2% 4% 2%;
  border: 10rpx ;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding-left: 25rpx;
  //justify-content: center;
}

.itemsIcon{
  position: relative;
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.notificationBadge {
  width: 40rpx;
  height: 125rpx;
}

 Enum文件(菜单点击跳转路径)：

// Enum.js

import {ORDER_LIST_TYPE} from "../../utils/Enum";

export const USER_MENU_URL = { // 个人中心菜单跳转路由
  PROFILE:'/pages/userInfoSetting/userInfoSetting',
  MYORDER:'/pages/MyOrder/index',
  REFUND:'/pages/Refund/OrderList',
  USERPATIENTINFO:'/pages/UserPatientSetting/UserPatientSetting',
  MANAGER_ORDER:'/pages/Manager/Index',
  ORDER_CONFIRM:'/pages/Apply/ApplyOrderList?type=orderConfirm',
  APPLY_CONFIRM:`/pages/Apply/ApplyOrderList?type=${ORDER_LIST_TYPE.APPLY_CONFIRM}`,
  SETTLE_CONFIRM:`/pages/Apply/ApplyOrderList?type=${ORDER_LIST_TYPE.SETTLE_CONFIRM}`,
  MySalary:`/pages/MySalary/index`,
  MySchedule:`/pages/MySchedule/index`,
  INSPECT:'/pages/FieldInspection/index',
  WORK_HISTORY:'/pages/WorkingHistory/index',
  CAREGIVER_ORDER_EVALUATION:'/pages/OrderEvaluation/CaregiverOrderEvaluation',
  MESSAGE_NOTICE:'/pages/MessageNotice/index',
  GROUP_SCHEDULE:'/pages/GroupSchedule/index',
};

页面文件render中调用此组件：

 <UserMenuList roleName={roleName} />