✨ feat(组件): 新增 iconCard 组件

global.d.ts

@@ -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

src/components/iconCard/index.module.scss

@@ -0,0 +1,6 @@
+.iconCard {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}

src/components/iconCard/index.tsx

@@ -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

src/components/layoutBlock/index.module.scss

@@ -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;
+  }
+}

src/components/layoutBlock/index.tsx

@@ -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

src/pages/user/index.module.scss

@@ -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;
+  width: 124px;
-  height: 62PX;
+  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 {
+.topBar {
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 32px;
   display: flex;
-  flex-flow: column nowrap;
+  flex-flow: row nowrap;
   justify-content: space-between;
-  .topBar {
+  align-items: center;
-    display: flex;
+  .left {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: center;
-    .left {
-    }
-    .middle {
-      margin: 0 40px;
-      flex: 1 1 auto;
-    }
-    .right {
-    }
   }
-  .bottomBar {
+  .middle {
-    display: flex;
+    margin: 0 40px;
-    flex-flow: row nowrap;
+    flex: 1 1 auto;
-    align-items: center;
-    border-radius: 10PX;
-    background-color: #f6f6f6;
-    margin-top: 20px;
-    padding: 15px;
   }
+  .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;

src/pages/user/index.tsx

@@ -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}>
+      <LayoutBlock circle>
-        <View className={styles.left}>
+        <View className={styles.topBar}>
-          <UserAvatar src={userInfo.avatarUrl} />
+          <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}>
+        <View className={styles.bottomBar}>
-          <Text className={styles.username}>杨子杰</Text>
+          <Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
-          <Text className={styles.userno}>064</Text>
+            IT部门
+          </Tag>
+          <Divider direction='vertical'></Divider>
+          <Text className={styles.userTitle}>IT-开发总监</Text>
         </View>
-        <View className={styles.right}>
+      </LayoutBlock>
-          <NormalButton type='primary' circle size='normal' onClick={handleLogout}>
+      <LayoutBlock circle>
-            退出登录
+        {/* <IconCard iconName="" title=""></IconCard> */}
-          </NormalButton>
+      </LayoutBlock>
-        </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>
   )
 }
 // 用户头像
@@ -54,7 +141,6 @@ const UserAvatar = ({ src }) => {
 
 // 我的
 const User = () => {
-
   return (
     <>
       <View className={styles.main}>