增加购物车添加loading

src/views/home/components/goods.vue

@@ -191,7 +191,7 @@ const props = defineProps({
     }
 })
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'loading'])
 
 const skuModalRef = ref(null)
 
@@ -233,6 +233,7 @@ function searchHandle() {
 
 // 确认选择规格回调
 function skuConfirm(params) {
+    emit('loading')
     emit('success', params)
 }
 
@@ -291,6 +292,8 @@ function showSkuHandle(item) {
             skuModalRef.value.show({ ...item })
         } else {
             // 单规格
+            loading.value = true
+            emit('loading')
             queryProductSkuAjax(item)
         }
     }
@@ -304,6 +307,7 @@ const queryProductSkuAjax = _.throttle(async function (goods) {
             productId: goods.id,
             spec_tag: ''
         })
+        loading.value = false
         emit('success', res)
     } catch (error) {
         console.log(error)

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="cart_wrap card">
+    <div class="cart_wrap card" v-loading="cartLoading">
       <div class="menu_top">
         <div class="menu" @click="pendingCartModalRef.show()">
           <el-icon class="icon">
@@ -40,7 +40,7 @@
           </el-icon>
         </div>
       </div>
-      <div class="shop_operation" v-loading="cartLoading">
+      <div class="shop_operation">
         <div class="shop_list">
           <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
             :key="item.id" @click="selectCartItemHandle(item, index)">
@@ -116,7 +116,7 @@
     </div>
     <div class="shop_manage card">
       <!-- 分类/商品列表 -->
-      <goods ref="goodsRef" :masterId="masterId" @success="addCart" />
+      <goods ref="goodsRef" :masterId="masterId" @success="addCart" @loading="cartLoading = true" />
       <!-- ©银收客 v{{ packageData.version }} -->
     </div>
   </div>
@@ -277,9 +277,13 @@ async function pendingCart(params, status = true) {
     });
     if (status && cartList.value.length) {
       await createCodeAjax();
-      cartLoading.value = false;
+      setTimeout(() => {
+        cartLoading.value = false;
+      }, 500);
     } else {
-      cartLoading.value = false;
+      setTimeout(() => {
+        cartLoading.value = false;
+      }, 500);
     }
   } catch (error) {
     cartLoading.value = false;