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.
65 lines
2.4 KiB
65 lines
2.4 KiB
import { useState } from 'react';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
import { useOnboarding } from '../../../src/hooks';
|
|
import { EXPECTED_CITY_OPTIONS, HOT_CITY_OPTIONS } from '../../../src/constants';
|
|
import { ScreenShell } from '../ui/ScreenShell';
|
|
import { SearchInput } from '../ui/SearchInput';
|
|
import { Tag, TagGroup } from '../ui/Tag';
|
|
|
|
// 城市表放常量：「设置求职意向」页用的是同一份，两处各写一份会让采集到的城市在那页选不中
|
|
const ALL = EXPECTED_CITY_OPTIONS;
|
|
const HOT = HOT_CITY_OPTIONS;
|
|
|
|
export function P5City() {
|
|
const { data, setData, back } = useOnboarding();
|
|
const [query, setQuery] = useState('');
|
|
|
|
const pick = (city: string) => {
|
|
setData({ city });
|
|
back();
|
|
};
|
|
|
|
const list = query ? ALL.filter((c) => c.includes(query)) : ALL;
|
|
|
|
return (
|
|
<ScreenShell title="选择城市" showBack onBack={back}>
|
|
<SearchInput value={query} onChangeText={setQuery} placeholder="搜索城市" onClear={() => setQuery('')} />
|
|
|
|
{/* 原「自动定位：上海」按钮已移除：它不做定位，只是把「上海」写死成选中值。
|
|
不做定位就不宣称定位（已决定不引入 expo-location） */}
|
|
<Text style={styles.section}>热门城市</Text>
|
|
<TagGroup>
|
|
{HOT.map((c) => (
|
|
<Tag key={c} label={c} selected={data.city === c} onPress={() => pick(c)} />
|
|
))}
|
|
</TagGroup>
|
|
|
|
<Text style={styles.section}>全部城市</Text>
|
|
<View style={styles.list}>
|
|
{list.map((c) => (
|
|
<Pressable key={c} style={styles.cityItem} onPress={() => pick(c)}>
|
|
<Text style={[styles.cityName, data.city === c && styles.cityNameActive]}>{c}</Text>
|
|
{data.city === c ? <Ionicons name="checkmark" size={16} color={colors.primary} /> : null}
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
section: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginTop: 22, marginBottom: 12 },
|
|
list: { gap: 2 },
|
|
cityItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 13,
|
|
borderBottomWidth: 1,
|
|
borderColor: colors.borderLight,
|
|
},
|
|
cityName: { fontSize: 15, color: colors.textPrimary },
|
|
cityNameActive: { color: colors.primary, fontWeight: '700' },
|
|
});
|
|
|