157 lines
4.0 KiB
TypeScript
157 lines
4.0 KiB
TypeScript
import { fetchApi } from "@/lib/server-api-util";
|
||
import { Policy } from "@/types/personal-info";
|
||
import { useEffect, useState } from "react";
|
||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
||
import Markdown from 'react-native-markdown-display';
|
||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
|
||
const PrivacyPolicy = () => {
|
||
const [article, setArticle] = useState<Policy>({} as Policy);
|
||
const insets = useSafeAreaInsets();
|
||
useEffect(() => {
|
||
const loadArticle = async () => {
|
||
fetchApi<Policy>(`/system-config/policy/privacy_policy`).then((res: any) => {
|
||
setArticle(res)
|
||
}).catch((error: any) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
loadArticle();
|
||
}, []);
|
||
|
||
if (!article) {
|
||
return (
|
||
<View style={styles.container}>
|
||
<Text>加载中...</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<View style={[styles.centeredView, { paddingTop: insets.top, marginBottom: insets.bottom }]}>
|
||
<View style={styles.modalView}>
|
||
<View style={styles.modalHeader}>
|
||
<Text style={{ opacity: 0 }}>Settings</Text>
|
||
<Text style={styles.modalTitle}>{'Privacy Policy'}</Text>
|
||
<TouchableOpacity style={{ opacity: 0 }}>
|
||
<Text style={styles.closeButton}>×</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
|
||
<Markdown>
|
||
{article.content}
|
||
</Markdown>
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
|
||
);
|
||
};
|
||
|
||
export default PrivacyPolicy;
|
||
|
||
const styles = StyleSheet.create({
|
||
centeredView: {
|
||
flex: 1,
|
||
justifyContent: 'flex-end',
|
||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
},
|
||
container: {
|
||
flex: 1,
|
||
},
|
||
modalView: {
|
||
width: '100%',
|
||
height: '100%',
|
||
backgroundColor: 'white',
|
||
paddingHorizontal: 16,
|
||
},
|
||
modalHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 20,
|
||
},
|
||
modalTitle: {
|
||
fontSize: 20,
|
||
fontWeight: 'bold',
|
||
color: '#4C320C',
|
||
},
|
||
closeButton: {
|
||
fontSize: 28,
|
||
color: '#4C320C',
|
||
padding: 10,
|
||
},
|
||
modalContent: {
|
||
flex: 1,
|
||
paddingHorizontal: 8
|
||
},
|
||
modalText: {
|
||
fontSize: 16,
|
||
color: '#4C320C',
|
||
},
|
||
premium: {
|
||
backgroundColor: "#FAF9F6",
|
||
padding: 16,
|
||
borderRadius: 24,
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
content: {
|
||
flex: 1,
|
||
flexDirection: 'column',
|
||
gap: 4,
|
||
backgroundColor: '#FAF9F6',
|
||
borderRadius: 24,
|
||
paddingVertical: 8
|
||
},
|
||
item: {
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 8,
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
},
|
||
itemText: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
color: '#4C320C',
|
||
},
|
||
upgradeButton: {
|
||
backgroundColor: '#E2793F',
|
||
borderRadius: 20,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 8,
|
||
},
|
||
upgradeButtonText: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight: "600"
|
||
},
|
||
switchContainer: {
|
||
width: 50,
|
||
height: 30,
|
||
borderRadius: 15,
|
||
justifyContent: 'center',
|
||
paddingHorizontal: 2,
|
||
},
|
||
switchOn: {
|
||
backgroundColor: '#E2793F',
|
||
alignItems: 'flex-end',
|
||
},
|
||
switchOff: {
|
||
backgroundColor: '#E5E5E5',
|
||
alignItems: 'flex-start',
|
||
},
|
||
switchCircle: {
|
||
width: 26,
|
||
height: 26,
|
||
borderRadius: 13,
|
||
},
|
||
switchCircleOn: {
|
||
backgroundColor: 'white',
|
||
},
|
||
switchCircleOff: {
|
||
backgroundColor: '#A5A5A5',
|
||
},
|
||
}); |