ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,315 @@
+import React, {useState, useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableHighlight,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+import ScreenBackHeader from '../../../components/common/ScreenBackHeader';
+import {Icon, Divider} from '@rneui/themed';
+
+import {getTreeOptions, getTreeChildOptions, switchToken} from '../../../api';
+
+import storage from '../../../storage';
+import px from '../../../utils/scaleSize';
+import {replace} from '../../../utils/RootNavigation';
+
+const Index = ({route}) => {
+  const [selectedAreaPath, setSelectedAreaPath] = useState([]);
+  const [currentList, setCurrentList] = useState([]);
+  const [curViewIsOperatorView, setCurViewIsOperatorView] = useState(false);
+  const [selectedOperator, setSelectedOperator] = useState({});
+
+  // 目的 toggle目的 init初始化
+  const purpose = route.params?.purpose || 'toggle';
+
+  useEffect(() => {
+    initProvices();
+  }, []);
+
+  const initProvices = async () => {
+    setSelectedAreaPath([]);
+    setCurViewIsOperatorView(false);
+    const result = await getTreeOptions({
+      context_id: 10000,
+    });
+    if (result.code === 0) {
+      setCurrentList(result.option_list[0].children);
+    }
+  };
+
+  const login_apartment = async name => {
+    if (name === '内蒙古广电网络') {
+      const apartmentRes = await switchToken();
+      if (apartmentRes?.code === 200 && apartmentRes?.token) {
+        storage.set('apartmentToken', apartmentRes.token);
+        // 公寓人员信息接口暂时还没，假设role：1为房东
+        storage.set('apartmentData', {role: 1});
+      } else {
+        storage.set('apartmentData', {});
+        storage.set('apartmentToken', '');
+      }
+    } else {
+      storage.set('apartmentData', {});
+      storage.set('apartmentToken', '');
+    }
+  };
+
+  const handleSave = () => {
+    console.log(selectedOperator);
+    const cb = async () => {
+      const accountData = await storage.get('accountData');
+      await storage.set(
+        `${accountData?.account?.account_id || ''}currentOperator`,
+        selectedOperator,
+      );
+      if (purpose === 'toggle') {
+        global.loading.showLoading('正在切换版本');
+        await login_apartment(selectedOperator.name);
+        await global.base.reload();
+        global.loading.hideLoading();
+      } else {
+        await login_apartment(selectedOperator.name);
+        replace('Home');
+      }
+    };
+
+    if (!selectedOperator.id) {
+      global.dialog.confirm({
+        title: `未选择运营商，将${
+          purpose === 'toggle' ? '切换到' : '加载'
+        }标准版`,
+        confirmButtonText: '确定',
+        confirmCallback: cb,
+        cancelButtonText: purpose === 'toggle' ? '取消' : '跳过',
+        cancelCallback: () => {},
+      });
+    } else {
+      global.dialog.confirm({
+        title: `您将${purpose === 'toggle' ? '切换' : '加载'}到${
+          selectedOperator.name
+        }版本`,
+        confirmButtonText: '确定',
+        confirmCallback: cb,
+        cancelButtonText: '取消',
+        cancelCallback: () => {},
+      });
+    }
+  };
+
+  const headerRight = () => {
+    const textStyle = {
+      fontSize: 16,
+      color: '#000',
+    };
+
+    return (
+      <TouchableHighlight
+        activeOpacity={0.7}
+        underlayColor="#dfdfdf"
+        onPress={handleSave}>
+        <Text style={textStyle}>确定</Text>
+      </TouchableHighlight>
+    );
+  };
+
+  const is4thDepthNode = node => {
+    return (
+      node.id.length === 12 &&
+      node.id.substr(6, 3) !== '000' &&
+      node.id.endsWith('000')
+    );
+  };
+
+  const loadChildNodes = async pNode => {
+    let result;
+
+    if (is4thDepthNode(pNode)) {
+      // 获取运营商列表
+      result = await getTreeChildOptions({
+        context_id: 10003,
+        option_id: pNode.id,
+      });
+    } else {
+      // 获取下一级区域
+      result = await getTreeChildOptions({
+        context_id: 10000,
+        option_id: pNode.id,
+      });
+    }
+
+    return result.option_list || [];
+  };
+
+  // 选择区域或运营商
+  const handleSelectArea = async item => {
+    if (curViewIsOperatorView) {
+      // 选择运营商
+      if (selectedOperator.id === item.id) {
+        setSelectedOperator({});
+      } else {
+        setSelectedOperator(item);
+      }
+      return;
+    }
+    setSelectedOperator({});
+
+    let operatorFlag = false;
+
+    const list = await loadChildNodes(item);
+
+    console.log(JSON.stringify(item));
+
+    if (is4thDepthNode(item)) {
+      // 获取运营商列表
+      operatorFlag = true;
+    }
+
+    setCurViewIsOperatorView(operatorFlag);
+
+    let arr = [...selectedAreaPath, item];
+
+    setSelectedAreaPath(arr);
+
+    setCurrentList(list);
+  };
+
+  // 点击区域路径
+  const handleAreaBackTo = async area => {
+    const index = selectedAreaPath.findIndex(item => item.id === area.id);
+
+    const arr = selectedAreaPath.slice(0, index);
+    setSelectedAreaPath(arr);
+    setSelectedOperator({});
+
+    if (!arr[arr.length - 1]) {
+      initProvices();
+      return;
+    }
+
+    const list = await loadChildNodes(arr[arr.length - 1]);
+
+    setCurViewIsOperatorView(false);
+    setCurrentList(list);
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScreenBackHeader title="选择运营商" headerRight={headerRight} />
+      <Divider width={px(12)} color="#F5F5F5" />
+      <View style={styles.selectedAreaPath}>
+        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
+          {selectedAreaPath.length > 0 ? (
+            selectedAreaPath.map(area => {
+              return (
+                <TouchableOpacity
+                  key={area.id}
+                  activeOpacity={0.6}
+                  onPress={() => handleAreaBackTo(area)}>
+                  <View style={styles.areaPathTextItem}>
+                    <Text style={styles.areaPathTextItemText}>{area.name}</Text>
+                  </View>
+                </TouchableOpacity>
+              );
+            })
+          ) : (
+            <View style={styles.areaPathTextItem}>
+              <Text style={styles.areaPathTextItemText}>请选择区域</Text>
+            </View>
+          )}
+        </ScrollView>
+      </View>
+
+      <View style={styles.content}>
+        <ScrollView>
+          {currentList.map(item => {
+            const isSelectingOperator =
+              selectedOperator.id === item.id && curViewIsOperatorView;
+
+            return (
+              <React.Fragment key={item.id}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  onPress={() => handleSelectArea(item)}>
+                  <View
+                    style={[
+                      styles.item,
+                      isSelectingOperator && styles.selectedOperator,
+                    ]}>
+                    <Text
+                      style={[
+                        styles.itemText,
+                        isSelectingOperator && styles.selectedOperatorText,
+                      ]}>
+                      {item.name}
+                    </Text>
+                    {isSelectingOperator && (
+                      <Icon
+                        name="checkmark-sharp"
+                        type="ionicon"
+                        size={20}
+                        color={styles.selectedOperatorText.color}
+                      />
+                    )}
+                  </View>
+                </TouchableOpacity>
+                <Divider color="#F5F5F5" />
+              </React.Fragment>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    flexDirection: 'column',
+  },
+  selectedAreaPath: {
+    paddingHorizontal: 15,
+    marginBottom: 10,
+    backgroundColor: '#fefefe',
+    borderBottomWidth: 1,
+    borderBottomColor: '#f8f8f8',
+  },
+  areaPathTextItem: {
+    height: 60,
+    justifyContent: 'center',
+    paddingRight: 20,
+  },
+  areaPathTextItemText: {
+    fontSize: px(46),
+    color: '#333',
+    fontWeight: 'bold',
+  },
+  content: {
+    flex: 1,
+  },
+  item: {
+    height: 50,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+  },
+  itemText: {
+    fontSize: px(46),
+    color: '#333',
+    fontWeight: '400',
+  },
+  selectedOperator: {
+    justifyContent: 'space-between',
+  },
+  selectedOperatorText: {
+    color: '#E86003',
+    fontWeight: 'bold',
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,348 @@
+import React, {useEffect, useState} from 'react';
+import {
+  View,
+  // StatusBar,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+  Alert,
+  NativeModules,
+  ImageBackground,
+  Image,
+} from 'react-native';
+// import {useSafeArea} from 'react-native-safe-area-context';
+import {Button, Icon, Text} from '@rneui/themed';
+import Cell from '../../../components/common/Cell';
+import {adjustUser} from '../../../api';
+import {showToast} from '../../../utils/notice';
+import {merge} from 'lodash';
+import ScreenBackHeader from '../../../components/common/ScreenBackHeader';
+import useNavigationFocus from '../../../hooks/useNavigationFocus';
+
+const {replace, popToTop, storage, scaleSize: px} = global.base;
+
+const envVersion = NativeModules?.RNToNativeEmitter?.serverCluster;
+const appVersion = NativeModules?.RNToNativeEmitter?.appVersion;
+
+export default ({navigation}) => {
+  const [userInfo, setUserInfo] = useState({});
+  console.log(userInfo, 'userInfo');
+  const [bundleVersion, setBundleVersion] = useState();
+  const [isBindTv, setIsBindTv] = useState(false);
+  const [operatorName, setOperatorName] = useState('');
+
+  useEffect(() => {
+    storage.get('bundleVersion').then(version => {
+      setBundleVersion(version);
+    });
+    storage.get('currentOperator').then(operator => {
+      setOperatorName(operator?.name || '标准版');
+    });
+    _getUserInfo();
+  }, []);
+  // const insets = useSafeArea();
+
+  useNavigationFocus(() => {
+    storage.get('bundleVersion').then(version => {
+      setBundleVersion(version);
+    });
+    _getUserInfo();
+    storage.get('homedAccessToken').then(token => {
+      console.log(token, 'token');
+      setIsBindTv(!!token);
+    });
+  });
+
+  const _getUserInfo = () => {
+    storage.get('accountData').then(res => {
+      console.log(res, 'accountData');
+      setUserInfo(res.user);
+    });
+    // storage.get('activeAddr').then(addrInfo => {
+    //   const address_id = addrInfo.address_id;
+    //   getUserInfo({
+    //     address_id,
+    //   }).then(res => {
+    //     console.log(res, 'userInfo');
+    //     setUserInfo(res?.result?.user_list[0] || {});
+    //   });
+    // });
+  };
+
+  const handleLogout = async () => {
+    await storage.set('accessToken', null);
+    await storage.set('homedAccessToken', null);
+    popToTop();
+    replace('Login');
+  };
+
+  const adjustName = () => {
+    global.dialog.prompt({
+      title: '输入修改昵称',
+      input: userInfo?.nickname || '',
+      confirmButtonText: '确定',
+      confirmCallback: val => {
+        console.log(val);
+        adjustUser({
+          user_id: userInfo.user_id,
+          nickname: val,
+        }).then(async res => {
+          console.log(res);
+          if (res.code === 0) {
+            showToast('修改成功');
+            const accountData = await storage.get('accountData');
+            await storage.set(
+              'accountData',
+              merge(accountData, {
+                user: {
+                  nickname: val,
+                },
+              }),
+            );
+            _getUserInfo();
+          }
+        });
+      },
+      cancelButtonText: '取消',
+      cancelCallback: () => {},
+    });
+  };
+
+  const handleSelectOperator = () => {
+    navigation.navigate('OperatorSelectScreen');
+  };
+
+  return (
+    <ImageBackground
+      style={styles.container}
+      imageStyle={styles.bg}
+      source={require('../../../assets/img/bg.png')}>
+      <ScreenBackHeader title="" backgroundColor="transparent" />
+      {/*<ImageBackground*/}
+      {/*  source={require('../../../assets/img/bg.png')}*/}
+      {/*  style={styles.bg}>*/}
+      {/*  <ScreenBackHeader title="" backgroundColor="transparent" />*/}
+      {/*  <View>*/}
+      {/*    <Icon name="person-outline" type="ionicon" size={px(99)} />*/}
+      {/*    <Text>昵称</Text>*/}
+      {/*    <Image source={require('../../../assets/img/edit.png')}></Image>*/}
+      {/*  </View>*/}
+      {/*</ImageBackground>*/}
+      <View style={styles.content}>
+        <View style={styles.center}>
+          <View style={styles.userHeader}>
+            <Image source={require('../../../assets/img/personal.png')} />
+            <Text style={styles.userName}>{userInfo?.nickname}</Text>
+            <TouchableOpacity onPress={adjustName}>
+              <Image
+                source={require('../../../assets/img/edit.png')}
+                style={styles.editName}
+              />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.userCard}>
+            <Cell
+              label="账号"
+              type="link"
+              value={userInfo?.account_id}
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={() => {}}
+            />
+            <Cell
+              label="绑定手机号"
+              type="link"
+              value={userInfo?.phone}
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={() => navigation.push('BindPhoneScreen')}
+            />
+            <Cell
+              label="绑定电视账号"
+              type="text"
+              value={isBindTv ? '已绑定' : '未绑定'}
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+            />
+            <Cell
+              label="第三方账号"
+              type="link"
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={() => {}}
+            />
+            <Cell
+              label="运营商版本"
+              type="link"
+              value={operatorName}
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={handleSelectOperator}
+            />
+            <Cell
+              label="发票抬头"
+              type="link"
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={() => {}}
+            />
+            <Cell
+              label="更改密码"
+              type="link"
+              style={styles.cellStyle}
+              labelStyle={styles.labelStyle}
+              labelTextStyle={styles.labelTextStyle}
+              onRightPress={() => {}}
+            />
+          </View>
+        </View>
+        <View style={styles.bottom}>
+          <Button title="退出登录" onPress={handleLogout} />
+          <View style={styles.bottomVersion}>
+            <Text style={styles.versionText}>
+              version:
+              {/* {envVersion || 'release_'} */}
+              {appVersion || '1.0.0'}_
+              {bundleVersion ? bundleVersion.bundleVersion : 'v0.0.1'}
+            </Text>
+          </View>
+        </View>
+      </View>
+      {/*
+      <View style={styles.content}>
+        <View style={styles.userInfo}>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
+            <Icon name="person-outline" type="ionicon" size={40} />
+            <View style={{marginLeft: 20}}>
+              <Text style={styles.userName}>{userInfo?.nickname}</Text>
+              <TouchableOpacity
+                onPress={() => navigation.push('BindPhoneScreen')}>
+                <Text style={styles.bindPhoneText}>更换绑定手机</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+        <Cell
+          type="link"
+          label="昵称"
+          value={userInfo?.nickname}
+          onRightPress={adjustName}
+        />
+        <Button title="退出登录" onPress={handleLogout} />
+      </View>
+      */}
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  bg: {
+    height: px(825),
+  },
+  content: {
+    flex: 1,
+    position: 'relative',
+  },
+  center: {},
+  userHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: px(38),
+  },
+  userName: {
+    paddingLeft: 10,
+    fontSize: px(55),
+    marginLeft: px(58),
+    fontWeight: '500',
+    color: '#333',
+    marginRight: px(27),
+  },
+  editName: {
+    width: px(37),
+    height: px(37),
+  },
+
+  userCard: {
+    backgroundColor: '#fff',
+    borderRadius: px(22),
+    marginHorizontal: px(38),
+    marginTop: px(44),
+    borderWidth: 1,
+    borderColor: '#eee',
+  },
+  cellStyle: {
+    minHeight: px(147),
+    borderBottomWidth: 0,
+  },
+  labelStyle: {
+    paddingLeft: px(44) - 10,
+  },
+  labelTextStyle: {
+    fontWeight: '500',
+  },
+
+  bindPhoneText: {
+    color: '#ccc',
+    marginTop: 10,
+  },
+  myOrder: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 30,
+    paddingVertical: 20,
+    marginBottom: 20,
+  },
+  orderHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 15,
+  },
+  orderList: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  orderItem: {
+    width: '25%',
+    alignItems: 'center',
+  },
+  services: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 30,
+    paddingVertical: 20,
+    flex: 1,
+  },
+  serviceList: {
+    flex: 1,
+  },
+  serviceItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+    borderColor: '#ccc',
+    paddingVertical: 15,
+  },
+  bottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  bottomVersion: {
+    height: 30,
+    backgroundColor: '#fff',
+  },
+  versionText: {
+    textAlign: 'center',
+    lineHeight: 30,
+  },
+});