fix(APP): 倒计时期间确认按钮禁用虚化 + 收窄倒计时范围
- 5秒倒计时期间确认按钮虚化禁用(点不了),只有取消可用,倒计时结束按钮解锁再点击才执行 - 收窄范围:仅 删除记录/删除图片/结束分支/驳回 保留5秒等待;接收/转交/派发/保存/创建/撤回转交 恢复直接确认
This commit is contained in:
@ -54,10 +54,10 @@
|
||||
<view class="dlg-box" @tap.stop>
|
||||
<text class="dlg-title">{{ confirmDlg.title }}</text>
|
||||
<text class="dlg-content">{{ confirmDlg.content }}</text>
|
||||
<text class="dlg-tip">⚠️ 请再次确认:倒计时结束点击「确认删除」才会生效</text>
|
||||
<text class="dlg-tip">⚠️ 5 秒确认等待中:请核对信息,倒计时结束后确认按钮才可点击</text>
|
||||
<view class="dlg-btns">
|
||||
<button class="dlg-btn dlg-cancel" @tap="confirmDlgCancel">取消</button>
|
||||
<button class="dlg-btn dlg-danger" @tap="confirmDlgConfirm">{{ confirmLabel('删除') }}</button>
|
||||
<button class="dlg-btn dlg-danger" :disabled="confirming === 'dlg' && confirmCount > 0" @tap="confirmDlgConfirm">{{ confirmLabel('删除') }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -184,40 +184,22 @@ export default {
|
||||
this.confirmCount = 5;
|
||||
},
|
||||
confirmLabel(baseText) {
|
||||
if (this.confirming === "dlg") return this.confirmCount > 0 ? `再次确认 (${this.confirmCount}s)` : "确认删除";
|
||||
if (this.confirming === "dlg" && this.confirmCount > 0) return `${baseText} (${this.confirmCount}s)`;
|
||||
return baseText;
|
||||
},
|
||||
confirmDlgConfirm() {
|
||||
this.confirmBtn(() => {
|
||||
const rec = this.confirmDlg.target;
|
||||
this.confirmDlg.visible = false;
|
||||
this.confirmDlg.target = null;
|
||||
if (rec) this.deleteRecord(rec);
|
||||
});
|
||||
if (this.confirming === "dlg" && this.confirmCount > 0) return; // 倒计时中:忽略
|
||||
if (this.confirming === "dlg") this.clearConfirm();
|
||||
const rec = this.confirmDlg.target;
|
||||
this.confirmDlg.visible = false;
|
||||
this.confirmDlg.target = null;
|
||||
if (rec) this.deleteRecord(rec);
|
||||
},
|
||||
confirmDlgCancel() {
|
||||
this.clearConfirm();
|
||||
this.confirmDlg.visible = false;
|
||||
this.confirmDlg.target = null;
|
||||
},
|
||||
confirmBtn(doAction) {
|
||||
if (this.confirming === "dlg") {
|
||||
if (this.confirmCount <= 0) {
|
||||
this.clearConfirm();
|
||||
doAction();
|
||||
} else {
|
||||
this.clearConfirm();
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.clearConfirm();
|
||||
this.confirming = "dlg";
|
||||
this.confirmCount = 5;
|
||||
this.confirmTimer = setInterval(() => {
|
||||
this.confirmCount -= 1;
|
||||
if (this.confirmCount <= 0) clearInterval(this.confirmTimer);
|
||||
}, 1000);
|
||||
},
|
||||
async deleteRecord(rec) {
|
||||
try {
|
||||
await request({ url: `/records/${rec.id}`, method: "DELETE" });
|
||||
@ -272,4 +254,5 @@ export default {
|
||||
.dlg-btn::after { border: none; }
|
||||
.dlg-cancel { background: #f3f4f6; color: #6b7280; }
|
||||
.dlg-danger { background: #dc2626; color: #fff; }
|
||||
.dlg-danger[disabled] { opacity: 0.5; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user