ipanel-rnapp-ajb-base 1.0.0

package/app/screens/ResePassword/index.js

@@ -0,0 +1,364 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableHighlight,
+  ScrollView,
+  TouchableOpacity,
+  TextInput,
+  Alert,
+} from 'react-native';
+
+import ScreenBackHeader from '../../components/common/ScreenBackHeader';
+import SmsCodeInput from '../../components/common/SmsCodeInput/indexNew';
+import {Icon, Divider} from '@rneui/themed';
+import CryptoJS from 'crypto-js';
+
+import {obtainSmscode, changePwdByPhone, authSmscode} from '../../api';
+import px from '../../utils/scaleSize';
+import {replace} from '../../utils/RootNavigation';
+// const passwordReg =
+// /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,}$/;
+
+const Index = ({route}) => {
+  const [step, setStep] = useState(0); // 0 输入账号绑定的手机号码,1 设置密码
+  const [phone, setPhone] = useState('');
+  const [smsId, setSmsId] = useState('');
+  const [userInputSmsCode, setUserInputSmsCode] = useState('');
+  const [smsCodeRightBtnDisabled, setSmsCodeRightBtnDisabled] = useState(false);
+  const [smsCodeRightBtnText, setSmsCodeRightBtnText] = useState('发送验证码');
+  const [smsCodeResendTimes, setSmsCodeResendTimes] = useState(0);
+  const [authCode, setAuthCode] = useState('');
+  const loginDisabled = !(step === 0 && phone && userInputSmsCode);
+
+  const timers = useRef(null);
+
+  let smsCodeTimer;
+
+  const [pwd1, setPwd1] = useState('');
+  const [pwd2, setPwd2] = useState('');
+  const [pwdMsg, setPwdMsg] = useState('');
+  const pwdDisabled = !(step === 1 && pwd1 && pwd2);
+  function validPhone(phoneNumber) {
+    if (!phoneNumber) {
+      Alert.alert('请输入手机号');
+      return false;
+    }
+    if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phoneNumber)) {
+      // Alert.alert('请输入正确的手机号');
+      global.toast.showToast('手机号无效，请检查！');
+      return false;
+    }
+    return true;
+  }
+
+  const handleGetSmsId = async () => {
+    if (!validPhone(phone)) {
+      return;
+    }
+    // 60s后重发
+    setSmsCodeResendTimes(60);
+
+    setSmsCodeRightBtnDisabled(true);
+    const res = await obtainSmscode(
+      {
+        phone_number: phone,
+        length: 4,
+        type: 5, // type=5 表示重置密码用途
+      },
+      global.base.accountType,
+    ).catch(err => {
+      console.log(err);
+      setSmsCodeRightBtnText('获取验证码');
+      setSmsCodeRightBtnDisabled(false);
+    });
+
+    if (res && res.code === 0) {
+      setSmsId(res.result.sms_id);
+
+      smsCodeTimer = setTimeout(() => {
+        setSmsCodeRightBtnText('获取验证码');
+        setSmsCodeRightBtnDisabled(false);
+      }, 120000);
+    } else {
+      setSmsCodeRightBtnText('获取验证码');
+      setSmsCodeRightBtnDisabled(false);
+    }
+  };
+
+  const handleLoginPress = async () => {
+    if (step === 0) {
+      // 手机验证码校对
+      if (loginDisabled) {
+        return;
+      }
+      if (!userInputSmsCode) {
+        global.toast.showToast('请输入短信验证码');
+        return;
+      }
+      if (!validPhone(phone)) {
+        return;
+      }
+      const params = {
+        sms_id: smsId,
+        sms_code: userInputSmsCode,
+      };
+      const res = await authSmscode(params);
+      if (res.code === 0) {
+        console.log(res.result?.auth_code, 'res.result?.auth_code');
+        global.toast.showToast('校验验证码成功，请重置密码');
+        setAuthCode(res.result?.auth_code);
+        setStep(1);
+        clearTimeout(smsCodeTimer);
+        clearTimeout(timers.current);
+      } else {
+        global.toast.showToast('校验验证码失败');
+      }
+    } else {
+      if (pwdDisabled) {
+        return;
+      }
+      if (pwd1 !== pwd2) {
+        global.toast.showToast('两次密码输入不一致');
+        setPwdMsg('两次密码输入不一致');
+        return;
+      }
+      const passwordRegTest =
+        /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){8,}$/;
+      if (!passwordRegTest.test(pwd1)) {
+        global.toast.showToast('低密码安全，请按规范设置');
+        setPwdMsg('低密码安全，请按规范设置');
+        return;
+      }
+      setPwdMsg('');
+      const params = {
+        auth_code: authCode,
+        phone_number: phone,
+        new_password: CryptoJS.MD5(pwd1).toString(),
+      };
+      const res = await changePwdByPhone(params);
+      if (res && res.code === 0) {
+        console.log(res, 'res');
+        global.toast?.showToast('修改成功');
+        replace('Login', {
+          skip: true,
+          loginWay: 1,
+        });
+      } else {
+        global.toast?.showToast('修改失败');
+        setStep(0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (phone.length === 11 && smsCodeResendTimes === 0) {
+      setSmsCodeRightBtnDisabled(false);
+      setSmsCodeRightBtnText('获取验证码');
+    } else {
+      setSmsCodeRightBtnDisabled(true);
+    }
+  }, [phone, smsCodeResendTimes]);
+  useEffect(() => {
+    if (smsCodeResendTimes > 0) {
+      console.log(smsCodeResendTimes, 'smsCodeResendTimes');
+      setSmsCodeRightBtnText(`${smsCodeResendTimes}s后重发`);
+      timers.current = setTimeout(() => {
+        setSmsCodeResendTimes(smsCodeResendTimes - 1);
+      }, 1000);
+    }
+    return () => {
+      clearTimeout(timers.current);
+    };
+  }, [smsCodeResendTimes]);
+
+  return (
+    <View style={styles.container}>
+      <ScreenBackHeader title="重置密码" />
+      <Divider width={px(12)} color="#F5F5F5" />
+      <View style={styles.stepContainer}>
+        {step === 0 ? (
+          <>
+            <Text style={styles.title}>请输入账号绑定的手机号码</Text>
+            <View style={[styles.inputBox, {marginBottom: px(75)}]}>
+              <Text style={styles.inputTitle}>+86</Text>
+              <View style={styles.inputDivider} />
+              <TextInput
+                keyboardType="number-pad"
+                style={styles.input}
+                value={phone}
+                placeholder="请输入您的手机号"
+                placeholderTextColor="#A6A6A6"
+                onChangeText={text => setPhone(text)}
+                returnKeyType="done"
+                maxLength={11}
+              />
+            </View>
+            <View style={[styles.inputBox]}>
+              <SmsCodeInput
+                value={userInputSmsCode}
+                placeholder="请输入验证码"
+                rightBtnDisabled={smsCodeRightBtnDisabled}
+                rightBtnText={smsCodeRightBtnText}
+                onChangeText={text => setUserInputSmsCode(text)}
+                onRightBtnPress={handleGetSmsId}
+              />
+            </View>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleLoginPress}
+              disabled={loginDisabled}>
+              <View style={styles.loginBtnBox}>
+                <View
+                  style={[
+                    styles.loginBtn,
+                    loginDisabled ? styles.disabledBtn : null,
+                  ]}>
+                  <Text style={[styles.loginBtnText]}>下一步</Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <>
+            <Text style={{...styles.title, marginBottom: px(17)}}>
+              设置密码
+            </Text>
+            <Text
+              style={{
+                ...styles.marginCommon,
+                color: '#999999',
+                fontSize: px(40),
+                marginBottom: px(81),
+              }}>
+              密码至少包含数字/字母/符号2种组合
+            </Text>
+            <View style={[styles.inputBox, {marginBottom: px(75)}]}>
+              <TextInput
+                style={styles.input}
+                placeholder="请输入新密码（最少八位数）"
+                placeholderTextColor="#A6A6A6"
+                value={pwd1}
+                keyboardType="email-address"
+                onChangeText={text => setPwd1(text)}
+              />
+            </View>
+            <View style={[styles.inputBox]}>
+              <TextInput
+                style={styles.input}
+                placeholder="再次确认新密码"
+                placeholderTextColor="#A6A6A6"
+                value={pwd2}
+                keyboardType="email-address"
+                onChangeText={text => setPwd2(text)}
+              />
+            </View>
+            {pwdMsg ? (
+              <Text
+                style={{
+                  ...styles.marginCommon,
+                  color: '#E86003',
+                  fontSize: px(35),
+                }}>
+                {pwdMsg}
+              </Text>
+            ) : null}
+            <TouchableOpacity
+              activeOpacity={0.7}
+              onPress={handleLoginPress}
+              disabled={pwdDisabled}>
+              <View
+                style={[
+                  styles.loginBtnBox,
+                  {marginTop: pwdMsg ? px(55) : px(114)},
+                ]}>
+                <View
+                  style={[
+                    styles.loginBtn,
+                    pwdDisabled ? styles.disabledBtn : null,
+                  ]}>
+                  <Text style={[styles.loginBtnText]}>下一步</Text>
+                </View>
+              </View>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    flexDirection: 'column',
+  },
+  inputBox: {
+    marginHorizontal: px(115),
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: px(2),
+    // marginVertical: 10,
+    borderBottomColor: '#E8E8E8',
+    height: px(100),
+  },
+  inputView: {
+    backgroundColor: '#fff',
+    borderRadius: px(22),
+    flex: 1,
+    marginTop: px(-50),
+  },
+  inputDivider: {
+    width: px(3),
+    height: px(37),
+    backgroundColor: '#eee',
+    marginHorizontal: px(22),
+  },
+  inputTitle: {
+    color: '#333',
+    fontSize: px(40),
+    fontWeight: '400',
+  },
+  input: {
+    height: 50,
+    flex: 1,
+    color: '#000',
+  },
+  loginBtnBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: px(144),
+  },
+  loginBtn: {
+    marginHorizontal: px(115),
+    borderRadius: px(23),
+    backgroundColor: '#E86003',
+    flex: 1,
+    height: px(132),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loginBtnText: {
+    color: '#fff',
+    fontSize: px(52),
+    fontWeight: '600',
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: px(46),
+    color: '#333',
+    marginTop: px(46),
+    marginHorizontal: px(115),
+    marginBottom: px(153),
+  },
+  disabledBtn: {
+    backgroundColor: '#CFCFCF',
+  },
+  marginCommon: {
+    marginHorizontal: px(115),
+  },
+});
+
+export default Index;

package/app/screens/SbkScreen.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+
+const SbkScreen = () => {
+  return (
+    <View style={styles.container}>
+      <Text>声必可专用页面</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'red',
+    height: '100%',
+  },
+});
+
+export default SbkScreen;

package/app/screens/WebviewScreen.js

@@ -0,0 +1,41 @@
+import React, {useState, useEffect} from 'react';
+import {View, Text, StyleSheet, TouchableHighlight} from 'react-native';
+
+import {WebView} from 'react-native-webview';
+import ScreenBackHeader from '../components/common/ScreenBackHeader';
+
+const Index = ({navigation, route}) => {
+  return (
+    <View style={styles.container}>
+      <ScreenBackHeader title={route.params.title} />
+
+      <View style={styles.webviewContainer}>
+        <WebView
+          bounces={false}
+          domStorageEnabled
+          javaScriptEnabled
+          useWebKit
+          // onNavigationStateChange={val => {
+          //   if (!val.loading && route?.params?.onNavigationStateChange) {
+          //     route?.params?.onNavigationStateChange(val);
+          //   }
+          // }}
+          source={{
+            uri: route.params.url,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  webviewContainer: {
+    flex: 1,
+  },
+});
+
+export default Index;

package/app/storage/index.js

@@ -0,0 +1,166 @@
+import Storage from 'react-native-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+var storage = new Storage({
+  // 最大容量，默认值1000条数据循环存储
+  size: 100000,
+
+  // 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
+  // 如果不指定则数据只会保存在内存中，重启后即丢失
+  storageBackend: AsyncStorage,
+
+  // 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
+  defaultExpires: null,
+
+  // 读写时在内存中缓存数据。默认启用。
+  enableCache: true,
+
+  // 如果storage中没有相应数据，或数据已过期，
+  // 则会调用相应的sync方法，无缝返回最新数据。
+  // sync方法的具体说明会在后文提到
+  // 你可以在构造函数这里就写好sync的方法
+  // 或是在任何时候，直接对storage.sync进行赋值修改
+  // 或是写到另一个文件里，这里require引入
+  /* sync: require('你可以另外写一个文件专门处理sync')*/
+});
+
+var local = {
+  /**
+   * 设置缓存
+   * @params key  必传 唯一标识
+   * @params data  数据  type：string || object
+   * @params expires 过期时间  不传默认永久  单位：ms
+   * @params id  非必传 标识
+   *
+   * */
+  set(key, data, expires, id) {
+    let setValue = JSON.stringify(data);
+    if (id) {
+      return storage.save({
+        key: key,
+        id: id,
+        data: setValue,
+        expires: expires ? expires : null,
+      });
+    } else {
+      return storage.save({
+        key: key,
+        data: setValue,
+        expires: expires ? expires : null,
+      });
+    }
+  },
+  /**
+   * 根据key 或者 key-id的到数据
+   * @params key 必传
+   * @params id  可为空
+   *
+   * */
+  get(key, id) {
+    if (id) {
+      return storage
+        .load({
+          key: key,
+          id: id,
+        })
+        .then(ret => {
+          return JSON.parse(ret);
+        })
+        .catch(err => {
+          /**
+           * 抛出错误
+           * 注释部分为抛出详细错误
+           * */
+          // throw err;
+          switch (err.name) {
+            case 'NotFoundError':
+              // throw err.message;
+              break;
+            case 'ExpiredError':
+              throw err.message;
+              break;
+            default:
+              throw '未知错误';
+              break;
+          }
+        });
+    } else {
+      return storage
+        .load({
+          key: key,
+        })
+        .then(ret => {
+          return JSON.parse(ret);
+        })
+        .catch(err => {
+          /**
+           * 抛出错误
+           * 注释部分为抛出详细错误
+           * */
+          // throw err;
+          switch (err.name) {
+            case 'NotFoundError':
+              // throw err.message;
+              break;
+            case 'ExpiredError':
+              throw err.message;
+              break;
+            default:
+              throw '未知错误';
+              break;
+          }
+        });
+    }
+  },
+  /**
+   * 删除单个数据
+   * key 必传
+   * @params key 删除kay所对应的数据，必传
+   *
+   * @params id  删除id对应的数据 若删除的数据中有id，则必传
+   */
+
+  remove(key, id) {
+    if (id) {
+      return storage.remove({
+        key: key,
+        id: id,
+      });
+    } else {
+      return storage.remove({
+        key: key,
+      });
+    }
+  },
+  /**
+   * 清空所有map，移除所有key-id数据（但会保留只有key的数据）
+   * 测试 刷新之后有效，所以应该是在退出app时执行的
+   * */
+  clearMaps() {
+    return storage.clearMap();
+  },
+  /**
+   * 清空某个key下的所有数据（仅key-id数据）
+   * @paramas key
+   * */
+  clearMapForKey(key) {
+    return storage.clearMapForKey(key);
+  },
+  /**
+   * 获取key下的 所有数据(仅key-id数据)
+   * */
+  getAllDataForKey(key) {
+    return storage.getAllDataForKey(key).then(ret => {
+      return ret;
+    });
+  },
+  /**
+   * 获取某个key下的所有ID（仅key-id数据）
+   * */
+  getIdsForKey(key) {
+    return storage.getIdsForKey(key).then(ids => {
+      return ids;
+    });
+  },
+};
+
+export default local;

package/app/utils/EventEmitter.js

@@ -0,0 +1,43 @@
+class EventEmitter {
+  constructor() {
+    // 事件缓存列表
+    this._events = {};
+  }
+
+  // 订阅
+  on(name, cb) {
+    // 如果存在事件
+    if (this._events[name]) {
+      this._events[name].push(cb);
+    } else {
+      this._events[name] = [cb];
+    }
+  }
+
+  // 取消订阅
+  off(name, fn) {
+    let cbs = this._events[name];
+    if (cbs) {
+      if (!fn) {
+        this._events[name] = null;
+      } else {
+        const index = cbs.findIndex(cb => cb === fn);
+        if (index >= 0) {
+          cbs.splice(index, 1);
+        }
+      }
+    }
+  }
+
+  // 发布
+  emit(name, ...args) {
+    if (this._events[name]) {
+      let cbs = this._events[name].slice();
+      for (let cb of cbs) {
+        cb(...args);
+      }
+    }
+  }
+}
+
+export default EventEmitter;

package/app/utils/RootNavigation.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {StackActions} from '@react-navigation/native';
+
+export const navigationRef = React.createRef();
+
+export function navigate(...args) {
+  navigationRef.current?.navigate(...args);
+}
+
+export function replace(...args) {
+  navigationRef.current?.dispatch(StackActions.replace(...args));
+}
+
+export function getRootState(...args) {
+  return navigationRef.current?.getRootState(...args);
+}
+
+export function goBack() {
+  navigationRef.current?.goBack();
+}
+
+export function push(...args) {
+  navigationRef.current?.dispatch(StackActions.push(...args));
+}
+
+export function pop(...args) {
+  navigationRef.current?.dispatch(StackActions.pop(...args));
+}
+
+export function popToTop() {
+  navigationRef.current?.dispatch(StackActions.popToTop());
+}