✨ feat(自定义组件): 添加 Tag 自定义组件

src/pages/user/index.module.scss

@@ -1,5 +1,75 @@
-.main{
+.main {
   width: 100%;
   min-height: 100vh;
   background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%);
+  padding: 12PX;
+  box-sizing: border-box;
+}
+.userAvatar {
+  position: relative;
+  width: 62PX;
+  height: 62PX;
+  border-radius: 50%;
+  background-color: #fff;
+  overflow: hidden;
+  &-text {
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 15PX;
+    color: #fff;
+    text-align: center;
+    line-height: 15PX;
+    font-size: 22px;
+    background-color: rgba($color: #000000, $alpha: 0.33);
+  }
+}
+.userInfo {
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 32px;
+  display: flex;
+  flex-flow: column 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 {
+    }
+  }
+  .bottomBar {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 10PX;
+    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;
 }

src/pages/user/index.tsx

@@ -1,41 +1,64 @@
 import { isEmptyObject } from '@/common/common'
-import { Button, View } from '@tarojs/components'
+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'
 // 用户信息
 const UserInfo: FC = () => {
-  return <View>sdfasdf</View>
+  const [userInfo, setUserInfo] = useState({
+    avatarUrl: '',
+    username: '',
+    userno: '',
+  })
+
+  const handleLogout = () => {}
+
+  return (
+    <View className={styles.userInfo}>
+      <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>
+    </View>
+  )
+}
+// 用户头像
+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
-    })
-  }
-
-  // const page = useMemo(() => Taro.getCurrentInstance().page, [])
-  // console.log('page', page)
-  // useDidShow(async () => {
-  //   const tabbar = await Taro.getTabBar<any>(page)
-  //   console.log('tabbar==>', tabbar)
-  //   tabbar?.setSelected(4)
-  // })
 
   return (
     <>
-      <View className={styles['main']}>
+      <View className={styles.main}>
         <UserInfo />
-        sdfasdfasdf {count}
-        <Button onClick={handleCount}>+1</Button>
-        <SonComp />
       </View>
     </>
   )