taro/src/_health/base/new_button.tsx

import { View, Text } from '@tarojs/components'
import './new_button.scss'
import { rpxToPx } from '@/utils/tools';
import { useState } from 'react';

export enum NewButtonType {
    fill = 'fill', //主题实色
    alpha = 'alpha', //主题半透明
    border = 'border', //主题边框
    gray = 'gray', //灰色半透明
    text = 'text', //纯文本
    link = 'link',  //超链接（有可能带icon）
    label = 'label',
}

function hexToHSL(hex) {
    // 去掉井号，处理3位和6位16进制
    hex = hex.replace(/^#/, '');
    if (hex.length === 3) {
        hex = hex.split('').map(char => char + char).join('');
    }

    // 解析RGB
    const r = parseInt(hex.slice(0, 2), 16) / 255;
    const g = parseInt(hex.slice(2, 4), 16) / 255;
    const b = parseInt(hex.slice(4, 6), 16) / 255;

    // 计算最大和最小值
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    // 计算亮度
    if (max === min) {
        h = s = 0; // achromatic
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
        }
        h /= 6;
    }

    // 转换为度和百分比
    h = Math.round(h * 360);
    s = Math.round(s * 100);
    l = Math.round(l * 100);
    return `hsl(${h}, ${s}%, ${l - 10}%)`;
}
export default function NewButton(props: {
    type: NewButtonType,
    color?: string,
    title?: string,
    component?: any,
    disable?: boolean,
    loading?: boolean,
    onClick?: any,
    width?: number,
    height?: number,
    fontSize?: number,
    bold?: boolean,
    labelBorder?: boolean,
}) {

    const [isTouched, setIsTouched] = useState(false)
    let style = {}
    switch (props.type) {
        case NewButtonType.fill:
            style = {
                height: props.height ?? rpxToPx(72),
                width: props.width ?? rpxToPx(198),
                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
                backgroundColor: isTouched ? hexToHSL(props.color) : props.disable ? '#B2B2B2' : props.color,
                color: '#fff',
                fontSize: props.fontSize ?? rpxToPx(30),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                opacity: props.disable ? 0.6 : 1,
            }
            break
        case NewButtonType.alpha:

            style = {
                height: props.height ?? rpxToPx(72),
                width: props.width ?? rpxToPx(198),
                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
                backgroundColor: isTouched ? props.color + '40' : props.disable ? '#B2B2B240' : props.color + '1A',
                color: props.disable ? '#b2b2b2' : props.color,
                fontSize: props.fontSize ?? rpxToPx(30),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                opacity: props.disable ? 0.6 : 1,
            }
            break;
        case NewButtonType.border:
            style = {
                height: props.height ?? rpxToPx(72),
                width: props.width ?? rpxToPx(198),
                borderWidth: rpxToPx(2),
                borderColor: props.disable ? '#B2B2B2' : props.color,
                borderStyle: 'solid',
                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
                backgroundColor: isTouched ? props.color + '26' : 'transparent',
                color: props.disable ? '#b2b2b2' : props.color,
                fontSize: props.fontSize ?? rpxToPx(30),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                opacity: props.disable ? 0.6 : 1,
                boxSizing: 'border-box'
            }
            break;
        case NewButtonType.gray:
            style = {
                height: props.height ?? rpxToPx(72),
                width: props.width ?? rpxToPx(198),
                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
                backgroundColor: isTouched ? '#b2b2b240' : '#b2b2b210',
                color: props.disable ? '#b2b2b2' : '#000000',
                fontSize: props.fontSize ?? rpxToPx(30),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                // opacity: props.disable ? 0.6 : 1,
            }
            // style = {
            //     height: props.height ?? rpxToPx(72),
            //     width: props.width ?? rpxToPx(198),
            //     borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
            //     backgroundColor: isTouched ? '#9999991A' : 'transparent',
            //     color: props.disable ? '#999999' : '#999999',
            //     fontSize: props.fontSize ?? rpxToPx(30),
            //     display: 'flex',
            //     alignItems: 'center',
            //     justifyContent: 'center',
            //     // opacity: props.disable ? 0.6 : 1,
            // }
            break
        case NewButtonType.text:
            style = {
                height: props.height ?? rpxToPx(72),
                width: props.width ?? rpxToPx(198),
                borderRadius: props.height ? props.height / 4 : rpxToPx(72 / 4),
                backgroundColor: props.disable ? '#B2B2B240' : isTouched ? '#B2B2B240' : '#B2B2B21A',
                color: props.disable ? '#b2b2b2' : '#000',
                fontSize: props.fontSize ?? rpxToPx(30),
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }
            break;
        case NewButtonType.link:
            style = {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
                flex: 1,
                color: '#5C7099',
                fontSize: rpxToPx(26),
                opacity: isTouched ? 0.4 : 1,
            }
            break
        case NewButtonType.label:
            style = {
                height: rpxToPx(64),
                borderRadius: rpxToPx(32),
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: rpxToPx(28),
                paddingLeft: rpxToPx(24),
                paddingRight: rpxToPx(24),
                boxSizing: 'border-box',
                backgroundColor: isTouched ? '#5C709940' : props.labelBorder ? 'transparent' : '#5C70991A',
                borderWidth: rpxToPx(2),
                borderColor: props.labelBorder ? '#5C709940' : 'transparent',
                borderStyle: 'solid',
                color: '#5C7099'
            }
            break
    }

    return <View
        style={{ ...style, fontWeight: props.bold ? 'bold' : 'normal' }}
        catchMove
        onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
            if (props.disable) return
            props.onClick()
        }}
        onTouchStart={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
            if (props.disable) return
            setIsTouched(true)
        }}
        onTouchEnd={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
            setIsTouched(false)
        }}
    >{props.component}{props.title}</View>
}