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.
74 lines
2.8 KiB
74 lines
2.8 KiB
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { applySalaryMin, salaryMaxOptions } from '../../../src/api';
|
|
import { SALARY_MIN_OPTIONS } from '../../../src/constants';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { PrimaryButton } from '../ui/PrimaryButton';
|
|
|
|
export function P7Salary() {
|
|
const { data, setData, navigate, back } = useOnboarding();
|
|
|
|
// 「最高」档位随「最低」收窄（规则在 API 层），改最低时同步校正最高，
|
|
// 避免存出「最低 30K / 最高 15K」这种自相矛盾的期望薪资
|
|
const maxOptions = salaryMaxOptions(data.expectedSalaryMin);
|
|
const canNext = data.expectedSalaryMin !== '' && data.expectedSalaryMax !== '';
|
|
|
|
return (
|
|
<ScreenShell title="期望月薪" showBack onBack={back}>
|
|
<Text style={styles.tip}>1K 代表 1000 元</Text>
|
|
|
|
<View style={styles.cols}>
|
|
<View style={styles.col}>
|
|
<Text style={styles.colTitle}>最低</Text>
|
|
{SALARY_MIN_OPTIONS.map((v) => (
|
|
<Pressable
|
|
key={v}
|
|
style={[styles.opt, data.expectedSalaryMin === v && styles.optActive]}
|
|
onPress={() => setData(applySalaryMin(v, data.expectedSalaryMax))}
|
|
>
|
|
<Text style={[styles.optText, data.expectedSalaryMin === v && styles.optTextActive]}>{v}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.col}>
|
|
<Text style={styles.colTitle}>最高</Text>
|
|
{maxOptions.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={canNext} 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 },
|
|
});
|
|
|