LandSurveyApplet/pages/modify-password/index.vue

<template>
  <view class="bg-gray-50 p-2 min-h-screen">
    <view class="bg-white rounded-xl shadow-sm p-8">
      <!-- 表单内容 -->
      <view class="space-y-6">
        <!-- 旧密码输入框 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">旧密码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                :type="showOldPassword ? 'text' : 'password'"
                v-model="form.oldPassword"
                placeholder="请输入旧密码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view class="flex space-x-2">
              <view v-if="form.oldPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="toggleOldPasswordVisibility">
                <image :src="showOldPassword ? '/static/eye-close.png' : '/static/eye.png'" class="w-full h-full" />
              </view>
              <view v-if="form.oldPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="clearOldPassword">
                <image src="/static/clear.png" class="w-full h-full" />
              </view>
            </view>
          </view>
        </view>

        <!-- 新密码输入框 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">新密码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                :type="showNewPassword ? 'text' : 'password'"
                v-model="form.newPassword"
                placeholder="请输入8-16位新密码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view class="flex space-x-2">
              <view v-if="form.newPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="toggleNewPasswordVisibility">
                <image :src="showNewPassword ? '/static/eye-close.png' : '/static/eye.png'" class="w-full h-full" />
              </view>
              <view v-if="form.newPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="clearNewPassword">
                <image src="/static/clear.png" class="w-full h-full" />
              </view>
            </view>
          </view>
        </view>

        <!-- 确认密码输入框 -->
        <view class="flex items-center border-solid border-0 border-b-1 border-gray-200 pb-2">
          <text class="text-gray-700 text-sm w-1/3">确认密码:</text>
          <view class="flex-1 flex items-center border-b border-gray-200 py-2">
            <input
                :type="showConfirmPassword ? 'text' : 'password'"
                v-model="form.confirmPassword"
                placeholder="请再次输入新密码"
                class="flex-1 bg-transparent outline-none text-gray-900"
            />
            <view class="flex space-x-2">
              <view v-if="form.confirmPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="toggleConfirmPasswordVisibility">
                <image :src="showConfirmPassword ? '/static/eye-close.png' : '/static/eye.png'" class="w-full h-full" />
              </view>
              <view v-if="form.confirmPassword" class="w-36 h-36 flex items-center justify-center text-gray-400" @click="clearConfirmPassword">
                <image src="/static/clear.png" class="w-full h-full" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="mt-6 px-8">
      <view
          class="w-full text-center bg-blue-600 text-white py-3 rounded-2xl font-medium shadow-sm hover:bg-blue-700 transition-colors"
          @click="submitForm"
      >
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 表单数据
const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码可见性控制
const showOldPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)

// 验证密码长度
const validatePasswordLength = (password) => {
  return password.length >= 8 && password.length <= 16
}

// 验证两次密码是否一致
const validatePasswordMatch = () => {
  return form.value.newPassword === form.value.confirmPassword
}

// 清除旧密码
const clearOldPassword = () => {
  form.value.oldPassword = ''
}

// 清除新密码
const clearNewPassword = () => {
  form.value.newPassword = ''
}

// 清除确认密码
const clearConfirmPassword = () => {
  form.value.confirmPassword = ''
}

// 切换旧密码可见性
const toggleOldPasswordVisibility = () => {
  showOldPassword.value = !showOldPassword.value
}

// 切换新密码可见性
const toggleNewPasswordVisibility = () => {
  showNewPassword.value = !showNewPassword.value
}

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value
}

// 提交表单
const submitForm = () => {
  // 验证旧密码
  if (!form.value.oldPassword) {
    uni.showToast({
      title: '请输入旧密码',
      icon: 'none'
    })
    return
  }

  // 验证新密码长度
  if (!validatePasswordLength(form.value.newPassword)) {
    uni.showToast({
      title: '新密码需为8-16位',
      icon: 'none'
    })
    return
  }

  // 验证确认密码
  if (!form.value.confirmPassword) {
    uni.showToast({
      title: '请输入确认密码',
      icon: 'none'
    })
    return
  }

  // 验证密码一致性
  if (!validatePasswordMatch()) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }

  // 所有验证通过，提交表单
  console.log('密码修改提交数据:', form.value)
  uni.showToast({
    title: '密码修改成功',
    icon: 'none'
  })

  // 实际项目中这里调用修改密码的接口
}
</script>