fix bugs

pages/change-password/change-password.vue

@@ -0,0 +1,250 @@
+<template>
+  <view class="change-password-page">
+    <view class="form-container">
+      <view class="form-item">
+        <view class="label">旧密码</view>
+        <input
+          class="input"
+          type="password"
+          v-model="formData.oldPassword"
+          placeholder="请输入旧密码"
+          maxlength="20"
+        />
+      </view>
+
+      <view class="form-item">
+        <view class="label">新密码</view>
+        <input
+          class="input"
+          type="password"
+          v-model="formData.newPassword"
+          placeholder="请输入新密码（6-20位）"
+          maxlength="20"
+        />
+      </view>
+
+      <view class="form-item">
+        <view class="label">确认密码</view>
+        <input
+          class="input"
+          type="password"
+          v-model="formData.confirmPassword"
+          placeholder="请再次输入新密码"
+          maxlength="20"
+        />
+      </view>
+
+      <view class="tips">
+        <text class="tip-item">• 密码长度为6-20位</text>
+        <text class="tip-item">• 建议包含字母、数字、符号</text>
+      </view>
+
+      <view class="btn-wrapper">
+        <view class="submit-btn" @click="handleSubmit">确认修改</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import userAPI from '@/api/user.js'
+
+export default {
+  data() {
+    return {
+      formData: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      }
+    };
+  },
+  methods: {
+    /**
+     * 表单验证
+     */
+    validateForm() {
+      const { oldPassword, newPassword, confirmPassword } = this.formData
+
+      if (!oldPassword) {
+        uni.showToast({
+          title: '请输入旧密码',
+          icon: 'none'
+        })
+        return false
+      }
+
+      if (!newPassword) {
+        uni.showToast({
+          title: '请输入新密码',
+          icon: 'none'
+        })
+        return false
+      }
+
+      if (newPassword.length < 6 || newPassword.length > 20) {
+        uni.showToast({
+          title: '密码长度为6-20位',
+          icon: 'none'
+        })
+        return false
+      }
+
+      if (!confirmPassword) {
+        uni.showToast({
+          title: '请确认新密码',
+          icon: 'none'
+        })
+        return false
+      }
+
+      if (newPassword !== confirmPassword) {
+        uni.showToast({
+          title: '两次密码输入不一致',
+          icon: 'none'
+        })
+        return false
+      }
+
+      if (oldPassword === newPassword) {
+        uni.showToast({
+          title: '新密码不能与旧密码相同',
+          icon: 'none'
+        })
+        return false
+      }
+
+      return true
+    },
+
+    /**
+     * 提交修改
+     */
+    async handleSubmit() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      try {
+        uni.showLoading({
+          title: '提交中...'
+        })
+
+        await userAPI.updatePassword({
+          oldPassword: this.formData.oldPassword,
+          newPassword: this.formData.newPassword,
+          confirmPassword: this.formData.confirmPassword
+        })
+
+        uni.hideLoading()
+
+        uni.showToast({
+          title: '密码修改成功',
+          icon: 'success',
+          duration: 2000
+        })
+
+        // 延迟返回上一页
+        setTimeout(() => {
+          uni.navigateBack()
+        }, 2000)
+      } catch (err) {
+        uni.hideLoading()
+        console.error('修改密码失败:', err)
+
+        // 根据错误类型显示不同提示
+        let errorMsg = '修改失败，请重试'
+        if (err && err.msg) {
+          errorMsg = err.msg
+        } else if (err && err.message) {
+          if (err.message.includes('旧密码') || err.message.includes('原密码')) {
+            errorMsg = '旧密码错误'
+          } else {
+            errorMsg = err.message
+          }
+        }
+
+        uni.showToast({
+          title: errorMsg,
+          icon: 'none',
+          duration: 2000
+        })
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.change-password-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 30rpx;
+}
+
+.form-container {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 40rpx 30rpx;
+}
+
+.form-item {
+  margin-bottom: 40rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  font-size: 28rpx;
+  color: #333333;
+  margin-bottom: 20rpx;
+  font-weight: 500;
+}
+
+.input {
+  width: 100%;
+  height: 80rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.tips {
+  margin-top: 30rpx;
+  padding: 20rpx;
+  background-color: #fff9e6;
+  border-radius: 8rpx;
+  border-left: 4rpx solid #faad14;
+}
+
+.tip-item {
+  display: block;
+  font-size: 24rpx;
+  color: #666666;
+  line-height: 40rpx;
+}
+
+.btn-wrapper {
+  margin-top: 60rpx;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #C93639;
+  color: #fff;
+  text-align: center;
+  line-height: 88rpx;
+  border-radius: 12rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.submit-btn:active {
+  opacity: 0.8;
+}
+</style>