feat(password): 添加修改密码页面

- 创建修改密码表单页面
- 实现旧密码、新密码和确认密码输入框
- 添加密码可见性切换功能
- 实现密码清空功能
- 添加密码长度验证（8-16位）
- 实现两次密码一致性验证
- 添加表单提交功能及验证提示
- 实现密码修改成功提示
- 使用Vue Composition API进行状态管理
- 集成uni.showToast进行用户反馈提示

src/pages/modify-password/index.vue

@@ -0,0 +1,185 @@
+<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>