对接购物车

2025-02-26 18:06:37 +08:00
parent 44144c5ac7
commit d3ed4ec8e6
27 changed files with 2589 additions and 1629 deletions
--- a/src/views/home/components/cartOperation.vue
+++ b/src/views/home/components/cartOperation.vue
@@ -1,69 +1,86 @@
 <template>
    <div class="operation_wrap">
-        <div class="item" :class="{ disabled: props.item.number <= 1 || !props.item.id }" @click="numberChange('sub')">
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].number <= 1 || !goodsStore.cartList[goodsStore.cartActiveIndex].id || (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1)) }"
+            @click="numberChange('sub')">
            <el-icon class="icon">
                <SemiSelect />
            </el-icon>
        </div>
-        <div class="item number" @click="props.item.id && takeFoodCodeRef.show()">
-            <el-text class="num">{{ formatDecimal(props.item.number || 1, 2, true) }}</el-text>
+        <div class="item number"
+            :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
+            @click="showEditNumber">
+            <el-text class="num">
+                {{ formatDecimal(goodsStore.cartList.length ? +goodsStore.cartList[goodsStore.cartActiveIndex].number :
+                    1, 2, true) }}
+            </el-text>
        </div>
-        <div class="item" @click="numberChange('add')">
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1) }"
+            @click="numberChange('add')">
            <el-icon class="icon add">
                <CloseBold />
            </el-icon>
        </div>
-        <!-- <div class="item" :class="{ disabled: (props.item.id && !props.item.tbProductSpec) }" @click="showSkuModal">
+        <div class="item"
+            :class="{ disabled: (goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].id && goodsStore.cartList[goodsStore.cartActiveIndex].goods_type != 'sku' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type != 1) }"
+            @click="showSkuModal">
            <el-icon class="icon">
                <Filter />
            </el-icon>
            <el-text class="t">规格</el-text>
-        </div> -->
-        <div class="item" @click="showDiscountModalHandle">
+        </div>
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary }"
+            @click="showDiscountModalHandle">
            <el-icon class="icon">
                <PriceTag />
            </el-icon>
-            <el-text class="t">打折</el-text>
+            <el-text class="t">改价</el-text>
        </div>
-        <div class="item" :class="{ disabled: props.item.isGift == 'true' }" @click="giftPackHandle('isGift')">
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_gift }"
+            @click="giftPackHandle('is_gift')">
            <el-icon class="icon">
                <ShoppingBag />
            </el-icon>
            <el-text class="t">赠送</el-text>
        </div>
-        <div class="item" :class="{ disabled: props.item.isPack == 'true' }" @click="giftPackHandle('isPack')"
-            v-if="JSON.parse(shopStore.info.eatModel).some(item => item == 'take-out')">
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_pack }"
+            @click="giftPackHandle('is_pack')" v-if="shopStore.info.eatModel == 'take-out'">
            <el-icon class="icon">
                <Box />
            </el-icon>
            <el-text class="t">打包</el-text>
        </div>
-        <div class="item" :class="{ disabled: props.item.isPrint == 0 }" @click="kitchenPrint">
+        <div class="item"
+            :class="{ disabled: goodsStore.cartList.length && goodsStore.cartList[goodsStore.cartActiveIndex].is_print == 0 }"
+            @click="giftPackHandle('is_print')">
            <el-icon class="icon">
                <DishDot />
            </el-icon>
            <el-text class="t">免厨</el-text>
        </div>
-        <div class="item" @click="props.item.id && emit('delete', props.item)">
+        <div class="item" @click="deleteHandle">
            <el-icon class="icon">
                <Delete />
            </el-icon>
            <el-text class="t">删除</el-text>
        </div>
-        <div class="item" @click="props.item.id && emit('pending', props.item)">
+        <!-- <div class="item" @click="props.item.id && emit('pending', props.item)">
            <el-icon class="icon">
                <Sell />
            </el-icon>
            <el-text class="t">挂单</el-text>
-        </div>
-        <div class="item" @click="tableMergingHandle"
-            v-if="shopStore.info.registerType == 'restaurant' && props.item.tableId && props.item.orderId">
+        </div> -->
+        <div class="item" @click="tableMergingHandle" v-if="goodsStore.tableInfo.tableCode">
            <el-icon class="icon">
                <EditPen />
            </el-icon>
            <el-text class="t">转桌</el-text>
        </div>
-        <div class="item" @click="props.item.id && emit('clearCart')">
+        <div class="item" @click="clearCart">
            <el-icon class="icon">
                <RefreshRight />
            </el-icon>
@@ -73,15 +90,16 @@
    <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
    <!-- 购物车选择规格 -->
    <skuModal ref="skuModalRef" @success="skuConfirm" />
-    <!-- 单品打折 -->
-    <el-dialog v-model="showDiscountModal" title="单品打折" @open="resetDiscountForm = { ...discountForm }"
+    <!-- 单品改价 -->
+    <el-dialog v-model="showDiscountModal" title="单品改价" @open="resetDiscountForm = { ...discountForm }"
        @closed="discountModalClose">
        <div class="dialog">
            <div class="el-popover__title content">
                <el-form ref="discountFormRef" :model="discountForm" :rules="discountFormRules" label-width="100px"
                    label-position="left">
-                    <el-form-item label="价格更改" prop="amount">
-                        <el-input v-model="discountForm.amount" placeholder="减8.88元请输入8.88" @input="priceInput">
+                    <el-form-item label="价格更改" prop="discount_sale_amount">
+                        <el-input v-model="discountForm.discount_sale_amount" placeholder="减8.88元请输入8.88"
+                            @input="priceInput">
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
@@ -114,70 +132,96 @@ import { ElMessage } from 'element-plus'
 import takeFoodCode from '@/components/takeFoodCode.vue'
 import skuModal from '@/components/skuModal.vue'
 import { useShop } from '@/store/shop.js'
+import { useGoods } from '@/store/goods.js'
 import { inputFilterFloat, formatDecimal } from '@/utils/index.js'
 import { updatePrice, orderPrint } from '@/api/product.js'

 const shopStore = useShop()
+const goodsStore = useGoods()
+
 const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
 })
-const emit = defineEmits(['confirm', 'delete', 'pending', 'clearCart', 'merging'])
+const emit = defineEmits(['confirm', 'delete', 'pending', 'clearCart', 'merging', 'showPackage'])

 const takeFoodCodeRef = ref(null)
 const skuModalRef = ref([])

 // 赠送打包操作
 function giftPackHandle(key) {
-    if (!props.item.id) return
-    if (props.item[key] == 'true') {
-        props.item[key] = false
-    } else {
-        props.item[key] = true
+    if (!goodsStore.cartList[goodsStore.cartActiveIndex].id) return
+
+    if (key == 'is_gift' && goodsStore.cartList[goodsStore.cartActiveIndex] == 0) {
+        goodsStore.cartList[goodsStore.cartActiveIndex].discount_sale_amount = 0
    }
-    emit('confirm', props.item)
+
+    if (goodsStore.cartList[goodsStore.cartActiveIndex][key] == 0) {
+        goodsStore.cartList[goodsStore.cartActiveIndex][key] = 1
+    } else {
+        goodsStore.cartList[goodsStore.cartActiveIndex][key] = 0
+    }
+    goodsStore.operateCart({ ...goodsStore.cartList[goodsStore.cartActiveIndex] }, 'edit')
+}
+
+// 显示直接修改数量
+function showEditNumber() {
+    let item = goodsStore.cartList.length ? goodsStore.cartList[goodsStore.cartActiveIndex] : ''
+    if (!item || (item.goods_type == 'package' && item.group_type == 1)) return
+    takeFoodCodeRef.value.show()
 }

 // 加减修改数量
 function numberChange(t) {
-    console.log(props.item);
+    let item = goodsStore.cartList.length ? goodsStore.cartList[goodsStore.cartActiveIndex] : ''
+    if (!item || (item.goods_type == 'package' && item.group_type == 1)) return

-    if (!props.item.id) return
+    // if (!goodsStore.cartList[goodsStore.cartActiveIndex].id || (goodsStore.cartList[goodsStore.cartActiveIndex].goods_type == 'package' && goodsStore.cartList[goodsStore.cartActiveIndex].group_type == 1)) return
    switch (t) {
        case 'sub':
-            if (props.item.number <= 1) return
-            props.item.number--
+            if (goodsStore.cartList[goodsStore.cartActiveIndex].number <= 1) return
+            goodsStore.cartList[goodsStore.cartActiveIndex].number--
+            goodsStore.operateCart(goodsStore.cartList[goodsStore.cartActiveIndex], 'edit')
            break;
        case 'add':
-            props.item.number++
+            goodsStore.cartList[goodsStore.cartActiveIndex].number++
+            goodsStore.operateCart(goodsStore.cartList[goodsStore.cartActiveIndex], 'edit')
            break;
        default:
            break;
    }
-    emit('confirm', props.item)
 }

 // 输入修改数量
 function updateNumber(num) {
-    if (!props.item.id) return
-    props.item.number = num
-    emit('confirm', props.item)
+    goodsStore.cartList[goodsStore.cartActiveIndex].number = num
+    goodsStore.operateCart({ ...goodsStore.cartList[goodsStore.cartActiveIndex] }, 'edit')
 }

 // 显示规格
 function showSkuModal() {
-    if (!props.item.id) return
-    if (props.item.tbProductSpec && props.item.tbProductSpec.specList) {
-        skuModalRef.value.show(props.item, 'cart')
+    let item = goodsStore.cartList.length ? goodsStore.cartList[goodsStore.cartActiveIndex] : ''
+    if (!item || (item.goods_type == 'package' && item.group_type == 0)) return
+
+    switch (item.goods_type) {
+        case 'sku':
+            skuModalRef.value.show({ ...goodsStore.cartList[goodsStore.cartActiveIndex] }, 'cart')
+            break;
+        case 'package':
+            emit('showPackage', item)
+            break;
+        default:
+            break;
    }
 }

 // 修改规格
 function skuConfirm(e) {
-    if (!props.item.id) return
-    emit('confirm', e)
+    if (goodsStore.cartList[goodsStore.cartActiveIndex].sku_id != e.id) {
+        goodsStore.operateCart({ ...goodsStore.cartList[goodsStore.cartActiveIndex], sku_id: e.id, sku_name: e.specInfo }, 'edit')
+    }
 }

 /**单品打折 start */
@@ -186,11 +230,8 @@ const resetDiscountForm = ref({})
 const discountFormRef = ref(null)
 const discountFormLoading = ref(false)
 const discountForm = ref({
-    masterId: '',
-    cartId: '',
-    amount: '',
-    note: '',
-    shopId: ''
+    discount_sale_amount: '',
+    note: ''
 })

 function validateAmount(rule, value, callback) {
@@ -204,7 +245,7 @@ function validateAmount(rule, value, callback) {
 }

 const discountFormRules = ref({
-    amount: [
+    discount_sale_amount: [
        {
            required: true,
            validator: validateAmount,
@@ -220,7 +261,8 @@ const noteList = ref([

 // 显示
 function showDiscountModalHandle() {
-    if (props.item.id) {
+    if (goodsStore.cartList[goodsStore.cartActiveIndex].id && !goodsStore.cartList[goodsStore.cartActiveIndex].is_temporary) {
+        // 存在商品并且不能为临时菜
        showDiscountModal.value = true
    }
 }
@@ -254,21 +296,20 @@ function discountFormSubmit() {
            if (valid) {
                discountFormLoading.value = true

-                discountForm.value.masterId = props.item.masterId
-                discountForm.value.cartId = props.item.id
-                discountForm.value.shopId = props.item.shopId
-
-                await updatePrice(discountForm.value)
-                discountFormLoading.value = false
+                goodsStore.operateCart({
+                    ...goodsStore.cartList[goodsStore.cartActiveIndex],
+                    discount_sale_amount: goodsStore.cartList[goodsStore.cartActiveIndex].lowPrice - discountForm.value.discount_sale_amount,
+                    discount_sale_note: discountForm.value.note
+                }, 'edit')

+                goodsStore.cartList[goodsStore.cartActiveIndex].discount_sale_amount = discountForm.value.discount_sale_amount
+                goodsStore.cartList[goodsStore.cartActiveIndex].discount_sale_note = discountForm.value.note
                showDiscountModal.value = false
-                ElMessage.success('操作成功')
-                emit('confirm', { isTemporary: true })
            }
        } catch (error) {
-            discountFormLoading.value = false
            console.log(error);
        }
+        discountFormLoading.value = false
    })
 }
 /**单品打折 end */
@@ -295,6 +336,18 @@ function tableMergingHandle() {
        emit('merging')
    }
 }
+
+// 删除
+function deleteHandle() {
+    if (goodsStore.cartList[goodsStore.cartActiveIndex].id) {
+        goodsStore.deleteCartItem()
+    }
+}
+
+// 清空购物车
+function clearCart() {
+    goodsStore.clearCart()
+}
 </script>

 <style scoped lang="scss">
@@ -322,6 +375,10 @@ function tableMergingHandle() {
            .icon {
                color: #999;
            }
+
+            .num {
+                color: #999;
+            }
        }

        &.number {