1.提交个人信息新图片

2.个人信息绑定微信功能

pages/components/PersonalInfo.js

@@ -33,6 +33,7 @@ import PersonalInfoDialog from './PersonalInfoDialog';
 import { NavigationActions, StackActions } from 'react-navigation';
 import asyncStorage from '../utils/asyncStorage';
 import user from '../services/user';
+import wechat from '../utils/wechat';
 type Props = {};
 
 export default class PersonalInfo extends BasePage {
@@ -47,7 +48,11 @@ export default class PersonalInfo extends BasePage {
 		birthday_month: 0,
 		birthday_day: 0,
 		birthday_time: 0,
-		photo_uri: require('../images/userInfo/default_photo.png')
+		photo_uri: require('../images/userInfo/default_photo.png'),
+		phone: '',
+		phone_bind_color: '',
+		wechat_nickName: '',
+		wechat_bind_color: ''
 	};
 
 	render() {
@@ -88,7 +93,7 @@ export default class PersonalInfo extends BasePage {
 						<ImageBackground
 							source={require('../images/userInfo/top.png')}
 							style={{
-								flex: 2.8,
+								flex: 3,
 								width: '100%',
 								backgroundColor: '#F0F1F5',
 								height: '75%'
@@ -104,7 +109,7 @@ export default class PersonalInfo extends BasePage {
 								}}
 							>
 								<CourseTitle
-									style={{ flex: 4 }}
+									style={{ flex: 5 }}
 									width={this.getWindowWidth()}
 									title="个人信息"
 									lefttype={2}
@@ -115,13 +120,14 @@ export default class PersonalInfo extends BasePage {
 
 								<TouchableOpacity
 									style={{
-										flex: 1,
+										flex: 1.3,
 										backgroundColor: 'white',
 										width: '90%',
 										bottom: 0,
 										alignItems: 'center',
-										justifyContent: 'center',
-										borderRadius: 20,
+										justifyContent: 'flex-end',
+										bottom: -30,
+										borderRadius: 10,
 										overflow: 'hidden'
 									}}
 									activeOpacity={1}
@@ -180,13 +186,14 @@ export default class PersonalInfo extends BasePage {
 										</View>
 									</View>
 								</TouchableOpacity>
+								<View style={{ flex: 0.5 }} />
 							</View>
 						</ImageBackground>
-						<View style={{ flex: 0.5, backgroundColor: '#F0F1F5' }} />
+						<View style={{ flex: 0.2 }} />
 						<View
 							style={{
 								width: '100%',
-								flex: 4.3,
+								flex: 4,
 								alignItems: 'center',
 								backgroundColor: '#F0F1F5'
 							}}
@@ -462,25 +469,159 @@ export default class PersonalInfo extends BasePage {
 								</View>
 							</View>
 						</View>
+						<View style={{ flex: 0.3, backgroundColor: '#F0F1F5' }} />
+						<View
+							style={{
+								flex: 1.5,
+								backgroundColor: '#F0F1F5',
+								alignItems: 'center',
+								justifyContent: 'center'
+							}}
+						>
+							<View
+								style={{
+									width: '90%',
+									alignItems: 'center',
+									justifyContent: 'center',
+									height: '100%',
+									overflow: 'hidden',
+									borderRadius: 10
+								}}
+							>
+								<TouchableOpacity
+									style={{
+										flex: 1,
+										width: '100%',
+										flexDirection: 'row',
+										backgroundColor: 'white',
+										marginVertical: 1
+									}}
+									activeOpacity={1}
+									onPress={() => this.arrowpress(6)}
+								>
+									<View
+										style={{
+											flex: 2,
+											alignItems: 'center',
+											justifyContent: 'center'
+										}}
+									>
+										{this.choseheadericon(6)}
+									</View>
 
+									<Text style={styles.item_text}>我的手机号</Text>
+									<View
+										style={{
+											flex: 5,
+											alignItems: 'flex-end'
+										}}
+									>
+										<Text
+											style={{
+												flex: 1,
+												fontSize: 15,
+												textAlignVertical: 'center',
+												color: this.state.phone_bind_color
+											}}
+											numberOfLines={1}
+											ellipsizeMode={'tail'}
+										>
+											{this.state.phone}
+										</Text>
+									</View>
+									<View
+										style={{
+											flex: 1.1,
+											alignItems: 'center',
+											justifyContent: 'center'
+										}}
+									>
+										{this.getArraowImg(6)}
+									</View>
+								</TouchableOpacity>
+								<TouchableOpacity
+									style={{
+										flex: 1,
+										width: '100%',
+										flexDirection: 'row',
+										backgroundColor: 'white',
+										marginVertical: 1
+									}}
+									activeOpacity={1}
+									onPress={() => this.arrowpress(7)}
+								>
+									<View
+										style={{
+											flex: 2,
+											alignItems: 'center',
+											justifyContent: 'center'
+										}}
+									>
+										{this.choseheadericon(7)}
+									</View>
+
+									<Text style={styles.item_text}>我的微信</Text>
+									<View
+										style={{
+											flex: 5,
+											alignItems: 'flex-end'
+										}}
+									>
+										<Text
+											style={{
+												flex: 1,
+												fontSize: 15,
+												textAlignVertical: 'center',
+												color: this.state.wechat_bind_color
+											}}
+											numberOfLines={1}
+											ellipsizeMode={'tail'}
+										>
+											{this.state.wechat_nickName}
+										</Text>
+									</View>
+									<View
+										style={{
+											flex: 1.1,
+											alignItems: 'center',
+											justifyContent: 'center'
+										}}
+									>
+										{this.getArraowImg(4)}
+									</View>
+								</TouchableOpacity>
+							</View>
+						</View>
 						<View
 							style={{
 								width: '100%',
-								flex: 4,
+								flex: 2,
 								backgroundColor: '#F0F1F5',
 								flexDirection: 'column'
 							}}
 						>
-							<View style={{ flex: 2.5 }} />
-							<View style={{ flex: 2, flexDirection: 'row' }}>
-								<View style={{ flex: 1 }} />
+							<View
+								style={{
+									flex: 1,
+									flexDirection: 'row',
+									alignItems: 'center',
+									justifyContent: 'center'
+								}}
+							>
 								<View
 									style={{
-										flex: 7,
+										alignItems: 'center',
 										width: '100%',
-										height: '100%'
+										height: '100%',
+										backgroundColor: '#F0F1F5',
+										justifyContent: 'center'
 									}}
 								>
+									<View
+										style={{
+											flex: 1.5
+										}}
+									/>
 									<TouchableOpacity
 										activeOpacity={1}
 										style={{
@@ -515,11 +656,13 @@ export default class PersonalInfo extends BasePage {
 											</Text>
 										</ImageBackground>
 									</TouchableOpacity>
-									<View style={{ flex: 1 }} />
+									<View
+										style={{
+											flex: 1.5
+										}}
+									/>
 								</View>
-								<View style={{ flex: 1 }} />
 							</View>
-							<View style={{ flex: 0.8 }} />
 						</View>
 					</View>
 				</View>
@@ -538,6 +681,18 @@ export default class PersonalInfo extends BasePage {
 			birthday_day: day,
 			birthday_time: year + '年' + month + '月' + day + '日'
 		});
+		if (this.state.phone == null || this.state.phone === '') {
+			this.setState({
+				phone_bind_color: 'red',
+				phone: '未绑定'
+			});
+		}
+		if (this.state.phone == null || this.state.phone === '') {
+			this.setState({
+				wechat_bind_color: 'red',
+				wechat_nickName: '未绑定'
+			});
+		}
 	}
 
 	getArraowImg(type) {
@@ -551,7 +706,7 @@ export default class PersonalInfo extends BasePage {
 					resizeMode: 'contain',
 					justifyContent: 'center'
 				}}
-				onPress={() => this.arrowpress(type)}
+				//onPress={() => this.arrowpress(type)}
 			>
 				<Image
 					source={require('../images/userInfo/arrow.png')}
@@ -586,6 +741,12 @@ export default class PersonalInfo extends BasePage {
 			case 5:
 				headerpath = require('../images/userInfo/grade.png');
 				break;
+			case 6:
+				headerpath = require('../images/userInfo/phone.png');
+				break;
+			case 7:
+				headerpath = require('../images/userInfo/wechat.png');
+				break;
 		}
 		// alert(headerpath);
 		return (
@@ -624,6 +785,38 @@ export default class PersonalInfo extends BasePage {
 			case 5:
 				this.gradeselectionModal.setModalVisible(true);
 				break;
+			//手机号
+			case 6:
+				alert('手机号');
+				break;
+			//微信
+			case 7:
+				wechat.wechatLogin((result) => {
+					console.log('openid:' + result['openid']);
+					console.log('unionid:' + result['unionid']);
+					console.log('nickname:' + result['nickname']);
+					console.log('sex:' + result['sex']);
+					console.log('avatar:' + result['province'] + result['city']);
+					let opts = {
+						method: 'PUT',
+						body: {
+							openId: result['openid'],
+							unionId: result['unionid'],
+							avatar: result['province'] + result['city'],
+							sex: result['sex'],
+							nickName: result['nickname']
+						}
+					};
+					//接口不通
+					user.bind_wechat(opts).then((res) => {
+						console.log(res);
+						this.setState({
+							wechat_nickName: result['nickname'],
+							wechat_bind_color: 'rgba(113, 113, 113, 1)'
+						});
+					});
+				});
+				break;
 		}
 	}
 
@@ -685,7 +878,6 @@ export default class PersonalInfo extends BasePage {
 		};
 		user.update_UserInfo(opts).then((res) => {
 			console.log(res);
-			console.log('success');
 		});
 	}
 }

pages/services/user.js

@@ -1,10 +1,15 @@
-import APIConfig from "./api.js";
-import efunRequest from "../utils/efunRequest";
-import request from "../utils/request";
+import APIConfig from './api.js';
+import efunRequest from '../utils/efunRequest';
+import request from '../utils/request';
 
 export default class user {
-  static update_UserInfo(opts) {
-    console.log('opts',opts);
-    return request(APIConfig.getUserUrl(``), opts);
-  }
+	static update_UserInfo(opts) {
+		console.log('opts', opts);
+		return request(APIConfig.getUserUrl(``), opts);
+	}
+
+	static bind_wechat(opts) {
+		console.log('opts', opts);
+		return request(APIConfig.getUserUrl(`/wechatBind`), opts);
+	}
 }

pages/utils/wechat.js

@@ -19,8 +19,17 @@ export default class wechat {
 						object['code'] +
 						'&grant_type=authorization_code';
 					request(loginUrl).then((res) => {
-						console.log('code请求下一步返回结果：' + res['openid']);
-						callback(res['openid']);
+						// console.log('code请求下一步返回结果：' + res['openid']);
+						// callback(res);
+						var getUserUrl =
+							'https://api.weixin.qq.com/sns/userinfo?access_token=' +
+							res['access_token'] +
+							'&openid=' +
+							res['openid'];
+						console.log('getUserUrl:' + getUserUrl);
+						request(getUserUrl).then((user) => {
+							callback(user);
+						});
 					});
 				});
 			} else {
@@ -166,10 +175,14 @@ export default class wechat {
 
   //github:https://github.com/yorkie/react-native-wechat
   使用方法：
-  1.登录使用方法,返回openid
-    // wechat.wechatLogin((openid) => {
-		// 	alert(openid);
-		// });
+  1.登录使用方法,返回object
+ 		wechat.wechatLogin((user) => {
+					console.log('openid:' + user['openid']);
+					console.log('unionid:' + user['unionid']);
+					console.log('nickname:' + user['nickname']);
+					console.log('sex:' + user['sex']);
+					console.log('avatar:' + user['province'] + '--' + user['city']);
+				});
 	2.跳转小程序方法
 		wechat.toMiniProgram('gh_d81480f7a2fd', '');