hookehuyr

fix(plan): 修复保额输入组件问题并统一计划书模版样式

- 修复 AmountInput 组件键盘输入报错问题
- 修复快速输入时显示 [object Object] 的异常
- 优化输入体验,引入内部状态分离显示值与模型值
- 修复标签和币种提示分两行显示的样式问题
- 统一计划书模版组件间距,增强视觉一致性
- 为重疾保险模版添加配置缺失提示

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -63,7 +63,8 @@
"Bash(~/.bun/bin/bun --version)",
"Bash(npm run dev:weapp:*)",
"Bash(__NEW_LINE_19c6a134b9496225__ echo \"✅ 已删除不再使用的 Apifox 相关脚本\")",
"Bash(cat:*)"
"Bash(cat:*)",
"Bash(pkill:*)"
]
},
"enableAllProjectMcpServers": true,
......
......@@ -5,6 +5,41 @@
---
## [2026-02-06] - 修复保额输入组件输入报错及体验问题
### 修复
- 修复 `AmountInput` 组件在键盘输入时报错 `value.replace is not a function` 的问题
- 修复快速输入时出现 `[object Object]` 的异常显示问题
- 修复输入过程中格式化逻辑导致的光标跳动和无法输入小数点的问题
### 技术实现
- 增强 `onInput` 事件处理,防御性提取小程序/Web事件对象中的 `value` (`e.detail.value``e.target.value`)
- 将输入值显式转换为字符串 `String(value)` 再进行处理
- 引入内部状态 `inputValue` 分离显示值与模型值
- 优化同步逻辑:仅当外部 `modelValue` 发生实质性变更时才更新显示值,保留用户输入过程中的中间状态(如 "1.")
- 添加 `@blur` 事件,仅在失焦时进行严格的两位小数格式化
## [2026-02-06] - 修复保额输入组件样式
### 修复
- 修复 `AmountInput` 组件标签和币种提示分两行显示的问题
### 技术实现
- 使用 Flexbox (`flex items-center`) 强制标签和币种提示在同一行显示
- 移除冗余的空 `<span>` 标签
## [2026-02-06] - 美化和统一计划书模版样式
### 优化
- 统一“人寿保险”和“重疾保险”模版的组件间距(`mb-5`),解决字段过于紧凑的问题
- 统一错误处理逻辑,为重疾保险模版添加“模版配置未找到”的提示状态
- 确保两个模版在视觉和交互上的一致性
### 技术实现
- 更新 `LifeInsuranceTemplate.vue``CriticalIllnessTemplate.vue`
- 为所有表单组件添加 `class="mb-5"`
-`CriticalIllnessTemplate.vue` 中添加 `v-if="config"` 判断及 `v-else` 错误提示
## [2026-02-06] - 优化计划书表单字段顺序及联动逻辑
### 优化
......@@ -800,7 +835,7 @@
---
**详细信息**
- **影响文件**:
- **影响文件**:
- `src/pages/search/index.vue`
- `src/pages/knowledge-base/index.vue`
- `src/pages/material-list/index.vue`
......
<template>
<div>
<!-- 标签 -->
<div v-if="label" class="text-sm text-gray-600 mb-2">
{{ label }}
<div v-if="label" class="text-sm text-gray-600 mb-2 flex items-center">
<span>{{ label }}</span>
<span v-if="currencyText" class="text-gray-500">{{ currencyText }}</span>
</div>
......@@ -29,8 +29,9 @@
<!-- 保额输入 -->
<div class="border border-gray-200 rounded-lg flex items-center overflow-hidden">
<nut-input
:model-value="formattedValue"
:model-value="inputValue"
@input="onInput"
@blur="onBlur"
type="digit"
:placeholder="placeholder"
class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
......@@ -68,7 +69,7 @@
* placeholder="请输入保额"
* />
*/
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import { FEATURE_FLAGS, CURRENCY_SYMBOLS, CURRENCY_MAP } from '@/config/plan-templates'
/**
......@@ -201,34 +202,64 @@ const currencyText = computed(() => {
})
/**
* 格式化显示值(元,带2位小数)
* @description 将分转换为元进行显示
* @type {ComputedRef<string>}
* @example
* // modelValue = 100000 (分)
* // formattedValue() // 返回: '1000.00'
* 内部显示值(元)
* @type {Ref<string>}
*/
const formattedValue = computed(() => {
if (props.modelValue === null || props.modelValue === undefined) {
return ''
}
// 分 -> 元,保留2位小数
return (props.modelValue / 100).toFixed(2)
})
const inputValue = ref('')
/**
* 监听 modelValue 变化,同步到内部 inputValue
* 仅当外部值与当前输入值解析结果不一致时才同步,避免输入过程中被格式化打断
*/
watch(
() => props.modelValue,
(newVal) => {
// 解析当前 inputValue 为分
const currentCents = Math.round(parseFloat(inputValue.value || '0') * 100)
// 只有当值真正改变时才更新输入框(允许用户输入过程中保留 "1." 等中间状态)
if (newVal !== currentCents) {
if (newVal === null || newVal === undefined) {
inputValue.value = ''
} else {
// 分 -> 元,保留2位小数
inputValue.value = (newVal / 100).toFixed(2)
}
}
},
{ immediate: true }
)
/**
* 用户输入处理
* @description 将用户输入的元转换为分存储
* @param {string} value - 输入值
*
* @example
* // 用户输入: '1000.50'
* // onInput('1000.50')
* // -> emit('update:modelValue', 100050) // 分
* @param {string|number|Object} val - 输入值
*/
const onInput = (value) => {
// 移除非数字和小数点
const cleanValue = value.replace(/[^\d.]/g, '')
const onInput = (val) => {
let value = val
// 防御性处理:如果接收到的是事件对象
if (typeof val === 'object' && val !== null) {
if (val.detail && typeof val.detail.value !== 'undefined') {
// 小程序原生事件
value = val.detail.value
} else if (val.target && typeof val.target.value !== 'undefined') {
// Web 原生事件
value = val.target.value
} else {
// 无法提取值,直接返回,避免 [object Object]
return
}
}
// 确保 value 为字符串
const valStr = String(value)
// 更新内部显示值(允许用户输入任意合法字符,如小数点)
inputValue.value = valStr
// 移除非数字和小数点(安全处理)
const cleanValue = valStr.replace(/[^\d.]/g, '')
// 转换为分(整数)
const yuan = parseFloat(cleanValue)
......@@ -240,6 +271,16 @@ const onInput = (value) => {
}
/**
* 失去焦点时格式化
*/
const onBlur = () => {
if (props.modelValue !== null && props.modelValue !== undefined) {
inputValue.value = (props.modelValue / 100).toFixed(2)
}
}
/**
* 选择币种(多币种模式)
* @param {string} value - 币种代码
*/
......
<template>
<div>
<div v-if="config">
<!-- 性别 -->
<PlanFieldRadio
v-model="form.gender"
label="性别"
:options="['男', '女']"
class="mb-5"
/>
<!-- 出生年月日 -->
......@@ -13,6 +14,7 @@
label="出生年月日"
placeholder="请选择日期"
@change="onBirthdayChange"
class="mb-5"
/>
<!-- 年龄(根据出生日期自动计算,可编辑) -->
......@@ -20,6 +22,7 @@
v-model="form.age"
label="年龄"
placeholder="请选择出生日期自动计算"
class="mb-5"
/>
<!-- 是否吸烟 -->
......@@ -27,6 +30,7 @@
v-model="form.smoker"
label="是否吸烟"
:options="['是', '否']"
class="mb-5"
/>
<!-- 保额 -->
......@@ -35,6 +39,7 @@
label="保额"
placeholder="请输入保额"
:currency="config.currency"
class="mb-5"
/>
<!-- 缴费年期 -->
......@@ -43,6 +48,7 @@
label="缴费年期"
placeholder="请选择缴费年期"
:options="config.payment_periods"
class="mb-5"
/>
<!-- 保险期间 -->
......@@ -53,6 +59,12 @@
</div>
</div>
</div>
<!-- 配置缺失提示 -->
<div v-else class="text-center text-gray-500 py-10">
<p>⚠️ 模版配置未找到</p>
<p class="text-sm mt-2">请检查产品配置或联系开发人员</p>
</div>
</template>
<script setup>
......
......@@ -5,6 +5,7 @@
v-model="form.gender"
label="性别"
:options="['男', '女']"
class="mb-5"
/>
<!-- 出生年月日 -->
......@@ -13,6 +14,7 @@
label="出生年月日"
placeholder="请选择日期"
@change="onBirthdayChange"
class="mb-5"
/>
<!-- 年龄(根据出生日期自动计算,可编辑) -->
......@@ -20,6 +22,7 @@
v-model="form.age"
label="年龄"
placeholder="请选择出生日期自动计算"
class="mb-5"
/>
<!-- 是否吸烟 -->
......@@ -27,6 +30,7 @@
v-model="form.smoker"
label="是否吸烟"
:options="['是', '否']"
class="mb-5"
/>
<!-- 保额 -->
......@@ -35,6 +39,7 @@
label="保额"
placeholder="请输入保额"
:currency="config.currency"
class="mb-5"
/>
<!-- 缴费年期 -->
......@@ -43,6 +48,7 @@
label="缴费年期"
placeholder="请选择缴费年期"
:options="config.payment_periods"
class="mb-5"
/>
<!-- 保险期间 -->
......