|
|
@@ -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>
|
fly