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.
68 lines
2.6 KiB
68 lines
2.6 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 { ScreenShell } from '../ui/ScreenShell';
|
|
import { SearchInput } from '../ui/SearchInput';
|
|
import { Tag, TagGroup } from '../ui/Tag';
|
|
|
|
const ALL = ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉', '西安', '苏州', '天津', '重庆', '青岛', '长沙', '郑州', '东莞'];
|
|
const HOT = ['北京', '上海', '广州', '深圳', '杭州', '成都'];
|
|
|
|
export function P5City() {
|
|
const { data, setData, back, meta } = useOnboarding();
|
|
const [query, setQuery] = useState('');
|
|
|
|
const pick = (city: string) => {
|
|
setData({ city });
|
|
back();
|
|
};
|
|
|
|
const list = query ? ALL.filter((c) => c.includes(query)) : ALL;
|
|
|
|
return (
|
|
<ScreenShell time={meta.time} battery={meta.battery} title="选择城市" showBack onBack={back}>
|
|
<SearchInput value={query} onChangeText={setQuery} placeholder="搜索城市" onClear={() => setQuery('')} />
|
|
|
|
<Pressable style={styles.locate} onPress={() => pick('上海')}>
|
|
<Ionicons name="locate" size={18} color={colors.primary} />
|
|
<Text style={styles.locateText}>自动定位：上海</Text>
|
|
</Pressable>
|
|
|
|
<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({
|
|
locate: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingVertical: 14, marginTop: 12 },
|
|
locateText: { fontSize: 14, fontWeight: '600', color: colors.primaryText },
|
|
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' },
|
|
});
|
|
|