完成购物车所有功能

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>