Преглед на файлове

feat: 添加保存按钮加载状态,防止重复点击

Yannay преди 3 седмици
родител
ревизия
9f024b8aae
променени са 2 файла, в които са добавени 33 реда и са изтрити 11 реда
  1. 25 9
      pages/addClue/index.vue
  2. 8 2
      pages/orderForm/index.vue

+ 25 - 9
pages/addClue/index.vue

@@ -4,8 +4,8 @@
4 4
 	<!-- 		<view class="u-nav-slot left_btn" slot="left">
5 5
 				<text class="close_btn"  @click="handleClose">重置</text>
6 6
 			</view> -->
7
-			<view class="u-nav-slot" slot="right">
8
-				保存
7
+			<view class="u-nav-slot" slot="right" :class="{ 'is-disabled': saveLoading }">
8
+				{{ saveLoading ? '保存中...' : '保存' }}
9 9
 			</view>
10 10
 		</u-navbar>
11 11
 		<view class="follow_form_wrap">
@@ -220,7 +220,9 @@
220 220
 				originaDeptList : [],
221 221
 	
222 222
 				title: "新建线索",
223
-	
223
+
224
+				saveLoading: false,
225
+
224 226
 				rules: {
225 227
 					name: {
226 228
 						type: 'string',
@@ -400,13 +402,23 @@
400 402
 				this.form.manualAddressCode = undefined;
401 403
 				this.recognitionContent = undefined;
402 404
 			},
403
-			// 保存
405
+			// 保存(接口返回前禁止再次点击)
404 406
 			handleNavSaveClick() {
407
+				if (this.saveLoading) return;
405 408
 				this.$refs.form.validate().then(async () => {
406
-					await uni.$u.api.addClueMainInfo(this.form);
407
-					uni.$u.toast("保存成功");
408
-					this.handleClose();
409
-				})
409
+					this.saveLoading = true;
410
+					try {
411
+						await uni.$u.api.addClueMainInfo(this.form);
412
+						uni.$u.toast("保存成功");
413
+						this.handleClose();
414
+					} catch (e) {
415
+						// 失败后可再次点击
416
+					} finally {
417
+						this.saveLoading = false;
418
+					}
419
+				}).catch(() => {
420
+					// 校验未通过,无需改 saveLoading
421
+				});
410 422
 			},
411 423
 			async handleOption() {
412 424
 				// 获取人员
@@ -459,6 +471,10 @@
459 471
 	}
460 472
 </script>
461 473
 
462
-<style lang="scss">
474
+<style lang="scss" scoped>
463 475
 	@import "@/static/follow/index.scss";
476
+	.u-nav-slot.is-disabled {
477
+		opacity: 0.6;
478
+		pointer-events: none;
479
+	}
464 480
 </style>

+ 8 - 2
pages/orderForm/index.vue

@@ -116,7 +116,7 @@
116 116
 				@update:fileList="updateOtherFiles" tip-text="上传其他相关文件"></order-file-upload>
117 117
 		</view>
118 118
 
119
-		<u-button @click="handleNavSaveClick" type="primary">提交订单</u-button>
119
+		<u-button @click="handleNavSaveClick" type="primary" :loading="saveLoading" :disabled="saveLoading">{{ saveLoading ? '提交中...' : '提交订单' }}</u-button>
120 120
 
121 121
 	</view>
122 122
 </template>
@@ -143,6 +143,8 @@ export default {
143 143
 
144 144
 			sendFormId: undefined,
145 145
 
146
+			saveLoading: false,
147
+
146 148
 			form: {
147 149
 				clueId: '',
148 150
 				sendDate: '',
@@ -497,12 +499,14 @@ export default {
497 499
 			}
498 500
 		},
499 501
 
500
-		// 处理保存
502
+		// 处理保存(接口返回前禁止再次点击)
501 503
 		async handleNavSaveClick() {
504
+			if (this.saveLoading) return;
502 505
 			try {
503 506
 				// 表单验证
504 507
 				await this.$refs.form.validate();
505 508
 
509
+				this.saveLoading = true;
506 510
 				if (this.form.id) {
507 511
 					const updatedForm = {
508 512
 						clueId: this.form.clueId,
@@ -556,6 +560,8 @@ export default {
556 560
 				if (error.message) {
557 561
 					uni.$u.toast(error.message);
558 562
 				}
563
+			} finally {
564
+				this.saveLoading = false;
559 565
 			}
560 566
 		}
561 567
 	},