小程序端修改个人密码， 每次请求后端都带上租户id

pages/ucenter/ucenter.vue

@@ -50,6 +50,31 @@
 				</template>
 			</uni-list-item>
 		</uni-list>
+
+		<!-- 修改密码弹窗 -->
+		<uni-popup ref="changePwdPopup" type="dialog">
+			<view class="change-pwd-dialog">
+				<view class="change-pwd-title">修改密码</view>
+				<view class="change-pwd-field">
+					<text class="change-pwd-label">原始密码</text>
+					<uni-easyinput type="password" v-model="changePwdForm.oldPassword" placeholder="请输入原始密码" />
+				</view>
+				<view class="change-pwd-field">
+					<text class="change-pwd-label">新密码</text>
+					<uni-easyinput type="password" v-model="changePwdForm.newPassword" placeholder="请输入新密码（6-20位）" />
+				</view>
+				<view class="change-pwd-field">
+					<text class="change-pwd-label">确认密码</text>
+					<uni-easyinput type="password" v-model="changePwdForm.confirmPassword" placeholder="请再次输入新密码" />
+				</view>
+				<view class="change-pwd-actions">
+					<button class="dialog-btn cancel" @click="closeChangePasswordDialog">取消</button>
+					<button class="dialog-btn confirm" :disabled="changePwdSubmitting" @click="submitChangePassword">
+						{{ changePwdSubmitting ? '提交中...' : '提交' }}
+					</button>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -61,10 +86,14 @@
 	const uniShare = new UniShare()
 	// #endif
 	const db = uniCloud.database();
+	const uniIdCo = uniCloud.importObject("uni-id-co", {
+		customUI: true
+	})
 	import {
 		store,
 		mutations
 	} from '@/uni_modules/uni-id-pages/common/store.js'
+	import { put } from '@/common/request.js'
 	export default {
 		// #ifdef APP
 		onBackPress({from}) {
@@ -93,10 +122,16 @@
 						"icon": "contact"
 					},
 					{
-						"text": this.$t('mine.showText'),
+						"text": '修改密码',
-						"icon": "download"
+						"icon": "locked"
 					}
 				],
+				changePwdForm: {
+					oldPassword: '',
+					newPassword: '',
+					confirmPassword: ''
+				},
+				changePwdSubmitting: false,
 				ucenterList: [
 					[
 						// #ifdef APP-PLUS
@@ -269,11 +304,21 @@
 				})
 			},
 			tapGrid(index) {
-				uni.showToast({
+				// 前三个仍然是示例功能，点击后提示；第四个是“修改密码”
-					// title: '你点击了，第' + (index + 1) + '个',
+				if (index === 3) {
-					title: this.$t('mine.clicked') + " " + (index + 1) ,
+					if (!this.hasLogin) {
-					icon: 'none'
+						return uni.showToast({
-				});
+							title: '请先登录后再修改密码',
+							icon: 'none'
+						})
+					}
+					this.openChangePasswordDialog()
+				} else {
+					uni.showToast({
+						title: this.$t('mine.clicked') + " " + (index + 1),
+						icon: 'none'
+					});
+				}
 			},
 			/**
 			 * 去应用市场评分
@@ -401,6 +446,124 @@
 					console.log(e);
 				})
 				// #endif
+			},
+			/**
+			 * 打开修改密码弹窗
+			 */
+			openChangePasswordDialog() {
+				this.changePwdForm = {
+					oldPassword: '',
+					newPassword: '',
+					confirmPassword: ''
+				}
+				if (this.$refs.changePwdPopup) {
+					this.$refs.changePwdPopup.open()
+				}
+			},
+			/**
+			 * 关闭修改密码弹窗
+			 */
+			closeChangePasswordDialog() {
+				if (this.$refs.changePwdPopup) {
+					this.$refs.changePwdPopup.close()
+				}
+			},
+			/**
+			 * 提交修改密码
+			 */
+			async submitChangePassword() {
+				if (this.changePwdSubmitting) return
+				const { oldPassword, newPassword, confirmPassword } = this.changePwdForm
+
+				if (!oldPassword) {
+					return uni.showToast({
+						title: '请输入原始密码',
+						icon: 'none'
+					})
+				}
+				if (!newPassword) {
+					return uni.showToast({
+						title: '请输入新密码',
+						icon: 'none'
+					})
+				}
+				if (newPassword.length < 6 || newPassword.length > 20) {
+					return uni.showToast({
+						title: '新密码长度需为 6-20 位',
+						icon: 'none'
+					})
+				}
+				if (newPassword !== confirmPassword) {
+					return uni.showToast({
+						title: '两次输入的新密码不一致',
+						icon: 'none'
+					})
+				}
+
+				this.changePwdSubmitting = true
+				try {
+					// 检查必需字段
+					if (!this.loginUserInfo.userId) {
+						return uni.showToast({
+							title: '用户信息不完整，请重新登录',
+							icon: 'none'
+						})
+					}
+
+					// 构建请求参数
+					const requestData = {
+						password: newPassword,
+						originalPassword: oldPassword,
+						userId: this.loginUserInfo.userId,
+						tenantId: this.tenantId
+					}
+					
+					// 如果有手机号，添加到请求参数中
+					if (this.loginUserInfo.phone) {
+						requestData.phone = this.loginUserInfo.phone
+					}
+
+					// 调用后端接口
+					const res = await put('/api/sys/user/update', requestData)
+					
+					// 检查响应状态（后端返回格式：{success: true/false, message: "...", data: {...}}）
+					if (res.statusCode === 200 && res.data && res.data.success) {
+						this.closeChangePasswordDialog()
+						uni.showModal({
+							content: res.data.message || '密码修改成功，请重新登录',
+							showCancel: false,
+							success: () => {
+								// 清除登录信息
+								uni.removeStorageSync('backend-token')
+								uni.removeStorageSync('backend-login-response')
+								uni.removeStorageSync('backend-user-id')
+								uni.removeStorageSync('backend-tenant-id')
+								uni.removeStorageSync('uni_id_token')
+								uni.setStorageSync('uni_id_token_expired', 0)
+								// 跳转到登录页
+								uni.redirectTo({
+									url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
+								})
+							}
+						})
+					} else {
+						// 处理失败情况（可能 statusCode 不是 200，或者 success 为 false）
+						const errorMessage = res.data?.message || '密码修改失败，请稍后重试'
+						uni.showModal({
+							content: errorMessage,
+							showCancel: false
+						})
+					}
+				} catch (e) {
+					console.error('密码修改失败:', e)
+					const errorMessage = e?.data?.message || e?.message || '密码修改失败，请稍后重试'
+					uni.showModal({
+						content: errorMessage,
+						showCancel: false
+					})
+				} finally {
+					this.changePwdSubmitting = false
+				}
 			}
 		}
 	}
@@ -552,4 +715,60 @@
 		/* #endif */
 		background-color: #DD524D;
 	}
+
+	.change-pwd-dialog {
+		padding: 40rpx 30rpx 30rpx;
+		background-color: #FFFFFF;
+		border-radius: 16rpx;
+		width: 600rpx;
+	}
+
+	.change-pwd-title {
+		font-size: 34rpx;
+		font-weight: bold;
+		text-align: center;
+		margin-bottom: 30rpx;
+	}
+
+	.change-pwd-field {
+		margin-bottom: 20rpx;
+	}
+
+	.change-pwd-label {
+		display: block;
+		font-size: 26rpx;
+		color: #666666;
+		margin-bottom: 10rpx;
+	}
+
+	.change-pwd-actions {
+		margin-top: 20rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+	}
+
+	.dialog-btn {
+		min-width: 140rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		font-size: 28rpx;
+		border-radius: 8rpx;
+		padding: 0 24rpx;
+	}
+
+	.dialog-btn.cancel {
+		background-color: #f5f5f5;
+		color: #333333;
+		margin-right: 20rpx;
+	}
+
+	.dialog-btn.confirm {
+		background-color: #007AFF;
+		color: #FFFFFF;
+	}
+
+	.dialog-btn:after {
+		border: none;
+	}
 </style>