合并冲突

src/pages/index/index.tsx

@@ -6,7 +6,7 @@ import MoveBtn from '@/components/moveBtn'
 import ShopCart from '@/components/shoppingCart'
 import { goLink } from '@/common/common'
 import styles from './index.module.scss'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { kindListApi, ProductListApi } from '@/api/index'
 // import useLogin from '@/use/useLogin'
 import { mpproductcolorlist, mpsaleOrderpreView } from "@/api/order"
@@ -296,4 +296,4 @@ export default () => {
         // </MoveBtn>
     )
 }
-// oninputEvent={(e, item) => { oninputEvent(e, item) }}
+// oninputEvent={(e, item) => { oninputEvent(e, item) }}

src/pages/shopping/index.tsx

@@ -1,9 +1,13 @@
 import { isEmptyObject } from '@/common/common'
 import { View } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useMemo } from 'react'
 
 const User = () => {
   const obj = {}
   console.log(isEmptyObject(obj))
+
+
   return <View>sdfasdfasdf</View>
 }
 export default User

src/pages/user/index.config.ts

@@ -4,5 +4,5 @@ export default definePageConfig({
   navigationBarBackgroundColor: '#4581FF',
   backgroundColor: '#4581FF',
   backgroundColorTop: '#4581FF',
-  enablePullDownRefresh: true
+  enablePullDownRefresh: true,
 })

src/pages/user/index.module.scss

@@ -1,5 +1,97 @@
-.main{
-  width: 100%;
-  min-height: 100vh;
+page{
+  position: relative;
+
+}
+.main {
   background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%);
+  padding: 24px;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  height: 100%;
+}
+.userAvatar {
+  position: relative;
+  width: 122px;
+  height: 122px;
+  border-radius: 50%;
+  background-color: #fff;
+  overflow: hidden;
+  &-text {
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 31px;
+    color: #fff;
+    text-align: center;
+    line-height: 31px;
+    font-size: 20px;
+    background-color: rgba($color: #000000, $alpha: 0.33);
+  }
+  
+}
+.topBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  .left {
+  }
+  .middle {
+    margin: 0 40px;
+    flex: 1 1 auto;
+  }
+  .right {
+  }
+}
+.bottomBar {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  border-radius: 16px;
+  background-color: #f6f6f6;
+  margin-top: 20px;
+  padding: 15px;
+}
+.username {
+  display: block;
+  font-size: 36px;
+  font-weight: 600;
+}
+.userno {
+  display: block;
+  font-size: 28px;
+  color: $color_font_two;
+}
+.userTitle {
+  color: #626262;
+  font-weight: 600;
+  font-size: $font_size_medium;
+  margin-left: 20px;
+}
+.grid-container{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-column-gap: 32px;
+  grid-row-gap: 32px;
+}
+.layoutTabBar {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.layoutTitle {
+  font-size: 32px;
+  font-weight: 600;
+  color: #333;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  margin-bottom: 20px;
+
+}
+.layoutDescription {
+  font-size: 24px;
+  color: $color_main;
 }

src/pages/user/index.tsx

@@ -1,27 +1,192 @@
 import { isEmptyObject } from '@/common/common'
-import { Button, View } from '@tarojs/components'
-import { FC, memo, useState } from 'react'
+import { Button, View, Image, Text } from '@tarojs/components'
+import { FC, memo, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-const SonComp: FC = memo(() => {
-  return <View className=''>我改变了吗{new Date().getTime()}</View>
-})
+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 IconFont from '@/components/iconfont'
+
+type IconfontName = Parameters<typeof IconFont>['0']['name']
+type IconCardType = {
+  iconName: IconfontName,
+  name: string,
+  path: string
+}
+
+// 用户信息
+const UserInfo: FC = () => {
+  const [userInfo, setUserInfo] = useState({
+    avatarUrl: '',
+    username: '',
+    userno: '',
+  })
+  
+
+  const feature: IconCardType[] = [
+    {
+      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: '',
+    },
+    {
+      iconName: 'icon-shoukuanliebiao',
+      name: '客户列表',
+      path: '',
+    },
+  ]
+
+  const fabric: IconCardType[] = [
+    {
+      iconName: 'icon-yansequyang',
+      name: '颜色取样',
+      path: '',
+    },
+    {
+      iconName: 'icon-qusechazhao',
+      name: '取色查找',
+      path: '',
+    },
+    {
+      iconName: 'icon-yangpinduibi',
+      name: '样品对比',
+      path: '',
+    },
+  ]
+
+  const statisticAnalysis: IconCardType[] = [
+    {
+      iconName: 'icon-xiaoshou',
+      name: '销售',
+      path: '',
+    },
+    {
+      iconName: 'icon-duizhang',
+      name: '对账',
+      path: '',
+    },
+    {
+      iconName: 'icon-yuncangkucun',
+      name: '云仓库存',
+      path: '',
+    },
+    {
+      iconName: 'icon-qianzhicangkucun',
+      name: '前置仓库存',
+      path: '',
+    },
+  ]
+
+  const handleLogout = () => {}
+
+  return (
+    <>
+      <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.bottomBar}>
+          <Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
+            IT部门
+          </Tag>
+          <Divider direction='vertical'></Divider>
+          <Text className={styles.userTitle}>IT-开发总监</Text>
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTitle}>功能特色</View>
+        <View className={styles['grid-container']}>
+          {feature.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTitle}>布料取色</View>
+        <View className={styles['grid-container']}>
+          {fabric.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      <LayoutBlock circle>
+        <View className={styles.layoutTitle}>统计分析</View>
+        <View className={styles['grid-container']}>
+          {statisticAnalysis.map((item) => {
+            return <IconCard iconName={item.iconName} title={item.name}></IconCard>
+          })}
+        </View>
+      </LayoutBlock>
+      {/* <LayoutBlock circle>
+        <View className={styles.layoutTabBar}>
+          <View className={styles.layoutTitle}>客户列表</View>
+          <View className={styles.layoutDescription}>查看全部客户 ▶</View>
+        </View>
+        asdfasdfasdfas 
+      </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 = () => {
-  const obj = {}
-  console.log(isEmptyObject(obj))
-  const [count, setCount] = useState(0)
-  const handleCount = () => {
-    setCount((prev) => {
-      return prev + 1
-    })
-  }
   return (
     <>
-      <View className={styles['main']}>
-        sdfasdfasdf {count}
-        <Button onClick={handleCount}>+1</Button>
-        <SonComp />
+      <View className={styles.main}>
+        <UserInfo />
       </View>
     </>
   )