罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
ae94c396 1 parent 4d75d3c5

我的 静态页面

Inline Side-by-side
Showing 2 changed files with 205 additions and 99 deletions
@@ -43,7 +43,7 @@ export default class Login extends Component { @@ -43,7 +43,7 @@ export default class Login extends Component {
43 _that.setState({ 43 _that.setState({
44 IS_LOGIN: result 44 IS_LOGIN: result
45 }); 45 });
46 - console.log("Login页面的AsyncStorage", result); 46 + // console.log("Login页面的AsyncStorage", result);
47 }); 47 });
48 } 48 }
49 componentDidMount() { 49 componentDidMount() {
@@ -9,7 +9,8 @@ import { @@ -9,7 +9,8 @@ import {
9 Alert, 9 Alert,
10 AlertIOS, 10 AlertIOS,
11 AsyncStorage, 11 AsyncStorage,
12 - Button 12 + Button,
  13 + ScrollView
13 } from "react-native"; 14 } from "react-native";
14 import { StackNavigator, TabNavigator } from "react-navigation"; 15 import { StackNavigator, TabNavigator } from "react-navigation";
15 16
@@ -20,7 +21,9 @@ export default class Mine extends Component { @@ -20,7 +21,9 @@ export default class Mine extends Component {
20 IS_LOGIN: "", 21 IS_LOGIN: "",
21 USER_ID: "", 22 USER_ID: "",
22 NICKNAME: "", 23 NICKNAME: "",
23 - PROFESSION: "" 24 + PROFESSION: "",
  25 + PHONT: "",
  26 + COMPONY: ""
24 }; 27 };
25 this.saveResponse1 = this.saveResponse1.bind(this); 28 this.saveResponse1 = this.saveResponse1.bind(this);
26 this.saveResponse2 = this.saveResponse2.bind(this); 29 this.saveResponse2 = this.saveResponse2.bind(this);
@@ -99,10 +102,10 @@ export default class Mine extends Component { @@ -99,10 +102,10 @@ export default class Mine extends Component {
99 if (respJson.enmsg != "ok") { 102 if (respJson.enmsg != "ok") {
100 alert(respJson.cnmsg); 103 alert(respJson.cnmsg);
101 } else { 104 } else {
102 - AsyncStorage.setItem("NICKNAME",d).then(() => { 105 + AsyncStorage.setItem("NICKNAME", d).then(() => {
103 console.log("保存修改成功"); 106 console.log("保存修改成功");
104 that.setState({ NICKNAME: d }); 107 that.setState({ NICKNAME: d });
105 - }) 108 + });
106 } 109 }
107 }) 110 })
108 .catch(err => console.error(err)); 111 .catch(err => console.error(err));
@@ -136,116 +139,212 @@ export default class Mine extends Component { @@ -136,116 +139,212 @@ export default class Mine extends Component {
136 if (respJson.enmsg != "ok") { 139 if (respJson.enmsg != "ok") {
137 Alert.alert(respJson.cnmsg); 140 Alert.alert(respJson.cnmsg);
138 } else { 141 } else {
139 - AsyncStorage.setItem("PROFESSION",d).then(() => { 142 + AsyncStorage.setItem("PROFESSION", d).then(() => {
140 console.log("保存修改成功"); 143 console.log("保存修改成功");
141 that.setState({ PROFESSION: d }); 144 that.setState({ PROFESSION: d });
142 - }) 145 + });
143 } 146 }
144 }) 147 })
145 .catch(err => console.error(err)); 148 .catch(err => console.error(err));
146 } 149 }
  150 +
147 render() { 151 render() {
148 const { navigate } = this.props.navigation; 152 const { navigate } = this.props.navigation;
149 return ( 153 return (
150 <View style={styles.container}> 154 <View style={styles.container}>
151 - {/* 头部头像 */} 155 + <ScrollView>
152 - <View style={styles.header}> 156 + {/* 头部头像 */}
153 - {this.state.IS_LOGIN == "yes" ? ( 157 + <View style={styles.header}>
154 - <Image 158 + {this.state.IS_LOGIN == "yes" ? (
155 - source={require("../../assets/Mine/iconpic1.png")} 159 + <Image
156 - style={styles.mineIcon} 160 + source={require("../../assets/Mine/iconpic1.png")}
157 - /> 161 + style={styles.mineIcon}
158 - ) : ( 162 + />
159 - <Image 163 + ) : (
160 - source={require("../../assets/Mine/iconpic_gray.png")} 164 + <Image
161 - style={styles.mineIcon} 165 + source={require("../../assets/Mine/iconpic_gray.png")}
162 - /> 166 + style={styles.mineIcon}
163 - )} 167 + />
164 - </View> 168 + )}
  169 + {this.state.IS_LOGIN == "yes" ? null : (
  170 + <Text style={styles.headerText}>登录可享更多特权</Text>
  171 + )}
  172 + </View>
165 173
166 - {/* 设置昵称和职业 */} 174 + {/* 设置昵称和职业 */}
167 - <View style={styles.midContainer}> 175 + {this.state.IS_LOGIN == "yes" ? (
168 - {/* 更改昵称 */} 176 + <View style={styles.midContainer}>
169 - <TouchableOpacity 177 + {/* 更改昵称 */}
170 - style={styles.itemContainer} 178 + <TouchableOpacity
171 - onPress={() => { 179 + style={styles.itemContainer}
172 - if (this.state.IS_LOGIN == "yes") { 180 + onPress={() => {
173 - AlertIOS.prompt("更改昵称", null, this.saveResponse1); 181 + if (this.state.IS_LOGIN == "yes") {
174 - } else { 182 + AlertIOS.prompt("更改昵称", null, this.saveResponse1);
175 - Alert.alert("请先登录账号") 183 + } else {
176 - } 184 + Alert.alert("请先登录账号");
177 - }} 185 + }
178 - > 186 + }}
179 - <View style={styles.itemLeft}> 187 + >
180 - <Text style={styles.leftTitle}>昵称</Text> 188 + <View style={styles.itemLeft}>
  189 + <Text style={styles.leftTitle}>昵称</Text>
  190 + </View>
  191 + <View style={styles.itemRight}>
  192 + {this.state.IS_LOGIN === "yes" ? (
  193 + <Text style={styles.itemRightContent}>
  194 + {this.state.NICKNAME}
  195 + </Text>
  196 + ) : null}
  197 + <Image
  198 + style={styles.itemRightImg}
  199 + source={require("../../assets/Mine/rightArrow_gray.png")}
  200 + />
  201 + </View>
  202 + </TouchableOpacity>
  203 + {/* 更改职业 */}
  204 + <TouchableOpacity
  205 + style={styles.itemContainer}
  206 + onPress={() => {
  207 + if (this.state.IS_LOGIN == "yes") {
  208 + AlertIOS.prompt("更改职业", null, this.saveResponse2);
  209 + } else {
  210 + Alert.alert("请先登录账号");
  211 + }
  212 + }}
  213 + >
  214 + <View style={styles.itemLeft}>
  215 + <Text style={styles.leftTitle}>职业</Text>
  216 + </View>
  217 + <View style={styles.itemRight}>
  218 + {this.state.IS_LOGIN === "yes" ? (
  219 + <Text style={styles.itemRightContent}>
  220 + {this.state.PROFESSION}
  221 + </Text>
  222 + ) : null}
  223 + <Image
  224 + style={styles.itemRightImg}
  225 + source={require("../../assets/Mine/rightArrow_gray.png")}
  226 + />
  227 + </View>
  228 + </TouchableOpacity>
  229 + {/* 公司 */}
  230 + <TouchableOpacity
  231 + style={styles.itemContainer}
  232 + onPress={() => {
  233 + if (this.state.IS_LOGIN == "yes") {
  234 + AlertIOS.prompt("更改手机", null, this.saveResponse2);
  235 + } else {
  236 + Alert.alert("请先登录账号");
  237 + }
  238 + }}
  239 + >
  240 + <View style={styles.itemLeft}>
  241 + <Text style={styles.leftTitle}>手机</Text>
  242 + </View>
  243 + <View style={styles.itemRight}>
  244 + {this.state.IS_LOGIN === "yes" ? (
  245 + <Text style={styles.itemRightContent}>
  246 + {this.state.PHONT}
  247 + </Text>
  248 + ) : null}
  249 + <Image
  250 + style={styles.itemRightImg}
  251 + source={require("../../assets/Mine/rightArrow_gray.png")}
  252 + />
  253 + </View>
  254 + </TouchableOpacity>
  255 + {/* 手机 */}
  256 + <TouchableOpacity
  257 + style={styles.itemContainer}
  258 + onPress={() => {
  259 + if (this.state.IS_LOGIN == "yes") {
  260 + AlertIOS.prompt("更改公司", null, this.saveResponse2);
  261 + } else {
  262 + Alert.alert("请先登录账号");
  263 + }
  264 + }}
  265 + >
  266 + <View style={styles.itemLeft}>
  267 + <Text style={styles.leftTitle}>公司</Text>
  268 + </View>
  269 + <View style={styles.itemRight}>
  270 + {this.state.IS_LOGIN === "yes" ? (
  271 + <Text style={styles.itemRightContent}>
  272 + {this.state.COMPONY}
  273 + </Text>
  274 + ) : null}
  275 + <Image
  276 + style={styles.itemRightImg}
  277 + source={require("../../assets/Mine/rightArrow_gray.png")}
  278 + />
  279 + </View>
  280 + </TouchableOpacity>
181 </View> 281 </View>
182 - <View style={styles.itemRight}> 282 + ) : null}
183 - {this.state.IS_LOGIN === "yes" ? ( 283 +
  284 + <View style={styles.midContainer}>
  285 + <TouchableOpacity style={styles.itemContainer}>
  286 + <View style={styles.itemLeft}>
  287 + <Text style={styles.leftTitle}>评价我们</Text>
  288 + </View>
  289 + <View style={styles.itemRight}>
  290 + <Image
  291 + style={styles.itemRightImg}
  292 + source={require("../../assets/Mine/rightArrow_gray.png")}
  293 + />
  294 + </View>
  295 + </TouchableOpacity>
  296 + <TouchableOpacity style={styles.itemContainer}>
  297 + <View style={styles.itemLeft}>
  298 + <Text style={styles.leftTitle}>客服电话</Text>
  299 + </View>
  300 + <View style={styles.itemRight}>
  301 + <Text style={styles.itemRightContent}>4001-608876</Text>
  302 + <Image
  303 + style={styles.itemRightImg}
  304 + source={require("../../assets/Mine/rightArrow_gray.png")}
  305 + />
  306 + </View>
  307 + </TouchableOpacity>
  308 + </View>
  309 +
  310 + <View style={styles.midContainer}>
  311 + <TouchableOpacity style={styles.itemContainer}>
  312 + <View style={styles.itemLeft}>
  313 + <Text style={styles.leftTitle}>当前版本</Text>
  314 + </View>
  315 + <View style={styles.itemRight}>
184 <Text style={styles.itemRightContent}> 316 <Text style={styles.itemRightContent}>
185 - {this.state.NICKNAME} 317 + V1.0.0
186 </Text> 318 </Text>
187 - ) : null} 319 + </View>
188 - <Image 320 + </TouchableOpacity>
189 - style={styles.itemRightImg} 321 + </View>
190 - source={require("../../assets/Mine/rightArrow_gray.png")} 322 +
191 - /> 323 + {/* 登录 */}
192 - </View>  
193 - </TouchableOpacity>  
194 - {/* 更改职业 */}  
195 <TouchableOpacity 324 <TouchableOpacity
196 - style={styles.itemContainer} 325 + style={styles.loginOut}
  326 + onLogin={this.props.onLogin}
197 onPress={() => { 327 onPress={() => {
198 - if (this.state.IS_LOGIN == "yes") { 328 + this.state.IS_LOGIN == "yes"
199 - AlertIOS.prompt("更改职业", null, this.saveResponse2); 329 + ? this.signOut()
200 - } else { 330 + : navigate("Login", {
201 - Alert.alert("请先登录账号") 331 + refreshCallback: data => {
202 - } 332 + console.log("refreshCallback参数", data);
  333 + this.setState({
  334 + IS_LOGIN: data.IS_LOGIN,
  335 + USER_ID: data.USER_ID,
  336 + NICKNAME: data.NICKNAME,
  337 + PROFESSION: data.PROFESSION
  338 + });
  339 + }
  340 + });
203 }} 341 }}
204 > 342 >
205 - <View style={styles.itemLeft}> 343 + <Text style={styles.loginOutText}>
206 - <Text style={styles.leftTitle}>职业</Text> 344 + {this.state.IS_LOGIN == "yes" ? "退出登录" : "登录"}
207 - </View> 345 + </Text>
208 - <View style={styles.itemRight}>  
209 - <Text style={styles.itemRightContent}>  
210 - {this.state.PROFESSION}  
211 - </Text>  
212 - {this.state.IS_LOGIN === "yes" ? (  
213 - <Text style={styles.itemRightContent}>  
214 - {this.state.identity}  
215 - </Text>  
216 - ) : null}  
217 - <Image  
218 - style={styles.itemRightImg}  
219 - source={require("../../assets/Mine/rightArrow_gray.png")}  
220 - />  
221 - </View>  
222 </TouchableOpacity> 346 </TouchableOpacity>
223 - </View> 347 + </ScrollView>
224 -  
225 - {/* 登录 */}  
226 - <TouchableOpacity  
227 - style={styles.loginOut}  
228 - onLogin={this.props.onLogin}  
229 - onPress={() => {  
230 - this.state.IS_LOGIN == "yes"  
231 - ? this.signOut()  
232 - : navigate("Login", {  
233 - refreshCallback: data => {  
234 - console.log("refreshCallback参数", data);  
235 - this.setState({  
236 - IS_LOGIN: data.IS_LOGIN,  
237 - USER_ID: data.USER_ID,  
238 - NICKNAME: data.NICKNAME,  
239 - PROFESSION: data.PROFESSION  
240 - });  
241 - }  
242 - });  
243 - }}  
244 - >  
245 - <Text style={styles.loginOutText}>  
246 - {this.state.IS_LOGIN == "yes" ? "退出登录" : "登录"}  
247 - </Text>  
248 - </TouchableOpacity>  
249 </View> 348 </View>
250 ); 349 );
251 } 350 }
@@ -266,6 +365,11 @@ const styles = StyleSheet.create({ @@ -266,6 +365,11 @@ const styles = StyleSheet.create({
266 alignItems: "center", 365 alignItems: "center",
267 marginBottom: 10 366 marginBottom: 10
268 }, 367 },
  368 + headerText: {
  369 + fontSize: 15,
  370 + color: "#fff",
  371 + marginLeft: 22
  372 + },
269 mineIcon: { 373 mineIcon: {
270 width: 86, 374 width: 86,
271 height: 86 375 height: 86
@@ -279,7 +383,9 @@ const styles = StyleSheet.create({ @@ -279,7 +383,9 @@ const styles = StyleSheet.create({
279 width: 14, 383 width: 14,
280 height: 14 384 height: 14
281 }, 385 },
282 - midContainer: {}, 386 + midContainer: {
  387 + marginBottom: 10
  388 + },
283 itemContainer: { 389 itemContainer: {
284 height: 46, 390 height: 46,
285 paddingLeft: 16, 391 paddingLeft: 16,
@@ -315,7 +421,7 @@ const styles = StyleSheet.create({ @@ -315,7 +421,7 @@ const styles = StyleSheet.create({
315 height: 14 421 height: 14
316 }, 422 },
317 loginOut: { 423 loginOut: {
318 - marginTop: 10, 424 + marginBottom: 10,
319 height: 46, 425 height: 46,
320 backgroundColor: "#fff", 426 backgroundColor: "#fff",
321 justifyContent: "center" 427 justifyContent: "center"
@@ -323,5 +429,5 @@ const styles = StyleSheet.create({ @@ -323,5 +429,5 @@ const styles = StyleSheet.create({
323 loginOutText: { 429 loginOutText: {
324 textAlign: "center", 430 textAlign: "center",
325 fontSize: 15 431 fontSize: 15
326 - }, 432 + }
327 }); 433 });