You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.5 KiB
70 lines
2.5 KiB
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
|
|
const MIN = ['9K', '10K', '11K'];
|
|
const MAX = ['11K', '12K', '13K'];
|
|
|
|
export function P7Salary() {
|
|
const { data, setData, navigate, back, meta } = useOnboarding();
|
|
|
|
return (
|
|
<ScreenShell time={meta.time} battery={meta.battery} title="期望月薪" showBack onBack={back}>
|
|
<Text style={styles.tip}>1K 代表 1000 元</Text>
|
|
|
|
<View style={styles.cols}>
|
|
<View style={styles.col}>
|
|
<Text style={styles.colTitle}>最低</Text>
|
|
{MIN.map((v) => (
|
|
<Pressable
|
|
key={v}
|
|
style={[styles.opt, data.expectedSalaryMin === v && styles.optActive]}
|
|
onPress={() => setData({ expectedSalaryMin: v })}
|
|
>
|
|
<Text style={[styles.optText, data.expectedSalaryMin === v && styles.optTextActive]}>{v}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.col}>
|
|
<Text style={styles.colTitle}>最高</Text>
|
|
{MAX.map((v) => (
|
|
<Pressable
|
|
key={v}
|
|
style={[styles.opt, data.expectedSalaryMax === v && styles.optActive]}
|
|
onPress={() => setData({ expectedSalaryMax: v })}
|
|
>
|
|
<Text style={[styles.optText, data.expectedSalaryMax === v && styles.optTextActive]}>{v}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<PrimaryButton label="下一步" active onPress={() => navigate('P8')} />
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
tip: { fontSize: 13, color: colors.textHint, marginBottom: 20 },
|
|
cols: { flexDirection: 'row', gap: 16 },
|
|
col: { flex: 1, gap: 12 },
|
|
colTitle: { fontSize: 15, fontWeight: '700', color: colors.textPrimary, textAlign: 'center', marginBottom: 4 },
|
|
opt: {
|
|
height: 50,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.white,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
optActive: { borderColor: colors.primary, backgroundColor: colors.primaryLight },
|
|
optText: { fontSize: 16, color: colors.textSecondary },
|
|
optTextActive: { color: colors.primaryText, fontWeight: '700' },
|
|
footer: { marginTop: 32 },
|
|
});
|
|
|