完成购物车所有功能

src/views/home/index.vue

@@ -2,14 +2,14 @@
   <div class="content">
     <div class="cart_wrap card">
       <div class="menu_top">
-        <div class="menu">
+        <div class="menu" @click="pendingCartModalRef.show()">
           <el-icon class="icon">
             <TakeawayBox />
           </el-icon>
-          <el-text class="t">(1)</el-text>
+          <el-text class="t">({{ pendingCartNum }})</el-text>
         </div>
         <div class="number" @click="takeFoodCodeRef.show()">
-          <el-text class="t">{{ foodCode }}</el-text>
+          <el-text class="t">{{ masterId }}</el-text>
         </div>
         <div class="select_user" @click="membershow = true">
           <el-icon class="icon">
@@ -22,39 +22,53 @@
         </div>
       </div>
       <div class="shop_operation">
-        <div class="shop_list">
+        <div class="shop_list" v-loading="cartLoading">
           <div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
             @click="selectCartItemHandle(item)">
             <div class="name_wrap">
               <span>{{ item.name }}</span>
               <span>￥{{ item.salePrice }}</span>
             </div>
-            <div class="sku_list">
-              <div class="tag">默认1份</div>
-              <div class="tag">热</div>
-              <div class="tag">半糖</div>
+            <div class="sku_list" v-if="item.skuName">
+              <div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
             </div>
             <div class="num">
-              <el-text>X{{ item.number }}</el-text>
+              <div class="left">
+                <div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
+                  <el-icon class="icon">
+                    <ShoppingBag />
+                  </el-icon>
+                </div>
+                <div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
+                  <el-icon class="icon" style="color: var(--primary-color);">
+                    <Box />
+                  </el-icon>
+                </div>
+              </div>
+              <el-text class="t">X{{ item.number }}</el-text>
             </div>
           </div>
+          <div class="empty">
+            <el-empty description="请选择商品" v-if="!cartList.length" />
+          </div>
         </div>
         <!-- 购物车操作栏 -->
-        <cartOperation :item="selectCartItem" @confirm="addCart" />
+        <cartOperation :item="selectCartItem" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
+          @pending="pendingCart" />
       </div>
       <div class="footer">
         <div class="top">
-          <div class="left" @click="allSelected = !allSelected">
+          <div class="left" @click="allSelectedHandle">
             <div class="selected">
               <div class="selected_round" v-if="!allSelected"></div>
               <el-icon class="icon" v-else>
                 <CircleCheckFilled />
               </el-icon>
             </div>
-            <el-text class="t">打包(￥0.00)</el-text>
+            <el-text class="t">打包(￥{{ cartInfo.packAmount || 0 }})</el-text>
           </div>
           <div class="num-wrap">
-            <el-text>共6种商品，7件</el-text>
+            <el-text>共{{ cartInfo.productNum || 0 }}种商品，{{ cartInfo.productSum || 0 }}件</el-text>
           </div>
         </div>
         <div class="btm">
@@ -62,7 +76,7 @@
           <div class="button">
             <el-button type="primary" style="width: 100%;">
               <div class="js">
-                <el-text class="t">￥3.09</el-text>
+                <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
                 <el-text class="t" style="margin-left: 250px;">结算</el-text>
               </div>
             </el-button>
@@ -72,19 +86,21 @@
     </div>
     <div class="shop_manage card">
       <!-- 分类/商品列表 -->
-      <goods @success="addCart" />
+      <goods ref="goodsRef" :masterId="masterId" @success="addCart" />
     </div>
   </div>
   <!-- 备注 -->
   <remarkModal ref="remarkRef" />
   <!-- 修改取餐号 -->
   <takeFoodCode />
-  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
+  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
     <member></member>
   </el-drawer>
   <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
   <!-- 结算订单 -->
   <settleAccount />
+  <!-- 挂起订单 -->
+  <pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
 </template>
 
 <script setup>
@@ -94,8 +110,9 @@ import remarkModal from '@/components/remarkModal.vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'
 import cartOperation from '@/views/home/components/cartOperation.vue'
 import settleAccount from '@/components/settleAccount.vue'
+import pendingCartModal from '@/views/home/components/pendingCartModal.vue'
 
-import { createCart, queryCart, createCode } from '@/api/product'
+import { createCart, queryCart, createCode, packall, delCart, cartStatus } from '@/api/product'
 
 // 商品列表
 import goods from '@/views/home/components/goods.vue'
@@ -104,17 +121,87 @@ const membershow = ref(false)
 const store = useUser()
 const remarkRef = ref(null)
 const takeFoodCodeRef = ref(null)
+const goodsRef = ref(null)
+const pendingCartModalRef = ref(null)
 
 const allSelected = ref(false)
 
+const cartLoading = ref(false)
 const cartList = ref([])
+const cartInfo = ref({})
 
 // 取餐码
-const foodCode = ref('#006')
+const masterId = ref('')
+// 挂单量
+const pendingCartNum = ref(0)
+
+// 恢复挂单
+async function pendingCartHandle(item) {
+  masterId.value = item.masterId
+  await pendingCart(item, false)
+  await queryCartAjax()
+}
+
+// 挂单
+async function pendingCart(params, status = true) {
+  try {
+    cartLoading.value = true
+    await cartStatus({
+      shopId: store.userInfo.shopId,
+      masterId: params.masterId,
+      status: status
+    })
+    if (status) createCodeAjax()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 删除购物车
+async function delCartHandle(params) {
+  try {
+    cartLoading.value = true
+    await delCart({
+      masterId: params.masterId,
+      cartId: params.id
+    })
+    queryCartAjax()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 赠送打包操作
+function giftPackHandle(key, item) {
+  item[key] = false
+  addCart(item, 'edit')
+}
+
+// 打包全选
+const allSelectedHandle = async () => {
+  if (allSelected.value) {
+    allSelected.value = false
+    cartList.value.map(item => {
+      item.isPack = false
+    })
+  } else {
+    allSelected.value = true
+    cartList.value.map(item => {
+      item.isPack = true
+    })
+  }
+  await packall({
+    shopId: store.userInfo.shopId,
+    status: allSelected.value,
+    masterId: masterId.value
+  })
+  queryCartAjax()
+}
 
 // 确认取餐号
 function takeFoodCodeSuccess(code) {
-  console.log('取餐号===', code)
+  masterId.value = `#${code}`
+  queryCartAjax()
 }
 
 const selectCartItem = ref({})
@@ -128,16 +215,22 @@ function selectCartItemHandle(item) {
 }
 
 // 选择完规格开始添加购物车
-async function addCart(params) {
+async function addCart(params, type = 'add') {
   try {
+    cartLoading.value = true
     const res = await createCart({
       productId: params.productId,
-      maskerId: foodCode.value,
+      masterId: masterId.value,
       shopId: store.userInfo.shopId,
-      skuId: params.id,
-      number: params.number || 1
+      skuId: type == 'add' ? params.id : params.skuId,
+      number: params.number || 1,
+      isPack: params.isPack || false,
+      isGift: params.isGift || false,
+      cartId: type == 'add' ? '' : params.id
     })
-    foodCode.value = res
+    masterId.value = res
+    goodsRef.value.updateData()
+    queryCartAjax(type)
   } catch (error) {
     console.log(error)
   }
@@ -146,10 +239,12 @@ async function addCart(params) {
 // 获取购物车商品
 async function queryCartAjax() {
   try {
+    cartLoading.value = true
     const res = await queryCart({
-      masterId: foodCode.value,
+      masterId: masterId.value,
       shopId: store.userInfo.shopId
     })
+    selectCartItem.value = {}
     cartList.value = res.list.map((item, index) => {
       if (index == 0) {
         item.active = true
@@ -159,7 +254,12 @@ async function queryCartAjax() {
       }
       return item
     })
-    console.log(cartList.value)
+    cartInfo.value = res.amount
+    pendingCartNum.value = res.num
+    goodsRef.value.updateData()
+    setTimeout(() => {
+      cartLoading.value = false
+    }, 100)
   } catch (error) {
     console.log('获取购物车商品', error)
   }
@@ -169,7 +269,7 @@ async function queryCartAjax() {
 async function createCodeAjax() {
   try {
     const res = await createCode({ shopId: store.userInfo.shopId })
-    foodCode.value = res
+    masterId.value = res.code
     queryCartAjax()
   } catch (error) {
     console.log(error)
@@ -177,8 +277,7 @@ async function createCodeAjax() {
 }
 
 onMounted(() => {
-  // createCodeAjax()
-  queryCartAjax()
+  createCodeAjax()
 })
 </script>
 
@@ -293,9 +392,31 @@ onMounted(() => {
         }
 
         .num {
-          padding-top: 10px;
+          padding-top: 20px;
           display: flex;
-          justify-content: flex-end;
+          align-items: center;
+          justify-content: space-between;
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            .icon_item {
+              $size: 40px;
+              width: $size;
+              height: $size;
+              border-radius: 6px;
+              background-color: #e2e2e2;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 10px;
+            }
+          }
+
+          .t {
+            font-size: var(--el-font-size-base);
+          }
         }
       }
     }