martial-mini/pages/change-password/change-password.vue

<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>