TestRestructureWechatLymarketDist/src/pages/user/index.tsx

import { View, Image, Text } from '@tarojs/components'
import { FC, useEffect, useState } from 'react'
import styles from './index.module.scss'
import defaultAvatar from '../../styles/image/defaultAvatar.png'
import NormalButton from '@/components/normalButton'
import Tag from '@/components/tag'
import Divider from '@/components/Divider'
import LayoutBlock from '@/components/layoutBlock'
import IconCard from '@/components/iconCard'
import { IconNames } from '@/components/iconfont/iconfont'
import useUserInfo from '@/use/useUserInfo'
import { goLink } from '@/common/common'
import { checkKey } from "@/common/common"
import { useDidShow } from '@tarojs/taro'
type IconCardType = {
  jurisdiction?: string //权限key值
  iconName: IconNames
  name: string
  path: string
}



let feature: IconCardType[] = [
  {
    iconName: 'icon-lingquseka',
    name: '领取色卡',
    path: '',
    jurisdiction: 'receive_color_card_page'
  },
  {
    iconName: 'icon-pandiansaoma',
    name: '盘点扫码',
    path: '',
    jurisdiction: 'counting_scanning_code_page'
  },
  {
    iconName: 'icon-fahuoliebiao',
    name: '发货列表',
    path: '/pages/delivery/index',
    jurisdiction: 'shipping_list_page'
  },
  {
    iconName: 'icon-yaoqingma',
    name: '邀请码',
    path: '',
    jurisdiction: 'invitation_code_page'
  },
  {
    iconName: 'icon-tihuoliebiao',
    name: '提货列表',
    path: '/pages/takeDelivery/index',
    jurisdiction: 'picking_list_module_page'
  },
  {
    iconName: 'icon-shouhouzhongxin',
    name: '退货退款',
    path: '/pages/refundPage/index',
    jurisdiction: 'return_and_refund_page'
  },
  {
    iconName: 'icon-shoukuanliebiao',
    name: '收款列表',
    path: '/pages/newCollection/index',
    jurisdiction: 'collection_list_page'
  },
  {
    iconName: 'icon-kehuxinxi',
    name: '客户列表',
    path: '/pages/customerManagement/index',
    jurisdiction: 'customer_list_page'
  },
]

let fabric: IconCardType[] = [
  {
    iconName: 'icon-yansequyang',
    name: '颜色取样',
    path: '/pages/colorRelated/takeColor/index',
    jurisdiction: 'color_sampling_page'
  },
  {
    iconName: 'icon-qusechazhao',
    name: '取色查找',
    path: '/pages/colorRelated/findColor/index',
    jurisdiction: 'color_search_page'
  },
  {
    iconName: 'icon-yangpinduibi',
    name: '样品对比',
    path: '/pages/colorRelated/sampleComparison/index',
    jurisdiction: 'sample_comparison_page'
  },
]

let statisticAnalysis: IconCardType[] = [
  {
    iconName: 'icon-xiaoshou',
    name: '销售',
    path: '/pages/saleStatistic/index',
    jurisdiction: 'sales_page'
  },
  {
    iconName: 'icon-duizhang',
    name: '对账',
    path: '',
    jurisdiction: 'reconciliation_page'
  },
  {
    iconName: 'icon-yuncangkucun',
    name: '云仓库存',
    path: '',
    jurisdiction: 'cloud_warehouse_inventory_page'
  },
  {
    iconName: 'icon-qianzhicangkucun',
    name: '前置仓库存',
    path: '',
    jurisdiction: 'front_warehouse_page'
  },
]




// 用户信息
const UserInfo: FC = () => {
  const { removeToken, removeUserInfo, userInfo } = useUserInfo()
  console.log('userInfo==>', userInfo)
  // const [userInfo, setUserInfo] = useState({
  //   avatarUrl: '',
  //   username: '',
  //   userno: '',
  // })

  // 退出登录
  const handleLogout = () => {
    removeToken()
    removeUserInfo()
    goLink('/pages/login/index', {}, 'reLaunch')
  }

  const handleClickIconCard = (item: IconCardType) => {
    console.log('item==>', item)
    goLink(item.path, {}, 'navigateTo')
  }


  const [Features, setFeatures] = useState<any[]>([])
  const [Coloring, setColoring] = useState<any[]>([])
  const [Statistics, setStatistics] = useState<any[]>([])
  useDidShow(() => {
    let arr: any[] = []
    let arrOne: any[] = []
    let arrTwo: any[] = []
    arr = feature.filter((item) => checkKey(item.jurisdiction));
    arrOne = fabric.filter((item) => checkKey(item.jurisdiction));
    arrTwo = statisticAnalysis.filter((item) => checkKey(item.jurisdiction));
    setFeatures([...arr])
    setColoring([...arrOne])
    setStatistics([...arrTwo])
  })


  return (
    <>
      <LayoutBlock circle customStyle={{paddingTop: '10px', paddingBottom: '10px'}}>
        <View className={styles.topBar}>
          <View className={styles.left}>
            <UserAvatar src={userInfo.userInfo?.avatar_url} />
          </View>
          <View className={styles.middle}>
            <Text className={styles.username}>{userInfo.userInfo?.user_name}</Text>
            <Text className={styles.userno}>{userInfo.userInfo.user_code}</Text>
          </View>
          <View className={styles.right}>
            <NormalButton plain type='primary' round size='normal' onClick={handleLogout}>
              退出登录
            </NormalButton>
          </View>
        </View>
        <View className={styles.bottomBar}>
          {/* 部门 */}
          <Tag type='primary' size='small' circle customStyle={{padding: '8px 5px'}}>
            {userInfo.userInfo.department_name}
          </Tag>
          <Divider direction='vertical'></Divider>
          {/* 职责 */}
          <Text className={styles.userTitle}>{userInfo.userInfo.duty_name}</Text>
        </View>
      </LayoutBlock>
      {
        !!Features.length && <LayoutBlock circle>
          <View className={styles.layoutTitle}>功能特色</View>
          <View className={styles['grid-container']}>
            {Features.map(item => {
              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
            })}
          </View>
        </LayoutBlock>
      }
      {
        !!Coloring.length && <LayoutBlock circle>
          <View className={styles.layoutTitle}>布料取色</View>
          <View className={styles['grid-container']}>
            {Coloring.map(item => {
              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
            })}
          </View>
        </LayoutBlock>
      }
      {
        !!Statistics.length && <LayoutBlock circle>
          <View className={styles.layoutTitle}>统计分析</View>
          <View className={styles['grid-container']}>
            {Statistics.map(item => {
              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
            })}
          </View>
        </LayoutBlock>
      }

    </>
  )
}
// 用户头像
const UserAvatar = ({ src }) => {
  return (
    <View className={styles.userAvatar}>
      <Image className='full-100' src={src ? src : defaultAvatar} />
      {src ? null : <Text className={styles['userAvatar-text']}>编辑</Text>}
    </View>
  )
}

// 我的
const User = () => {
  return (
    <>
      <View className={styles.main}>
        <UserInfo />
      </View>
    </>
  )
}

export default User