|
|
@@ -0,0 +1,71 @@
|
|
|
+import { View, Text } from '@tarojs/components'
|
|
|
+import TDesignIcon from '../icon'
|
|
|
+import './index.css'
|
|
|
+
|
|
|
+interface CellProps {
|
|
|
+ /** 单元格标题 */
|
|
|
+ title: string
|
|
|
+ /** 单元格值 */
|
|
|
+ value?: string
|
|
|
+ /** 左侧图标名称 */
|
|
|
+ icon?: string
|
|
|
+ /** 是否显示箭头 */
|
|
|
+ arrow?: boolean
|
|
|
+ /** 是否显示边框 */
|
|
|
+ border?: boolean
|
|
|
+ /** 点击回调 */
|
|
|
+ onClick?: () => void
|
|
|
+ /** 自定义样式类 */
|
|
|
+ className?: string
|
|
|
+}
|
|
|
+
|
|
|
+export default function TDesignCell({
|
|
|
+ title,
|
|
|
+ value = '',
|
|
|
+ icon,
|
|
|
+ arrow = false,
|
|
|
+ border = true,
|
|
|
+ onClick,
|
|
|
+ className = ''
|
|
|
+}: CellProps) {
|
|
|
+ return (
|
|
|
+ <View
|
|
|
+ className={`tdesign-cell ${border ? 'tdesign-cell--border' : ''} ${className}`}
|
|
|
+ onClick={onClick}
|
|
|
+ >
|
|
|
+ {/* 左侧图标 */}
|
|
|
+ {icon && (
|
|
|
+ <View className="tdesign-cell__icon">
|
|
|
+ <TDesignIcon
|
|
|
+ name={icon}
|
|
|
+ size="40rpx"
|
|
|
+ color="#333"
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 内容区域 */}
|
|
|
+ <View className="tdesign-cell__content">
|
|
|
+ <Text className="tdesign-cell__title">
|
|
|
+ {title}
|
|
|
+ </Text>
|
|
|
+ {value && (
|
|
|
+ <Text className="tdesign-cell__value">
|
|
|
+ {value}
|
|
|
+ </Text>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ {/* 右侧箭头 */}
|
|
|
+ {arrow && (
|
|
|
+ <View className="tdesign-cell__arrow">
|
|
|
+ <TDesignIcon
|
|
|
+ name="arrow-right"
|
|
|
+ size="32rpx"
|
|
|
+ color="#999"
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+}
|