From d7816a2bb70609c351a9b21be40cdb01d742e7c2 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sat, 22 Mar 2025 16:07:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/change.vue | 629 ++++++++++++++++++------------------------
 1 file changed, 270 insertions(+), 359 deletions(-)

diff --git a/pages/user/change.vue b/pages/user/change.vue
index 007f1e1..f0f0943 100644
--- a/pages/user/change.vue
+++ b/pages/user/change.vue
@@ -1,389 +1,300 @@
 <template>
-	<view class="content">
-		<uni-nav-bar left-icon="left" title="个人资料" color="#fff" backgroundColor="transparent" :fixed="true"
-			:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>
+  <view class="content">
+    <uni-nav-bar
+      left-icon="left"
+      title="个人资料"
+      color="#fff"
+      backgroundColor="transparent"
+      :fixed="true"
+      :statusBar="true"
+      :border="false"
+      @clickLeft="back"
+    ></uni-nav-bar>
 
-		<view class="user_logo relative">
-			<!-- 	<button class="avatar-wrapper"  open-type="chooseAvatar" @click="chooseAvatar">
-				<image class="avatar" :src="avatarUrl"></image>
-			</button> -->
+    <view class="user-avatar">
+      <button
+        class="avatar-wrapper"
+        open-type="chooseAvatar"
+        @chooseavatar="onChooseAvatar"
+      >
+        <image class="avatar" :src="avatarUrl"></image>
+      </button>
+      <text class="avatar-title">修改头像</text>
+      <image
+        class="camera-icon"
+        :src="$img1('my/camera.png')"
+        mode="aspectFill"
+      ></image>
+    </view>
 
-			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-				<image class="avatar" :src="avatarUrl"></image>
-			</button>
-
-			<text class="user_logo-title">修改头像</text>
-			<image class="camera" :src="$img1('my/camera.png')" mode="aspectFill"></image>
-		</view>
-
-		<view class="row">
-			<view class="row-title">昵称:</view>
-
-			<view class="right">
-				<input type="nickname" v-model="nickname" placeholder="请输入您的昵称" @blur="getnickname" />
-			</view>
-		</view>
-
-		<view class="row">
-			<view class="row-title">ID:</view>
-
-			<view class="right">
-				<input disabled :value="id" />
-			</view>
-		</view>
-
-		<view class="btn_b center" @click="setdata()">确认修改</view>
-
-		<!-- <view class="row">
-      <view class="row-title">手机号:</view>
-
-      <view class="right">
-        <input
-          :value="nickname"
-          placeholder="请输入您的昵称"
-          @blur="getnickname"
-        />
+    <view class="form-container">
+      <view class="form-item">
+        <view class="form-label">昵称:</view>
+        <view class="form-input">
+          <input
+            type="nickname"
+            v-model="nickname"
+            placeholder="请输入您的昵称"
+            @blur="getnickname"
+          />
+        </view>
       </view>
-    </view> -->
-	</view>
+
+      <view class="form-item">
+        <view class="form-label">ID:</view>
+        <view class="form-input">
+          <input disabled :value="uid" />
+        </view>
+      </view>
+    </view>
+
+    <view class="submit-btn" @click="updateUserInfo">确认修改</view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
-				avatarUrl: uni.getStorageSync('userinfo').headimg,
-				nickname: uni.getStorageSync('userinfo').nickname,
-				headimg_status: false,
-				id: uni.getStorageSync('userinfo').ID,
-				imageBase64: "",
-			}
-		},
-		onLoad() {},
-		methods: {
-			back() {
-				uni.navigateBack()
-			},
-			getnickname(e) {
-				this.nickname = e.detail.value
-				console.log(e, this.nickname)
-			},
+export default {
+  data() {
+    return {
+      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
+      avatarUrl: "",
+      nickname: "",
+      headimg_status: false,
+      id: "",
+      uid: "",
+      imageBase64: "",
+    };
+  },
 
-			onChooseAvatar(e) {
-				// console.log("6666666666", e.detail, e.detail.avatarUrl)
-				this.avatarUrl = e.detail.avatarUrl
-				this.headimg_status = true
-				var that = this;
-				// 获取图片的 Base64 编码
-				uni.getFileSystemManager().readFile({
-					filePath: this.avatarUrl,
-					encoding: 'base64',
-					success: (base64Res) => {
-						const base64 = 'data:image/png;base64,' + base64Res.data;
-						console.log(base64);
-						that.imageBase64 = base64;
-					},
-					fail: (err) => {
-						console.error('读取文件失败:', err);
-					}
+  onLoad() {
+    this.initUserInfo();
+  },
 
+  methods: {
+    /**
+     * 初始化用户信息
+     */
+    initUserInfo() {
+      const userInfo = uni.getStorageSync("userinfo");
+      if (userInfo) {
+        this.avatarUrl = userInfo.headimg || "";
+        this.nickname = userInfo.nickname || "";
+        this.id = userInfo.ID;
+        this.uid = userInfo.uid;
+      }
+    },
 
-				});
+    /**
+     * 返回上一页
+     */
+    back() {
+      uni.navigateBack();
+    },
 
-				// // 获取图片的二进制数据
-				// uni.getFileSystemManager().readFile({
-				// 	filePath: this.avatarUrl,
-				// 	encoding: 'binary',
-				// 	success: (binaryRes) => {
-				// 		const binaryData = binaryRes.data;
-				// 		console.log('二进制数据:', binaryData);
-				// 	},
-				// 	fail: (err) => {
-				// 		console.error('读取文件失败:', err);
-				// 	}
-				// });
-			},
+    /**
+     * 获取昵称
+     */
+    getnickname(e) {
+      this.nickname = e.detail.value;
+    },
 
-			// chooseAvatar() {
-			// 	let that = this
-			// 	uni.chooseImage({
-			// 		count: 1,
-			// 		success: (res) => {
-			// 			console.log(res);
-			// 			uni.showLoading({
-			// 				title: '上传中...',
-			// 				mask: true
-			// 			})
-			// 			uni.uploadFile({
-			// 				url: that.siteBaseUrl + 'picture1',
-			// 				filePath: res.tempFilePaths[0],
-			// 				name: 'file',
-			// 				success: (e) => {
-			// 					let re = JSON.parse(e.data)
-			// 					that.avatarUrl = re.data.path
-			// 					that.headimg_status = true
-			// 				},
-			// 				fail: (err) => {
-			// 					uni.showToast({
-			// 						title: '上传失败',
-			// 						icon: 'none'
-			// 					})
-			// 				},
-			// 				complete: () => {
-			// 					uni.hideLoading()
-			// 				}
-			// 			})
+    /**
+     * 选择头像
+     */
+    onChooseAvatar(e) {
+      if (e && e.detail && e.detail.avatarUrl) {
+        this.avatarUrl = e.detail.avatarUrl;
+        this.headimg_status = true;
+        this.convertToBase64(this.avatarUrl);
+      }
+    },
 
-			// 		}
-			// 	})
-			// },
-			setdata() {
-				let that = this
-				if (this.headimg_status) {
-					that.req({
-						url: 'update_userinfo',
-						data: {
-							nickname: that.nickname,
-							headimg: that.avatarUrl,
-							imagebase: that.imageBase64
-						},
-						success(ress) {
-							if (ress.status == 1) {
-								uni.showToast({
-									title: '修改成功',
-									icon: 'success',
-									success() {
-										setTimeout(() => {
-											that.$c.back()
-										}, 500)
-									}
-								})
-							}
-						}
-					})
-				} else {
-					that.req({
-						url: 'update_userinfo',
-						data: {
-							nickname: that.nickname,
-							headimg: that.avatarUrl,
-							imagebase: that.imageBase64
-						},
-						success(ress) {
-							if (ress.status == 1) {
-								uni.showToast({
-									title: '修改成功',
-									icon: 'success',
-									success() {
-										setTimeout(() => {
-											uni.redirectTo({
-												url: './index'
-											})
-										}, 1000)
-									}
-								})
-							}
-						}
-					})
-				}
-			}
-		}
-	}
+    /**
+     * 将图片转换为Base64
+     */
+    convertToBase64(filePath) {
+      uni.getFileSystemManager().readFile({
+        filePath: filePath,
+        encoding: "base64",
+        success: (res) => {
+          this.imageBase64 = "data:image/png;base64," + res.data;
+        },
+        fail: (err) => {
+          console.error("读取文件失败:", err);
+          uni.showToast({
+            title: "图片处理失败",
+            icon: "none",
+          });
+        },
+      });
+    },
+
+    /**
+     * 更新用户信息
+     */
+    updateUserInfo() {
+      if (!this.nickname) {
+        uni.showToast({
+          title: "请输入昵称",
+          icon: "none",
+        });
+        return;
+      }
+
+      const data = {
+        nickname: this.nickname,
+        headimg: this.avatarUrl,
+        imagebase: this.imageBase64,
+      };
+
+      this.$request
+        .post("update_userinfo", data)
+        .then((res) => {
+          if (res.status === 1) {
+            // 更新本地存储的用户信息
+            const userInfo = uni.getStorageSync("userinfo") || {};
+            userInfo.nickname = this.nickname;
+            userInfo.headimg = this.avatarUrl;
+            uni.setStorageSync("userinfo", userInfo);
+
+            uni.showToast({
+              title: "修改成功",
+              icon: "success",
+            });
+
+            // 延迟返回
+            setTimeout(() => {
+              uni.redirectTo({
+                url: "./index",
+              });
+            }, 1000);
+          } else {
+            uni.showToast({
+              title: res.msg || "修改失败",
+              icon: "none",
+            });
+          }
+        })
+        .catch((err) => {
+          uni.showToast({
+            title: "网络请求失败",
+            icon: "none",
+          });
+          console.error(err);
+        });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-	.content {
-		width: 100vw;
-		height: 100vh;
-		box-sizing: border-box;
-		color: #fff;
+.content {
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
 
-		.head {
-			position: fixed;
-			top: 0;
-			z-index: 20;
+.user-avatar {
+  padding: 80rpx 0 60rpx 0;
+  text-align: center;
+  position: relative;
 
-			.header_title {
-				height: 70rpx;
-				line-height: 70rpx;
-				width: 100%;
-				box-sizing: border-box;
-				font-weight: bold;
-				display: flex;
-				align-items: center;
-				padding-left: 30rpx;
-				box-sizing: border-box;
+  .avatar-title {
+    font-size: 30rpx;
+    color: #ffffff;
+    position: absolute;
+    top: 280rpx;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-				>view:nth-of-type(1) {
-					display: flex;
-					align-items: center;
-				}
+  .avatar-wrapper {
+    width: 165rpx;
+    height: 165rpx;
+    margin: auto;
+    border-radius: 128rpx;
+    overflow: hidden;
+    border: 1rpx solid #fff;
+    background-color: transparent;
+    padding: 0;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-				>view:nth-of-type(2) {
-					width: 520rpx;
-					text-align: center;
-					/* margin: auto; */
-				}
+    &::after {
+      border: none;
+    }
 
-				image {
-					width: 48rpx;
-					height: 48rpx;
-				}
-			}
-		}
-	}
+    .avatar {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+    }
+  }
 
-	.user_logo {
-		/* background-color: #000000; */
-		padding: 80rpx 0 60rpx 0;
-		text-align: center;
+  .camera-icon {
+    width: 88rpx;
+    height: 94rpx;
+    position: relative;
+    bottom: 60rpx;
+    left: 60rpx;
+  }
+}
 
-		&-title {
-			font-weight: 400;
-			font-size: 36rpx;
-			color: #FFFFFF;
-			position: absolute;
-			top: 280rpx;
-			left: 50%;
-			transform: translateX(-50%);
-			font-weight: 400;
-			font-size: 30rpx;
-			color: #FFFFFF;
-		}
-	}
+.form-container {
+  width: 690rpx;
+  margin: 0 auto;
+}
 
-	button::after {
-		border: none;
-	}
+.form-item {
+  display: flex;
+  padding: 30rpx 0;
+  position: relative;
 
-	button {
-		background-color: transparent;
-		padding-left: 0;
-		padding-right: 0;
-		line-height: inherit;
-		border-radius: 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 160rpx;
-		height: 160rpx;
-	}
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2rpx;
+    background: #666666;
+  }
 
-	.user_logo>.avatar-wrapper {
-		width: 165rpx;
-		height: 165rpx;
-		margin: auto;
-		border-radius: 128rpx;
-		overflow: hidden;
-		border: 1rpx solid #fff;
-	}
+  .form-label {
+    width: 120rpx;
+    font-size: 32rpx;
+    color: #ffffff;
+  }
 
-	.user_logo>.avatar-wrapper>image {
-		width: 160rpx;
-		height: 160rpx;
-		border-radius: 50rpx;
-		overflow: hidden;
-	}
+  .form-input {
+    flex: 1;
 
-	.user_logo>.camera {
-		width: 88rpx;
-		height: 94rpx;
-		position: relative;
-		bottom: 60rpx;
-		left: 60rpx;
-	}
+    input {
+      flex: 1;
+      text-align: right;
+      font-size: 28rpx;
+      color: #ffffff;
+    }
+  }
+}
 
-	.user_logo>view:nth-of-type(1) {
-		font-size: 25rpx;
-		font-weight: 400;
-		color: #ffffff;
-	}
-
-	.user_logo>view:nth-of-type(3) {
-		font-size: 22rpx;
-		font-weight: 400;
-		color: #ffffff;
-		margin-top: 20rpx;
-	}
-
-	.nicheng_tit {
-		font-size: 32rpx;
-		font-weight: 400;
-		color: #999999;
-		padding: 0 36rpx;
-		margin-top: 70rpx;
-	}
-
-	.nicheng_ipt {
-		width: 690rpx;
-		height: 88rpx;
-		background: #333333;
-		border: 1px solid #333333;
-		border-radius: 10rpx;
-		margin: 0 auto;
-		padding: 0 36rpx;
-		box-sizing: border-box;
-		font-size: 28rpx;
-		font-weight: 400;
-		color: #fff;
-		border-radius: 9rpx;
-		margin-top: 22rpx;
-	}
-
-	.btn_b {
-		width: 468rpx;
-		height: 112rpx;
-		background: #ff873a;
-		border-radius: 50rpx;
-		border: 2rpx solid #FFFFFF;
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #FFFFFF;
-		margin: 200rpx auto 0;
-	}
-
-	.row {
-		display: flex;
-		padding: 30rpx 0;
-		width: 690rpx;
-		margin: 0 auto;
-		position: relative;
-
-		&::after {
-			content: '';
-			display: block;
-			position: absolute;
-			left: 0;
-			bottom: 0;
-			width: 100%;
-			height: 2rpx;
-
-			background: #666666;
-		}
-
-		.row-title {
-			width: 120rpx;
-
-			font-size: 32rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 400;
-			color: #ffffff;
-		}
-
-		.right {
-			flex: 1;
-
-			input {
-				flex: 1;
-				text-align: right;
-
-				font-size: 28rpx;
-				font-family: Source Han Sans CN;
-				font-weight: 400;
-				color: #ffffff;
-			}
-		}
-	}
+.submit-btn {
+  width: 468rpx;
+  height: 112rpx;
+  background: #ff873a;
+  border-radius: 50rpx;
+  border: 2rpx solid #ffffff;
+  font-size: 28rpx;
+  color: #ffffff;
+  margin: 200rpx auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
\ No newline at end of file