Browse Source
按提交纪律精确分阶段 git add（未用 -A / 未用 git rm），tsc --noEmit 0 错误、 eslint .（全量）0 警告。 | 模块 | 主要文件 | 变更要点 | 状态 | |---|---|---|---| | 付费支付闭环 | legal/checkout.tsx(新)、useLegalMembership.ts(新)、legal.tsx、upgrade.tsx | 选套餐→结算→选支付方式→模拟支付→会员激活并 AsyncStorage 持久化；套餐卡可点击、返回时 focus 刷新 | 完成·真实SDK仅换 api 函数体 | | 会员权益兑现 | legal/service.tsx(新)、useLegalServiceRequests.ts(新)、legal.tsx | 修复「付了钱却拿不到服务」：未开通引导开通，已开通进入使用页提交申请并留痕 | 完成 | | 岗位评价发布 | jobs/[id].tsx、useJobDetail.ts、api.ts | 修复「评价生态却发不出评价」：新增 createJobReview，发布后置顶并持久化 | 完成 | | 类型与导出 | types/legal.ts、types/index.ts、api/index.ts、hooks/index.ts | 新增订单/会员态/服务申请类型与对应函数、hook 导出 | 完成 | | 文档 | 项目开发状态.md | 同步三批功能状态与审计结论 | 完成 | 注：mock 阶段持久化统一走 src/lib/storage.ts（AsyncStorage，youzhi: 前缀）， storage 为唯一真相源，真实后端就绪后仅替换 api.ts 对应函数体。master
doublex001
2 months ago
14 changed files with 1510 additions and 24 deletions
@ -0,0 +1,395 @@ |
|||||
|
import { Ionicons } from '@expo/vector-icons'; |
||||
|
import { useLocalSearchParams, useRouter } from 'expo-router'; |
||||
|
import { useCallback, useState } from 'react'; |
||||
|
import { ActivityIndicator, Alert, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'; |
||||
|
import { SafeAreaView } from 'react-native-safe-area-context'; |
||||
|
import { useLegalData, useLegalMembership } from '../../src/hooks'; |
||||
|
import { LoadingState, EmptyState } from '../../src/components/StateView'; |
||||
|
import { colors } from '../../src/theme'; |
||||
|
import type { LegalPaymentChannel } from '../../src/types'; |
||||
|
|
||||
|
/* ===================== 付款方式 ===================== */ |
||||
|
|
||||
|
const CHANNELS: { id: LegalPaymentChannel; label: string; icon: keyof typeof Ionicons.glyphMap; color: string }[] = [ |
||||
|
{ id: 'wechat', label: '微信支付', icon: 'logo-wechat', color: colors.success }, |
||||
|
{ id: 'alipay', label: '支付宝', icon: 'wallet-outline', color: colors.primary }, |
||||
|
]; |
||||
|
|
||||
|
/* ===================== 顶部导航 ===================== */ |
||||
|
|
||||
|
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 LegalCheckoutScreen() { |
||||
|
const router = useRouter(); |
||||
|
const { planId } = useLocalSearchParams(); |
||||
|
const id = Array.isArray(planId) ? planId[0] : planId; |
||||
|
const { plans, loading } = useLegalData(); |
||||
|
const { createOrder, payOrder, processing } = useLegalMembership(); |
||||
|
|
||||
|
const [channel, setChannel] = useState<LegalPaymentChannel>('wechat'); |
||||
|
const [paid, setPaid] = useState(false); |
||||
|
|
||||
|
const plan = plans.find((p) => p.id === id); |
||||
|
|
||||
|
const handlePay = useCallback(async () => { |
||||
|
if (!plan) return; |
||||
|
try { |
||||
|
const order = await createOrder(plan.id, channel); |
||||
|
const result = await payOrder(order.id); |
||||
|
if (result.status === 'paid') { |
||||
|
setPaid(true); |
||||
|
} else { |
||||
|
Alert.alert('支付失败', '请稍后重试'); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
Alert.alert('支付失败', (e as Error).message || '请稍后重试'); |
||||
|
} |
||||
|
}, [plan, channel, createOrder, payOrder]); |
||||
|
|
||||
|
// 加载套餐中
|
||||
|
if (loading) { |
||||
|
return ( |
||||
|
<SafeAreaView style={styles.safeArea} edges={['top']}> |
||||
|
<Header onBack={() => router.back()} /> |
||||
|
<LoadingState text="加载套餐中…" /> |
||||
|
</SafeAreaView> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 套餐不存在（异常入口）
|
||||
|
if (!plan) { |
||||
|
return ( |
||||
|
<SafeAreaView style={styles.safeArea} edges={['top']}> |
||||
|
<Header onBack={() => router.back()} /> |
||||
|
<EmptyState icon="alert-circle-outline" title="套餐不存在" subtitle="请从会员套餐页重新进入" /> |
||||
|
</SafeAreaView> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 支付成功
|
||||
|
if (paid) { |
||||
|
return ( |
||||
|
<SafeAreaView style={styles.safeArea} edges={['top']}> |
||||
|
<Header onBack={() => router.replace('/legal')} /> |
||||
|
<View style={styles.successBox}> |
||||
|
<View style={styles.successIconWrap}> |
||||
|
<Ionicons name="checkmark-circle" size={56} color={colors.success} /> |
||||
|
</View> |
||||
|
<Text style={styles.successTitle}>支付成功</Text> |
||||
|
<Text style={styles.successDesc}> |
||||
|
已开通{plan.name}，可畅享会员专属法律服务 |
||||
|
</Text> |
||||
|
<Pressable style={styles.successBtn} onPress={() => router.replace('/legal')}> |
||||
|
<Text style={styles.successBtnText}>返回法律服务</Text> |
||||
|
</Pressable> |
||||
|
</View> |
||||
|
</SafeAreaView> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<SafeAreaView style={styles.safeArea} edges={['top']}> |
||||
|
<Header onBack={() => router.back()} /> |
||||
|
<ScrollView |
||||
|
style={styles.scroll} |
||||
|
contentContainerStyle={styles.content} |
||||
|
showsVerticalScrollIndicator={false} |
||||
|
> |
||||
|
{/* 套餐摘要 */} |
||||
|
<View style={styles.summaryCard}> |
||||
|
<Text style={styles.summaryName}>{plan.name}</Text> |
||||
|
<View style={styles.summaryPriceRow}> |
||||
|
<Text style={styles.summaryCurrency}>¥</Text> |
||||
|
<Text style={styles.summaryPrice}>{plan.price}</Text> |
||||
|
<Text style={styles.summaryPeriod}>{plan.period}</Text> |
||||
|
</View> |
||||
|
<View style={styles.benefits}> |
||||
|
{plan.benefits.map((benefit, idx) => ( |
||||
|
<View key={idx} style={styles.benefitRow}> |
||||
|
<Ionicons name="checkmark-circle" size={14} color={colors.success} /> |
||||
|
<Text style={styles.benefitText}>{benefit}</Text> |
||||
|
</View> |
||||
|
))} |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
{/* 支付方式 */} |
||||
|
<Text style={styles.sectionTitle}>选择支付方式</Text> |
||||
|
<View style={styles.channelGroup}> |
||||
|
{CHANNELS.map((c) => { |
||||
|
const active = c.id === channel; |
||||
|
return ( |
||||
|
<Pressable |
||||
|
key={c.id} |
||||
|
style={({ pressed }) => [ |
||||
|
styles.channelRow, |
||||
|
active && styles.channelRowActive, |
||||
|
pressed && styles.channelPressed, |
||||
|
]} |
||||
|
onPress={() => setChannel(c.id)} |
||||
|
> |
||||
|
<Ionicons name={c.icon} size={24} color={c.color} /> |
||||
|
<Text style={styles.channelLabel}>{c.label}</Text> |
||||
|
<View style={[styles.radio, active && styles.radioActive]}> |
||||
|
{active && <View style={styles.radioDot} />} |
||||
|
</View> |
||||
|
</Pressable> |
||||
|
); |
||||
|
})} |
||||
|
</View> |
||||
|
|
||||
|
{/* 实付金额 */} |
||||
|
<View style={styles.amountRow}> |
||||
|
<Text style={styles.amountLabel}>实付金额</Text> |
||||
|
<View style={styles.amountValue}> |
||||
|
<Text style={styles.amountCurrency}>¥</Text> |
||||
|
<Text style={styles.amountPrice}>{plan.price}</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</ScrollView> |
||||
|
|
||||
|
{/* 确认支付（底部固定） */} |
||||
|
<View style={styles.footer}> |
||||
|
<Pressable |
||||
|
style={({ pressed }) => [styles.payBtn, pressed && styles.payBtnPressed, processing && styles.payBtnDisabled]} |
||||
|
onPress={handlePay} |
||||
|
disabled={processing} |
||||
|
> |
||||
|
{processing ? ( |
||||
|
<ActivityIndicator color={colors.white} /> |
||||
|
) : ( |
||||
|
<Text style={styles.payBtnText}>确认支付 ¥{plan.price}</Text> |
||||
|
)} |
||||
|
</Pressable> |
||||
|
</View> |
||||
|
</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, |
||||
|
}, |
||||
|
summaryCard: { |
||||
|
padding: 16, |
||||
|
borderRadius: 8, |
||||
|
backgroundColor: colors.white, |
||||
|
borderWidth: 1, |
||||
|
borderColor: colors.border, |
||||
|
}, |
||||
|
summaryName: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: '700', |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
summaryPriceRow: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'baseline', |
||||
|
marginTop: 8, |
||||
|
marginBottom: 12, |
||||
|
}, |
||||
|
summaryCurrency: { |
||||
|
fontSize: 15, |
||||
|
fontWeight: '700', |
||||
|
color: colors.actionText, |
||||
|
}, |
||||
|
summaryPrice: { |
||||
|
fontSize: 30, |
||||
|
fontWeight: '700', |
||||
|
color: colors.actionText, |
||||
|
}, |
||||
|
summaryPeriod: { |
||||
|
fontSize: 13, |
||||
|
color: colors.textSecondary, |
||||
|
marginLeft: 2, |
||||
|
}, |
||||
|
benefits: { |
||||
|
gap: 6, |
||||
|
}, |
||||
|
benefitRow: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'center', |
||||
|
gap: 6, |
||||
|
}, |
||||
|
benefitText: { |
||||
|
fontSize: 12, |
||||
|
color: colors.textSecondary, |
||||
|
}, |
||||
|
sectionTitle: { |
||||
|
marginTop: 20, |
||||
|
marginBottom: 10, |
||||
|
fontSize: 15, |
||||
|
fontWeight: '700', |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
channelGroup: { |
||||
|
gap: 8, |
||||
|
}, |
||||
|
channelRow: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'center', |
||||
|
padding: 14, |
||||
|
borderRadius: 8, |
||||
|
backgroundColor: colors.white, |
||||
|
borderWidth: 1, |
||||
|
borderColor: colors.border, |
||||
|
gap: 12, |
||||
|
}, |
||||
|
channelRowActive: { |
||||
|
borderColor: colors.action, |
||||
|
backgroundColor: colors.actionLight, |
||||
|
}, |
||||
|
channelPressed: { |
||||
|
opacity: 0.85, |
||||
|
}, |
||||
|
channelLabel: { |
||||
|
flex: 1, |
||||
|
fontSize: 15, |
||||
|
fontWeight: '600', |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
radio: { |
||||
|
width: 20, |
||||
|
height: 20, |
||||
|
borderRadius: 10, |
||||
|
borderWidth: 2, |
||||
|
borderColor: colors.border, |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
}, |
||||
|
radioActive: { |
||||
|
borderColor: colors.action, |
||||
|
}, |
||||
|
radioDot: { |
||||
|
width: 10, |
||||
|
height: 10, |
||||
|
borderRadius: 5, |
||||
|
backgroundColor: colors.action, |
||||
|
}, |
||||
|
amountRow: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'space-between', |
||||
|
marginTop: 20, |
||||
|
paddingTop: 16, |
||||
|
borderTopWidth: 1, |
||||
|
borderTopColor: colors.borderLight, |
||||
|
}, |
||||
|
amountLabel: { |
||||
|
fontSize: 14, |
||||
|
color: colors.textSecondary, |
||||
|
}, |
||||
|
amountValue: { |
||||
|
flexDirection: 'row', |
||||
|
alignItems: 'baseline', |
||||
|
}, |
||||
|
amountCurrency: { |
||||
|
fontSize: 15, |
||||
|
fontWeight: '700', |
||||
|
color: colors.actionText, |
||||
|
}, |
||||
|
amountPrice: { |
||||
|
fontSize: 22, |
||||
|
fontWeight: '700', |
||||
|
color: colors.actionText, |
||||
|
}, |
||||
|
footer: { |
||||
|
padding: 12, |
||||
|
backgroundColor: colors.white, |
||||
|
borderTopWidth: 1, |
||||
|
borderTopColor: colors.borderLight, |
||||
|
}, |
||||
|
payBtn: { |
||||
|
height: 48, |
||||
|
borderRadius: 8, |
||||
|
backgroundColor: colors.primaryBtn, |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
}, |
||||
|
payBtnPressed: { |
||||
|
opacity: 0.9, |
||||
|
}, |
||||
|
payBtnDisabled: { |
||||
|
opacity: 0.6, |
||||
|
}, |
||||
|
payBtnText: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: '700', |
||||
|
color: colors.white, |
||||
|
}, |
||||
|
successBox: { |
||||
|
flex: 1, |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
padding: 24, |
||||
|
}, |
||||
|
successIconWrap: { |
||||
|
marginBottom: 16, |
||||
|
}, |
||||
|
successTitle: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: '700', |
||||
|
color: colors.textPrimary, |
||||
|
}, |
||||
|
successDesc: { |
||||
|
marginTop: 8, |
||||
|
fontSize: 14, |
||||
|
color: colors.textSecondary, |
||||
|
textAlign: 'center', |
||||
|
}, |
||||
|
successBtn: { |
||||
|
marginTop: 28, |
||||
|
width: 200, |
||||
|
height: 46, |
||||
|
borderRadius: 23, |
||||
|
backgroundColor: colors.primaryBtn, |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
}, |
||||
|
successBtnText: { |
||||
|
fontSize: 15, |
||||
|
fontWeight: '700', |
||||
|
color: colors.white, |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,430 @@ |
|||||
|
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, 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 } = useLegalData(); |
||||
|
const { membership, refresh: refreshMembership } = useLegalMembership(); |
||||
|
const { |
||||
|
requests, |
||||
|
loading: requestsLoading, |
||||
|
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 (!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} /> |
||||
|
) : 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, |
||||
|
}, |
||||
|
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, |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,92 @@ |
|||||
|
/** |
||||
|
* 法律服务会员态 hook：拉取当前会员态与付费订单，并提供 |
||||
|
* 创建订单 / 模拟支付 的能力。mock 阶段数据持久化在 AsyncStorage。 |
||||
|
*/ |
||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||
|
import { |
||||
|
createLegalOrder, |
||||
|
fetchLegalMembership, |
||||
|
fetchLegalOrders, |
||||
|
payLegalOrder, |
||||
|
} from '../api'; |
||||
|
import type { LegalMembership, LegalOrder, LegalPaymentChannel } from '../types'; |
||||
|
|
||||
|
export interface LegalMembershipState { |
||||
|
/** 当前会员态，未开通为 null */ |
||||
|
membership: LegalMembership | null; |
||||
|
/** 付费订单列表（倒序） */ |
||||
|
orders: LegalOrder[]; |
||||
|
/** 首次加载中 */ |
||||
|
loading: boolean; |
||||
|
/** 错误对象 */ |
||||
|
error: Error | null; |
||||
|
/** 支付处理中（创建订单 + 模拟支付） */ |
||||
|
processing: boolean; |
||||
|
/** 刷新会员态与订单 */ |
||||
|
refresh: () => Promise<void>; |
||||
|
/** 创建订单，返回新建的待支付订单 */ |
||||
|
createOrder: (planId: string, channel: LegalPaymentChannel) => Promise<LegalOrder>; |
||||
|
/** 支付订单，成功后同步会员态 */ |
||||
|
payOrder: (orderId: string) => Promise<LegalOrder>; |
||||
|
} |
||||
|
|
||||
|
export function useLegalMembership(): LegalMembershipState { |
||||
|
const [membership, setMembership] = useState<LegalMembership | null>(null); |
||||
|
const [orders, setOrders] = useState<LegalOrder[]>([]); |
||||
|
const [loading, setLoading] = useState(true); |
||||
|
const [error, setError] = useState<Error | null>(null); |
||||
|
const [processing, setProcessing] = useState(false); |
||||
|
|
||||
|
const refresh = useCallback(async () => { |
||||
|
try { |
||||
|
setLoading(true); |
||||
|
setError(null); |
||||
|
const [m, o] = await Promise.all([fetchLegalMembership(), fetchLegalOrders()]); |
||||
|
setMembership(m); |
||||
|
setOrders(o); |
||||
|
} catch (e) { |
||||
|
setError(e as Error); |
||||
|
} finally { |
||||
|
setLoading(false); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
refresh(); |
||||
|
}, [refresh]); |
||||
|
|
||||
|
const createOrder = useCallback( |
||||
|
async (planId: string, channel: LegalPaymentChannel) => { |
||||
|
const order = await createLegalOrder(planId, channel); |
||||
|
setOrders((prev) => [order, ...prev]); |
||||
|
return order; |
||||
|
}, |
||||
|
[], |
||||
|
); |
||||
|
|
||||
|
const payOrder = useCallback(async (orderId: string) => { |
||||
|
setProcessing(true); |
||||
|
try { |
||||
|
const order = await payLegalOrder(orderId); |
||||
|
setOrders((prev) => prev.map((o) => (o.id === orderId ? order : o))); |
||||
|
if (order.status === 'paid') { |
||||
|
const m = await fetchLegalMembership(); |
||||
|
setMembership(m); |
||||
|
} |
||||
|
return order; |
||||
|
} finally { |
||||
|
setProcessing(false); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
|
return { |
||||
|
membership, |
||||
|
orders, |
||||
|
loading, |
||||
|
error, |
||||
|
processing, |
||||
|
refresh, |
||||
|
createOrder, |
||||
|
payOrder, |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,58 @@ |
|||||
|
/** |
||||
|
* 会员服务使用申请 hook：拉取本人的服务申请记录，并提供提交申请的能力。 |
||||
|
* 权益兑现载体——已开通会员提交后由律师/顾问跟进。 |
||||
|
*/ |
||||
|
import { useCallback, useEffect, useState } from 'react'; |
||||
|
import { createLegalServiceRequest, fetchLegalServiceRequests } from '../api'; |
||||
|
import type { LegalServiceRequest } from '../types'; |
||||
|
|
||||
|
export interface LegalServiceRequestsState { |
||||
|
/** 申请记录（倒序） */ |
||||
|
requests: LegalServiceRequest[]; |
||||
|
/** 首次加载中 */ |
||||
|
loading: boolean; |
||||
|
/** 错误对象 */ |
||||
|
error: Error | null; |
||||
|
/** 提交中 */ |
||||
|
submitting: boolean; |
||||
|
/** 刷新申请记录 */ |
||||
|
refresh: () => Promise<void>; |
||||
|
/** 提交申请 */ |
||||
|
submit: (serviceId: string, content: string) => Promise<LegalServiceRequest>; |
||||
|
} |
||||
|
|
||||
|
export function useLegalServiceRequests(): LegalServiceRequestsState { |
||||
|
const [requests, setRequests] = useState<LegalServiceRequest[]>([]); |
||||
|
const [loading, setLoading] = useState(true); |
||||
|
const [error, setError] = useState<Error | null>(null); |
||||
|
const [submitting, setSubmitting] = useState(false); |
||||
|
|
||||
|
const refresh = useCallback(async () => { |
||||
|
try { |
||||
|
setLoading(true); |
||||
|
setError(null); |
||||
|
setRequests(await fetchLegalServiceRequests()); |
||||
|
} catch (e) { |
||||
|
setError(e as Error); |
||||
|
} finally { |
||||
|
setLoading(false); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
refresh(); |
||||
|
}, [refresh]); |
||||
|
|
||||
|
const submit = useCallback(async (serviceId: string, content: string) => { |
||||
|
setSubmitting(true); |
||||
|
try { |
||||
|
const created = await createLegalServiceRequest(serviceId, content); |
||||
|
setRequests((prev) => [created, ...prev]); |
||||
|
return created; |
||||
|
} finally { |
||||
|
setSubmitting(false); |
||||
|
} |
||||
|
}, []); |
||||
|
|
||||
|
return { requests, loading, error, submitting, refresh, submit }; |
||||
|
} |
||||
Loading…
Reference in new issue