🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/normalButton/index.module.scss

@@ -0,0 +1,104 @@
+.button {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0 30px;
+  height: 72px;
+  border: 1px solid $color_main;
+  background-color: #fff;
+  text-align: center;
+  color: #fff;
+  box-sizing: border-box;
+  
+  &--normal {
+    height: 72px;
+    font-size: $font_size_medium;
+  }
+  &--small {
+    height: 60px;
+    font-size: $font_size_min;
+  }
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+  // 按钮类型
+  &--primary {
+    border: 1px solid $color_main;
+    background-color: $color_main;
+    color: white;
+  }
+  &--danger {
+    border: 1px solid $color_danger;
+    background-color: $color_danger;
+    color: white;
+  }
+  &--warning {
+    border: 1px solid $color_warning;
+    background-color: $color_warning;
+    color: white;
+  }
+  &--info {
+    border: 1px solid $color_info;
+    background-color: $color_info;
+    color: white;
+  }
+  &--round {
+    border-radius: 50px;
+  }
+  &--circle {
+    border-radius: 16px;
+  }
+  // 朴素按钮
+  &--plain {
+    background-color: white;
+    &.button--primary {
+      border: 1px solid $color_main;
+      color: $color_main;
+    }
+    &.button--danger {
+      border: 1px solid $color_danger;
+      color: $color_danger;
+    }
+    &.button--warning {
+      border: 1px solid $color_warning;
+      color: $color_warning;
+    }
+    &.button--info {
+      border: 1px solid $color_info;
+      color: $color_info;
+    }
+  }
+  &--text {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    color: currentColor;
+    .loading {
+      position: absolute;
+      pointer-events: none;
+      left: -40px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
+  }
+  // active 伪类
+  &--primary:active {
+    background-color: rgba($color: $color_main, $alpha: 0.5);
+    color: #fff;
+  }
+  &--danger:active {
+    background-color: rgba($color: $color_danger, $alpha: 0.5);
+    color: #fff;
+  }
+  &--warning:active {
+    background-color: rgba($color: $color_warning, $alpha: 0.5);
+    color: #fff;
+  }
+  &--info:active {
+    background-color: rgba($color: $color_info, $alpha: 0.5);
+    color: #fff;
+  }
+}

src/components/normalButton/index.tsx

@@ -0,0 +1,67 @@
+import { View } from '@tarojs/components'
+import type { FC, ReactNode } from 'react'
+import classnames from 'classnames'
+import Loading from '../loading'
+import styles from './index.module.scss'
+
+type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
+type ButtonSize = 'normal' | 'small'
+
+interface PropsType {
+  size?: ButtonSize
+  type?: ButtonType
+  round?: boolean // 大圆角
+  disabled?: boolean
+  plain?: boolean // plain
+  circle?: boolean // 小圆角
+  children?: ReactNode
+  onClick?: Function
+  customClassName?: string
+  customStyles?: React.CSSProperties
+  customTextClassName?: string
+  loading?: boolean
+}
+
+const NormalButton: FC<PropsType> = (props) => {
+  const {
+    type = 'primary',
+    size = 'normal',
+    round = false,
+    disabled = false,
+    children,
+    onClick,
+    plain = false,
+    circle = false,
+    customStyles = {},
+    customClassName = '',
+    customTextClassName = '',
+    loading = false,
+  } = props
+  const getClassName = () => {
+    const classObject = {
+      [styles['button--disabled']]: disabled,
+      [styles[`button--${size}`]]: size,
+      [styles[`button--${type}`]]: type,
+      [styles['button--round']]: round,
+      [styles['button--plain']]: plain,
+      [styles['button--circle']]: circle,
+    }
+    return classObject
+  }
+
+  const handleClick = (event) => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(event)
+  }
+
+  return (
+    <View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
+      <View className={classnames(styles['button--text'], customTextClassName)}>
+        <View className={styles.loading}>{loading && <Loading width={30} />}</View>
+        {children}</View>
+    </View>
+  )
+}
+export default NormalButton