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.
468 lines
12 KiB
468 lines
12 KiB
import { Ionicons } from '@expo/vector-icons';
|
|
import { useFocusEffect, useLocalSearchParams, useRouter } from 'expo-router';
|
|
import { useCallback, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { useLegalData, useLegalMembership, useLegalServiceRequests } from '../../src/hooks';
|
|
import { LoadingState, ErrorState, EmptyState } from '../../src/components/StateView';
|
|
import { colors } from '../../src/theme';
|
|
|
|
/* ===================== 顶部导航 ===================== */
|
|
|
|
function Header({ onBack }: { onBack: () => void }) {
|
|
return (
|
|
<View style={styles.header}>
|
|
<Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
|
|
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
|
|
</Pressable>
|
|
<Text style={styles.headerTitle}>会员服务</Text>
|
|
<View style={styles.headerBtn} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/* ===================== 页面 ===================== */
|
|
|
|
export default function LegalServiceScreen() {
|
|
const router = useRouter();
|
|
const { id } = useLocalSearchParams();
|
|
const serviceId = Array.isArray(id) ? id[0] : id;
|
|
const { services, loading, error, refresh } = useLegalData();
|
|
const { membership, refresh: refreshMembership } = useLegalMembership();
|
|
const {
|
|
requests,
|
|
loading: requestsLoading,
|
|
error: requestsError,
|
|
refresh: refreshRequests,
|
|
submit,
|
|
submitting,
|
|
} = useLegalServiceRequests();
|
|
|
|
const [content, setContent] = useState('');
|
|
|
|
// 返回本页时刷新会员态与申请记录
|
|
useFocusEffect(
|
|
useCallback(() => {
|
|
refreshMembership();
|
|
refreshRequests();
|
|
}, [refreshMembership, refreshRequests]),
|
|
);
|
|
|
|
const service = services.find((s) => s.id === serviceId);
|
|
|
|
const handleSubmit = useCallback(async () => {
|
|
if (!service) return;
|
|
const text = content.trim();
|
|
if (!text) {
|
|
Alert.alert('提示', '请先填写你的需求描述');
|
|
return;
|
|
}
|
|
try {
|
|
await submit(service.id, text);
|
|
setContent('');
|
|
Alert.alert('提交成功', '我们已收到你的申请，将尽快安排专人跟进。');
|
|
} catch (e) {
|
|
Alert.alert('提交失败', (e as Error).message || '请稍后重试');
|
|
}
|
|
}, [service, content, submit]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<LoadingState text="加载服务中…" />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// 接口失败：必须先于「服务不存在」判断，否则取数失败会伪装成业务空态，
|
|
// 把用户引向「从法律服务页重新进入」这条无效的自救路径。
|
|
if (error) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ErrorState message="服务加载失败，请重试" onRetry={refresh} />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
if (!service) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<EmptyState icon="alert-circle-outline" title="服务不存在" subtitle="请从法律服务页重新进入" />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
// 未开通会员：拦截并引导开通（付费前不给权益）
|
|
if (!membership) {
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<View style={styles.lockedBox}>
|
|
<View style={styles.lockedIconWrap}>
|
|
<Ionicons name="lock-closed-outline" size={44} color={colors.action} />
|
|
</View>
|
|
<Text style={styles.lockedTitle}>{service.title}</Text>
|
|
<Text style={styles.lockedDesc}>{service.description}</Text>
|
|
<Text style={styles.lockedTip}>该服务为会员专享，开通后即可使用</Text>
|
|
<Pressable style={styles.lockedBtn} onPress={() => router.push('/legal/upgrade')}>
|
|
<Text style={styles.lockedBtnText}>开通会员</Text>
|
|
</Pressable>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const myRequests = requests.filter((r) => r.serviceId === service.id);
|
|
const canSubmit = content.trim().length > 0 && !submitting;
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
<Header onBack={() => router.back()} />
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.content}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* 服务说明 */}
|
|
<View style={styles.card}>
|
|
<View style={styles.serviceHead}>
|
|
<View style={styles.serviceIconWrap}>
|
|
<Ionicons
|
|
name={service.icon as keyof typeof Ionicons.glyphMap}
|
|
size={22}
|
|
color={colors.action}
|
|
/>
|
|
</View>
|
|
<View style={styles.serviceHeadBody}>
|
|
<Text style={styles.serviceName}>{service.title}</Text>
|
|
<Text style={styles.serviceDesc}>{service.description}</Text>
|
|
</View>
|
|
</View>
|
|
{service.requestHint && <Text style={styles.hint}>{service.requestHint}</Text>}
|
|
</View>
|
|
|
|
{/* 需求填写 */}
|
|
<Text style={styles.sectionTitle}>填写你的需求</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={content}
|
|
onChangeText={setContent}
|
|
placeholder="请描述你的具体情况与希望解决的问题…"
|
|
placeholderTextColor={colors.textHint}
|
|
multiline
|
|
maxLength={500}
|
|
textAlignVertical="top"
|
|
/>
|
|
<Text style={styles.counter}>{content.length}/500</Text>
|
|
|
|
<Pressable
|
|
style={({ pressed }) => [
|
|
styles.submitBtn,
|
|
!canSubmit && styles.submitBtnDisabled,
|
|
pressed && canSubmit && styles.submitBtnPressed,
|
|
]}
|
|
onPress={handleSubmit}
|
|
disabled={!canSubmit}
|
|
>
|
|
{submitting ? (
|
|
<ActivityIndicator color={colors.white} />
|
|
) : (
|
|
<Text style={styles.submitBtnText}>提交申请</Text>
|
|
)}
|
|
</Pressable>
|
|
|
|
{/* 我的申请记录 */}
|
|
<Text style={styles.sectionTitle}>我的申请记录</Text>
|
|
{requestsLoading ? (
|
|
<ActivityIndicator color={colors.primary} style={styles.requestsLoading} />
|
|
) : requestsError ? (
|
|
// 申请记录取数失败不能渲染成「暂无申请记录」——那等于告诉用户记录没了
|
|
<View style={styles.errorCard}>
|
|
<Text style={styles.errorText}>申请记录加载失败</Text>
|
|
<Pressable onPress={refreshRequests} hitSlop={8}>
|
|
<Text style={styles.errorRetry}>重试</Text>
|
|
</Pressable>
|
|
</View>
|
|
) : myRequests.length === 0 ? (
|
|
<View style={styles.emptyCard}>
|
|
<Text style={styles.emptyText}>暂无申请记录</Text>
|
|
</View>
|
|
) : (
|
|
<View style={styles.requestList}>
|
|
{myRequests.map((r) => (
|
|
<View key={r.id} style={styles.requestCard}>
|
|
<View style={styles.requestHead}>
|
|
<Text style={styles.requestService}>{r.serviceName}</Text>
|
|
<View style={styles.statusTag}>
|
|
<Text style={styles.statusText}>
|
|
{r.status === 'submitted' ? '已提交' : r.status === 'processing' ? '处理中' : '已完成'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Text style={styles.requestContent}>{r.content}</Text>
|
|
<Text style={styles.requestTime}>
|
|
{new Date(r.createdAt).toLocaleString('zh-CN')}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: colors.pageBg,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 8,
|
|
height: 48,
|
|
backgroundColor: colors.white,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
},
|
|
headerBtn: {
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerTitle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
padding: 12,
|
|
paddingBottom: 24,
|
|
},
|
|
card: {
|
|
padding: 14,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.white,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
serviceHead: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
serviceIconWrap: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.actionLight,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
serviceHeadBody: {
|
|
flex: 1,
|
|
marginLeft: 12,
|
|
},
|
|
serviceName: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
serviceDesc: {
|
|
marginTop: 2,
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
lineHeight: 17,
|
|
},
|
|
hint: {
|
|
marginTop: 12,
|
|
paddingTop: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.borderLight,
|
|
fontSize: 13,
|
|
lineHeight: 19,
|
|
color: colors.textSecondary,
|
|
},
|
|
sectionTitle: {
|
|
marginTop: 20,
|
|
marginBottom: 10,
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
input: {
|
|
minHeight: 120,
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.white,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: colors.textPrimary,
|
|
},
|
|
counter: {
|
|
marginTop: 6,
|
|
textAlign: 'right',
|
|
fontSize: 12,
|
|
color: colors.textHint,
|
|
},
|
|
submitBtn: {
|
|
marginTop: 16,
|
|
height: 48,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.primaryBtn,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
submitBtnPressed: {
|
|
opacity: 0.9,
|
|
},
|
|
submitBtnDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
submitBtnText: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: colors.white,
|
|
},
|
|
requestsLoading: {
|
|
marginTop: 16,
|
|
},
|
|
emptyCard: {
|
|
padding: 20,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.white,
|
|
alignItems: 'center',
|
|
},
|
|
emptyText: {
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
},
|
|
errorCard: {
|
|
padding: 20,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.dangerLight,
|
|
borderWidth: 1,
|
|
borderColor: colors.dangerBorder,
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
errorText: {
|
|
fontSize: 13,
|
|
color: colors.dangerText,
|
|
},
|
|
errorRetry: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.primaryText,
|
|
},
|
|
requestList: {
|
|
gap: 8,
|
|
},
|
|
requestCard: {
|
|
padding: 12,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.white,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
},
|
|
requestHead: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
requestService: {
|
|
flex: 1,
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
marginRight: 8,
|
|
},
|
|
statusTag: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 4,
|
|
backgroundColor: colors.primaryLight,
|
|
},
|
|
statusText: {
|
|
fontSize: 11,
|
|
fontWeight: '700',
|
|
color: colors.primaryText,
|
|
},
|
|
requestContent: {
|
|
marginTop: 8,
|
|
fontSize: 13,
|
|
lineHeight: 19,
|
|
color: colors.textSecondary,
|
|
},
|
|
requestTime: {
|
|
marginTop: 8,
|
|
fontSize: 11,
|
|
color: colors.textHint,
|
|
},
|
|
lockedBox: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
},
|
|
lockedIconWrap: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
backgroundColor: colors.actionLight,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
lockedTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: colors.textPrimary,
|
|
},
|
|
lockedDesc: {
|
|
marginTop: 8,
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
},
|
|
lockedTip: {
|
|
marginTop: 12,
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: colors.actionText,
|
|
},
|
|
lockedBtn: {
|
|
marginTop: 28,
|
|
width: 200,
|
|
height: 46,
|
|
borderRadius: 23,
|
|
backgroundColor: colors.primaryBtn,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
lockedBtnText: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: colors.white,
|
|
},
|
|
});
|
|
|