✨ feat(组件): 新增 iconCard 组件
This commit is contained in:
xuan
parent
b7c6c0668f
commit
7b9226b017
2
global.d.ts
vendored
2
global.d.ts
vendored
@ -19,4 +19,4 @@ declare namespace NodeJS {
|
||||
|
||||
declare const CURRENT_VERSION: string
|
||||
declare const CURRENT_GITHASH: string
|
||||
declare const CURRENT_ENV: string
|
||||
declare const CURRENT_ENV: string
|
||||
|
||||
6
src/components/iconCard/index.module.scss
Normal file
6
src/components/iconCard/index.module.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.iconCard {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
26
src/components/iconCard/index.tsx
Normal file
26
src/components/iconCard/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { FC, ReactNode } from "react"
|
||||
import IconFont from "../iconfont"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type IconfontName = Parameters<typeof IconFont>['0']['name']
|
||||
|
||||
interface PropsType {
|
||||
iconName: IconfontName
|
||||
title: string
|
||||
children?: ReactNode
|
||||
onClick?: Function
|
||||
}
|
||||
const IconCard: FC<PropsType> = (props) => {
|
||||
const { iconName, title, onClick } = props
|
||||
const handleClick = (event) => {
|
||||
onClick && onClick(event)
|
||||
}
|
||||
return (
|
||||
<View className={styles.iconCard} onClick={handleClick}>
|
||||
<IconFont name={iconName} size={72}></IconFont>
|
||||
<View>{title}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default IconCard
|
||||
16
src/components/layoutBlock/index.module.scss
Normal file
16
src/components/layoutBlock/index.module.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.layoutBlock {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
background-color: #fff;
|
||||
padding: 32px;
|
||||
margin-bottom: 20px;
|
||||
&--row {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
&--col {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
&--circle {
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
29
src/components/layoutBlock/index.tsx
Normal file
29
src/components/layoutBlock/index.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import { FC, ReactNode } from 'react'
|
||||
import classnames from 'classname'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type FlexDirection = 'row' | 'col'
|
||||
|
||||
interface PropsType {
|
||||
flexDirection?: FlexDirection
|
||||
|
||||
circle?: boolean
|
||||
children?: ReactNode
|
||||
customStyle?: React.CSSProperties
|
||||
}
|
||||
|
||||
const LayoutBlock: FC<PropsType> = (props) => {
|
||||
const { flexDirection = 'col', circle = false, children } = props
|
||||
|
||||
const getClassName = () => {
|
||||
const classObject = {
|
||||
[styles['layoutBlock--circle']]: circle,
|
||||
[styles[`layoutBlock--${flexDirection}`]]: flexDirection,
|
||||
}
|
||||
return classObject
|
||||
}
|
||||
|
||||
return <View className={classnames(styles.layoutBlock, getClassName())}>{children}</View>
|
||||
}
|
||||
export default LayoutBlock
|
||||
@ -2,13 +2,13 @@
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%);
|
||||
padding: 12PX;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.userAvatar {
|
||||
position: relative;
|
||||
width: 62PX;
|
||||
height: 62PX;
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
@ -18,44 +18,36 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 15PX;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 15PX;
|
||||
line-height: 30px;
|
||||
font-size: 22px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.33);
|
||||
}
|
||||
}
|
||||
.userInfo {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
.topBar {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
.topBar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
}
|
||||
.middle {
|
||||
margin: 0 40px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.right {
|
||||
}
|
||||
align-items: center;
|
||||
.left {
|
||||
}
|
||||
.bottomBar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
border-radius: 10PX;
|
||||
background-color: #f6f6f6;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
.middle {
|
||||
margin: 0 40px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.right {
|
||||
}
|
||||
}
|
||||
.bottomBar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
background-color: #f6f6f6;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
.username {
|
||||
display: block;
|
||||
@ -67,7 +59,7 @@
|
||||
font-size: 28px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.userTitle{
|
||||
.userTitle {
|
||||
color: #626262;
|
||||
font-weight: 600;
|
||||
font-size: $font_size_medium;
|
||||
|
||||
@ -6,6 +6,9 @@ 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'
|
||||
|
||||
// 用户信息
|
||||
const UserInfo: FC = () => {
|
||||
const [userInfo, setUserInfo] = useState({
|
||||
@ -14,32 +17,116 @@ const UserInfo: FC = () => {
|
||||
userno: '',
|
||||
})
|
||||
|
||||
const feature = [
|
||||
{
|
||||
iconName: 'icon-lingquseka',
|
||||
name: '领取色卡',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-pandiansaoma',
|
||||
name: '盘点扫码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-fahuoliebiao',
|
||||
name: '发货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yaoqingma',
|
||||
name: '邀请码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-tihuoliebiao',
|
||||
name: '提货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shouhouzhongxin',
|
||||
name: '退货退款',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shoukuanliebiao',
|
||||
name: '收款列表',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const fabric = [
|
||||
{
|
||||
iconName: 'icon-yansequyang',
|
||||
name: '颜色取样',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qusechazhao',
|
||||
name: '取色查找',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yangpinduibi',
|
||||
name: '样品对比',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const statisticAnalysis = [
|
||||
{
|
||||
iconName: 'icon-xiaoshou',
|
||||
name: '销售',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-duizhang',
|
||||
name: '对账',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yuncangkucun',
|
||||
name: '云仓库存',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qianzhicangkucun',
|
||||
name: '前置仓库存',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const handleLogout = () => {}
|
||||
|
||||
return (
|
||||
<View className={styles.userInfo}>
|
||||
<View className={styles.topBar}>
|
||||
<View className={styles.left}>
|
||||
<UserAvatar src={userInfo.avatarUrl} />
|
||||
<>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.topBar}>
|
||||
<View className={styles.left}>
|
||||
<UserAvatar src={userInfo.avatarUrl} />
|
||||
</View>
|
||||
<View className={styles.middle}>
|
||||
<Text className={styles.username}>杨子杰</Text>
|
||||
<Text className={styles.userno}>064</Text>
|
||||
</View>
|
||||
<View className={styles.right}>
|
||||
<NormalButton type='primary' circle size='normal' onClick={handleLogout}>
|
||||
退出登录
|
||||
</NormalButton>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.middle}>
|
||||
<Text className={styles.username}>杨子杰</Text>
|
||||
<Text className={styles.userno}>064</Text>
|
||||
<View className={styles.bottomBar}>
|
||||
<Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
|
||||
IT部门
|
||||
</Tag>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Text className={styles.userTitle}>IT-开发总监</Text>
|
||||
</View>
|
||||
<View className={styles.right}>
|
||||
<NormalButton type='primary' circle size='normal' onClick={handleLogout}>
|
||||
退出登录
|
||||
</NormalButton>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<Tag type='primary' size='normal' circle customStyle={{'marginRight': '10px'}}>
|
||||
IT部门
|
||||
</Tag>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Text className={styles.userTitle}>IT-开发总监</Text>
|
||||
</View>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle>
|
||||
{/* <IconCard iconName="" title=""></IconCard> */}
|
||||
</LayoutBlock>
|
||||
</>
|
||||
)
|
||||
}
|
||||
// 用户头像
|
||||
@ -54,7 +141,6 @@ const UserAvatar = ({ src }) => {
|
||||
|
||||
// 我的
|
||||
const User = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.main}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user