邓洁 : 修改个人信息接口对接

pages.json

@@ -172,17 +172,17 @@
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
+		}, {
+			"path": "pages/my/edit/edit",
+			"style": {
+				"navigationBarTitleText": "修改个人信息",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#339967",
+				"enablePullDownRefresh": false
+			}
+
 		}
-	    ,{
+	],
-            "path" : "pages/my/edit/edit",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "修改个人信息",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
 	"tabBar": {
 		"color": "#CCCCCC",
 		"borderStyle": "white",

pages/my/edit/edit.vue

@@ -1,69 +1,146 @@
 <template>
 	<view>
 		<view class="avatar">
-			<u-avatar @click="changeAvatar()" :src="Info.avatar"></u-avatar>
+			<u-avatar @click="changeAvatar()" size="140rpx" :src="Info.avatar"></u-avatar>
 		</view>
-		<view class="name-edit">
+		<!-- <view class="name-edit">
 			<text>用户名：</text>
-			<u-input border="surround"  v-model="Info.username"></u-input>
+			<u-input border="surround" v-model="Info.username"></u-input>
-		</view>
+		</view> -->
-		<view class="send">
+		<view class="info-name">
-			<u-button @click="editInfo(Info)" color="linear-gradient(to right, #E86262, #CC3333)">提交</u-button>
+			<u--form labelPosition="left" :model="Info">
+				<u-form-item label="修改昵称" prop="Info.username" borderBottom>
+					<u--input v-model="Info.username" border="none" placeholder="请输入您的昵称"
+						placeholderStyle="color: #CCCCCC;font-size: 26rpx;"></u--input>
+				</u-form-item>
+			</u--form>
 		</view>
+		<view style="height: 100rpx;"></view>
+		<u-button @click="editInfo(Info)" color="#339967">提交</u-button>
 	</view>
 </template>
 
 <script>
 	export default {
-		data(){
+		data() {
 			return {
-				Info:{
+				Info: {
-					avatar:[],
+					avatar: [],
-					username:''
+					username: '',
+					avatarUrl: ''
 				}
 			}
 		},
 		methods: {
-			changeAvatar(){
+			//获取头像昵称
+			getUserInfo() {
+				this.$api.getUser().then(res => {
+					const data = res.data.data
+					console.log('头像昵称', res);
+					if (data) {
+						this.avatar = this.$api.imgUrl + data.avatar
+						this.avatarUrl = '/' + data.avatar
+						this.Info.username = data.nickname
+					}
+				}).finally(_ => {})
+			},
+			updatePromise(filePath) {
+				return new Promise((resolve, reject) => {
+					const token = uni.getStorageSync('loginToken')
+					const a = uni.uploadFile({
+						url: this.$api.uploadImgUrl,
+						filePath: filePath,
+						name: 'file',
+						header: {
+							"Content-Type": "multipart/form-data",
+							'Authorization': token
+						},
+						success: (res) => {
+							resolve(JSON.parse(res.data).data.url)
+						}
+					});
+				})
+			},
+			changeAvatar() {
 				uni.chooseImage({
+					count: 1, //默认选择1张图片
+					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
 					success: (chooseImageRes) => {
-						this.Info.avatar = chooseImageRes.tempFilePaths.toString() ;
+						this.Info.avatar = chooseImageRes.tempFilePaths[0] //更新本地浏览头像图片
+						if (chooseImageRes.tempFilePaths[0]) {
+							const result = this.updatePromise(chooseImageRes.tempFilePaths[0]) //上传图片
+							result.then(value => {
+								this.avatarUrl = '/' + value
+							})
+						}
 					}
 				});
 			},
-			editInfo(data){
+			editInfo() {
-				let resdata=JSON.stringify(data);  
+				// let resdata = JSON.stringify(data);
-				this.$api.editPersonInfo(resdata).then(res => {
+				// this.$api.editPersonInfo(resdata).then(res => {
-				console.log(resdata);
+				// 	console.log(resdata);
-				console.log(res)
+				// 	console.log(res)
-			})
+				// })
+				this.$api.editPersonInfo({
+					nickname: this.Info.username,
+					avatar: this.avatarUrl
+				}).then(res => {
+					console.log('修改头像昵称==', res);
+					this.$toast.success(res.data.msg)
+					if (res.data.code == 1) {
+						uni.reLaunch({
+							url: '/pages/my/my'
+						})
+					}
+				}).finally(_ => {})
 			},
 		},
 		onLoad() {
 			let that = this
 			this.$data.Info.username = wx.getStorageSync('nickname')
 			this.$data.Info.avatar = wx.getStorageSync('avatar')
-			
+			this.getUserInfo()
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
-	.avatar{
+	page {
-		width: 100%;
+		background-color: #f4f4f4;
-		height: 200rpx;
+	}
+
+	.avatar {
+		margin: 60rpx 0;
+		/* width: 100%; */
+		/* height: 200rpx; */
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
-	.name-edit{
+
+	.name-edit {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 	}
-	.send{
-		width: 50%;
-		transform: translateX(50%) translateY(50%);
 
+	.info-name {
+		.u-form-item {
+			background-color: #fff;
+		}
+
+		.u-form-item__body__left {
+			width: 80px !important;
+			margin-left: 20rpx;
+		}
 	}
-</style>
+
+
+	.u-button {
+		width: 644rpx !important;
+		height: 86rpx !important;
+		background: #0EBB5B;
+		border-radius: 20rpx !important;
+	}
+</style>

pages/my/my.vue

@@ -7,8 +7,10 @@
 					<u-avatar :src="src"></u-avatar>
 				</view>
 				<view class="username">{{username}}</view>
-				<view class="account">账号:{{account}} <u-icon name="edit-pen" class="edit-icon" size="20" @click="toEdit"></u-icon></view>
+				<view class="account">账号:{{account}}
-				
+					<u-icon name="edit-pen" class="edit-icon" size="20" color="#fff" @click="toEdit"></u-icon>
+				</view>
+
 			</view>
 			<view class="publish">
 				<u-cell-group>
@@ -43,8 +45,8 @@
 		data() {
 			return {
 				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
-				account: '',
+				account: '123',
-				username: '',
+				username: '用户名',
 				isLoad: true
 			}
 		},
@@ -54,8 +56,9 @@
 				return
 			}
 			this.isLoad = true
-			this.$data.account = wx.getStorageSync('account')
+			// this.$data.account = wx.getStorageSync('account')
-			this.$data.username = wx.getStorageSync('nickname')
+			// this.$data.username = wx.getStorageSync('nickname')
+			this.getInfo()
 		},
 		methods: {
 			reOnLoad() {
@@ -86,17 +89,22 @@
 					url: '/pages/Partnerships/Partnerships'
 				})
 			},
-			toEdit(){
+			toEdit() {
 				uni.navigateTo({
-					url:'/pages/my/edit/edit'
+					url: '/pages/my/edit/edit'
+				})
+			},
+			//---------页面调用接口示例------------
+			getInfo() {
+				this.$api.getUser().then(res => {
+					console.log('userInfo', res);
+					var data = res.data.data
+					if (data) {
+						this.src = uni.getStorageSync('img_url') + data.avatar
+						this.username = data.nickname
+					}
 				})
 			}
-			//---------页面调用接口示例------------
-			// getInfo() {
-			// 	this.$api.getUserInfo().then(res => {
-			// 		console.log('userInfo', res);
-			// 	})
-			// }
 		}
 	}
 </script>
@@ -134,9 +142,8 @@
 			font-weight: 1rpx;
 			display: flex;
 		}
-		.edit-icon{
+
-			
+		.edit-icon {}
-		}
 
 	}
 </style>

service/request.js

@@ -130,7 +130,7 @@ const apiService = {
 	serverHost,
 	imgUrl: 'https://spsp.feashow.com/',
 	key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB',
-	uploadImgUrl: serverHost + `/upload/image/`,
+	uploadImgUrl: serverHost + '/upload/image/',
 	//登录接口
 	login(data) {
 		const url = '/login/mnpLogin'
@@ -211,27 +211,34 @@ const apiService = {
 			resolve(service.get(url))
 		})
 	},
+	//获取个人信息
+	getUser() {
+		const url = '/center/userinfo'
+		return new Promise((resolve, reject) => {
+			resolve(service.get(url))
+		})
+	},
 	//修改个人信息
-	editPersonInfo(data){
+	editPersonInfo(data) {
 		const url = `center/userupdate`
-		return new Promise((resolve,reject) => {
+		return new Promise((resolve, reject) => {
-			resolve(service.putWithFormData(url,data))
+			resolve(service.post(url, data))
 		})
 	},
 	//获取我的匹配
-	getMyMatch(){
+	getMyMatch() {
 		const url = `/center/match/`
-		return new Promise((resolve,reject) => {
+		return new Promise((resolve, reject) => {
 			resolve(service.get(url))
 		})
 	},
 	//获取行业和业态
-	getClassList(pid){
+	getClassList(pid) {
 		const url = `/home/classlist/?pid=${pid}`
-		return new Promise((resolve,reject) => {
+		return new Promise((resolve, reject) => {
 			resolve(service.post(url))
 		})
-	}
+	},
 }
 export {
 	apiService,