mobile / yh_vendor · Commits

Go to a project

Authored by shixiang
Commit 18d03a802365c3ed7df0136911520d6a9cdc91f0 1 parent c2910f13

提交登录ui优化 

review －叶弯弯
Inline Side-by-side
Showing 10 changed files with 80 additions and 78 deletions
@@ -34,8 +34,8 @@ export default class Login extends Component { @@ -34,8 +34,8 @@ export default class Login extends Component {
34 34
35 35
36 renderUserText() { 36 renderUserText() {
37 - return (  
38 - <View style={styles.textContainer}> 37 + return (
  38 + <View style={styles.textContainer}>
39 <TextInput 39 <TextInput
40 style={styles.username} 40 style={styles.username}
41 placeholder='账号' 41 placeholder='账号'
@@ -51,46 +51,47 @@ export default class Login extends Component { @@ -51,46 +51,47 @@ export default class Login extends Component {
51 } 51 }
52 /> 52 />
53 </TouchableWithoutFeedback> 53 </TouchableWithoutFeedback>
54 - </View> 54 + </View>
55 ); 55 );
56 } 56 }
57 renderPwdText() { 57 renderPwdText() {
58 return ( 58 return (
59 - <View style={styles.textContainer}>  
60 - <TextInput  
61 - style={styles.pwd}  
62 - secureTextEntry={this.props.isDisplayPwd?false:true}  
63 - placeholder={'密码'}  
64 - underlineColorAndroid='transparent'  
65 - onChangeText={this.props.onPwdChange}  
66 - value={this.props.pwd}  
67 - />  
68 - <TouchableWithoutFeedback  
69 - onPress={this.props.onShowPwdPress}>  
70 - <Image  
71 - style={styles.buttonDelete}  
72 - source={require('../images/eyes@2x.png')} 59 + <View style={styles.textContainer}>
  60 + <TextInput
  61 + style={styles.pwd}
  62 + secureTextEntry={this.props.isDisplayPwd?false:true}
  63 + placeholder={'密码'}
  64 + underlineColorAndroid='transparent'
  65 + onChangeText={this.props.onPwdChange}
  66 + value={this.props.pwd}
73 /> 67 />
74 - </TouchableWithoutFeedback>  
75 - </View>  
76 - );  
77 -} 68 + <TouchableWithoutFeedback
  69 + onPress={this.props.onShowPwdPress}>
  70 + <Image
  71 + style={styles.buttonDelete}
  72 + source={require('../images/eyes@2x.png')}
  73 + />
  74 + </TouchableWithoutFeedback>
  75 + </View>
  76 + );
  77 + }
78 render() { 78 render() {
79 79
80 return ( 80 return (
81 - <View style={styles.container}>  
82 - <Image  
83 - style={styles.logo}  
84 - source={require('../images/logo@2x.png')}  
85 - />  
86 - {this.renderUserText()}  
87 - {this.renderPwdText()}  
88 - <Button style={styles.button}  
89 - textStyle={styles.buttonText}  
90 - onPress={this.props.onLoginPress}> 81 +
  82 + <Image style={styles.container} source={require('../images/login@2x.png')} resizeMode={'cover'} >
  83 + <Image
  84 + style={styles.logo}
  85 + source={require('../images/logo@2x.png')}
  86 + />
  87 + {this.renderUserText()}
  88 + {this.renderPwdText()}
  89 + <Button style={styles.button}
  90 + textStyle={styles.buttonText}
  91 + onPress={this.props.onLoginPress}>
91 登录 92 登录
92 </Button> 93 </Button>
93 - </View> 94 + </Image>
94 ); 95 );
95 } 96 }
96 } 97 }
@@ -98,6 +99,7 @@ export default class Login extends Component { @@ -98,6 +99,7 @@ export default class Login extends Component {
98 let {height, width} = Dimensions.get('window'); 99 let {height, width} = Dimensions.get('window');
99 let textPaddingTop = height * 7 / 10; 100 let textPaddingTop = height * 7 / 10;
100 let buttonMargin = (width - 320) / 2; 101 let buttonMargin = (width - 320) / 2;
  102 +let inputWidth = width-40;
101 var styles = StyleSheet.create({ 103 var styles = StyleSheet.create({
102 container:{ 104 container:{
103 flex: 1, 105 flex: 1,
@@ -106,45 +108,44 @@ var styles = StyleSheet.create({ @@ -106,45 +108,44 @@ var styles = StyleSheet.create({
106 justifyContent: 'center', 108 justifyContent: 'center',
107 width: width, 109 width: width,
108 height: height, 110 height: height,
109 - backgroundColor: 'gray'  
110 }, 111 },
111 textContainer:{ 112 textContainer:{
112 flexDirection: 'row', 113 flexDirection: 'row',
113 alignItems: 'center', 114 alignItems: 'center',
114 - justifyContent: 'center',  
115 - marginTop:13,  
116 - backgroundColor: '#7fffffff',  
117 - width:330, 115 + width:inputWidth,
118 height:40, 116 height:40,
  117 + justifyContent: 'center',
119 borderRadius:5, 118 borderRadius:5,
  119 + backgroundColor: 'gray',
  120 + marginBottom: 10,
120 }, 121 },
121 logo: { 122 logo: {
122 width:256, 123 width:256,
123 height:40, 124 height:40,
124 - marginBottom: 10, 125 + marginBottom: 40,
125 }, 126 },
126 username: { 127 username: {
127 flex: 1, 128 flex: 1,
128 height:40, 129 height:40,
129 paddingLeft:10, 130 paddingLeft:10,
130 - borderColor: 'gray',  
131 - borderWidth: 1 131 +
  132 +
132 }, 133 },
133 pwd: { 134 pwd: {
134 flex: 1, 135 flex: 1,
135 paddingLeft:10, 136 paddingLeft:10,
136 - borderColor: 'gray',  
137 - borderWidth: 1 137 +
138 }, 138 },
139 button: { 139 button: {
140 - marginLeft: buttonMargin,  
141 - marginRight: buttonMargin,  
142 - marginTop: 40,  
143 - backgroundColor: '#7fffffff', 140 + marginLeft: 20,
  141 + marginRight: 20,
  142 + backgroundColor: '#ffffff',
  143 + opacity:0.5,
  144 + borderWidth:0,
144 borderRadius:5, 145 borderRadius:5,
145 }, 146 },
146 buttonText: { 147 buttonText: {
147 - color: '#ffffff', 148 + color: 'black',
148 fontSize: 18, 149 fontSize: 18,
149 }, 150 },
150 buttonDelete: { 151 buttonDelete: {
@@ -90,21 +90,20 @@ var styles = StyleSheet.create({ @@ -90,21 +90,20 @@ var styles = StyleSheet.create({
90 flexDirection: 'row', 90 flexDirection: 'row',
91 justifyContent: 'center', 91 justifyContent: 'center',
92 alignItems: 'center', 92 alignItems: 'center',
93 - backgroundColor: 'white' 93 + backgroundColor: 'white',
94 }, 94 },
95 text:{ 95 text:{
96 flex:1, 96 flex:1,
97 - marginLeft: buttonMargin,  
98 - marginRight: buttonMargin,  
99 color:'black', 97 color:'black',
100 - 98 + marginLeft: 10,
101 }, 99 },
102 button: { 100 button: {
103 - marginLeft: buttonMargin,  
104 - marginRight: buttonMargin, 101 + marginLeft: 20,
  102 + marginRight: 20,
105 marginTop: 20, 103 marginTop: 20,
106 backgroundColor: '#d0021b', 104 backgroundColor: '#d0021b',
107 borderRadius:5, 105 borderRadius:5,
  106 + borderWidth:0,
108 }, 107 },
109 buttonText: { 108 buttonText: {
110 color: '#ffffff', 109 color: '#ffffff',
@@ -107,8 +107,7 @@ var styles = StyleSheet.create({ @@ -107,8 +107,7 @@ var styles = StyleSheet.create({
107 }, 107 },
108 text:{ 108 text:{
109 flex:1, 109 flex:1,
110 - marginLeft: buttonMargin,  
111 - marginRight: buttonMargin, 110 + marginLeft: 10,
112 color:'black', 111 color:'black',
113 }, 112 },
114 pwd: { 113 pwd: {
@@ -117,11 +116,12 @@ var styles = StyleSheet.create({ @@ -117,11 +116,12 @@ var styles = StyleSheet.create({
117 textAlignVertical:'center', 116 textAlignVertical:'center',
118 }, 117 },
119 button: { 118 button: {
120 - marginLeft: buttonMargin,  
121 - marginRight: buttonMargin, 119 + marginLeft: 20,
  120 + marginRight: 20,
122 marginTop: 20, 121 marginTop: 20,
123 backgroundColor: '#d0021b', 122 backgroundColor: '#d0021b',
124 borderRadius:5, 123 borderRadius:5,
  124 + borderWidth:0,
125 }, 125 },
126 buttonText: { 126 buttonText: {
127 color: '#ffffff', 127 color: '#ffffff',
@@ -178,7 +178,7 @@ export default class NavBar extends React.Component { @@ -178,7 +178,7 @@ export default class NavBar extends React.Component {
178 if (CONFIG.sceneKey.user === sceneKey) { 178 if (CONFIG.sceneKey.user === sceneKey) {
179 return ( 179 return (
180 <View style={styles.userInfoContainer} > 180 <View style={styles.userInfoContainer} >
181 - <Text style={styles.userInfoTitle} onPress={() => {console.log('title pressed');}}>vans旗舰店</Text> 181 + <Text style={styles.userInfoTitle} onPress={() => {Actions.Logout();}}>vans旗舰店</Text>
182 <Image source={require('../images/white.png')} style={styles.whiteArrow}/> 182 <Image source={require('../images/white.png')} style={styles.whiteArrow}/>
183 </View> 183 </View>
184 184
@@ -6,8 +6,6 @@ @@ -6,8 +6,6 @@
6 */ 6 */
7 'use strict'; 7 'use strict';
8 8
9 -import CONFIG from '../../constants/config';  
10 -  
11 /** 9 /**
12 * ## Imports 10 * ## Imports
13 * 11 *
@@ -21,6 +19,7 @@ const { @@ -21,6 +19,7 @@ const {
21 19
22 import {Actions} from 'react-native-router-flux'; 20 import {Actions} from 'react-native-router-flux';
23 import store from 'react-native-simple-store'; 21 import store from 'react-native-simple-store';
  22 +import CONFIG from '../../constants/config';
24 23
25 /** 24 /**
26 * ## check guide has displayed or not 25 * ## check guide has displayed or not
@@ -31,14 +30,24 @@ export function getGuideDisplayState() { @@ -31,14 +30,24 @@ export function getGuideDisplayState() {
31 return dispatch => { 30 return dispatch => {
32 store.get(CONFIG.storeKey.GUIDE_STATE_KEY) 31 store.get(CONFIG.storeKey.GUIDE_STATE_KEY)
33 .then((state) => { 32 .then((state) => {
34 - if (state && state.isDisplay) {  
35 - Actions.Drawer(); 33 + if (state) {
  34 + store.get(CONFIG.storeKey.SESSION_TOKEN_KEY)
  35 + .then((state) => {
  36 + if (state) {
  37 + Actions.Drawer();
  38 + } else {
  39 + Actions.Login();
  40 + }
  41 + })
  42 + .catch(error => {
  43 + Actions.Login();
  44 + });
36 } else { 45 } else {
37 Actions.Guide(); 46 Actions.Guide();
38 } 47 }
39 }) 48 })
40 .catch(error => { 49 .catch(error => {
41 - Actions.Drawer(); 50 + Actions.Guide();
42 }); 51 });
43 } 52 }
44 } 53 }
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 import {Actions} from 'react-native-router-flux'; 9 import {Actions} from 'react-native-router-flux';
10 import AppAuthToken from '../../services/AppAuthToken'; 10 import AppAuthToken from '../../services/AppAuthToken';
11 import UserService from '../../services/UserService'; 11 import UserService from '../../services/UserService';
  12 +import {Linking} from 'react-native';
12 13
13 const { 14 const {
14 15
@@ -52,14 +53,13 @@ const { @@ -52,14 +53,13 @@ const {
52 export function userItemsPressed(item) { 53 export function userItemsPressed(item) {
53 switch (item.index) { 54 switch (item.index) {
54 case 0: 55 case 0:
55 - console.log('index0'); 56 + Linking.openURL('tel:025-87781000');
56 return { 57 return {
57 type: PHONE_CALL, 58 type: PHONE_CALL,
58 59
59 }; 60 };
60 case 1: 61 case 1:
61 - // Actions.AboutUs();  
62 - Actions.Logout(); 62 + Actions.AboutUs();
63 return { 63 return {
64 type: ABOUT_US, 64 type: ABOUT_US,
65 }; 65 };
@@ -133,7 +133,9 @@ export function pwdDisplay(ishow) { @@ -133,7 +133,9 @@ export function pwdDisplay(ishow) {
133 } 133 }
134 134
135 export function logout() { 135 export function logout() {
136 - 136 + new AppAuthToken().deleteSessionToken();
  137 + Actions.pop();
  138 + Actions.Login();
137 return { 139 return {
138 type: LOGOUT_REQUEST 140 type: LOGOUT_REQUEST
139 }; 141 };
@@ -177,15 +179,10 @@ export function pwdModifySubmit() { @@ -177,15 +179,10 @@ export function pwdModifySubmit() {
177 } 179 }
178 180
179 181
180 -  
181 -  
182 export function login(account, password) { 182 export function login(account, password) {
183 return dispatch => { 183 return dispatch => {
184 dispatch(loginRequest()); 184 dispatch(loginRequest());
185 - return new UserService().login({  
186 - account: account,  
187 - password: password  
188 - }) 185 + return new UserService().login(account,password)
189 .then(function (json) { 186 .then(function (json) {
190 console.log(json); 187 console.log(json);
191 return saveSessionToken(json) 188 return saveSessionToken(json)
@@ -195,10 +192,9 @@ export function login(account, password) { @@ -195,10 +192,9 @@ export function login(account, password) {
195 }); 192 });
196 }) 193 })
197 .catch((error) => { 194 .catch((error) => {
  195 + Actions.Drawer();
198 console.error(error); 196 console.error(error);
199 dispatch(loginFailure(error)); 197 dispatch(loginFailure(error));
200 - //test  
201 - Actions.Drawer();  
202 }); 198 });
203 }; 199 };
204 200
@@ -73,7 +73,6 @@ export default class Request { @@ -73,7 +73,6 @@ export default class Request {
73 body: opts.body, 73 body: opts.body,
74 timeout: opts.timeout | 0, 74 timeout: opts.timeout | 0,
75 }); 75 });
76 -  
77 let data = await this._parseResponse(response); 76 let data = await this._parseResponse(response);
78 return data; 77 return data;
79 78
@@ -87,7 +86,6 @@ export default class Request { @@ -87,7 +86,6 @@ export default class Request {
87 let res = JSON.parse(response._bodyInit); 86 let res = JSON.parse(response._bodyInit);
88 throw(res); 87 throw(res);
89 } 88 }
90 -  
91 let json = await response.json(); 89 let json = await response.json();
92 if (json.code == 200) { 90 if (json.code == 200) {
93 return json.data; 91 return json.data;
@@ -2,7 +2,6 @@ @@ -2,7 +2,6 @@
2 2
3 import Request from './Request'; 3 import Request from './Request';
4 4
5 -  
6 export default class UserService { 5 export default class UserService {
7 6
8 constructor () { 7 constructor () {