退款loading

src/views/order/index.vue

@@ -204,8 +204,11 @@
                             <div class="recharge_footer_itemright_botton_boxonetext">￥{{ refundamount }}</div>
                         </div>
                         <div class="recharge_footer_itemright_botton_boxtow">
-                            <el-button type="primary" style="width: 100%; height: 100%;"
+                            <el-button type="primary" style="width: 100%; height: 100%;" :loading="buttonloading"
-                                @click="payreturnOrderclick">支付退回</el-button>
+                                @click="payreturnOrderclick">
+                                <span v-if="!buttonloading">支付退回</span>
+                                <span v-else>支付退回...</span>
+                            </el-button>
                         </div>
                     </div>
                 </div>
@@ -236,7 +239,10 @@ const handlerecharge = () => { //退单切换
     recharge.value = !recharge.value
 }
 
+const buttonloading = ref() //loading
+
 const payreturnOrderclick = async () => {
+    buttonloading.value = true
     if (refundamount.value == 0) {
         ElMessage.error('退款金额不能为0！')
         return false
@@ -259,12 +265,15 @@ const payreturnOrderclick = async () => {
             itemboxshow.value = false
             refundamount.value = 0
             ElMessage.success('退款成功！')
+            buttonloading.value = false
             asyncorderfindOrder()
         } else {
+            buttonloading.value = false
             ElMessage.error('以没有退款项目！')
         }
 
     } catch (error) {
+        buttonloading.value = false
 
     }