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

src/components/normalButton/index.module.scss

@@ -0,0 +1,37 @@
+.button {
+  display: flex;
+  padding: 0 40px;
+  height: 36PX;
+  border: 1px solid $color_main;
+  background-color: #fff;
+  text-align: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  &--normal {
+    height: 36PX;
+    font-size: $font_size_medium;
+  }
+  &--small {
+    height: 30PX;
+    font-size: $font_size_min;
+  }
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+  &--primary {
+    border: 1px solid $color_main;
+    color: $color_main;
+  }
+  &--danger {
+    border: 1px solid $color_danger;
+    color: $color_danger;
+  }
+  &--warning {
+    border: 1px solid $color_warning;
+    color: $color_warning;
+  }
+  &--circle {
+    border-radius: 50px;
+  }
+}

src/components/normalButton/index.tsx

@@ -0,0 +1,43 @@
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+type ButtonType = 'primary' | 'danger' | 'warning'
+type ButtonSize = 'normal' | 'small'
+
+interface PropsType {
+  size?: ButtonSize
+  type?: ButtonType
+  circle?: boolean
+  disabled?: boolean
+  children?: ReactNode
+  onClick?: Function
+}
+
+const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => {
+  const getClassName = () => {
+    const classObject = {
+      [styles[`button--disabled`]]: disabled,
+      [styles[`button--${size}`]]: size,
+      [styles[`button--${type}`]]: type,
+      [styles['button--circle']]: circle,
+    }
+    console.log('classObj==>button', classObject)
+    return classObject
+  }
+
+  const handleClick = (event) => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(event)
+  }
+
+  return (
+    <View className={classnames(styles['button'], getClassName())} onClick={handleClick}>
+      {children}
+    </View>
+  )
+}
+export default NormalButton

src/components/tag/index.module.scss

@@ -0,0 +1,33 @@
+.tag {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  padding: 0 20px;
+  height: 60px;
+  color: #fff;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  &--normal {
+    font-size: $font_size_medium;
+    height: 40px;
+  }
+  &--small{
+    font-size: $font_size_min;
+    height: 30px;
+  }
+  &--circle{
+    border-radius: 8PX;
+  }
+  &--danger {
+    background-color: $color_danger;
+  }
+  &--primary{
+    background-color: $color_main;
+  }
+  &--warning{
+    background-color: $color_warning;
+  }
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+}

src/components/tag/index.tsx

@@ -0,0 +1,43 @@
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+type TagSize = 'small' | 'normal'
+type TagType = 'primary' | 'danger' | 'warning'
+
+interface PropsType {
+  type?: TagType
+  disabled?: boolean
+  size?: TagSize
+  children?: ReactNode
+  onClick?: Function
+  circle?: boolean
+  customStyle?: React.CSSProperties
+}
+
+const Tag: FC<PropsType> = ({ type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {} }) => {
+  const handleClick = (event) => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(event)
+  }
+
+  const getClassName = () => {
+    const classObject = {
+      [styles['tag--disabled']]: disabled,
+      [styles[`tag--${size}`]]: size,
+      [styles[`tag--${type}`]]: type,
+      [styles['tag--circle']]: circle,
+    }
+    console.log('classObj==>', classObject)
+    return classObject
+  }
+  return (
+    <View className={classnames(styles.tag, getClassName())} style={customStyle} onClick={handleClick}>
+      {children}
+    </View>
+  )
+}
+export default 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(() => {
+import defaultAvatar from '../../styles/image/defaultAvatar.png'
-  return <View className=''>我改变了吗{new Date().getTime()}</View>
+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>
     </>
   )

src/styles/common.scss

@@ -1,9 +1,15 @@
-
+$color_bg_one: #f8f8f8;
-$color_bg_one: #F8F8F8;
+$color_font_one: #3c3c3c;
-$color_font_one: #3C3C3C;
+$color_font_two: #ababab;
-$color_font_two: #ABABAB;
 $color_font_three: #707070;
-$color_main: #4581FF;
+$color_main: #4581ff;
+
+$color_danger: #e64340;
+$color_warning: #e6a23c;
+
+$opacity-disabled: 0.3;
+$borderStyle: solid;
+$borderColor: #ebebeb;
 
 $font_size_big: 32px;
 $font_size: 28px;
@@ -12,22 +18,23 @@ $font_size_min: 22px;
 
 //安全底部距离
 .common_safe_area_y {
-    width: 100%;
+  width: 100%;
-    height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+  height: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
-    height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+  height: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
 }
 
 //省略号
-@mixin common_ellipsis($params:1) {
+@mixin common_ellipsis($params: 1) {
-    overflow: hidden;
+  overflow: hidden;
-    display: -webkit-box;
+  display: -webkit-box;
-    white-space:normal; 
+  white-space: normal;
-    text-overflow:ellipsis;
+  text-overflow: ellipsis;
-    word-break:break-all;
+  word-break: break-all;
-    -webkit-box-orient: vertical;
+  -webkit-box-orient: vertical;
-    -webkit-line-clamp: $params;
+  -webkit-line-clamp: $params;
-    
-    
 }
 
-
+.full-100 {
+  width: 100%;
+  height: 100%;
+}