aquagreen_wechat_app/src/subPackages/pages-common/changePassword.vue

<template>
  <view class="app-container pb-20">
    <TopBar title="修改密码" show-back />

    <view class="px-4 py-4">
      <view class="card p-4">
        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>当前密码
          </text>
          <uni-easyinput class="form-input"type="password" v-model="currentPassword" placeholder="请输入当前密码" />
        </view>
        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>新密码
          </text>
          <uni-easyinput class="form-input"type="password" v-model="newPassword" placeholder="请输入新密码（6-20位）" />
        </view>
        <view class="form-group">
          <text class="form-label">
            <text class="text-red-500">*</text>确认新密码
          </text>
          <uni-easyinput class="form-input"type="password" v-model="confirmNewPassword" placeholder="请再次输入新密码" />
        </view>

        <view class="mt-4">
          <view class="bg-blue-50 rounded-lg p-3 mb-4">
            <text class="text-blue-600 text-sm block">ℹ️ 密码要求：</text>
            <view class="text-gray-500 text-xs mt-2 gap-y-1">
              <text class="block">• 长度6-20位</text>
              <text class="block">• 必须包含字母和数字</text>
              <text class="block">• 不能与当前密码相同</text>
            </view>
          </view>

          <button class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium" @click="submitChangePassword">
            确认修改
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { showToast } from '@/utils'

const currentPassword = ref('')
const newPassword = ref('')
const confirmNewPassword = ref('')

function validateForm(): boolean {
  if (!currentPassword.value.trim()) {
    showToast('请输入当前密码')
    return false
  }
  if (!newPassword.value.trim()) {
    showToast('请输入新密码')
    return false
  }
  if (newPassword.value.length < 6 || newPassword.value.length > 20) {
    showToast('密码长度需在6-20位之间')
    return false
  }
  if (!/[a-zA-Z]/.test(newPassword.value) || !/[0-9]/.test(newPassword.value)) {
    showToast('密码必须包含字母和数字')
    return false
  }
  if (newPassword.value === currentPassword.value) {
    showToast('新密码不能与当前密码相同')
    return false
  }
  if (newPassword.value !== confirmNewPassword.value) {
    showToast('两次输入的新密码不一致')
    return false
  }
  return true
}

function submitChangePassword() {
  if (!validateForm()) return
  showToast({ title: '密码修改成功', icon: 'success' })
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style scoped>
.form-group {
  margin-bottom: 16px;
}
</style>