feat(mp): 新增 AvatarCircle/ShortcutButton/TodoAlert 组件 + 商品详情页
- AvatarCircle: 头像圆形组件 - ShortcutButton: 快捷操作按钮 - TodoAlert: 待办提醒组件 - pkg-mall/product: 积分商品详情页
This commit is contained in:
40
apps/miniprogram/src/components/ui/TodoAlert/index.tsx
Normal file
40
apps/miniprogram/src/components/ui/TodoAlert/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import './index.scss';
|
||||
|
||||
type AlertColor = 'pri' | 'wrn';
|
||||
|
||||
interface TodoAlertProps {
|
||||
icon?: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
color?: AlertColor;
|
||||
onPress?: () => void;
|
||||
}
|
||||
|
||||
const TodoAlert: React.FC<TodoAlertProps> = ({
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
color = 'pri',
|
||||
onPress,
|
||||
}) => {
|
||||
const cls = ['todo-alert', `todo-alert--${color}`].join(' ');
|
||||
|
||||
return (
|
||||
<View className={cls} onClick={onPress}>
|
||||
{icon && (
|
||||
<View className="todo-alert__icon-wrap">
|
||||
<Text className="todo-alert__icon">{icon}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className="todo-alert__body">
|
||||
<Text className="todo-alert__title">{title}</Text>
|
||||
{subtitle && <Text className="todo-alert__subtitle">{subtitle}</Text>}
|
||||
</View>
|
||||
<Text className="todo-alert__arrow">›</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TodoAlert);
|
||||
Reference in New Issue
Block a user