完成购物车所有功能

src/api/product.js

@@ -78,3 +78,56 @@ export function createCode(params) {
     });
 }
 
+/**
+ * 全部打包
+ * @param {*} params 
+ * @returns 
+ */
+export function packall(data) {
+    return request({
+        method: "post",
+        url: "/order/packall",
+        data
+    });
+}
+
+/**
+ * 删除购物车
+ * @param {*} params 
+ * @returns 
+ */
+export function delCart(params) {
+    return request({
+        method: "get",
+        url: "/order/delCart",
+        params
+    });
+}
+
+/**
+ * 挂单/j激活购物车
+ * @param {*} params 
+ * @returns 
+ */
+export function cartStatus(data) {
+    return request({
+        method: "post",
+        url: "/order/cartStatus",
+        data
+    });
+}
+
+/**
+ * 获取挂起购物车列表
+ * @param {*} params 
+ * @returns 
+ */
+export function getCartList(params) {
+    return request({
+        method: "get",
+        url: "/order/getCartList",
+        params
+    });
+}
+
+

src/components/skuModal.vue

@@ -40,7 +40,7 @@ import { queryProductSku } from '@/api/product'
 const store = useUser();
 const emit = defineEmits(['success'])
 
-
+const type = ref('shop')
 const dialogVisible = ref(false)
 const goods = ref({})
 
@@ -54,7 +54,16 @@ const loading = ref(false)
 // 确认选择规格
 function submitSku() {
     dialogVisible.value = false
-    emit('success', goodsInfo.value)
+    switch (type.value) {
+        case 'shop':
+            emit('success', goodsInfo.value)
+            break;
+        case 'cart':
+            emit('success', goods.value)
+            break;
+        default:
+            break;
+    }
 }
 
 // 选择规格
@@ -99,10 +108,13 @@ async function queryProductSkuAjax() {
         loading.value = true
         const res = await queryProductSku({
             shopId: store.userInfo.shopId,
-            productId: goods.value.id,
+            productId: type.value == 'shop' ? goods.value.id : goods.value.productId,
             spec_tag: selectedSkuTag.value
         })
         goodsInfo.value = res
+        if (type.value == 'cart') {
+            goods.value.skuId = res.id
+        }
         setTimeout(() => {
             loading.value = false
         }, 100)
@@ -113,21 +125,37 @@ async function queryProductSkuAjax() {
 }
 
 // 显示规格
-function show(item) {
+function show(item, t = 'shop') {
     goodsInfo.value = {}
     goods.value = {}
     selectedSkuNum.value = 0
     dialogVisible.value = true
+    goods.value = ""
     goods.value = item
+    type.value = t
     if (typeof goods.value.tbProductSpec.specList == 'string') {
         goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
         goods.value.tbProductSpec.specList.map(item => {
             let arr = []
             item.value.map(val => {
-                arr.push({
+                switch (type.value) {
-                    active: false,
+                    case 'shop':
-                    name: val
+                        arr.push({
-                })
+                            active: false,
+                            name: val
+                        })
+                        break;
+                    case 'cart':
+                        // 如果从购物车选择规格需要做选中效果
+                        arr.push({
+                            active: goods.value.skuName.includes(val),
+                            name: val
+                        })
+                        break;
+
+                    default:
+                        break;
+                }
             })
             item.value = arr
         })

src/views/home/components/cartOperation.vue

@@ -13,31 +13,31 @@
                 <CloseBold />
             </el-icon>
         </div>
-        <div class="item">
+        <div class="item" :class="{ disabled: !props.item.tbProductSpec }" @click="showSkuModal">
             <el-icon class="icon">
                 <Filter />
             </el-icon>
             <el-text class="t">规格</el-text>
         </div>
-        <div class="item">
+        <div class="item" :class="{ disabled: props.item.isGift == 'true' }" @click="giftPackHandle('isGift')">
             <el-icon class="icon">
                 <ShoppingBag />
             </el-icon>
             <el-text class="t">赠送</el-text>
         </div>
-        <div class="item">
+        <div class="item" :class="{ disabled: props.item.isPack == 'true' }" @click="giftPackHandle('isPack')">
             <el-icon class="icon">
                 <Box />
             </el-icon>
             <el-text class="t">打包</el-text>
         </div>
-        <div class="item">
+        <div class="item" @click="emit('delete', props.item)">
             <el-icon class="icon">
                 <Delete />
             </el-icon>
             <el-text class="t">删除</el-text>
         </div>
-        <div class="item">
+        <div class="item" @click="emit('pending', props.item)">
             <el-icon class="icon">
                 <Sell />
             </el-icon>
@@ -51,25 +51,40 @@
         </div>
     </div>
     <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
+    <!-- 购物车选择规格 -->
+    <skuModal ref="skuModalRef" @success="skuConfirm" />
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'
+import skuModal from '@/components/skuModal.vue'
 const props = defineProps({
     item: {
         type: Object,
         default: {}
     }
 })
-const emit = defineEmits(['confirm'])
+const emit = defineEmits(['confirm', 'delete', 'pending'])
 
 const takeFoodCodeRef = ref(null)
+const skuModalRef = ref([])
+
+// 赠送打包操作
+function giftPackHandle(key) {
+    if (props.item[key] == 'true') {
+        props.item[key] = false
+    } else {
+        props.item[key] = true
+    }
+    emit('confirm', props.item)
+}
 
 // 加减修改数量
 function numberChange(t) {
     switch (t) {
         case 'sub':
+            if (props.item.number <= 1) return
             props.item.number--
             break;
         case 'add':
@@ -86,6 +101,19 @@ function updateNumber(num) {
     props.item.number = num
     emit('confirm', props.item)
 }
+
+// 显示规格
+function showSkuModal() {
+    if (props.item.tbProductSpec && props.item.tbProductSpec.specList) {
+        skuModalRef.value.show(props.item, 'cart')
+    }
+}
+
+// 修改规格
+function skuConfirm(e) {
+    console.log(e)
+    emit('confirm', e)
+}
 </script>
 
 <style scoped lang="scss">
@@ -104,6 +132,17 @@ function updateNumber(num) {
         background-color: #efefef;
         border-radius: 6px;
 
+        &.disabled {
+
+            .t {
+                color: #999;
+            }
+
+            .icon {
+                color: #999;
+            }
+        }
+
         &.number {
             background-color: transparent;
             height: auto;

src/views/home/components/goods.vue

@@ -35,7 +35,7 @@
     <div class="shop_list" :class="{ img: shopListType == 'img' }">
         <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
             <div class="item">
-                <div class="dot">2</div>
+                <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                 <div class="cover" v-if="shopListType == 'img'">
                     <el-image :src="item.coverImg" style="width: 100%;height: 100%;" fit="cover"></el-image>
                 </div>
@@ -63,6 +63,14 @@ import skuModal from '@/components/skuModal.vue'
 import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
 const store = useUser()
+
+const props = defineProps({
+    masterId: {
+        type: String,
+        default: ''
+    }
+})
+
 const emit = defineEmits(['success'])
 
 const skuModalRef = ref(null)
@@ -164,12 +172,14 @@ async function queryCategoryAjax() {
 // 查询商品信息
 async function productqueryCommodityInfoAjax() {
     try {
+        console.log(props.masterId)
         const res = await productqueryCommodityInfo({
             shopId: store.userInfo.shopId,
             categoryId: categorys.value[categorysActive.value].id,
             commdityName: commdityName.value,
             page: 1,
-            pageSize: 1000
+            pageSize: 1000,
+            masterId: props.masterId
         })
         originalGoods.value = res
         goodsList.value = res
@@ -178,9 +188,17 @@ async function productqueryCommodityInfoAjax() {
     }
 }
 
+// 更新商品数据
+function updateData() {
+    productqueryCommodityInfoAjax()
+}
+
+defineExpose({
+    updateData
+})
+
 onMounted(async () => {
     await queryCategoryAjax()
-    await productqueryCommodityInfoAjax()
 })
 </script>
 

src/views/home/components/pendingCartModal.vue

@@ -0,0 +1,110 @@
+<template>
+    <el-dialog title="恢复挂起的订单" width="800" v-model="dialogVisible">
+        <div class="pending_carts">
+            <div class="item" v-for="(item, index) in cartList" :key="index" @click="select(item)">
+                <div class="time">
+                    <el-icon class="icon">
+                        <Clock />
+                    </el-icon>
+                    <span>{{ dayjs(item.pendingAt).format('HH:mm') }}</span>
+                </div>
+                <div class="info">
+                    <span class="name">{{ item.productName }}</span>
+                    <span class="p">￥{{ item.totalAmount }}</span>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { dayjs } from 'element-plus'
+import { getCartList } from "@/api/product";
+import { useUser } from "@/store/user"
+
+const emit = defineEmits(['select'])
+
+const store = useUser()
+const dialogVisible = ref(false)
+
+const loading = ref(false)
+const cartList = ref([])
+
+// 恢复挂单
+function select(item) {
+    emit('select', item)
+    dialogVisible.value = false
+}
+
+function show() {
+    dialogVisible.value = true
+    getCartListAjax()
+}
+
+// 获取挂起购物车列表
+async function getCartListAjax() {
+    try {
+        loading.value = true
+        const res = await getCartList({
+            shopId: store.userInfo.shopId
+        })
+        cartList.value = res
+        loading.value = false
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+.pending_carts {
+    height: 50vh;
+    overflow-y: auto;
+
+    .item {
+        display: flex;
+        align-items: center;
+        background-color: #efefef;
+        border-radius: 6px;
+        overflow: hidden;
+
+        &:not(:first-child) {
+            margin-top: 20px;
+        }
+
+        .time {
+            padding: 20px 20px;
+            display: flex;
+            align-items: center;
+            background-color: var(--el-color-warning);
+            color: #fff;
+
+            .icon {
+                font-size: calc(var(--el-font-size-base) + 6px);
+            }
+
+            span {
+                font-size: var(--el-font-size-base);
+                margin-left: 4px;
+            }
+        }
+
+        .info {
+            flex: 1;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
+            font-size: var(--el-font-size-base);
+
+            .p {
+                color: var(--el-color-warning);
+            }
+        }
+    }
+}
+</style>

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="sku_list" v-if="item.skuName">
-              <div class="tag">默认1份</div>
+              <div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
-              <div class="tag">热</div>
-              <div class="tag">半糖</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,
+      skuId: type == 'add' ? params.id : params.skuId,
-      number: params.number || 1
+      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()
+  createCodeAjax()
-  queryCartAjax()
 })
 </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);
+          }
         }
       }
     }