257 lines
7.7 KiB
TypeScript
257 lines
7.7 KiB
TypeScript
import { Image, Text, View } from '@tarojs/components'
|
|
import { useDidShow } from '@tarojs/taro'
|
|
import type { FC } from 'react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useDispatch } from 'react-redux'
|
|
import type { Dispatch } from 'redux'
|
|
import defaultAvatar from '../../styles/image/defaultAvatar.png'
|
|
import styles from './index.module.scss'
|
|
import { checkKey, goLink } from '@/common/common'
|
|
import type { TabBarAction } from '@/reducers/tabBar'
|
|
import { TabBarIndex } from '@/reducers/tabBar'
|
|
import { TabBarType } from '@/constants/tabbar'
|
|
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 type { IconNames } from '@/components/iconfont/iconfont'
|
|
import useUserInfo from '@/use/useUserInfo'
|
|
import { useSelector } from '@/reducers/hooks'
|
|
import { BASE_URL } from '@/common/constant'
|
|
|
|
// 用户头像
|
|
const UserAvatar = ({ src }: { src?: string }) => {
|
|
return (
|
|
<View className={styles.userAvatar}>
|
|
<Image className="full-100" src={src || defaultAvatar} />
|
|
{src ? null : <Text className={styles['userAvatar-text']}>编辑</Text>}
|
|
</View>
|
|
)
|
|
}
|
|
interface IconCardType {
|
|
jurisdiction?: string // 权限key值
|
|
iconName: IconNames
|
|
name: string
|
|
path: string
|
|
}
|
|
|
|
const 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: '/pages/inviteCode/index',
|
|
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',
|
|
},
|
|
]
|
|
|
|
const 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',
|
|
},
|
|
]
|
|
|
|
const 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()
|
|
|
|
const dispatch = useDispatch<Dispatch<TabBarAction>>()
|
|
|
|
console.log('userInfo==>', userInfo)
|
|
// const [userInfo, setUserInfo] = useState({
|
|
// avatarUrl: '',
|
|
// username: '',
|
|
// userno: '',
|
|
// })
|
|
|
|
// 退出登录
|
|
const handleLogout = () => {
|
|
removeToken()
|
|
removeUserInfo()
|
|
dispatch({ type: TabBarType.SET_SELECTED, data: { selectedId: TabBarIndex.INDEX } })
|
|
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, key) => {
|
|
return item.path ? <IconCard key={key} iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard> : null
|
|
})}
|
|
</View>
|
|
</LayoutBlock>
|
|
}
|
|
{
|
|
!!Coloring.length && <LayoutBlock circle>
|
|
<View className={styles.layoutTitle}>布料取色</View>
|
|
<View className={styles['grid-container']}>
|
|
{Coloring.map((item, key) => {
|
|
return item.path ? <IconCard key={key} iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard> : null
|
|
})}
|
|
</View>
|
|
</LayoutBlock>
|
|
}
|
|
{
|
|
!!Statistics.length && <LayoutBlock circle>
|
|
<View className={styles.layoutTitle}>统计分析</View>
|
|
<View className={styles['grid-container']}>
|
|
{Statistics.map((item, key) => {
|
|
return item.path ? <IconCard key={key} iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard> : null
|
|
})}
|
|
</View>
|
|
</LayoutBlock>
|
|
}
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
// 我的
|
|
const User = () => {
|
|
return (
|
|
<>
|
|
<View className={styles.main}>
|
|
<UserInfo />
|
|
|
|
{/* 测试暂时添加 */}
|
|
{CURRENT_ENV !== 'prod' && <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{CURRENT_VERSION}</View>}
|
|
{CURRENT_ENV !== 'prod' && <View style={{ fontSize: '26rpx', color: '#707070', textAlign: 'center' }}>{BASE_URL}</View>}
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default User
|