af-mobile-client-vue3 1.3.6 → 1.3.8

package/compress.js

@@ -1,36 +1,36 @@
-import fs from 'node:fs'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import * as tar from 'tar'
-
-// 当前文件所在目录
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-// 压缩源目录名（即 build 后生成的目录名）
-const outputName = `dist_af-library-mobile-web`
-
-// 源目录路径
-const cwd = path.join(__dirname, 'dist', outputName)
-
-// 输出 tar.gz 文件路径
-const outputPath = path.join(__dirname, 'dist', `${outputName}.tar.gz`)
-
-if (!fs.existsSync(cwd)) {
-  console.error('❌ 目录不存在:', cwd)
-  // eslint-disable-next-line node/prefer-global/process
-  process.exit(1)
-}
-
-tar.c(
-  {
-    gzip: true,
-    file: outputPath,
-    cwd,
-  },
-  ['.'],
-).then(() => {
-  console.log(`✅ 压缩完成: ${outputPath}`)
-}).catch((err) => {
-  console.error('❌ 压缩失败:', err)
-})
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import * as tar from 'tar'
+
+// 当前文件所在目录
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// 压缩源目录名（即 build 后生成的目录名）
+const outputName = `dist_af-library-mobile-web`
+
+// 源目录路径
+const cwd = path.join(__dirname, 'dist', outputName)
+
+// 输出 tar.gz 文件路径
+const outputPath = path.join(__dirname, 'dist', `${outputName}.tar.gz`)
+
+if (!fs.existsSync(cwd)) {
+  console.error('❌ 目录不存在:', cwd)
+  // eslint-disable-next-line node/prefer-global/process
+  process.exit(1)
+}
+
+tar.c(
+  {
+    gzip: true,
+    file: outputPath,
+    cwd,
+  },
+  ['.'],
+).then(() => {
+  console.log(`✅ 压缩完成: ${outputPath}`)
+}).catch((err) => {
+  console.error('❌ 压缩失败:', err)
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/data/XFormItem/index.vue

@@ -1203,7 +1203,7 @@ function findOptionInTree(options, value) {
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
       :type="attr.type as FieldType"
-      :readonly="readonly || (attr.inputOnAfterName && attr.inputOnAfterFunc && !attr.inputOnAfterName.includes('|'))"
+      :readonly="readonly"
       :disabled="attr.disabled"
       :placeholder="placeholder"
       :error-message="errorMessage"
@@ -1215,7 +1215,7 @@ function findOptionInTree(options, value) {
       <template #input>
         <input
           :value="modelData"
-          :readonly="readonly || (attr.inputOnAfterName && attr.inputOnAfterFunc && !attr.inputOnAfterName.includes('|'))"
+          :readonly="readonly"
           class="van-field__control"
           :placeholder="placeholder"
           style="flex: 1; min-width: 0;"

package/src/router/routes.ts

@@ -10,6 +10,7 @@ import XCellDetailView from '@af-mobile-client-vue3/views/component/XCellDetailV
 import XCellListView from '@af-mobile-client-vue3/views/component/XCellListView/index.vue'
 import XFormAppraiseView from '@af-mobile-client-vue3/views/component/XFormAppraiseView/index.vue'
 import XFormGroupView from '@af-mobile-client-vue3/views/component/XFormGroupView/index.vue'
+import xformgroup222 from '@af-mobile-client-vue3/views/component/XFormGroupView/xformgroup222.vue'
 import XFormView from '@af-mobile-client-vue3/views/component/XFormView/index.vue'
 import XOlMapView from '@af-mobile-client-vue3/views/component/XOlMapView/index.vue'
 import XLocationPicker from '@af-mobile-client-vue3/views/component/XOlMapView/XLocationPicker/index.vue'
@@ -66,6 +67,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'XCellDetailView',
         component: XCellDetailView,
       },
+      {
+        path: '/xformgroup222',
+        name: 'xformgroup222',
+        component: xformgroup222,
+      },
       {
         path: '/Component/XFormGroupView',
         name: 'XFormGroupView',

package/src/services/api/user.ts

@@ -0,0 +1,17 @@
+import { post } from '@af-mobile-client-vue3/services/restTools'
+
+const userApi = {
+  // 修改密码
+  modifyPassword: '/af-system/user/modifypwd',
+}
+
+/**
+ * 修改密码
+ * @param data 修改密码参数
+ * @returns Promise
+ */
+export function modifyPassword(data: any) {
+  return post(userApi.modifyPassword, JSON.stringify(data))
+}
+
+export { userApi }

package/src/utils/queryFormDefaultRangePicker.ts

@@ -1,57 +1,57 @@
-/**
- * 根据类型获取日期区间字符串
- * @param type '当年' | 'curMonth' | '当日'
- * @param show 区分实际值还是显示值, true为实际值, false为显示值
- * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
- */
-export function getRangeByType(type: string, show: boolean): [string, string] {
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = (now.getMonth() + 1).toString().padStart(2, '0')
-  const day = now.getDate().toString().padStart(2, '0')
-
-  if (!show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01 00:00:00`,
-        `${year}-12-31 23:59:59`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01 00:00:00`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day} 00:00:00`,
-        `${year}-${month}-${day} 23:59:59`,
-      ]
-    }
-  }
-  if (show) {
-    if (type === 'curYear') {
-      return [
-        `${year}-01-01`,
-        `${year}-12-31`,
-      ]
-    }
-    if (type === 'curMonth') {
-      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
-      return [
-        `${year}-${month}-01`,
-        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
-      ]
-    }
-    if (type === 'curDay') {
-      return [
-        `${year}-${month}-${day}`,
-        `${year}-${month}-${day}`,
-      ]
-    }
-  }
-  // 兜底返回空字符串数组
-  return ['', '']
-}
+/**
+ * 根据类型获取日期区间字符串
+ * @param type '当年' | 'curMonth' | '当日'
+ * @param show 区分实际值还是显示值, true为实际值, false为显示值
+ * @returns [start, end] 例：['2024-01-01 00:00:00', '2024-12-31 23:59:59']
+ */
+export function getRangeByType(type: string, show: boolean): [string, string] {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = (now.getMonth() + 1).toString().padStart(2, '0')
+  const day = now.getDate().toString().padStart(2, '0')
+
+  if (!show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01 00:00:00`,
+        `${year}-12-31 23:59:59`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01 00:00:00`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')} 23:59:59`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day} 00:00:00`,
+        `${year}-${month}-${day} 23:59:59`,
+      ]
+    }
+  }
+  if (show) {
+    if (type === 'curYear') {
+      return [
+        `${year}-01-01`,
+        `${year}-12-31`,
+      ]
+    }
+    if (type === 'curMonth') {
+      const lastDay = new Date(year, now.getMonth() + 1, 0).getDate()
+      return [
+        `${year}-${month}-01`,
+        `${year}-${month}-${lastDay.toString().padStart(2, '0')}`,
+      ]
+    }
+    if (type === 'curDay') {
+      return [
+        `${year}-${month}-${day}`,
+        `${year}-${month}-${day}`,
+      ]
+    }
+  }
+  // 兜底返回空字符串数组
+  return ['', '']
+}

package/src/views/component/XCellListView/index.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
 import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
 import { defineEmits, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 // 定义事件
 const emit = defineEmits(['deleteRow'])
+const userInfo = useUserStore().getUserInfo()
 // 访问路由
 const router = useRouter()
 // 获取默认值
 const idKey = ref('o_id')
 
 // 简易crud表单测试
-const configName = ref('lngChargeAuditMobileCRUD')
+// const configName = ref('orderCarInMobileCRUD')
+// const serviceName = ref('af-gaslink')
+// const configName = ref('lngPriceManageMobileCRUD')
+const configName = ref('测试2')
 const serviceName = ref('af-gaslink')
+// const configName = ref('mobile_liushuiQueryCRUD')
+// const serviceName = ref('af-revenue')
 
 // 资源权限测试
 // const configName = ref('crud_sources_test')
@@ -48,12 +55,12 @@ const serviceName = ref('af-gaslink')
 // 跳转到表单——以表单组来渲染纯表单
 function toDetail(item) {
   router.push({
-    name: 'XFormGroupView',
-    query: {
-      id: item[idKey.value],
-      // id: item.rr_id,
-      // o_id: item.o_id,
-    },
+    name: 'xformgroup222',
+    // query: {
+    //   id: item[idKey.value],
+    // id: item.rr_id,
+    // o_id: item.o_id,
+    // },
   })
 }
 
@@ -69,19 +76,36 @@ function toDetail(item) {
 //     },
 //   })
 // }
+function addOption() {
+  console.log('用户----', userInfo)
+  router.push({
+    name: 'XFormGroupView',
+    // params: { id: totalCount.value },
+    // query: {
+    //   configName: configName.value,
+    //   serviceName: serviceName.value,
+    //   mode: '新增',
+    // },
+  })
+  // 如果存在回调函数，调用它并传递true表示已处理
+  // if (typeof callback === 'function') {
+  //   callback(true)
+  // }
+}
 
 // 修改功能
-// function updateRow(result) {
-//   router.push({
-//     name: 'XFormView',
-//     params: { id: result.o_id, openid: result.o_id },
-//     query: {
-//       configName: configName.value,
-//       serviceName: serviceName.value,
-//       mode: '修改',
-//     },
-//   })
-// }
+function updateRow(result) {
+  console.log('用户----', userInfo)
+  router.push({
+    name: 'XFormView',
+    params: { id: 1, openid: 2 },
+    query: {
+      configName: configName.value,
+      serviceName: serviceName.value,
+      mode: '修改',
+    },
+  })
+}
 
 // 删除功能
 function deleteRow(result) {
@@ -92,13 +116,38 @@ function deleteRow(result) {
 <template>
   <NormalDataLayout id="XCellListView" title="工作计划">
     <template #layout_content>
+      <!--      <XCellList -->
+      <!--        :config-name="configName" -->
+      <!--        :service-name="serviceName" -->
+      <!--        :custom-add="true" -->
+      <!--        :custom-edit="true" -->
+      <!--        :id-key="idKey" -->
+      <!--        @to-detail="toDetail" -->
+      <!--        @delete-row="deleteRow" -->
+      <!--        @update="updateRow" -->
+      <!--        @add="addOption" -->
+      <!--      /> -->
+
+      <!--      :fix-query-form="{ u_f_price_state: ['生效', '待生效'] }" -->
+
+      <!--      <XCellList -->
+      <!--        config-name="ApplyMobileSuperviseCRUD" -->
+      <!--        service-name="af-apply" -->
+      <!--        @to-detail="toDetail" -->
+      <!--        @delete-row="deleteRow" -->
+      <!--      /> -->
+
+      <!--      <XCellList -->
+      <!--        service-name="af-revenue" -->
+      <!--        config-name="userfiles_sel_address" -->
+      <!--        @to-detail="toDetail" -->
+      <!--      /> -->
       <XCellList
-        :config-name="configName"
-        :service-name="serviceName"
-        :fix-query-form="{ o_f_oper_name: 'edu_test' }"
-        :id-key="idKey"
+        service-name="af-apply"
+        config-name="ApplyMobileProcessCRUD"
+        :custom-add="true"
         @to-detail="toDetail"
-        @delete-row="deleteRow"
+        @add="addOption"
       />
     </template>
   </NormalDataLayout>

package/src/views/component/XFormGroupView/index.vue

@@ -5,16 +5,19 @@ import { showDialog } from 'vant'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+// const configName = ref('reviewFormGroup')
+// const serviceName = ref('af-revenue')
+
 // 纯表单
-const configName = ref('form_check_test')
-const serviceName = ref('af-system')
+// const configName = ref('form_check_test')
+// const serviceName = ref('af-system')
 
 // const configName = ref("计划下发Form")
 // const serviceName = ref("af-linepatrol")
 
 // 表单组
-// const configName = ref('lngChargeAuditMobileFormGroup')
-// const serviceName = ref('af-gaslink')
+const configName = ref('lngChargeAuditMobileFormGroup')
+const serviceName = ref('af-gaslink')
 
 const formData = ref({})
 const formGroup = ref(null)
@@ -22,7 +25,8 @@ const route = useRoute()
 const isInit = ref(false)
 function submit(_result) {
   showDialog({ message: '提交成功' }).then(() => {
-    history.back()
+    console.log('12121')
+    // history.back()
   })
 }
 
@@ -63,8 +67,8 @@ function submit(_result) {
       <!--      v-if="isInit" -->
       <XFormGroup
         ref="formGroup"
-        :config-name="configName"
-        :service-name="serviceName"
+        config-name="ApplyAddContractFormGroup"
+        service-name="af-apply"
         :group-form-data="formData"
         mode="新增"
         @submit="submit"

package/src/views/component/XFormGroupView/xformgroup222.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import XFormGroup from '@af-mobile-client-vue3/components/data/XFormGroup/index.vue'
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import dayjs from 'dayjs/esm/index'
+import { showToast } from 'vant'
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const configName = ref('appapplyuserinfoFormGroup')
+const serviceName = ref('af-apply')
+const route = useRoute()
+const userInfo = useUserStore().getUserInfo()
+const workflowId = ref('3045')
+const userinfoid = ref('93116')
+const model = ref('编辑')
+const groupFormData = ref({})
+
+function submit(res) {
+  if (model.value === '新增') {
+    res.t_userinfo.f_operate_date = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    res.t_userinfo.f_orgid = userInfo.f_orgid
+    res.t_userinfo.f_orgname = userInfo.f_orgname
+    res.t_userinfo.f_depid = userInfo.f_depid
+    res.t_userinfo.f_depname = userInfo.f_depname
+    res.t_userinfo.f_operatorid = userInfo.f_operatorid
+    res.t_userinfo.f_operator = userInfo.f_operator
+    res.t_userinfo.f_workflow_id = this.f_workflow_id
+    res.t_userinfo.f_user_state = '预备'
+
+    res.t_userfiles.f_operate_date = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    res.t_userfiles.f_orgid = userInfo.f_orgid
+    res.t_userfiles.f_orgname = userInfo.f_orgname
+    res.t_userfiles.f_depid = userInfo.f_depid
+    res.t_userfiles.f_depname = userInfo.f_depname
+    res.t_userfiles.f_operatorid = userInfo.f_operatorid
+    res.t_userfiles.f_operator = userInfo.f_operator
+    res.t_userfiles.f_workflow_id = this.f_workflow_id
+    res.t_userfiles.f_table_state = '待开通'
+  }
+  let saveData = res
+  if (saveData.t_userfiles.f_gasbrand_id.length > 0) {
+    saveData.t_userfiles.f_gasbrand_id = saveData.t_userfiles.f_gasbrand_id[0]
+  }
+  if (saveData.t_userfiles.f_price_id.length > 0) {
+    saveData.t_userfiles.f_price_id = saveData.t_userfiles.f_price_id[0]
+  }
+  if (model.value === '编辑') {
+    saveData = Object.assign(saveData, {
+      f_operator_record: userInfo.f_operator,
+      f_operatorid_record: userInfo.f_operatorid,
+      f_orgid_record: userInfo.f_orgid,
+      f_orgname_record: userInfo.f_orgname,
+      f_depid_record: userInfo.f_depid,
+      f_depname_record: userInfo.f_depname,
+    })
+  }
+  runLogic('userFIleSaveLogic', saveData, 'af-revenue').then((res) => {
+    showToast('操作成功！')
+    history.back()
+  })
+}
+const isInit = ref(false)
+function init() {
+  if (model.value === '编辑') {
+    runLogic('getFileDetailForEdit', { f_userinfo_id: userinfoid.value }, 'af-revenue').then((res) => {
+      // if (res.t_userfiles.f_gasmodel_id) {
+      //   res.t_userfiles.f_gasmodel_id = 76
+      // }
+      // if (res.t_userfiles.f_price_id) {
+      //   res.t_userfiles.f_price_id = [res.t_userfiles.f_price_id]
+      // }
+      console.log('1111111----,', res)
+      groupFormData.value = res
+      isInit.value = true
+    })
+  }
+}
+onMounted(() => {
+  init()
+})
+</script>
+
+<template>
+  <XFormGroup
+    v-if="isInit"
+    mode="修改"
+    :config-name="configName"
+    :service-name="serviceName"
+    :group-form-data="groupFormData"
+    @submit="submit"
+  />
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/views/component/XFormView/index.vue

@@ -3,8 +3,8 @@ import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
 import { ref } from 'vue'
 
-const configName = ref('AddConstructionForm')
-const serviceName = ref('af-linepatrol')
+const configName = ref('addappapplychargeForm')
+const serviceName = ref('af-apply')
 
 const formGroupAddConstruction = ref(null)
 </script>

package/src/views/user/my/comm/ModifyPassword.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import { modifyPassword } from '@af-mobile-client-vue3/services/api/user'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { showDialog, showToast, Button as vanButton, Field as vanField, Form as vanForm, Icon as vanIcon, Popup as vanPopup } from 'vant'
+import { reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 定义 props 和 emits
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:visible', value: boolean): void
+}>()
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 表单引用
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 密码显示状态
+const showOldPassword = ref(false)
+const showNewPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+// 加载状态
+const loading = ref(false)
+
+// 密码强度验证正则
+const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+
+// 验证密码强度
+function validatePasswordStrength(password: string): boolean {
+  return strongPasswordRegex.test(password)
+}
+
+// 验证确认密码
+function validateConfirmPassword(value: string): boolean {
+  return value === formData.newPassword
+}
+
+// 表单验证规则
+const rules = {
+  oldPassword: [
+    { required: true, message: '请输入旧密码' },
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码' },
+    {
+      validator: (value: string) => {
+        if (value && !validatePasswordStrength(value)) {
+          return '新密码必须包含大小写字母、数字和特殊字符，且长度不少于8位'
+        }
+        return true
+      },
+    },
+  ],
+  confirmPassword: [
+    { required: true, message: '请再次输入新密码' },
+    {
+      validator: (value: string) => {
+        if (value && !validateConfirmPassword(value)) {
+          return '两次密码输入不一致'
+        }
+        return true
+      },
+    },
+  ],
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    loading.value = true
+
+    // 验证表单
+    await formRef.value?.validate()
+
+    // 调用修改密码API
+    const result = await handleModifyPassword({ data: {
+      ename: userStore.getUserInfo().username,
+      password: formData.oldPassword,
+      newpassword: formData.newPassword,
+      affirmpassword: formData.confirmPassword,
+    } })
+    if (result.success) {
+      showDialog({
+        title: '成功',
+        message: '修改密码成功，请重新登录',
+        confirmButtonText: '立即重新登录',
+      }).then(() => {
+        // 退出登录
+        userStore.logout()
+        // 跳转到登录页
+        router.push('/login')
+      })
+    }
+    else {
+      showToast(result.message || '修改密码失败')
+    }
+  }
+  catch (error) {
+    console.error('修改密码失败:', error)
+    showToast('修改密码失败，请检查输入信息')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 关闭弹窗
+function closeModal() {
+  emit('update:visible', false)
+}
+
+// 修改密码API调用
+async function handleModifyPassword(data: any) {
+  try {
+    const res = await modifyPassword(data)
+    if (res && res === 'true') {
+      return {
+        success: true,
+        message: '修改成功',
+      }
+    }
+    else {
+      return {
+        success: false,
+        message: '修改密码失败,请检查原始密码是否正确！',
+      }
+    }
+  }
+  catch (error: any) {
+    return {
+      success: false,
+      message: error?.message || '修改密码失败',
+    }
+  }
+}
+
+// 监听visible变化，重置表单
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    // 弹窗关闭时重置表单
+    formData.oldPassword = ''
+    formData.newPassword = ''
+    formData.confirmPassword = ''
+    showOldPassword.value = false
+    showNewPassword.value = false
+    showConfirmPassword.value = false
+  }
+})
+</script>
+
+<template>
+  <van-popup
+    :show="props.visible"
+    position="center"
+    :close-on-click-overlay="false"
+    round
+    class="modify-password-popup"
+    @update:show="emit('update:visible', $event)"
+  >
+    <div class="popup-content">
+      <!-- 标题 -->
+      <div class="popup-header">
+        <h3 class="popup-title">
+          修改密码
+        </h3>
+        <van-icon name="cross" class="close-icon" @click="closeModal" />
+      </div>
+
+      <!-- 表单 -->
+      <van-form ref="formRef" class="password-form" @submit="handleSubmit">
+        <!-- 旧密码 -->
+        <van-field
+          v-model="formData.oldPassword"
+          name="oldPassword"
+          label="旧密码"
+          placeholder="请输入旧密码"
+          :type="showOldPassword ? 'text' : 'password'"
+          :rules="rules.oldPassword"
+          @click-right-icon="showOldPassword = !showOldPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showOldPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 新密码 -->
+        <van-field
+          v-model="formData.newPassword"
+          name="newPassword"
+          label="新密码"
+          placeholder="请输入新密码"
+          :type="showNewPassword ? 'text' : 'password'"
+          :rules="rules.newPassword"
+          @click-right-icon="showNewPassword = !showNewPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showNewPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 确认新密码 -->
+        <van-field
+          v-model="formData.confirmPassword"
+          name="confirmPassword"
+          label="确认新密码"
+          placeholder="请再次输入新密码"
+          :type="showConfirmPassword ? 'text' : 'password'"
+          :rules="rules.confirmPassword"
+          @click-right-icon="showConfirmPassword = !showConfirmPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showConfirmPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 按钮组 -->
+        <div class="form-buttons">
+          <van-button
+            plain
+            type="default"
+            size="large"
+            class="cancel-btn"
+            @click="closeModal"
+          >
+            取消
+          </van-button>
+          <van-button
+            type="primary"
+            size="large"
+            native-type="submit"
+            :loading="loading"
+            class="submit-btn"
+          >
+            确认修改
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped lang="less">
+.modify-password-popup {
+  width: 90%;
+  max-width: 400px;
+
+  .popup-content {
+    padding: 20px;
+
+    .popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .popup-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+      }
+
+      .close-icon {
+        font-size: 20px;
+        color: #999;
+        cursor: pointer;
+        padding: 4px;
+
+        &:hover {
+          color: #666;
+        }
+      }
+    }
+
+    .password-form {
+      .form-buttons {
+        display: flex;
+        gap: 12px;
+        margin-top: 24px;
+
+        .cancel-btn,
+        .submit-btn {
+          flex: 1;
+          height: 44px;
+          border-radius: 8px;
+          font-size: 16px;
+        }
+
+        .cancel-btn {
+          border-color: #ddd;
+          color: #666;
+        }
+
+        .submit-btn {
+          background-color: #3b82f6;
+          border-color: #3b82f6;
+        }
+      }
+    }
+  }
+}
+
+// 覆盖vant默认样式
+:deep(.van-field) {
+  padding: 12px 0;
+
+  .van-field__label {
+    color: #333;
+    font-weight: 500;
+  }
+
+  .van-field__control {
+    color: #333;
+  }
+
+  .van-field__right-icon {
+    padding: 4px;
+  }
+}
+
+:deep(.van-popup) {
+  border-radius: 12px;
+}
+</style>

package/src/views/user/my/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import { Dialog as vanDialog, Icon as vanIcon } from 'vant'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ModifyPassword from './comm/ModifyPassword.vue'