fix:报名页面增加loading效果

src/views/new-employee/WelcomePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="welcome">
+  <div class="welcome" v-loading="enrollLoading">
     <p class="top-title">欢迎来到京东方大学</p>
     <!-- 内容卡片 -->
     <div class="main">
@@ -33,6 +33,7 @@
             <button
               v-if="approvalResults == '1' || approvalResults == '4'"
               class="btn btn-default btn-lg send center-block start-btn"
+              :disabled="enrollLoading"
               @click="handleEnrollClick"
             >
               报名社招新员工项目
@@ -40,6 +41,7 @@
             <button
               v-else
               class="btn btn-default btn-lg send center-block start-btn"
+              :disabled="enrollLoading"
               @click="handleEnrollClick"
             >
               开启学习之旅
@@ -89,6 +91,7 @@ export default {
       processing: false,
       confirmBtnText: "确认",
       infoConfirmDialogVisible: false,
+      enrollLoading: false,
     };
   },
   computed: {
@@ -122,12 +125,21 @@ export default {
     // 报名按钮点击
     async handleEnrollClick() {
       if (this.approvalResults == "1" || this.approvalResults == "4") {
-        const res = await enrollRequest();
-        if (res.data.sendToOaSuccess != 0) {
+        this.enrollLoading = true;
+        try {
+          const res = await enrollRequest();
+          if (res.data.sendToOaSuccess != 0) {
+            this.$refs.customMessage.show(
+              "报名失败请稍后重试，如果再次失败，请联系：XXXX，联系方式：XXXX。"
+            );
+          }
+        } catch (error) {
+          console.error("报名请求失败:", error);
           this.$refs.customMessage.show(
             "报名失败请稍后重试，如果再次失败，请联系：XXXX，联系方式：XXXX。"
           );
-          return;
+        } finally {
+          this.enrollLoading = false;
         }
       } else {
         this.$router.push("/new-employee/study?fromWelcome=1");
@@ -274,6 +286,16 @@ export default {
   transform: translateY(0);
 }
 
+.start-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.start-btn:disabled:hover {
+  transform: none;
+}
+
 /* 响应式样式 */
 @media (max-width: 768px) {
   .top-title {
@@ -330,5 +352,10 @@ export default {
     display: none !important;
   }
 }
+
+/* Loading遮罩层透明度 */
+.welcome ::v-deep .el-loading-mask {
+  background-color: rgba(255, 255, 255, 0.5) !important;
+}
 </style>