feat(plan): 年缴保费显示添加千分位分隔符
- 修改 AmountKeyboard 组件的 displayValue 计算属性 - 显示已确认数值时自动添加千分位(如 1,000、15,000) - 输入过程中保持原始显示,避免跳动干扰 - 数据存储不变,仅影响显示层 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Showing
1 changed file
with
8 additions
and
10 deletions
| ... | @@ -296,26 +296,24 @@ const inputValue = ref('') | ... | @@ -296,26 +296,24 @@ const inputValue = ref('') |
| 296 | const showAmountModal = ref(false) | 296 | const showAmountModal = ref(false) |
| 297 | 297 | ||
| 298 | /** | 298 | /** |
| 299 | - * 显示值(元) | 299 | + * 显示值(元,带千分位) |
| 300 | * @type {ComputedRef<string>} | 300 | * @type {ComputedRef<string>} |
| 301 | */ | 301 | */ |
| 302 | const displayValue = computed(() => { | 302 | const displayValue = computed(() => { |
| 303 | - // 优先显示输入过程中的值(不自动添加小数点) | 303 | + // 优先显示输入过程中的值(不自动添加小数点/千分位,避免输入时跳动) |
| 304 | if (inputValue.value) { | 304 | if (inputValue.value) { |
| 305 | // 直接返回用户输入的值,不自动格式化 | 305 | // 直接返回用户输入的值,不自动格式化 |
| 306 | return inputValue.value | 306 | return inputValue.value |
| 307 | } | 307 | } |
| 308 | - // 如果没有输入值,显示表单的原始值 | 308 | + // 如果没有输入值,显示表单的原始值(带千分位) |
| 309 | if (props.modelValue !== null && props.modelValue !== undefined) { | 309 | if (props.modelValue !== null && props.modelValue !== undefined) { |
| 310 | const yuan = props.modelValue / 100 | 310 | const yuan = props.modelValue / 100 |
| 311 | // 判断是否为整数 | 311 | // 判断是否为整数 |
| 312 | - if (Number.isInteger(yuan)) { | 312 | + const valueStr = Number.isInteger(yuan) |
| 313 | - // 整数,不添加小数点 | 313 | + ? yuan.toString() |
| 314 | - return yuan.toString() | 314 | + : yuan.toString() |
| 315 | - } else { | 315 | + // 添加千分位分隔符 |
| 316 | - // 有小数,保留原样 | 316 | + return valueStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',') |
| 317 | - return yuan.toString() | ||
| 318 | - } | ||
| 319 | } | 317 | } |
| 320 | return '' | 318 | return '' |
| 321 | }) | 319 | }) | ... | ... |
-
Please register or login to post a comment