ADD: 设置轮播图

src/pages/goods/banners.vue

@@ -7,7 +7,7 @@
             <ChooseImage :limit="9" v-model="form.banners" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" @click="submit">提交</el-button>
+            <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
         </el-form-item>
     </el-form>
     
@@ -22,6 +22,7 @@ import {
     readGoods,
     setGoodsBanner
 } from "@/api/goods"
+import { toast } from '@/composables/util'
 
 const dialogVisible = ref(false)
 const form = reactive({
@@ -31,15 +32,30 @@ const form = reactive({
 const goodsId = ref(0)
 const open = (row)=>{
     goodsId.value = row.id
+    row.bannersLoading = true
     readGoods(goodsId.value)
     .then(res=>{
         form.banners = res.goodsBanner.map(o=>o.url)
         dialogVisible.value = true
     })
+    .finally(()=>{
+            row.bannersLoading = false
+        }
+    )
 }
 
 
+const loading = ref(false)
 const submit = ()=>{
+    loading.value = true
+    setGoodsBanner(goodsId.value, form)
+    .then(res=>{
+        toast("设置轮播图成功")
+        dialogVisible.value = false
+    })
+    .finally(()=>{
+        loading.value = false
+    })
 
 }
 

src/pages/goods/list.vue

@@ -77,7 +77,7 @@
                             <el-button class="px-1" type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
                             <el-button class="px-1" type="primary" size="small" text>商品规格</el-button>
                             <el-button class="px-1" type="primary" size="small" text 
-                            @click="handleSetGoodsBanners(scope.row)">设置轮播图</el-button>
+                            @click="handleSetGoodsBanners(scope.row)" :loading="scope.row.bannersLoading">设置轮播图</el-button>
                             <el-button class="px-1" type="primary" size="small" text>商品详情</el-button>
                             <el-popconfirm title="是否删除该商品?" confirm-button-text="确认" cancel-button-text="取消"
                                 @confirm="handleDelete(scope.row.id)">
@@ -211,7 +211,7 @@ const {
     getList: getGoodsList,
     onGetListSuccess: (res) => {
         tableData.value = res.list.map(o => {
-            o.statusLoading = false
+            o.bannersLoading = false
             return o
         })
         total.value = res.totalCount