246 lines
9.2 KiB
TypeScript
246 lines
9.2 KiB
TypeScript
import ReturnArrowSvg from '@/assets/icons/svg/returnArrow.svg';
|
|
import StarSvg from '@/assets/icons/svg/whiteStart.svg';
|
|
import PrivacyModal from '@/components/owner/qualification/privacy';
|
|
import Normal from '@/components/owner/rights/normal';
|
|
import Premium, { PayItem } from '@/components/owner/rights/premium';
|
|
import ProRights from '@/components/owner/rights/proRights';
|
|
import { maxDiscountProduct } from '@/components/owner/rights/utils';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { fetchApi } from '@/lib/server-api-util';
|
|
import { useLocalSearchParams, useRouter } from "expo-router";
|
|
import { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
export default function Rights() {
|
|
const insets = useSafeAreaInsets();
|
|
const router = useRouter();
|
|
const { t } = useTranslation();
|
|
// 获取路由参数
|
|
const { credit } = useLocalSearchParams<{
|
|
credit: string;
|
|
}>();
|
|
// 普通用户，会员
|
|
const [userType, setUserType] = useState<'normal' | 'premium'>('normal');
|
|
// 选择权益方式
|
|
const [payType, setPayType] = useState<string>('');
|
|
|
|
// 用户协议弹窗打开
|
|
const [showTerms, setShowTerms] = useState<boolean>(false);
|
|
|
|
// 调接口获取支付信息
|
|
const [premiumPay, setPremiumPay] = useState<PayItem[]>();
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
const getPAy = async () => {
|
|
setLoading(true);
|
|
const payInfo = await fetchApi<PayItem[]>(`/order/product-items?product_type=Membership`)
|
|
let bestValue = maxDiscountProduct(payInfo)
|
|
setPayType(bestValue?.product_code)
|
|
setPremiumPay([bestValue, ...payInfo?.filter((item) => item.product_code !== bestValue?.product_code)]);
|
|
setLoading(false);
|
|
}
|
|
useEffect(() => {
|
|
getPAy();
|
|
}, []);
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<ScrollView style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom + 80 }]}>
|
|
{/* 导航栏 */}
|
|
<View
|
|
style={styles.header}
|
|
>
|
|
<TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}>
|
|
<ReturnArrowSvg />
|
|
</TouchableOpacity>
|
|
<ThemedText style={styles.headerTitle}>
|
|
{t('rights.title', { ns: 'personal' })}
|
|
</ThemedText>
|
|
<ThemedText className='opacity-0'>123</ThemedText>
|
|
</View>
|
|
{/* 会员卡 */}
|
|
<View style={styles.card}>
|
|
{userType === 'normal' ? (
|
|
<Image source={require('@/assets/images/png/owner/normal.png')} style={{ height: 150, objectFit: 'cover', width: '100%' }} />
|
|
) : (
|
|
<Image source={require('@/assets/images/png/owner/pro.png')} style={{ height: 150, objectFit: 'cover', width: '100%' }} />
|
|
)}
|
|
<View style={styles.cardContent}>
|
|
<View style={styles.cardinfo}>
|
|
<ThemedText style={styles.cardTitle}>
|
|
{t('rights.purchase', { ns: 'personal' })}
|
|
</ThemedText>
|
|
<View style={styles.cardPoints}>
|
|
<StarSvg />
|
|
<ThemedText style={styles.cardPointsText}>{credit}</ThemedText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 会员信息 */}
|
|
<View style={styles.info}>
|
|
{/* 切换按钮 */}
|
|
<View style={styles.switchButton}>
|
|
<TouchableOpacity
|
|
onPress={() => { setUserType("normal") }}
|
|
style={[styles.switchButtonItem, { backgroundColor: userType === 'normal' ? "#FFB645" : "#fff", borderColor: userType === 'normal' ? "#FFB645" : "#E2793F" }]}
|
|
>
|
|
<ThemedText style={{ color: userType === 'normal' ? "#fff" : "#E2793F" }}> {t('rights.free', { ns: 'personal' })}</ThemedText>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => { setUserType("premium") }}
|
|
style={[styles.switchButtonItem, { backgroundColor: userType === 'premium' ? "#E2793F" : "#fff", borderColor: userType === 'premium' ? "#E2793F" : "#E2793F" }]}
|
|
>
|
|
<ThemedText style={{ color: userType === 'premium' ? "#fff" : "#E2793F" }}>{t('rights.premium', { ns: 'personal' })}</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{/* 普通权益 */}
|
|
<Normal setUserType={setUserType} style={{ display: userType === 'normal' ? "flex" : "none" }} />
|
|
{/* 会员权益 */}
|
|
<Premium setPayType={setPayType} setShowTerms={setShowTerms} payType={payType} premiumPay={premiumPay} loading={loading} style={{ display: userType === 'normal' ? "none" : "flex" }} />
|
|
</View>
|
|
{/* 会员权益信息 */}
|
|
<View style={{ flex: 1, marginBottom: 80 }}>
|
|
<ProRights style={{ display: userType === 'normal' ? "none" : "flex" }} />
|
|
</View>
|
|
</ScrollView>
|
|
{/* 付费按钮 */}
|
|
<View style={{
|
|
padding: 16,
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#eee',
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
display: userType === 'normal' ? "none" : "flex"
|
|
}}>
|
|
<TouchableOpacity
|
|
style={styles.goPay}
|
|
onPress={async () => {
|
|
setUserType('premium');
|
|
}}
|
|
activeOpacity={0.8}
|
|
>
|
|
<ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 14 }}>
|
|
{t('rights.subscribe', { ns: 'personal' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={async () => {
|
|
setShowTerms(true);
|
|
}}
|
|
activeOpacity={0.8}
|
|
>
|
|
<ThemedText style={{ color: '#AC7E35', fontWeight: '400', fontSize: 11, textDecorationLine: 'underline', textAlign: 'center' }}>
|
|
{t('rights.terms', { ns: 'personal' })}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{/* 协议弹窗 */}
|
|
<PrivacyModal modalVisible={showTerms} setModalVisible={setShowTerms} type={"user"} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
goPay: {
|
|
backgroundColor: '#E2793F',
|
|
borderRadius: 24,
|
|
paddingVertical: 10,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
},
|
|
switchButton: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
marginBottom: 16
|
|
},
|
|
switchButtonItem: {
|
|
width: "48%",
|
|
borderRadius: 24,
|
|
paddingVertical: 6,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderWidth: 1
|
|
},
|
|
info: {
|
|
marginHorizontal: 16,
|
|
marginVertical: 16,
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
backgroundColor: '#fff',
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 5,
|
|
elevation: 5,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
},
|
|
header: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginVertical: 16,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: '#4C320C',
|
|
},
|
|
card: {
|
|
marginHorizontal: 16,
|
|
marginVertical: 16,
|
|
backgroundColor: '#FFB645',
|
|
borderRadius: 12,
|
|
},
|
|
cardContent: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
padding: 16,
|
|
justifyContent: 'space-between'
|
|
},
|
|
cardinfo: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
cardTitle: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
color: '#E2793F',
|
|
backgroundColor: '#fff',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 20,
|
|
textAlign: 'center',
|
|
marginBottom: 24
|
|
},
|
|
cardPoints: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4
|
|
},
|
|
cardPointsText: {
|
|
fontSize: 32,
|
|
fontWeight: '700',
|
|
color: '#4C320C',
|
|
lineHeight: 32
|
|
}
|
|
});
|