110 lines
2.5 KiB
TypeScript
110 lines
2.5 KiB
TypeScript
|
/**
|
|||
|
|
* VotePreview 投票预览组件
|
|||
|
|
* 用于帖子列表中显示投票预览，类似微博风格
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import React from 'react';
|
|||
|
|
import {
|
|||
|
|
View,
|
|||
|
|
TouchableOpacity,
|
|||
|
|
StyleSheet,
|
|||
|
|
} from 'react-native';
|
|||
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|||
|
|
import { colors, spacing, fontSizes, borderRadius } from '../../theme';
|
|||
|
|
import Text from '../common/Text';
|
|||
|
|
|
|||
|
|
interface VotePreviewProps {
|
|||
|
|
totalVotes?: number;
|
|||
|
|
optionsCount?: number;
|
|||
|
|
onPress?: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const VotePreview: React.FC<VotePreviewProps> = ({
|
|||
|
|
totalVotes = 0,
|
|||
|
|
optionsCount = 0,
|
|||
|
|
onPress,
|
|||
|
|
}) => {
|
|||
|
|
// 格式化票数
|
|||
|
|
const formatVoteCount = (count: number): string => {
|
|||
|
|
if (count >= 10000) {
|
|||
|
|
return (count / 10000).toFixed(1) + '万';
|
|||
|
|
}
|
|||
|
|
if (count >= 1000) {
|
|||
|
|
return (count / 1000).toFixed(1) + 'k';
|
|||
|
|
}
|
|||
|
|
return count.toString();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 判断是否有真实数据
|
|||
|
|
const hasData = totalVotes > 0 || optionsCount > 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<TouchableOpacity
|
|||
|
|
style={styles.container}
|
|||
|
|
onPress={onPress}
|
|||
|
|
activeOpacity={0.8}
|
|||
|
|
>
|
|||
|
|
<View style={styles.iconContainer}>
|
|||
|
|
<MaterialCommunityIcons
|
|||
|
|
name="vote"
|
|||
|
|
size={18}
|
|||
|
|
color={colors.primary.main}
|
|||
|
|
/>
|
|||
|
|
</View>
|
|||
|
|
<View style={styles.content}>
|
|||
|
|
<Text style={styles.title}>
|
|||
|
|
正在进行投票
|
|||
|
|
</Text>
|
|||
|
|
<Text style={styles.subtitle}>
|
|||
|
|
{hasData
|
|||
|
|
? `${optionsCount} 个选项 · ${formatVoteCount(totalVotes)} 人参与`
|
|||
|
|
: '点击查看详情'
|
|||
|
|
}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<MaterialCommunityIcons
|
|||
|
|
name="chevron-right"
|
|||
|
|
size={20}
|
|||
|
|
color={colors.text.hint}
|
|||
|
|
/>
|
|||
|
|
</TouchableOpacity>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const styles = StyleSheet.create({
|
|||
|
|
container: {
|
|||
|
|
flexDirection: 'row',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
backgroundColor: colors.primary.light + '08',
|
|||
|
|
borderRadius: borderRadius.md,
|
|||
|
|
padding: spacing.md,
|
|||
|
|
marginTop: spacing.sm,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: colors.primary.light + '30',
|
|||
|
|
},
|
|||
|
|
iconContainer: {
|
|||
|
|
width: 36,
|
|||
|
|
height: 36,
|
|||
|
|
borderRadius: borderRadius.md,
|
|||
|
|
backgroundColor: colors.primary.light + '20',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
marginRight: spacing.sm,
|
|||
|
|
},
|
|||
|
|
content: {
|
|||
|
|
flex: 1,
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
fontSize: fontSizes.md,
|
|||
|
|
fontWeight: '600',
|
|||
|
|
color: colors.text.primary,
|
|||
|
|
marginBottom: 2,
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
fontSize: fontSizes.sm,
|
|||
|
|
color: colors.text.secondary,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
export default VotePreview;
|