Commit 6d2cb5d4 authored by 赵振东's avatar 赵振东

feat: 新增登录页面,选择角色页面

parent fbd6b943
module.exports = {
SITE_ID: 1,
BACK_GATEWAY: 'http://gaohuaxue-gateway-test.shushangyun.com:14880',
BACK_GATEWAY: 'http://gaohuaxue-gateway-test-v2.shushangyun.com:14880',
IS_DEV: 'TRUE',
H5_LINK: 'http://gaohuaxue-h5-test.shushangyun.com:14880/',
H5_LINK: 'http://gaohuaxue-h5-test.shushangyun-v2.com:14880/',
INFO_DETAIL_LINK: 'http://download-h5.shushangyun.com:13880/information/detail',
LANGUAGE: 'zh-CN',
};
\ No newline at end of file
......@@ -15,6 +15,8 @@
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json}\""
},
"dependencies": {
"@expo/vector-icons": "^12.0.0",
"@linkseeks/god-expo-images-picker": "1.0.0",
"@react-native-async-storage/async-storage": "^1.17.11",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/native": "^6.0.13",
......@@ -23,6 +25,23 @@
"@types/qs": "^6.9.7",
"@types/react-native-vector-icons": "^6.4.12",
"crypto-es": "^1.2.7",
"expo": "~40.0.0",
"expo-asset": "~8.2.0",
"expo-av": "~8.7.0",
"expo-barcode-scanner": "^9.1.0",
"expo-blur": "~8.2.0",
"expo-camera": "~9.1.0",
"expo-clipboard": "~1.0.1",
"expo-constants": "~9.3.3",
"expo-font": "~8.4.0",
"expo-image-picker": "~9.2.0",
"expo-linear-gradient": "^8.4.0",
"expo-linking": "~2.0.0",
"expo-media-library": "~10.0.0",
"expo-permissions": "~10.0.0",
"expo-splash-screen": "^0.8.1",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"i18next": "^20.5.0",
"mobx": "^6.7.0",
......
## 注意事项
不要导入这个库'@linkseeks/god-mobile,react native版本不兼容。
import { View, Icons } from '@linkseeks/god-mobile';
复制标品的组件时,要注意不要引入 @linkseeks/god-mobile
<!--
不要问我为啥react native引入了7.0版本的,因为我是拿了中燃项目的分支搭的框架,它的就是7.0版本,试过降版本,降不下去 ;
应该用标品的框架的,时间紧,考虑不周到,望见谅
-->
\ No newline at end of file
/**
* 通用按钮组件
* 更契合我们的设计主题
*/
import React from 'react';
import {
StyleProp,
Text,
TextStyle,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native';
import useAppStyle from '../../hooks/useAppStyle';
import createStyles from './styles';
interface ButtonProps {
/**
* 按钮类型,默认为default
*/
type?: 'default' | 'orange';
/**
* 左侧自定义Icon
*/
leftIcon?: React.ReactNode;
/**
* 按钮文本
*/
text?: string;
/**
* 自定义按钮样式
*/
buttonStyle?: StyleProp<ViewStyle>;
/**
* 自定义按钮文本样式
*/
textStyle?: StyleProp<TextStyle>;
onPress?: () => void;
}
const Button: React.FC<ButtonProps> = ({
onPress,
text = '新增',
type = 'default',
leftIcon,
textStyle,
buttonStyle,
}) => {
const styles = useAppStyle(createStyles);
const btnStyle =
type === 'default' ? styles.defaultButton : styles.orangeButton;
const btnTextStyle =
type === 'default' ? styles.defaultButtonText : styles.orangeButtonText;
return (
<TouchableOpacity activeOpacity={0.8} onPress={onPress}>
<View style={[styles.button, btnStyle, buttonStyle]}>
{leftIcon}
<Text style={[styles.buttonText, btnTextStyle, textStyle]}>{text}</Text>
</View>
</TouchableOpacity>
);
};
export default Button;
import { StyleSheet } from 'react-native';
import { ThemeStyle } from '../../constants/theme';
import themeLayout from '../../constants/theme/layout';
export default (theme: ThemeStyle) =>
StyleSheet.create({
button: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: themeLayout['padding-s'],
width: '100%',
borderRadius: themeLayout['borderRadius-xs'],
},
defaultButton: {
backgroundColor: '#00a98f',
},
orangeButton: {
backgroundColor: '#00a98f',
},
buttonText: {
fontSize: theme.fontSize.base,
fontWeight: '500',
},
defaultButtonText: {
color: theme.fonts.black,
},
orangeButtonText: {
color: theme.colors.white,
},
});
/*
* @Author: XieZhiXiong
* @Date: 2021-10-09 09:59:00
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-11-19 11:49:51
* @Description: 导航栏
*/
import React from 'react';
import { View, ViewStyle, TouchableOpacity, Text } from 'react-native';
import Icons from 'react-native-vector-icons/AntDesign';
import { useNavigation } from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import useAppStyle from '../../hooks/useAppStyle';
import styles from './styles';
interface NavBarProps {
/**
* 自定义渲染左侧内容
*/
customRenderLeft?: React.ReactNode;
/**
* 没有左侧内容
*/
noLeft?: Boolean;
/**
* 标题
*/
title?: React.ReactNode;
/**
* 右侧拓展内容
*/
extra?: React.ReactNode;
/**
* 自定义外部容器 style
*/
customStyle?: ViewStyle;
/**
* 默认中间内容部分是平分的,如果想中间内容部分的大小能够占满剩下(不包括右侧胶囊的空间)空间,可开启该属性
*/
greedy?: boolean;
/**
* 返回事件
*/
back?: Function;
/**
* 标题颜色
*/
titleColor?: string;
/**
* 返回icon,默认 ChevronLeft
*/
backIconName?: string;
/**
* 返回icon,默认 #252D37
*/
backIconColor?: string;
}
const NavBar: React.FC<NavBarProps> = (props: NavBarProps) => {
const {
customRenderLeft,
title,
extra,
customStyle,
greedy = false,
back,
titleColor = '#303133',
backIconName = 'left',
backIconColor = '#252D37',
noLeft
} = props;
const myStyle = useAppStyle(styles);
const navigation = useNavigation();
const safeInset = useSafeAreaInsets();
const handleBack = () => {
back ? back() : navigation.goBack();
};
return (
<View
style={[
myStyle['nav-bar'],
customStyle,
{
paddingTop: safeInset.top,
height: safeInset.top + 44,
},
]}
>
<View style={myStyle['nav-bar-left-view']}>
{customRenderLeft === undefined ? (
<TouchableOpacity
style={[
myStyle['nav-bar-left-arrow'],
greedy && myStyle['nav-bar-left-arrow__greedy'],
]}
onPress={handleBack}
activeOpacity={0.8}
>
{noLeft ? null : (
<Icons name={backIconName} size={24} color={backIconColor} />
)}
{/* <Icons name={backIconName} size={24} color={backIconColor} /> */}
</TouchableOpacity>
) : (
<View style={myStyle['nav-bar-left-arrow']}>{customRenderLeft}</View>
)}
<Text
style={[
myStyle['nav-bar-title'],
{ color: titleColor },
greedy && myStyle['nav-bar-title__greedy'],
]}
numberOfLines={1}
>
{title}
</Text>
</View>
<View
style={[
myStyle['nav-bar-right-view'],
greedy && myStyle['nav-bar-right-view__greedy'],
]}
>
{extra}
</View>
</View>
);
};
export default NavBar;
import { StyleSheet } from 'react-native';
import { ThemeStyle } from '../../constants/theme';
export default (theme: ThemeStyle) =>
StyleSheet.create({
navBarBackgroundColor: {
backgroundColor: theme.colors.background,
},
navBarContent: {
flex: 1,
alignItems: 'center',
paddingVertical: 13,
paddingHorizontal: 10,
},
navBarLeft: {
flex: 1,
},
navBarTitle: {
flex: 2,
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
navBarRight: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
});
import { Platform, StyleSheet } from 'react-native';
import { ThemeStyle } from '../../constants/theme';
import themeLayout from '../../constants/theme/layout';
export default (theme: ThemeStyle) =>
StyleSheet.create({
'nav-bar': {
flexDirection: 'row',
alignCtems: 'center',
paddingHorizontal: themeLayout['padding-s'],
backgroundColor: '#FFFFFF',
height: 44,
// backgroundColor: 'red',
},
'nav-bar-left-view': {
flexDirection: 'row',
alignItems: 'center',
flex: 7,
},
'nav-bar-right-view': {
flex: 2,
alignItems: 'flex-end',
justifyContent: 'center',
marginLeft: themeLayout['margin-xs'],
},
'nav-bar-right-view__greedy': {
flex: 0,
},
'nav-bar-left-arrow': {
flex: 2,
},
'nav-bar-left-arrow__greedy': {
flex: 0,
},
'nav-bar-title': {
flex: 5,
paddingHorizontal: themeLayout['padding-s'],
textAlign: 'center',
color: theme.fonts.black1,
fontSize: 16,
fontWeight: Platform.OS === 'ios' ? '500' : '600',
},
'nav-bar-title__greedy': {
flex: 1,
textAlign: 'left',
},
});
/**
* Antd组件主题,目前是跟App的主题是分离开的
* todo:集合在一个主题文件,而不是分开
* link:https://github.com/ant-design/ant-design-mobile-rn/blob/master/components/style/themes/default.tsx
*/
const AntdTheme = {
/** 深色模式 */
dark: {
brand_primary: '#EA5504',
brand_primary_tap: '#EA5504',
primary_button_fill: '#EA5504',
button_height: 40,
button_font_size: 14,
primary_button_fill_tap: '#EA3504',
tabs_color: '#EA5504',
},
/** 默认模板 - 科技类 */
science: {
brand_primary: '#EA5504',
brand_primary_tap: '#EA5504',
primary_button_fill: '#EA5504',
button_height: 40,
button_font_size: 14,
primary_button_fill_tap: '#EA3504',
tabs_color: '#EA5504',
},
};
export default AntdTheme;
......@@ -16,6 +16,36 @@ const AppTheme = {
primary: 'rgb(10, 132, 255)',
text: 'rgb(229, 229, 231)',
secondary: '#2266EE',
'grey-0': '#252d37',
'grey-1': '#5c626a',
'grey-2': '#91959b',
'grey-3': '#c8cacd',
'grey-4': '#e3e4e5',
'grey-5': '#f5f6f7',
'grey-6': '#fafbfc',
white: '#FFFFFF',
grey: '#666666',
'grey-7': '#999999',
gray: '#EEEEEE',
},
background: {
base: '#F4F4F4',
},
fontSize: {
base: 14,
lg: 16,
sm: 12,
},
borderColor: {
base: '#F7F8FA',
},
fonts: {
black1: '#303133',
black2: '#606266',
black3: '#909399',
black: '#262626',
red: '#E30B0D',
orange: '#EA5504',
},
},
/** 默认模板 - 科技类 */
......@@ -26,17 +56,42 @@ const AppTheme = {
border: '#F4F5F7',
card: 'rgb(255, 255, 255)',
notification: 'rgb(255, 59, 48)',
primary: '#00A98F',
primary_d: '#EBF9F6',
primary: '#EA5504',
primary_d: '#FCEEE5',
skeletonColor: '#F2F2F2',
text: 'rgb(28, 28, 30)',
secondary: '#2266EE',
colorV2: '#EBF9F6',
'grey-0': '#252d37',
'grey-1': '#5c626a',
'grey-2': '#91959b',
'grey-3': '#c8cacd',
'grey-4': '#e3e4e5',
'grey-5': '#f5f6f7',
'grey-6': '#fafbfc',
white: '#FFFFFF',
grey: '#666666',
'grey-7': '#999999',
gray: '#EEEEEE',
},
fonts: {
black1: '#303133',
black2: '#606266',
black3: '#909399',
red: '#E30B0D',
black: '#262626',
orange: '#EA5504',
},
background: {
base: '#F4F4F4',
},
fontSize: {
base: 14,
lg: 16,
sm: 12,
},
borderColor: {
base: '#F7F8FA',
},
margins: {
/** 4 */
......@@ -83,4 +138,5 @@ export type ThemeType<T extends keyof AppThemeType> = typeof AppTheme[T];
// 当前app正在用的主题样式
export type ThemeStyle = ThemeType<AppThemeValue>;
export default AppTheme;
......@@ -20,6 +20,8 @@ const themeLayout = {
'padding-l': 24,
'padding-xl': 32,
'padding-xxl': 40,
'borderRadius-xxs': 4,
'borderRadius-xs': 8,
};
export default themeLayout;
import { useState, useEffect } from 'react';
import { StatusBar, Platform, NativeModules } from 'react-native';
const useStatusBarHeight = () => {
const [statusBarHeight, setStatusBarHeight] = useState<number>(44);
const { StatusBarManager } = NativeModules;
useEffect(() => {
const initStatusBarHeight = () => {
if (Platform.OS === 'ios') {
StatusBarManager.getHeight(({ height }: { height: number }) => {
setStatusBarHeight(height);
});
} else {
setStatusBarHeight(
StatusBar.currentHeight ? StatusBar.currentHeight + 8 : 40,
);
}
};
initStatusBarHeight();
}, []);
return {
statusBarHeight,
};
};
export default useStatusBarHeight;
......@@ -2,9 +2,20 @@ import BottomTabs from './BottomTabs';
import TestDetailsScreen from '../views/Test/TestDetailsScreen';
import Login from '../views/Login';
import LoginAgreement from '../views/Login/Agreement';
import AccountInfo from '../views/AccountInfo';
import SelectMembers from '../views/SelectMembers';
// import AccountInfo from '../views/AccountInfo';
export const ROUTERS = {
Login: {
title: '登入',
component: Login,
headerShown: false,
},
SelectMembers: {
title: '选择角色',
component: SelectMembers,
headerShown: false,
},
BottomTabs: {
title: '首页',
component: BottomTabs,
......@@ -15,16 +26,11 @@ export const ROUTERS = {
component: TestDetailsScreen,
headerShown: true,
},
Login: {
title: '登入',
component: Login,
headerShown: false,
LoginAgreement: {
title: '', // 协议
component: LoginAgreement,
headerShown: true,
},
// LoginAgreement: {
// title: '', // 协议
// component: LoginAgreement,
// headerShown: true,
// },
// AccountInfo: {
// title: '账号信息',
// component: AccountInfo,
......
......@@ -26,6 +26,7 @@ export type RootStackParamList = {
Login: undefined;
LoginAgreement: { id: number };
AccountInfo: undefined;
SelectMembers: NavigatorScreenParams<any>;
};
export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
......
import { makeObservable, observable, action, flow } from 'mobx';
import { makeObservable, observable, action, flow, runInAction } from 'mobx';
import { TOKEN, USER_INFO } from '../../constants';
import { removeAsyncStorage, setAsyncStorage } from '../../utils/storage';
import { UserInfo } from './types';
......@@ -6,11 +6,13 @@ import { UserInfo } from './types';
export class UserStore {
username: string = '';
userInfo: UserInfo | null = null;
roles: any;
constructor() {
makeObservable(this, {
username: observable,
setUsername: action,
// setUserInfo: action.bound,
setUserInfo: flow,
removeUserInfo: flow,
});
......@@ -36,6 +38,18 @@ export class UserStore {
}
}
// 用户登录时,或者修改用户信息的时候更新UserInfo
// async setUserInfo(data: userInfoType) {
// const result = {
// ...data,
// memberRoleName: getMemberRoleName(data),
// };
// await setAsyncStorage(USER_INFO, result);
// runInAction(() => {
// this.userInfo = result;
// });
// }
*removeUserInfo() {
try {
yield removeAsyncStorage(TOKEN);
......@@ -43,7 +57,7 @@ export class UserStore {
// 商品分享口令生成数字
yield removeAsyncStorage('SHARE_CODE_NUM');
// console.log('store移除用户信息-----Success');
this.userInfo = null;
} catch (error) {
console.log('store移除用户信息-----Error', error);
......
......@@ -4,8 +4,8 @@ import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { RootStackScreenProps } from '../../../routers/types';
// import { getManageContentNoticeGet } from '../../../services/ManageV2Api';
// import type { GetManageContentNoticeGetResponse } from '../../../services/ManageV2Api';
import { getManageContentNoticeGet } from '../../../services/ManageV2Api';
import type { GetManageContentNoticeGetResponse } from '../../../services/ManageV2Api';
type LoginAgreementScreenNavigationProp =
RootStackScreenProps<'LoginAgreement'>;
......@@ -21,26 +21,26 @@ const LoginAgreement: React.FC<LoginAgreementScreenNavigationProp> = ({
const {
params: { id },
} = route;
// const [columnTypeList, setcolumnTypeList] =
// useState<GetManageContentNoticeGetResponse | null>(null);
const [columnTypeList, setcolumnTypeList] =
useState<GetManageContentNoticeGetResponse | null>(null);
const safeInset = useSafeAreaInsets();
// const findAllByColumnType = async () => {
// const res = await getManageContentNoticeGet({ id: `${id}` });
// if (res.code === 1000) {
// setcolumnTypeList(res.data);
// navigation.setOptions({ title: res.data.title });
// }
// };
const findAllByColumnType = async () => {
const res = await getManageContentNoticeGet({ id: `${id}` });
if (res.code === 1000) {
setcolumnTypeList(res.data);
navigation.setOptions({ title: res.data.title });
}
};
useEffect(() => {
// findAllByColumnType();
findAllByColumnType();
}, []);
return (
<View style={{ flex: 1, paddingBottom: safeInset.bottom }}>
{/* <WebView source={{ html: columnTypeList?.content || '' }} /> */}
<WebView source={{ html: columnTypeList?.content || '' }} />
</View>
);
};
......
......@@ -10,6 +10,7 @@ import useAppStyle from '../../../../hooks/useAppStyle';
import AreaCodePopup from '../../../../components/AreaCodePopup';
import type { AreaCodeOption } from '../../../../components/AreaCodePopup';
import styles from './styles';
import { postMemberMobileLoginSendsms } from '../../../../services/MemberV2Api';
interface Iprops {
/**
......@@ -73,24 +74,24 @@ const MobileView: React.FC<any> = (props: Iprops) => {
};
// 获取国家代码和手机号码位数
// const getcode = async () => {
// const phone = from.phone;
// if (!btnDisabled) {
// if (!phone) {
// Toast.show('请输入手机号码', { position: Toast.positions.CENTER });
// } else {
// const param = {
// countryCode,
// phone,
// };
// const res = await postMemberMobileWechatAppletSends(param);
// if (res.code === 1000) {
// hanleCountdown();
// Toast.show('发送成功', { position: Toast.positions.CENTER });
// }
// }
// }
// };
const getcode = async () => {
const phone = from.phone;
if (!btnDisabled) {
if (!phone) {
Toast.show('请输入手机号码', { position: Toast.positions.CENTER });
} else {
const param = {
countryCode,
phone,
};
const res = await postMemberMobileLoginSendsms(param);
if (res.code === 1000) {
hanleCountdown();
Toast.show('发送成功', { position: Toast.positions.CENTER });
}
}
}
};
const setKey = (val: string, key: string) => {
const fromData = from;
......@@ -156,7 +157,7 @@ const MobileView: React.FC<any> = (props: Iprops) => {
style={myStyle['mobileView-fromItem-input']}
/>
<TouchableOpacity
// onPress={getcode}
onPress={getcode}
activeOpacity={0.8}
style={myStyle['mobileView-srmCode']}
>
......
......@@ -4,19 +4,21 @@ import Toast from 'react-native-root-toast';
import { setAsyncStorage } from '../../utils/storage';
import { encryptedByAES, decryptedByAES } from '../../utils/cryptoAes';
import { useStores } from '../../hooks/useStores';
// import {
// postMemberMobileWechatAppletLoginPhone,
// postMemberMobileWechatAppletLoginAccount,
// } from '../../services/MemberV2Api';
// import { getManageContentNoticeFindWithOutContent } from '../../services/ManageV2Api';
import {
postMemberMobileWechatAppletLoginPhone,
// postMemberMobileWechatAppletLoginAccount,
postMemberMobileLogin,
} from '../../services/MemberV2Api';
import { getManageContentNoticeFindWithOutContent } from '../../services/ManageV2Api';
import useAppStyle from '../../hooks/useAppStyle';
import { RootStackScreenProps } from '../../routers/types';
import { USER_INFO } from '../../constants';
import { USER_INFO, TOKEN } from '../../constants';
import Checkbox from '../../components/Checkbox';
import zhongranLogo from '../../../assets/images/gaohuaxue_logo.png';
import MobileView from './components/Mobile';
import SingView from './components/Sing';
import styles from './styles';
import Loading from '../../components/Loading';
type LoginScreenNavigationProp = RootStackScreenProps<'Login'>;
......@@ -25,64 +27,76 @@ const Login: React.FC<LoginScreenNavigationProp> = ({ navigation }) => {
const [current, setcurrent] = useState(0); // 0 是账号密码登录
const [select, setSelect] = useState(false); // 设置协议选中
const [columnTypeList, setColumnTypeList] = useState<any>([]); // 协议数据
const [loading, setLoading] = useState<boolean>(false);
const myStyle = useAppStyle(styles);
const { userStore } = useStores();
// const onSubmit = async (data: any) => {
// if (!select) {
// Toast.show('请阅读并同意相关协议', { position: Toast.positions.CENTER });
// return;
// }
// let fn: Function | null = null;
// let obj: any = {};
const onSubmit = async (value: any) => {
if (!select) {
Toast.show('请阅读并同意相关协议', { position: Toast.positions.CENTER });
return;
}
let service: Function | null = null;
let obj: any = {};
setLoading(true);
switch (current) {
case 1:
service = postMemberMobileWechatAppletLoginPhone;
break;
default:
service = postMemberMobileLogin;
obj.account = value.account;
obj.password = encryptedByAES(value.password);
obj.shopType = value.shopType;
break;
}
try {
const { code, data, message } = await service?.(
current === 1 ? value : obj,
);
if (code === 1000) {
userStore.setUserInfo(data);
setAsyncStorage(USER_INFO, data);
setAsyncStorage(TOKEN, data.token);
navigation.replace('SelectMembers', data);
if (data.roles.length > 1) {
navigation.replace('SelectMembers', data);
}
if (data.roles.length === 1) {
navigation.replace('BottomTabs', data);
}
// switch (current) {
// case 1:
// fn = postMemberMobileWechatAppletLoginPhone;
// break;
// default:
// fn = postMemberMobileWechatAppletLoginAccount;
// obj.account = data.account;
// obj.password = encryptedByAES(data.password);
// obj.shopType = data.shopType;
// break;
// }
// fn?.(current === 1 ? data : obj).then(res => {
// if (res.code === 1000) {
// setAsyncStorage(USER_INFO, res.data);
// // userStore.setUserInfo(res.data);
// navigation.replace('BottomTabs', { screen: 'Home' });
// return;
// } else {
// if (current === 1) {
// obj.password = decryptedByAES(obj.password);
// }
// Toast.show(res.message, { position: Toast.positions.CENTER });
// return;
// }
// });
// };
return;
} else {
if (current === 1) {
obj.password = decryptedByAES(obj.password);
}
Toast.show(message, { position: Toast.positions.CENTER });
return;
}
} finally {
setLoading(false);
}
};
// const findAllByColumnType = async () => {
// const { code, data, message } =
// await getManageContentNoticeFindWithOutContent({ columnType: '2' });
// if (code === 1000) {
// setColumnTypeList(data);
// } else {
// Toast.show(message, { position: Toast.positions.CENTER });
// }
// };
const findAllByColumnType = async () => {
const { code, data, message } =
await getManageContentNoticeFindWithOutContent({ columnType: '2' });
if (code === 1000) {
setColumnTypeList(data);
} else {
Toast.show(message, { position: Toast.positions.CENTER });
}
};
const renderComponentByType = () => {
switch (current) {
case 0:
// return <SingView submit={onSubmit} />;
return <SingView />;
return <SingView submit={onSubmit} />;
case 1:
// return <MobileView submit={onSubmit} />;
return <MobileView />;
return <MobileView submit={onSubmit} />;
default:
return null;
}
......@@ -93,7 +107,7 @@ const Login: React.FC<LoginScreenNavigationProp> = ({ navigation }) => {
};
useEffect(() => {
// findAllByColumnType();
findAllByColumnType();
}, []);
return (
......@@ -146,6 +160,13 @@ const Login: React.FC<LoginScreenNavigationProp> = ({ navigation }) => {
))}
</View>
</View>
<Loading
customStyle={myStyle.loading}
loading={loading}
vertical
size={40}
textSize={14}
/>
</View>
);
};
......
......@@ -129,4 +129,16 @@ export default (theme: ThemeStyle) =>
color: '#fff',
paddingVertical: 10,
},
loading: {
position: 'absolute',
top: '50%',
left: '50%',
backgroundColor: '#000',
width: 100,
height: 100,
marginLeft: -50,
marginTop: -50,
opacity: 0.8,
zIndex: 88,
},
});
import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import { useStores } from '../../hooks/useStores';
// import useLocale from 'src/hooks/useLocale';
import rolue from '../../../assets/images/rolue.png';
import Styles from './styles';
import NavBar from '../../components/NavBar';
import useAppStyle from '../../hooks/useAppStyle';
import Button from '../../components/Button';
import { observer } from 'mobx-react-lite';
const SelectMembers = (props: { route: any; pra: any; navigation: any }) => {
const {
route: { params },
navigation,
} = props;
const styles = useAppStyle(Styles);
const { userStore } = useStores();
const [Index, setIndex] = useState<number>(0);
const confirm = () => {
navigation.replace('BottomTabs', userStore?.userInfo?.roles[Index]);
};
const check = (index: number, id: any) => {
setIndex(index);
};
return (
<View style={styles.container}>
<NavBar title="选择角色" noLeft />
<ScrollView style={styles.Warp}>
<View style={styles.usertype}>
{params.roles.map((item: any, index: number) => {
return (
<TouchableOpacity
key={index}
onPress={() => check(index, item.roleId)}
>
<View style={Index === index ? styles.ItemAtive : styles.Item}>
<Image style={styles.Img} source={rolue} />
<Text style={styles.ItemTips}>{item.roleName}</Text>
</View>
</TouchableOpacity>
);
})}
</View>
</ScrollView>
<Button type="orange" text="确定" onPress={confirm} />
</View>
);
};
export default observer(SelectMembers);
import { StyleSheet } from 'react-native';
import { ThemeStyle } from '../../constants/theme';
export default (theme: ThemeStyle) =>
StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
flexDirection: 'column',
width: '100%',
},
Warp: {
padding: 24,
flexDirection: 'column',
width: '100%',
flex: 1,
},
Title: {
fontSize: 24,
fontWeight: '400',
},
Tips: {
fontSize: 12,
fontWeight: '500',
paddingTop: 12,
paddingBottom: 12,
color: '#606266',
},
usertype: {
marginTop: 20,
flexDirection: 'column',
width: '100%',
justifyContent: 'space-between',
paddingBottom: 50,
},
Item: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
marginBottom: 12,
borderRadius: 2,
position: 'relative',
padding: 10,
backgroundColor: '#FAFBFC',
},
ItemAtive: {
borderWidth: 1,
borderColor: '#00B37A',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
marginBottom: 12,
borderRadius: 2,
backgroundColor: '#E4F7EF',
position: 'relative',
padding: 10,
},
ItemTips: {
paddingTop: 12,
paddingBottom: 12,
},
Img: {
width: 80,
height: 80,
borderRadius: 50,
marginRight: 10,
},
btn: {
backgroundColor: theme.colors.primary,
marginBottom: 20,
},
});
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment