完成购物车所有功能

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;