修改个人信息

pages_mine/mine/updateUserInfo.vue

@@ -6,18 +6,19 @@
 		<!--主页面-->
 		<view class="frame">
 			<view class="headImage">
-
 				<view style="" class="key">头像</view>
-				<view style="" class="value" @click="chooseAndUpdateUserImage">
-					<image :src='form.headImage' style="width: 100%;height: 100%"></image>
-					<!-- <uv-upload :fileList="fileList" :maxCount="1" multiple width="150rpx" height="150rpx"
-					:deletable="false" :previewFullImage="false"   @afterRead="afterRead" ></uv-upload> -->
-				</view>
+				<button style="" class="value" @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
+					<image :src="form.headImage" v-if="form.headImage" style="width: 150%;height: 100%" mode="">
+					</image>
+					<image src="/static/image/tabbar/6.png" v-else style="width: 100%;height: 100%" mode="">
+					</image>
+				</button>
 			</view>
 			<view class="item">
 				<view class="label">昵称</view>
 				<view class="value">
-					<uv-input v-model="form.nickName" placeholder="昵称" border="bottom" clearable></uv-input>
+					<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
+						v-model="form.nickName" />
 				</view>
 			</view>
 			<view class="item" @click="sexChange">
@@ -75,88 +76,64 @@
 			}
 		},
 		mounted() {
-			this.form = this.userInfo
+			this.form.phone = this.userInfo.phone
+			this.form.headImage = this.userInfo.headImage
+			this.form.nickName = this.userInfo.nickName
+			this.form.sex = this.userInfo.sex
 			if (this.userInfo.sex == '' || this.userInfo.sex == null) {
-				this.userInfo.sex = '未知'
+				this.form.sex = '未知'
 			}
-			console.log(this.userInfo.headImage, "this.userInfo.headImage");
-			// this.fileList.push({
-			// 	url: this.userInfo.headImage
-			// })
 		},
 		methods: {
 
+			onChooseAvatar(res) {
+				let self = this
+				console.log(res.target.avatarUrl, "res.target.avatarUrl");
+				self.$Oss.ossUpload(res.target.avatarUrl)
+					.then(url => {
+						console.log(url, "url");
+						self.form.headImage = url
+					})
+			},
+
 			// 确认修改个人信息
 			confirmEditUserInfo() {
-				this.$api('infoUpdateInfo', this.form, res => {
-					if (res.code == 200) {
-						// 修改VueX中的信息，是否有密码啥的
-						uni.showToast({
-							title: '修改成功',
-							icon: 'success'
+				let self = this
+				uni.createSelectorQuery().in(this)
+					.select("#nickName")
+					.fields({
+						properties: ["value"],
+					})
+					.exec((res) => {
+						const nickName = res?.[0]?.value
+						self.form.nickName = nickName
+
+						if (self.$utils.verificationAll(self.form, {
+								headImage: '请选择头像',
+								nickName: '请填写昵称'
+							})) {
+							return
+						}
+
+						self.$api('infoUpdateInfo', self.form, res => {
+							if (res.code == 200) {
+								uni.navigateTo({
+									url: '/pages/index/index'
+								})
+							}
 						})
-						setTimeout(() => {
-							uni.navigateTo({
-								url: '/pages/index/index'
-							})
-						}, 300)
-					}
-				})
-			},
-
-			// 打开图片选择器并更新头像
-			chooseAndUpdateUserImage() {
-				const self = this;
-
-				uni.chooseImage({
-					count: 1, // 限制选择一张图片
-					sizeType: ['original', 'compressed'], // 可选择原图或压缩图
-					sourceType: ['album', 'camera'], // 可以从相册或相机选择
-					success: (res) => {
-						// 获取选择的图片临时路径
-						const tempFilePath = res.tempFilePaths[0];
-						console.log(tempFilePath, "Selected Image");
-
-						// 调用上传方法
-						self.updateUserImage(tempFilePath);
-					},
-					fail: (err) => {
-						console.error("Failed to select image:", err);
-					}
-				});
-			},
-
-			// 修改头像
-			updateUserImage(filePath) {
-				const self = this;
-
-				console.log(filePath, "Selected Image Path");
+					})
 
-				// 调用上传方法
-				self.$Oss.ossUpload(filePath).then(url => {
-					// 将上传后的图片URL设置到头像中
-					self.form.headImage = url;
-					console.log("Uploaded Image URL:", url);
-				}).catch(err => {
-					console.error("Failed to upload image:", err);
-				});
-			},
 
-			deleteImage(e) {
-				this.fileList.splice(e.index, 1)
-			},
-			afterRead(e) {
-				let self = this
-				e.file.forEach(file => {
-					self.$Oss.ossUpload(file.url).then(url => {
-						self.fileList.push({
-							url
+				this.$api('infoUpdateInfo', this.form, res => {
+					if (res.code == 200) {
+						uni.navigateTo({
+							url: '/pages/index/index'
 						})
-					})
+					}
 				})
 			},
 
-
 			sexChange() {
 				this.$refs.actionSheet.open() //打开ActionSheet 操作菜单
 			},
@@ -177,7 +154,6 @@
 	}
 </script>
 
-
 <style lang="scss" scoped>
 	* {
 		box-sizing: border-box;
@@ -195,17 +171,18 @@
 				padding: 20rpx;
 
 				.key {
-					width: 70%;
-					height: 150rpx;
+					width: 500rpx;
 					display: flex;
 					align-items: center;
 				}
 
 				.value {
-					border-radius: 50%;
+					border-radius: 50rpx;
 					border: 1px solid red;
+					box-sizing: border-box;
 					overflow: hidden;
-					width: 30%;
+					width: 100rpx;
+					height: 100rpx;
 				}
 			}