优化首页添加购物车

src/router/index.js

@@ -6,9 +6,6 @@ const routes = [
   {
     path: "/",
     name: "home",
-    meta: {
-      keepAlive: true
-    },
     component: home,
   },
   {

src/views/home/components/goods.vue

@@ -1,5 +1,4 @@
 <!-- 商品列表 -->
-
 <template>
     <div class="header">
         <div class="menus scroll-x">
@@ -115,7 +114,7 @@ function showSkuHandle(item) {
 }
 
 // 通过选中的商品规格查询价格
-async function queryProductSkuAjax(goods) {
+const queryProductSkuAjax = _.throttle(async function (goods) {
     try {
         const res = await queryProductSku({
             shopId: store.userInfo.shopId,
@@ -126,7 +125,7 @@ async function queryProductSkuAjax(goods) {
     } catch (error) {
         console.log(error)
     }
-}
+}, 1500)
 
 // 切换商品显示模式
 function changeShopListType() {
@@ -288,7 +287,7 @@ defineExpose({
 }
 
 .shop_list {
-    max-height: calc(100vh - 40px - 80px - 60px);
+    max-height: calc(100vh - 40px - 80px - 40px);
     overflow-y: auto;
     display: flex;
     flex-wrap: wrap;

src/views/home/index.vue

@@ -21,7 +21,7 @@
           </el-icon>
         </div> -->
       </div>
-      <div class="shop_operation">
+      <div class="shop_operation" v-loading="cartLoading">
         <div class="shop_list">
           <div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
             :key="item.id" @click="selectCartItemHandle(item, index)">
@@ -99,7 +99,7 @@
   <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
   <!-- 结算订单 -->
   <settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark"
-    :orderId="orderId" :masterId="masterId" @paySuccess="createCodeAjax" />
+    :orderId="orderId" :masterId="masterId" @paySuccess="createCodeAjax(1)" />
   <!-- 挂起订单 -->
   <pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
 </template>
@@ -140,6 +140,7 @@ const remark = ref('')
 const cartListActive = ref(0)
 const cartList = ref([])
 const cartInfo = ref({})
+const cartLoading = ref(false)
 
 const orderId = ref('')
 const createOrderLoading = ref(false)
@@ -196,13 +197,20 @@ async function pendingCartHandle(item) {
 // 挂单
 async function pendingCart(params, status = true) {
   try {
+    cartLoading.value = true
     await cartStatus({
       shopId: store.userInfo.shopId,
       masterId: params.masterId,
       status: status,
       uuid: params.uuid
     })
-    if (status && cartList.value.length) createCodeAjax()
+    if (status && cartList.value.length) {
+      await createCodeAjax()
+      cartLoading.value = false
+    } else {
+      cartLoading.value = false
+    }
+
   } catch (error) {
     console.log(error)
   }
@@ -211,11 +219,13 @@ async function pendingCart(params, status = true) {
 // 删除购物车
 async function delCartHandle(params) {
   try {
+    cartLoading.value = true
     await delCart({
       masterId: params.masterId,
       cartId: params.id
     })
     await queryCartAjax()
+    cartLoading.value = false
     cartListActive.value = 0
   } catch (error) {
     console.log(error)
@@ -241,7 +251,10 @@ const allSelectedHandle = async () => {
 }
 
 // 确认取餐号
-function takeFoodCodeSuccess(code) {
+async function takeFoodCodeSuccess(code) {
+  if (cartList.value.length) {
+    await pendingCart({ masterId: masterId.value, uuid: cartList.value[0].uuid })
+  }
   masterId.value = `#${code}`
   queryCartAjax()
 }
@@ -254,6 +267,7 @@ function selectCartItemHandle(item, index) {
 // 选择完规格开始添加购物车
 async function addCart(params, type = 'add') {
   try {
+    cartLoading.value = true
     const res = await createCart({
       productId: params.productId,
       masterId: masterId.value,
@@ -266,11 +280,13 @@ async function addCart(params, type = 'add') {
       uuid: params.uuid || store.userInfo.uuid,
       type: type
     })
+    cartLoading.value = false
     masterId.value = res
     goodsRef.value.updateData()
     queryCartAjax()
   } catch (error) {
     console.log(error)
+    cartLoading.value = false
   }
 }
 
@@ -291,16 +307,21 @@ async function queryCartAjax() {
 }
 
 // 获取取餐码
-async function createCodeAjax() {
+async function createCodeAjax(type = '0') {
   try {
-    if (process.env.VITE_DEV_SERVER_URL) {
-      masterId.value = '#10'
-    } else {
-      const res = await createCode({
-        shopId: store.userInfo.shopId
-      })
-      masterId.value = res.code
-    }
+    // if (!process.env.VITE_DEV_SERVER_URL) {
+    //   masterId.value = '#20'
+    // } else {
+    //   const res = await createCode({
+    //     shopId: store.userInfo.shopId
+    //   })
+    //   masterId.value = res.code
+    // }
+    const res = await createCode({
+      shopId: store.userInfo.shopId,
+      type: type
+    })
+    masterId.value = res.code
     queryCartAjax()
   } catch (error) {
     console.log(error)