miniapp/src/pages/home/components/Head.jsx

import React from 'react';
import { View, Image } from '@tarojs/components';
import { ActionSheet, Cell } from '@antmjs/vantui';
import { ROLES, ROLE_CITIZEN } from '@/utils/user';
import logo from '@/assets/image/logo.png';
import avatar from '@/assets/icons/avatar.png';
import style from './head.module.less';

export default (props) => {
  const { user = {}, duty, onDutyChange } = props;
  const { dutyList = [] } = user;
  const role = ROLES[duty || ROLE_CITIZEN];

  const [show, setShow] = React.useState(false);

  const actions = React.useMemo(() => {
    return dutyList.map(x => ({name: ROLES[x], value: x}));
  }, [dutyList]);

  const onClick = () => {
    if (dutyList.length < 1) return;
    setShow(true);
  }

  const onSelect = (e) => {
    onDutyChange(e.detail.value)
  }

  return (
    <View className={style.head}>
      <View className={style.profile}>
        <View style={{ letterSpacing: '2px' }}>Hi, {user.name}!</View>
        <View className={style.badge} onClick={onClick}>
          <View className={style.icon}>
            <Image src={avatar} />
          </View>
          <View>{role}</View>
        </View>
        <ActionSheet
          title="请选择身份"
          position="bottom"
          show={show}
          actions={actions}
          onClose={() => setShow(false)}
          onSelect={onSelect}
        />
      </View>
      <View className={style.avatar}>
        <Image src={user.avatar || logo}></Image>
      </View>
    </View>
  )
}