82 lines
2.5 KiB
Markdown
82 lines
2.5 KiB
Markdown
## adminMemorial 确认操作说明
|
||
|
||
本文档说明在 `pages/memorial/adminMemorial.vue` 中新增的确认封装与其使用方式。
|
||
|
||
### 目的
|
||
- 在高风险操作（全部开启、全部关闭、强制开启、强制关闭、时长归零）前弹出确认，避免误触。
|
||
- 通过 Promise 封装让调用处可以使用 async/await，编写更清晰的顺序代码。
|
||
|
||
### 核心封装：confirmAction
|
||
```javascript
|
||
// 确认提示封装，返回是否确认
|
||
async function confirmAction(message) {
|
||
const res = await new Promise((resolve) => {
|
||
uni.showModal({
|
||
title: "确认操作",
|
||
content: message,
|
||
confirmText: "确认",
|
||
cancelText: "取消",
|
||
success: (r) => resolve(r),
|
||
});
|
||
});
|
||
return !!(res && res.confirm);
|
||
}
|
||
```
|
||
|
||
### 为何需要 Promise 包装
|
||
- `uni.showModal` 使用回调（success/fail），不能直接 `await`。
|
||
- 用 `new Promise` 将回调转换为 Promise，调用方即可：
|
||
```javascript
|
||
const ok = await confirmAction("确定要全部关闭吗？");
|
||
if (!ok) return; // 用户取消则中断后续流程
|
||
```
|
||
|
||
### 关于 `!!(res && res.confirm)`
|
||
- `res && res.confirm`：若存在回调结果再读取 `confirm`，否则为 `false`。
|
||
- `!!value`：将任意值强制转为布尔，等价 `Boolean(value)`。
|
||
- 语义：仅当用户点击“确认”时返回 `true`，其他情况均为 `false`。
|
||
|
||
### 已接入的高风险操作
|
||
- `handleAllOpen`：全部开启
|
||
- `handleAllClose`：全部关闭
|
||
- `handleForceOpen`：强制开启（需选中单元）
|
||
- `handleForceClose`：强制关闭（需选中单元）
|
||
- `handleResetDuration`：时长归零（需选中单元）
|
||
|
||
接入方式统一如下（示例）：
|
||
```javascript
|
||
const ok = await this.confirmAction("确定要全部开启吗？");
|
||
if (!ok) return;
|
||
// 继续调用接口
|
||
```
|
||
|
||
### 可定制项（如需）
|
||
- 通过 `uni.showModal` 的参数可定制：
|
||
- `title`：标题
|
||
- `content`：正文
|
||
- `showCancel`：是否显示取消按钮
|
||
- `confirmText` / `cancelText`：按钮文案
|
||
- `confirmColor` / `cancelColor`：按钮颜色
|
||
|
||
若需要让“取消”成为更显眼的默认选择，可调整按钮文案与颜色，或在交互上将危险操作改为二次输入确认。
|
||
|
||
### 错误处理（可选增强）
|
||
如需捕获弹窗失败（极少见），可在封装中补充 `fail` 并 `reject(err)`，调用方用 `try/catch` 处理：
|
||
```javascript
|
||
try {
|
||
const ok = await confirmAction("确定继续吗？");
|
||
if (!ok) return;
|
||
// ...
|
||
} catch (e) {
|
||
// 统一错误上报或提示
|
||
}
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|