✨ feat: 新增加载动画以及按钮禁用

src/views/adManage/sb/campaigns/CreateCampaigns/component/ProductSetCreativity1.vue

@@ -226,8 +226,8 @@
         </span>
       </template>
     </el-dialog>
-    <el-dialog v-model="commodityDialog" title="更换商品" width="50%" v-loading="dialogLoading3">
-      <el-radio-group v-model="selectedCommodity" style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
+    <el-dialog v-model="commodityDialog" title="更换商品" width="50%">
+      <el-radio-group v-loading="dialogLoading3" v-model="selectedCommodity" style="display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start">
         <div v-for="(item, index) in flattenedReplaceableCommodity" :key="index">
           <el-radio :label="item.asin" style="height: 80px; border-bottom: 1px solid #ccc">
             <div style="padding: 10px; display: flex">
@@ -247,8 +247,8 @@
           </el-radio>
         </div>
       </el-radio-group>
-      <div style="margin-top: 20px; display: flex; justify-content: center;">
-        <el-button type="primary" @click="handleSelectedCommodity">确定</el-button>
+      <div style="margin-top: 20px; display: flex; justify-content: center">
+        <el-button type="primary" :disabled="!selectedCommodity" @click="handleSelectedCommodity">确定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -515,7 +515,7 @@ async function getCommodityCardData() {
 
 // 更改商品功能
 const commodityDialog = ref(false)
-const selectedCommodity = ref(3)
+const selectedCommodity = ref()
 const replaceableCommodity = ref([])
 const dialogLoading3 = ref(false)
 let currentEditingIndex = ref(null)
@@ -526,8 +526,8 @@ function openCommodityDialog(index) {
 }
 
 async function getAdditionalCommodityData() {
-  dialogLoading3.value = true
   try {
+    dialogLoading3.value = true
     // 获取除前三个之外的所有 ASIN
     const additionalAsins = asinList.value.slice(3)
 
@@ -548,12 +548,12 @@ async function getAdditionalCommodityData() {
         // console.log('Response for additional ASIN', asin, ':', response)
       } catch (error) {
         console.log('Error for additional ASIN', asin, ':', error)
-      } finally {
-        dialogLoading3.value = false
       }
     }
   } catch (error) {
     console.log('Outer error:', error)
+  } finally {
+    dialogLoading3.value = false
   }
 }