退休优化

src/views/Mall.vue

@@ -38,6 +38,10 @@
         </div>
       </div>
     </div>
+    <div v-if="loading" class="loading-mask">
+      <div class="loading-spinner"></div>
+      <div>加载中...</div>
+    </div>
   </div>
 </template>
 
@@ -85,7 +89,8 @@ export default {
               "power": "10",
           }
       ],
-      userInfo:{}
+      userInfo: {},
+      loading: false
     }
   },
   methods:{
@@ -105,10 +110,18 @@ export default {
         }
       })
     },
-    toPayment(item){
-      joinRetirement(item.type).then(res=>{
-        console.log(res,'2222222222');
-      })
+    toPayment(item) {
+      this.loading = true;
+      joinRetirement(item.type)
+        .then(res => {
+          console.log(res, '2222222222');
+        })
+        .catch(err => {
+          console.error(err);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
     canClick(item) {
       const { chuji, yiji, erji, sanji } = this.userInfo;
@@ -230,4 +243,26 @@ export default {
   background: #cccccc;
   cursor: not-allowed;
 }
+.loading-mask {
+  position: fixed;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.3);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.loading-spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #b80032;
+  border-radius: 50%;
+  width: 40px; height: 40px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 10px;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+}
 </style>