ipanel-rnapp-ajb-base 1.0.0

package/app/screens/CommonScreens/TvAlbumScreen/index.js

@@ -0,0 +1,407 @@
+import React, {useState, useEffect, useMemo, useRef} from 'react';
+import {
+  View,
+  Button,
+  StyleSheet,
+  Image,
+  Modal,
+  FlatList,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+import {CheckBox, Icon, Text} from '@rneui/themed';
+import {
+  getCloudInfo,
+  getCloudFileList,
+  openCloudService,
+  deleteCloudFile,
+} from '../../../api';
+import ImageViewer from 'react-native-image-zoom-viewer';
+import {launchImageLibrary} from 'react-native-image-picker';
+import RNFS from 'react-native-fs';
+import {useSafeArea} from 'react-native-safe-area-context';
+import {showLoading, hideLoading} from '../../../utils/notice';
+
+const {storage} = global.base;
+
+function TvAlbumScreen() {
+  const [cloudInfo, setCloudInfo] = useState({});
+  const [cloudServiceOpened, setCloudServiceOpened] = useState(true);
+  const [list, setList] = useState([]);
+  const [isManaging, setIsManaging] = useState(false);
+  const [imageViewerVisible, setImageViewerVisible] = useState(false);
+  const [token, setToken] = useState('');
+  const [contentWidth, setContentWidth] = useState(0);
+  const domain = useRef('');
+
+  const insets = useSafeArea();
+
+  const imageUrls = useMemo(() => {
+    return list.map(item => ({
+      url: item.src,
+    }));
+  }, [list]);
+
+  const [imgIndex, setImgIndex] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      domain.current = await global.base.getHomedDomain();
+      await getToken();
+      checkCloudService();
+    })();
+  }, []);
+
+  const getToken = async () => {
+    const TOKEN = await storage.get('homedAccessToken');
+    setToken(TOKEN);
+  };
+
+  const contentLayout = event => {
+    setContentWidth(Math.floor(event.nativeEvent.layout.width));
+  };
+
+  const init = async () => {
+    showLoading('加载中');
+    const result = await getCloudFileList({}).catch(err => {
+      console.log(err);
+    });
+    hideLoading(false);
+    if (result && result.ret === 0) {
+      const list = (result.list || []).map(item => {
+        item.checked = false;
+        item.src = `http://izone.${domain.current}/httpdocsdown/${item.highbility_url}`;
+        return item;
+      });
+      setList(list);
+      hideLoading();
+    }
+    console.log(
+      '获取照片列表',
+      `http://izone.${domain.current}/account/cloud/file/get_list`,
+      result,
+    );
+  };
+
+  const checkCloudService = async () => {
+    showLoading('加载中');
+    const result = await getCloudInfo().catch(err => {
+      console.log(err);
+    });
+    console.log(result, 'getCloudInfo');
+    if (result && result.ret === 0) {
+      // 已开通云空间
+      setCloudInfo(result);
+      setCloudServiceOpened(true);
+      init();
+    } else if (result && result.ret === 20000) {
+      // 未开通云空间
+      setCloudServiceOpened(false);
+      showLoading('正在开通相册');
+      console.log('未开通云空间，正在自动开通');
+
+      // 自动开通
+      const openRes = await openCloudService({});
+      console.log(openRes, 'openRes');
+      if (openRes && openRes.ret === 0) {
+        setCloudServiceOpened(true);
+        init();
+      } else {
+        console.error('开通云空间失败', openRes);
+        setCloudServiceOpened(false);
+      }
+    } else {
+      // 未预期到的异常情况
+      setCloudServiceOpened(true);
+    }
+    hideLoading();
+  };
+
+  const handleDelete = () => {
+    showLoading('正在删除');
+    const deletingPics = list.filter(item => item.checked);
+    const promises = deletingPics.map(pic => {
+      return deleteCloudFile({
+        fileid: pic.id,
+      }).catch(() => {});
+    });
+
+    Promise.all(promises).then(async results => {
+      console.log(
+        '删除照片',
+        deletingPics.map(pic => pic.id),
+        results,
+      );
+
+      setIsManaging(false);
+      await init();
+      hideLoading();
+    });
+  };
+
+  const handleCancel = () => {
+    setIsManaging(false);
+  };
+
+  // todo 上传图片
+  const handleSelectPicture = async () => {
+    const result = await launchImageLibrary({
+      mediaType: 'mixed',
+      selectionLimit: 10,
+    });
+    if (result.didCancel) {
+      console.log('cancel');
+    } else if (result.errorCode) {
+      console.log('error', result);
+    } else {
+      console.log(result.assets);
+      // getFileMd5(result.assets[0]);
+      showLoading('上传中');
+      if (Platform.OS === 'ios') {
+        const promises = result.assets.map(async item => {
+          let source = item.uri.replace('file://', '');
+          const md5 = await RNFS.hash(source, 'md5');
+          const options = {
+            toUrl: `http://izone.${domain.current}/httpdocsup/izone/pic?fileMD5=${md5}&accesstoken=${token}`,
+            files: [
+              {
+                name: 'file',
+                filename: item.fileName,
+                filepath: source,
+                filetype: item.type,
+              },
+            ],
+            background: true,
+            method: 'POST',
+            begin: res => {
+              console.log('begin', res);
+            },
+            progress: res => {
+              console.log('progress', res);
+            },
+          };
+          return RNFS.uploadFiles(options).promise;
+        });
+        Promise.all(promises).then(res => {
+          hideLoading();
+          init();
+        });
+      } else {
+        const promises = result.assets.map(async item => {
+          const formData = new FormData();
+          // item.uri =
+          let source = item.uri;
+          // if (Platform.OS === 'android') {
+          //   source = item.uri;
+          // } else {
+          //   source = item.uri.replace('file://', '');
+          // }
+          formData.append('file', {
+            uri: source,
+            type: 'application/octet-stream',
+            name: item.type,
+          });
+          const md5 = await RNFS.hash(source, 'md5');
+          console.log(md5, 'md5');
+          return fetch(
+            `http://izone.${domain.current}/httpdocsup/izone/pic?fileMD5=${md5}&accesstoken=${token}`,
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              },
+              body: formData,
+            },
+          )
+            .then(res => {
+              return res.json();
+            })
+            .then(data => {
+              console.log(data);
+              return data;
+            })
+            .catch(err => {
+              return err;
+            });
+        });
+
+        Promise.all(promises).then(res => {
+          hideLoading();
+          init();
+        });
+      }
+    }
+  };
+
+  const handleManageStatus = () => {
+    setIsManaging(true);
+    list.forEach(item => {
+      item.checked = false;
+    });
+    setList([...list]);
+  };
+
+  const handleToggleCheck = item => {
+    item.checked = !item.checked;
+    setList([...list]);
+  };
+
+  const handleToggle = () => {
+    const allChecked = list.every(item => item.checked);
+    list.forEach(item => {
+      item.checked = !allChecked;
+    });
+    setList([...list]);
+  };
+
+  // todo 预览图片
+  const preview = index => {
+    setImgIndex(index);
+    setImageViewerVisible(true);
+  };
+
+  const renderItem = ({item, index}) => {
+    return (
+      <View
+        style={[
+          styles.gridItem,
+          {
+            width: Math.floor(contentWidth / 3),
+            height: Math.floor(contentWidth / 3),
+            padding: 5,
+          },
+        ]}>
+        <TouchableOpacity onPress={() => preview(index)}>
+          <Image
+            source={{
+              uri: item.src,
+            }}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        </TouchableOpacity>
+        {isManaging && (
+          <TouchableOpacity
+            style={styles.checkMask}
+            onPress={() => handleToggleCheck(item)}
+            activeOpacity={1}>
+            <CheckBox
+              containerStyle={styles.checkbox}
+              checked={item.checked}
+              checkedIcon={
+                <Icon name="radio-button-checked" type="material" size={20} />
+              }
+              uncheckedIcon={
+                <Icon name="radio-button-unchecked" type="material" size={20} />
+              }
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+      }}>
+      {token ? (
+        <>
+          <View style={styles.toolbar}>
+            {isManaging ? (
+              <>
+                <Button
+                  title={list.every(item => item.checked) ? '取消全选' : '全选'}
+                  onPress={handleToggle}
+                />
+                <Button
+                  title={'删除'}
+                  onPress={handleDelete}
+                  color={'#e53838'}
+                />
+                <Button title={'取消'} onPress={handleCancel} />
+              </>
+            ) : (
+              <>
+                {!isManaging && (
+                  <Button title={'上传'} onPress={handleSelectPicture} />
+                )}
+                <Button title={'管理'} onPress={handleManageStatus} />
+              </>
+            )}
+          </View>
+          <View style={styles.gridList} onLayout={contentLayout}>
+            <FlatList
+              horizontal={false}
+              numColumns={3}
+              data={list}
+              keyExtractor={item => item.id}
+              renderItem={renderItem}
+              columnWrapperStyle={{
+                marginVertical: 5,
+              }}
+            />
+          </View>
+        </>
+      ) : (
+        <Text style={{padding: 20}}>当前家庭用户暂未绑定电视业务</Text>
+      )}
+
+      <Modal
+        visible={imageViewerVisible}
+        onRequestClose={() => setImageViewerVisible(false)}>
+        <View
+          style={{
+            flexDirection: 'row',
+            paddingTop: Platform.OS === 'ios' ? insets.top : 0,
+          }}>
+          <Icon
+            name="chevron-back"
+            type="ionicon"
+            size={30}
+            color="#000"
+            onPress={() => setImageViewerVisible(false)}
+          />
+        </View>
+        <ImageViewer imageUrls={imageUrls} index={imgIndex} />
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: {
+    padding: 30,
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+  gridList: {
+    // flexWrap: 'wrap',
+    // flexDirection: 'row',
+    // justifyContent: 'space-around',
+    flex: 1,
+  },
+  gridItem: {
+    position: 'relative',
+  },
+  checkMask: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+  },
+  checkbox: {
+    position: 'absolute',
+    left: 5,
+    top: 5,
+    backgroundColor: 'transparent',
+    padding: 0,
+  },
+});
+
+export default TvAlbumScreen;

package/app/screens/LoginScreen/OpenLogSheet.js

@@ -0,0 +1,241 @@
+import React, {useEffect, useRef, useState, useCallback} from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  NativeModules,
+  FlatList,
+} from 'react-native';
+import {Divider} from '@rneui/themed';
+const {px} = global.base;
+export default ({setVisible}) => {
+  const [activeIndex, setActiveIndex] = useState(2); // 1为在线日志、2为本地日志
+  const flatListRef = useRef(null);
+  const renderColumns = ['', '在线日志', '本地日志', ''];
+
+  // 打开时定位到默认行
+  const onOpen = index => {
+    setActiveIndex(index);
+    flatListRef.current?.scrollToIndex({
+      index: index - 1,
+    });
+  };
+  const getLogReportStatus = val => {
+    if (NativeModules?.RNToNativeEmitter?.getLogReportStatus) {
+      NativeModules.RNToNativeEmitter.getLogReportStatus(res => {
+        console.log('getLogReportStatus', res);
+        if (val) {
+          global.toast.showToast('设置成功');
+          setVisible(false);
+        } else {
+          if (res === 1) {
+            onOpen(1);
+          } else {
+            onOpen(2);
+          }
+        }
+      });
+    }
+  };
+
+  const handleConfirm = async () => {
+    console.log(activeIndex);
+    if (activeIndex === 1) {
+      if (NativeModules?.RNToNativeEmitter?.openLogReport) {
+        await NativeModules.RNToNativeEmitter.openLogReport();
+        getLogReportStatus(1);
+      }
+    } else {
+      if (NativeModules?.RNToNativeEmitter?.closeLogReport) {
+        await NativeModules.RNToNativeEmitter.closeLogReport();
+        getLogReportStatus(2);
+      }
+    }
+  };
+
+  useEffect(() => {
+    getLogReportStatus();
+  }, []);
+
+  const renderItem = ({item, index}) => {
+    const columnTextStyle =
+      index === activeIndex ? styles.activeColumnText : styles.columnText;
+    let columnDisabled = false;
+    return (
+      <TouchableOpacity
+        disabled={!item}
+        onPress={() => {
+          console.log(index);
+          flatListRef.current?.scrollToIndex({
+            index: index - 1,
+          });
+        }}
+        style={{
+          ...styles.column,
+          height: item ? px(120) : px(80),
+        }}>
+        <Text
+          style={{
+            ...columnTextStyle,
+            color: columnDisabled ? '#999' : columnTextStyle.color,
+            textDecorationLine: columnDisabled ? 'line-through' : 'none',
+          }}>
+          {item}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  // 固定5个数据高度，永远聚焦中间那条 ios可以滚动出视图范围弹性地拉动一截，可能可视区域数量不一定是5个
+  const onViewableItemsChanged = useCallback(({viewableItems}) => {
+    console.log(viewableItems, 'viewableItems');
+    if (
+      viewableItems.length >= 3 &&
+      viewableItems[viewableItems.length - 2]?.item
+    ) {
+      const index = viewableItems[viewableItems.length - 2].index;
+      setActiveIndex(index);
+    }
+  }, []);
+  return (
+    <>
+      <TouchableOpacity
+        style={styles.mask}
+        onPress={() => setVisible(false)}
+        activeOpacity={1}
+      />
+      <View style={styles.container}>
+        <View style={styles.columns}>
+          <FlatList
+            scrollEnabled={true}
+            // ref={flatListRef}
+            ref={flatListRef}
+            showsVerticalScrollIndicator={false}
+            horizontal={false}
+            // alwaysBounceVertical={false}
+            // bounces={false}
+            pagingEnabled={false}
+            // overScrollMode="never"
+            numColumns={1}
+            data={renderColumns}
+            keyExtractor={(item, index) => index}
+            renderItem={renderItem}
+            getItemLayout={(data, index) => {
+              let itemHeight =
+                index === 0
+                  ? 0
+                  : index === 1
+                  ? px(80)
+                  : index === 2
+                  ? px(120 + 80)
+                  : px(120 * 2 + 80);
+              let length = index === 0 || index === 3 ? px(80) : px(120);
+              return {
+                length: length,
+                offset: itemHeight,
+                index,
+              };
+            }}
+            onViewableItemsChanged={onViewableItemsChanged}
+            viewabilityConfig={{
+              viewAreaCoveragePercentThreshold: 20,
+            }}
+          />
+        </View>
+        <Divider width={1} color="#f5f5f5" />
+        <View style={styles.bottomBtnBox}>
+          <TouchableOpacity
+            style={styles.bottomBtn}
+            onPress={() => setVisible(false)}>
+            <Text style={styles.bottomBtnText}>取消</Text>
+          </TouchableOpacity>
+
+          <Divider orientation="vertical" width={1} color="#eee" />
+          <TouchableOpacity style={styles.bottomBtn} onPress={handleConfirm}>
+            <Text
+              style={[
+                styles.bottomBtnText,
+                {
+                  color: '#ea6000',
+                  fontWeight: 'bold',
+                },
+              ]}>
+              确定
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  mask: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  container: {
+    position: 'absolute',
+    height: px(120) * 2 + px(80) + px(141),
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: px(30),
+    borderTopRightRadius: px(30),
+  },
+  btnBox: {
+    height: px(141),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  btntext: {
+    fontSize: px(52),
+    color: '#333',
+  },
+  bottomBtnBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    paddingTop: px(29),
+    paddingBottom: px(132),
+  },
+  bottomBtn: {
+    flex: 1,
+  },
+  bottomBtnText: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: px(52),
+  },
+  columns: {
+    paddingHorizontal: px(55),
+    // maxHeight: Math.floor(deviceHeight / 2),
+    height: px(120) * 2 + px(80),
+  },
+  column: {
+    // paddingVertical: px(44),
+    height: px(120),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  columnText: {
+    fontSize: px(40),
+    color: '#999',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  activeColumnText: {
+    fontSize: px(69),
+    color: '#333',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+});