feat: rn 我的常用设备页面修改

enterios.sh

-#!/bin/bash
-
-cd ios
\ No newline at end of file

src/pages/AlertModal/AlertModal.js

+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    View,
+    Text,
+    TouchableHighlight,
+    Modal,
+} from 'react-native';
+
+class AlertModal extends Component {
+    render() {
+        return (
+            <Modal visible={this.props.visibility}
+            transparent={true}
+            animationType={'fade'}
+            onRequestClose={()=>this.setState({visibility: false})}>
+                <View style={styles.container}>
+                    <View style={styles.modalContainer}>
+                        <Text style={styles.modalTitle}>{this.props.title}</Text>
+                        <Text style={styles.modalMessage}>{this.props.message}</Text>
+                        <View style={styles.horizonLine}></View>
+                        <View style={styles.row}>
+                            <TouchableHighlight style={styles.cancelBtn} onPress={this.props.onCancelPressed} undlerlayColor={'#c5c5c5'}>
+                                <Text style={styles.cancelBtnText}>取消</Text>
+                            </TouchableHighlight>
+                            <View style={styles.verticalLine}></View>
+                            <TouchableHighlight style={styles.destructiveBtn} onPress={this.props.onDestructivePressed} underlayColor={'#c5c5c5'}>
+                                <Text style={styles.destructiveBtnText}>确定</Text>
+                            </TouchableHighlight>
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        );
+    }
+}
+
+export default AlertModal;
+
+const styles = StyleSheet.create({
+    container:{
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    modalContainer: {
+        // marginLeft: 20,
+        // marginRight: 20,
+        width: DEVICE_SIZE.width * 0.85,
+        borderRadius: 6,
+        backgroundColor: 'white',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    modalTitle: {
+        color: '#000',
+        fontSize: 16,
+        marginTop: 10
+    },
+    modalMessage: {
+        color: '#333',
+        fontSize: 14,
+        margin: 10
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    horizonLine: {
+        backgroundColor: '#EBEBEB',
+        height: 0.5,
+        alignSelf: 'stretch'
+    },
+    verticalLine: {
+        backgroundColor: '#EBEBEB',
+        width: 0.5,
+        alignSelf: 'stretch'
+    },
+    cancelBtn: {
+        borderBottomLeftRadius: 6,
+        padding: 7,
+        flexGrow: 1,
+        justifyContent:'center',
+        alignItems: 'center',
+        height: 44,
+    },
+    cancelBtnText: {
+        fontSize: 16,
+        color: '#333333',
+    },
+    destructiveBtn: {
+        borderBottomRightRadius: 6,
+        padding: 7,
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 44,
+    },
+    destructiveBtnText: {
+        fontSize: 16,
+        color: '#4C88FF'
+    }
+})
\ No newline at end of file

src/pages/Equipment/index.js

@@ -5,14 +5,18 @@
 
 import React, { useEffect, useState } from 'react'
 import { ScrollView, View, Text, SafeAreaView, NativeModules, FlatList, StatusBar } from 'react-native';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 // import Tabbar from '../../components/Tabbar';
 import { equiment as equimentServices } from '../../services';
+import AlertModal from '../AlertModal/AlertModal';
 import styles from './style';
 
 const { BMCInfo: { getLoginInfo }, BMCUI } = NativeModules;
 
 const Equipment = () => {
   const [equimentList, setEquimentList] = useState([]);
+  const [modalVisibility, setModalVisibility] = useState(false);
+  const [toDeleteDeviceId, setToDeleteDeviceId] = useState(0);
   useEffect(() => {
     getEquimentList();
   }, []);//seEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合,传递一个空数组（[]）作为第二个参数。
@@ -30,9 +34,26 @@ const Equipment = () => {
     }
   };
 
+  const deleteEquiment = async (params) => {
+    try {
+      const data = await equimentServices.deleteEquipment(params);
+      getEquimentList();
+      BMCUI.showToast("删除成功");
+    } catch (e) {
+      BMCUI.showToast(e && e.message);
+      console.log("error:")
+      console.log(e)
+    }
+  }
+
+  function _handleLongPress() {
+    setModalVisibility(true)
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
+      <AlertModal title="温馨提示" message="您要删除此设备信息么？" visibility={modalVisibility} onCancelPressed={()=>{setModalVisibility(false)}} onDestructivePressed={()=>{setModalVisibility(false); deleteEquiment({"deviceId":toDeleteDeviceId})}}/>
       <FlatList
         style={styles.content}
         data={equimentList}
@@ -44,11 +65,15 @@ const Equipment = () => {
         }}
         renderItem={({ item }) => {
           return <View style={styles.ceil}>
+            <TouchableWithoutFeedback onLongPress={() => {(_handleLongPress()); setToDeleteDeviceId(item.deviceId)}}>
+              <View>
                 <View style={styles.ceilTitle}>
                   <Text style={styles.ceilName}>{item.title}</Text>
                   {item.currentDevice && <Text style={styles.ceilTag}>本机</Text>}
                 </View>
                 <Text style={styles.ceilInfo}>最后登录时间：{item.gmtLoginDisplay}</Text>
+              </View>
+            </TouchableWithoutFeedback>
           </View>;
         }}
       />

src/services/equiment.js

@@ -5,4 +5,8 @@ export default {
   getBindEquipmentList(params = {}) {
     return $request.get('/user/loginDevices')
   },
+
+  deleteEquipment(params = {}) {
+    return $request.post('/user/loginDevices/remove', params)
+  }
 }