对接添加购物车

src/views/home/components/cartOperation.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="operation_wrap">
+        <div class="item">
+            <el-icon class="icon">
+                <SemiSelect />
+            </el-icon>
+        </div>
+        <div class="item number" @click="takeFoodCodeRef.show()">
+            <el-text class="num">{{ props.item.number || 1 }}</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon add">
+                <CloseBold />
+            </el-icon>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Filter />
+            </el-icon>
+            <el-text class="t">规格</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <ShoppingBag />
+            </el-icon>
+            <el-text class="t">赠送</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Box />
+            </el-icon>
+            <el-text class="t">打包</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Delete />
+            </el-icon>
+            <el-text class="t">删除</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Sell />
+            </el-icon>
+            <el-text class="t">挂单</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <RefreshRight />
+            </el-icon>
+            <el-text class="t">清空</el-text>
+        </div>
+    </div>
+    <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import takeFoodCode from '@/components/takeFoodCode.vue'
+const props = defineProps({
+    item: {
+        type: Object,
+        default: {}
+    }
+})
+const emit = defineEmits(['confirm'])
+
+const takeFoodCodeRef = ref(null)
+
+// 修改数量
+function updateNumber(num) {
+    props.item.number = num
+    emit('confirm', props.item)
+}
+</script>
+
+<style scoped lang="scss">
+.operation_wrap {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .item {
+        width: 100px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #efefef;
+        border-radius: 6px;
+
+        &.number {
+            background-color: transparent;
+            height: auto;
+        }
+
+        .num {
+            color: #333;
+            font-size: 18px;
+        }
+
+        .icon {
+            color: #333;
+        }
+
+        .add {
+            transform: rotate(-45deg);
+        }
+
+        .t {
+            margin-left: 4px;
+        }
+    }
+}
+</style>