feat: 认领按钮添加loading

frontend/src/views/CodeList.vue

@@ -7,7 +7,7 @@
                 <el-space class="action-bar-item-container action-bar-action-left">
                     <el-button-group class="ml-4">
                         <el-button type="primary" :icon="Refresh" @click="resetFilterAndRefreshTableList">刷新</el-button>
-                        <el-button type="primary" :icon="Box" @click="clickClaimCodes" v-if="showRenLingButton">认领</el-button>
+                        <el-button type="primary" :icon="Box" @click="clickClaimCodes" :loading="buttonState.renlingLoading" v-if="showRenLingButton">认领</el-button>
                     </el-button-group>
                 </el-space>
                 <el-space class="action-bar-item-container action-bar-action-right">
@@ -122,7 +122,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, reactive, watch } from 'vue'
+import { ref, computed, reactive, watch } from 'vue'
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -205,6 +205,10 @@ const defaultListState = {
     list: [],
 }
 
+const buttonState = reactive({
+    renlingLoading: false
+})
+
 // 当前编辑的row的数据
 const currentEditRow = ref({})
 // 上一个点击的row的数据
@@ -354,6 +358,7 @@ function resetFilterAndRefreshTableList() {
 
 // 认领按钮事件
 const userClaimCodes = async () => {
+    buttonState.renlingLoading = true
     try {
         const r = await store.dispatch('rulesList/userClaimCodes')
         const { msg, err } = r
@@ -377,6 +382,8 @@ const userClaimCodes = async () => {
             type: 'error',
             duration: 3000,
         })
+    } finally {
+        buttonState.renlingLoading = false
     }
 }
 const clickClaimCodes = () => {