该组件用于生成一个用户个人中心的菜单列表页面,一行显示两个,该组件需要传入当前登录的用户角色,根据不同的角色渲染出不同的菜单列表。
组件结构目录:
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} />