364 lines
14 KiB
TypeScript
364 lines
14 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { View, Text, StyleSheet, Image, TouchableOpacity, Modal } from 'react-native';
|
||
|
|
import { rpx } from '../../utils/rpx';
|
||
|
|
import { useNavigation } from '@react-navigation/native';
|
||
|
|
|
||
|
|
const DeviceSet = () => {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const [showAutoOffModal, setShowAutoOffModal] = useState(false);
|
||
|
|
const [showAutoLockModal, setShowAutoLockModal] = useState(false);
|
||
|
|
const [selectedTime, setSelectedTime] = useState('3分钟');
|
||
|
|
const [selectedLockTime, setSelectedLockTime] = useState('15秒');
|
||
|
|
const [showSensitivityModal, setShowSensitivityModal] = useState(false);
|
||
|
|
const [selectedSensitivity, setSelectedSensitivity] = useState('3级');
|
||
|
|
|
||
|
|
// 自动关机选项
|
||
|
|
const autoOffOptions = ['1分钟', '3分钟', '5分钟', '10分钟'];
|
||
|
|
// 自动锁车选项
|
||
|
|
const autoLockOptions = ['15秒', '30秒', '1分钟', '3分钟'];
|
||
|
|
// 震动灵敏度选项
|
||
|
|
const sensitivityOptions = ['1级', '2级', '3级', '4级', '5级'];
|
||
|
|
// 处理无感解锁点击
|
||
|
|
const handleUnlockPress = () => {
|
||
|
|
navigation.navigate('UnlockSetting' as never); // 替换成实际的路由名
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View style={styles.card}>
|
||
|
|
<TouchableOpacity style={styles.cont_li} onPress={handleUnlockPress}>
|
||
|
|
<View style={styles.cont_li_content}>
|
||
|
|
<View style={styles.cont_li_top}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/ue1qF3cHAVlV8Fn5CKV6' }} style={styles.icon_set} />
|
||
|
|
<Text style={styles.text_set}>无感解锁</Text>
|
||
|
|
<View style={styles.cont_li_right}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.cont_li} onPress={() => setShowAutoOffModal(true)}>
|
||
|
|
<View style={styles.cont_li_content}>
|
||
|
|
<View style={styles.cont_li_top}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uY9EQQuqFMzgRrD92ENX' }} style={styles.icon_set} />
|
||
|
|
<Text style={styles.text_set}>自动关机</Text>
|
||
|
|
<View style={styles.cont_li_right}>
|
||
|
|
<Text style={styles.rightTxt}>{selectedTime}</Text>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.tipTxt}>车辆停稳并在等待时间内未行驶则自动关机</Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.cont_li} onPress={() => setShowAutoLockModal(true)}>
|
||
|
|
<View style={styles.cont_li_content}>
|
||
|
|
<View style={styles.cont_li_top}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uZ8H5kYVkMM9jVChkHQS' }} style={styles.icon_set} />
|
||
|
|
<Text style={styles.text_set}>自动锁车</Text>
|
||
|
|
<View style={styles.cont_li_right}>
|
||
|
|
<Text style={styles.rightTxt}>{selectedLockTime}</Text>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.tipTxt}>车辆停稳并在等待时间内未行驶则自动锁车</Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.cont_li} onPress={() => setShowSensitivityModal(true)}>
|
||
|
|
<View style={[styles.cont_li_content, styles.noBotLine]}>
|
||
|
|
<View style={styles.cont_li_top}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/ue1qF3cHAVlV8Fn5CKV6' }} style={styles.icon_set} />
|
||
|
|
<Text style={styles.text_set}>震动报警灵敏度</Text>
|
||
|
|
<View style={styles.cont_li_right}>
|
||
|
|
<Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
|
||
|
|
<Modal
|
||
|
|
visible={showAutoOffModal}
|
||
|
|
transparent={true}
|
||
|
|
animationType="slide"
|
||
|
|
>
|
||
|
|
<View style={styles.modalContainer}>
|
||
|
|
<View style={styles.modalContent}>
|
||
|
|
<View style={styles.modalHeader}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowAutoOffModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.cancelText}>取消</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.modalTitle}>自动关机</Text>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowAutoOffModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.confirmText}>确定</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.optionsContainer}>
|
||
|
|
{autoOffOptions.map((time, index) => (
|
||
|
|
<TouchableOpacity
|
||
|
|
key={index}
|
||
|
|
style={[
|
||
|
|
styles.optionItem,
|
||
|
|
selectedTime === time && styles.selectedItemBg
|
||
|
|
]}
|
||
|
|
onPress={() => {
|
||
|
|
setSelectedTime(time);
|
||
|
|
setShowAutoOffModal(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={[
|
||
|
|
styles.optionText,
|
||
|
|
selectedTime === time && styles.selectedOption
|
||
|
|
]}>
|
||
|
|
{time}
|
||
|
|
</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
{/* 修改自动锁车弹窗 */}
|
||
|
|
<Modal
|
||
|
|
visible={showAutoLockModal}
|
||
|
|
transparent={true}
|
||
|
|
animationType="slide"
|
||
|
|
>
|
||
|
|
<View style={styles.modalContainer}>
|
||
|
|
<View style={styles.modalContent}>
|
||
|
|
<View style={styles.modalHeader}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowAutoLockModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.cancelText}>取消</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.modalTitle}>自动锁车</Text>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowAutoLockModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.confirmText}>确定</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.optionsContainer}>
|
||
|
|
{autoLockOptions.map((time, index) => (
|
||
|
|
<TouchableOpacity
|
||
|
|
key={index}
|
||
|
|
style={[
|
||
|
|
styles.optionItem,
|
||
|
|
selectedLockTime === time && styles.selectedItemBg
|
||
|
|
]}
|
||
|
|
onPress={() => {
|
||
|
|
setSelectedLockTime(time);
|
||
|
|
setShowAutoLockModal(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={[
|
||
|
|
styles.optionText,
|
||
|
|
selectedLockTime === time && styles.selectedOption
|
||
|
|
]}>
|
||
|
|
{time}
|
||
|
|
</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
{/* 在最后添加震动报警灵敏度选择弹窗 */}
|
||
|
|
<Modal
|
||
|
|
visible={showSensitivityModal}
|
||
|
|
transparent={true}
|
||
|
|
animationType="slide"
|
||
|
|
>
|
||
|
|
<View style={styles.modalContainer}>
|
||
|
|
<View style={styles.modalContent}>
|
||
|
|
<View style={styles.modalHeader}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowSensitivityModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.cancelText}>取消</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.modalTitle}>报警灵敏度</Text>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.headerButton}
|
||
|
|
onPress={() => setShowSensitivityModal(false)}
|
||
|
|
>
|
||
|
|
<Text style={styles.confirmText}>确定</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.optionsContainer}>
|
||
|
|
{sensitivityOptions.map((level, index) => (
|
||
|
|
<TouchableOpacity
|
||
|
|
key={index}
|
||
|
|
style={[
|
||
|
|
styles.optionItem,
|
||
|
|
selectedSensitivity === level && styles.selectedItemBg
|
||
|
|
]}
|
||
|
|
onPress={() => {
|
||
|
|
setSelectedSensitivity(level);
|
||
|
|
setShowSensitivityModal(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={[
|
||
|
|
styles.optionText,
|
||
|
|
selectedSensitivity === level && styles.selectedOption
|
||
|
|
]}>
|
||
|
|
{level}
|
||
|
|
</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Modal>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
headerButton: {
|
||
|
|
padding: rpx(8),
|
||
|
|
minWidth: rpx(80),
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
confirmText: {
|
||
|
|
fontSize: rpx(28),
|
||
|
|
color: '#4297F3',
|
||
|
|
fontWeight: '500',
|
||
|
|
},
|
||
|
|
optionsContainer: {
|
||
|
|
paddingVertical: rpx(20),
|
||
|
|
},
|
||
|
|
optionItem: {
|
||
|
|
padding: rpx(30),
|
||
|
|
alignItems: 'center',
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#EBEBEB',
|
||
|
|
},
|
||
|
|
selectedItemBg: {
|
||
|
|
backgroundColor: '#F5F5F5',
|
||
|
|
},
|
||
|
|
optionText: {
|
||
|
|
fontSize: rpx(30),
|
||
|
|
color: '#333',
|
||
|
|
},
|
||
|
|
selectedOption: {
|
||
|
|
color: '#4297F3',
|
||
|
|
fontWeight: '500',
|
||
|
|
},
|
||
|
|
modalHeader: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
padding: rpx(16),
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: '#EBEBEB',
|
||
|
|
},
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: '#F3FCFF',
|
||
|
|
},
|
||
|
|
card: {
|
||
|
|
marginTop: rpx(20),
|
||
|
|
width: rpx(688),
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderRadius: rpx(30),
|
||
|
|
padding: rpx(30),
|
||
|
|
paddingTop: rpx(0),
|
||
|
|
},
|
||
|
|
icon_set: {
|
||
|
|
width: rpx(50),
|
||
|
|
height: rpx(50),
|
||
|
|
},
|
||
|
|
cont_li_right: {
|
||
|
|
marginLeft: 'auto',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
rightTxt: {
|
||
|
|
fontWeight: '500',
|
||
|
|
fontSize: rpx(28),
|
||
|
|
color: '#4297F3',
|
||
|
|
marginRight: rpx(8),
|
||
|
|
},
|
||
|
|
noBotLine: {
|
||
|
|
borderBottomWidth: 0,
|
||
|
|
borderBottomColor: 'transparent',
|
||
|
|
},
|
||
|
|
tipTxt: {
|
||
|
|
width: '85%',
|
||
|
|
marginLeft: rpx(62),
|
||
|
|
fontSize: rpx(28),
|
||
|
|
color: '#999',
|
||
|
|
marginTop: rpx(8),
|
||
|
|
},
|
||
|
|
icon_right: {
|
||
|
|
width: rpx(32),
|
||
|
|
height: rpx(32),
|
||
|
|
},
|
||
|
|
cont_li_content: {
|
||
|
|
flexDirection: 'column',
|
||
|
|
},
|
||
|
|
cont_li: {
|
||
|
|
paddingTop: rpx(32),
|
||
|
|
paddingBottom: rpx(32),
|
||
|
|
borderBottomWidth: rpx(1),
|
||
|
|
borderBottomColor: '#EBEBEB',
|
||
|
|
},
|
||
|
|
text_set: {
|
||
|
|
fontWeight: '500',
|
||
|
|
fontSize: rpx(36),
|
||
|
|
color: '#333',
|
||
|
|
marginLeft: rpx(10),
|
||
|
|
},
|
||
|
|
cont_li_top: {
|
||
|
|
width: '100%',
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginBottom: rpx(8),
|
||
|
|
},
|
||
|
|
modalContainer: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
},
|
||
|
|
modalContent: {
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderTopLeftRadius: rpx(20),
|
||
|
|
borderTopRightRadius: rpx(20),
|
||
|
|
paddingBottom: rpx(34),
|
||
|
|
},
|
||
|
|
|
||
|
|
modalTitle: {
|
||
|
|
fontSize: rpx(32),
|
||
|
|
fontWeight: '500',
|
||
|
|
color: '#333',
|
||
|
|
},
|
||
|
|
|
||
|
|
cancelButton: {
|
||
|
|
marginTop: rpx(16),
|
||
|
|
padding: rpx(30),
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
cancelText: {
|
||
|
|
fontSize: rpx(30),
|
||
|
|
color: '#666',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default DeviceSet;
|