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

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

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

  return (
    <View className={style.head}>
      <View className={style.profile}>
        <View style={{ letterSpacing: '2px' }}>Hi, {user.name}!</View>
        <View className={style.badge}>
          <View className={style.icon}></View>
          <View>{role}</View>
        </View>
      </View>
      <View className={style.avatar}>
        <Image src={user.avatar || logo}></Image>
      </View>
    </View>
  )
}