68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
---
|
||
author: Peanut
|
||
created_at: 2026-06-23
|
||
purpose: 明确小程序编辑资料页面在昵称未填时给出 Toast 提示的优化方案
|
||
---
|
||
|
||
# 小程序编辑资料页昵称必填提示优化
|
||
|
||
## 背景
|
||
|
||
当前小程序的编辑资料页面（`mini-program/src/pages/onboarding/index.vue`）在昵称未填写时，点击保存按钮会直接静默返回，没有任何提示。用户无法判断是按钮失效、网络问题还是字段未填，体验较差。
|
||
|
||
## 目标
|
||
|
||
- 当用户点击保存按钮时，如果昵称未填写，必须给出明确的 Toast 提示「请填写昵称」。
|
||
- 保持改动最小，不影响现有保存流程和其他字段行为。
|
||
|
||
## 当前问题定位
|
||
|
||
在 `saveProfile` 方法中存在以下逻辑：
|
||
|
||
```javascript
|
||
if (!form.nickname.trim() || saving.value) return
|
||
```
|
||
|
||
当 `form.nickname` 为空或仅包含空白字符时，条件成立，方法直接 `return`，没有触发任何提示。
|
||
|
||
## 方案
|
||
|
||
采用「保存时校验 + Toast 提示」的轻量方案。
|
||
|
||
### 具体改动
|
||
|
||
**文件**：`mini-program/src/pages/onboarding/index.vue`
|
||
|
||
**修改 `saveProfile` 方法**：
|
||
|
||
1. 先判断 `saving.value`，避免重复提交。
|
||
2. 再判断昵称是否为空，为空时调用 `uni.showToast({ title: '请填写昵称', icon: 'none' })` 后返回。
|
||
|
||
改动后逻辑示例：
|
||
|
||
```javascript
|
||
const saveProfile = async () => {
|
||
if (saving.value) return
|
||
|
||
if (!form.nickname.trim()) {
|
||
uni.showToast({ title: '请填写昵称', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
saving.value = true
|
||
// 原有保存逻辑保持不变
|
||
}
|
||
```
|
||
|
||
### 不改动的部分
|
||
|
||
- 不修改其他字段的校验规则。
|
||
- 不调整提示方式为字段高亮、弹窗或自动聚焦。
|
||
- 不新增失焦校验或实时输入校验。
|
||
|
||
## 验证标准
|
||
|
||
- 进入编辑资料页面，清空昵称后点击保存，页面顶部弹出 Toast「请填写昵称」。
|
||
- 填写昵称后点击保存，能正常提交并显示「已保存」。
|
||
- 浏览器 Console 无报错。
|