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.
98 lines
3.9 KiB
98 lines
3.9 KiB
import { useState } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { colors, spacing } 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 CATS = ['互联网AI', '设计', '金融', '客服运营', '电商'];
|
|
const POS: Record<string, string[]> = {
|
|
互联网AI: ['全栈工程师', '鸿蒙开发工程师', '前端开发工程师', 'Java工程师', '测试工程师'],
|
|
设计: ['UI设计师', '视觉设计师'],
|
|
金融: ['风控专员', '财务分析'],
|
|
客服运营: ['客服专员', '用户运营'],
|
|
电商: ['电商运营', '内容运营'],
|
|
};
|
|
const BLOCKS = ['客服', '内容运营', '电商运营', '用户运营'];
|
|
|
|
/** 全部分类的职位去重展开，供搜索跨分类匹配 */
|
|
const ALL_POS: string[] = Array.from(new Set(Object.values(POS).flat()));
|
|
|
|
export function P11CurrentPosition() {
|
|
const { data, setData, navigate, back } = useOnboarding();
|
|
const [cat, setCat] = useState('互联网AI');
|
|
const [query, setQuery] = useState('');
|
|
|
|
const keyword = query.trim();
|
|
const searching = keyword !== '';
|
|
// 搜索态跨分类匹配（与 P6 同一处理）：只搜当前分类会让「搜不到」看起来像没有这个职位
|
|
const visiblePos = searching ? ALL_POS.filter((p) => p.includes(keyword)) : POS[cat];
|
|
const visibleBlocks = searching ? BLOCKS.filter((b) => b.includes(keyword)) : BLOCKS;
|
|
|
|
const choose = (p: string) => {
|
|
setData({ currentPosition: p });
|
|
navigate('P12');
|
|
};
|
|
|
|
return (
|
|
<ScreenShell title="当前工作职位" showBack onBack={back}>
|
|
<SearchInput value={query} onChangeText={setQuery} placeholder="搜索职位" onClear={() => setQuery('')} />
|
|
|
|
<View style={styles.body}>
|
|
<View style={styles.cats}>
|
|
{CATS.map((c) => (
|
|
<Pressable
|
|
key={c}
|
|
style={[styles.catItem, c === cat && styles.catItemActive]}
|
|
onPress={() => {
|
|
// 搜索态下切分类不改变右侧内容，清掉关键词保证动作有可见结果
|
|
setQuery('');
|
|
setCat(c);
|
|
}}
|
|
>
|
|
<Text style={[styles.catText, c === cat && styles.catTextActive]}>{c}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.col}>
|
|
<Text style={styles.colTitle}>猜你做过</Text>
|
|
{visiblePos.length > 0 ? (
|
|
<TagGroup>
|
|
{visiblePos.map((p) => (
|
|
<Tag key={p} label={p} selected={data.currentPosition === p} onPress={() => choose(p)} />
|
|
))}
|
|
</TagGroup>
|
|
) : (
|
|
<Text style={styles.empty}>没有匹配「{keyword}」的职位</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.blockTitle}>或者从这些板块选</Text>
|
|
{visibleBlocks.length > 0 ? (
|
|
<TagGroup>
|
|
{visibleBlocks.map((b) => (
|
|
<Tag key={b} label={b} selected={data.currentPosition === b} onPress={() => choose(b)} />
|
|
))}
|
|
</TagGroup>
|
|
) : (
|
|
<Text style={styles.empty}>没有匹配「{keyword}」的板块</Text>
|
|
)}
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
body: { flexDirection: 'row', gap: spacing.block, marginTop: 8 },
|
|
cats: { width: 92 },
|
|
catItem: { paddingVertical: spacing.block, borderRadius: 10 },
|
|
catItemActive: { backgroundColor: colors.primaryLight },
|
|
catText: { fontSize: 13, color: colors.textSecondary, textAlign: 'center' },
|
|
catTextActive: { color: colors.primaryText, fontWeight: '700' },
|
|
col: { flex: 1 },
|
|
colTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginBottom: spacing.block },
|
|
empty: { fontSize: 13, color: colors.textHint, lineHeight: 20 },
|
|
blockTitle: { fontSize: 14, fontWeight: '700', color: colors.textPrimary, marginVertical: 16 },
|
|
});
|
|
|