1

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>

src/views/home/components/category.vue

@@ -6,7 +6,7 @@
 import { queryCategory } from '@/api/product'
 import { ref, onMounted } from 'vue'
 import { useUser } from "@/store/user.js"
-const store = useUser();
+const store = useUser()
 
 const categorys = ref([])
 const categorysActive = ref(0)

src/views/home/components/goods.vue

@@ -7,15 +7,27 @@
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
-        <div class="all">
-            <el-icon class="icon">
-                <Menu />
-            </el-icon>
-        </div>
+        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
+            <template #reference>
+                <div class="all" @click="showMoreMenu">
+                    <el-icon class="icon" :class="{ active: showPopover }">
+                        <Menu />
+                    </el-icon>
+                </div>
+            </template>
+            <template #default>
+                <div class="popover_wrap">
+                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
+                        :key="item.id" @click="changeCategory(item, index)">
+                        {{ item.name }}
+                    </el-button>
+                </div>
+            </template>
+        </el-popover>
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" style="width: 400px;" clearable
                 @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
@@ -39,7 +51,7 @@
         <el-empty description="空空如也~" v-if="!goodsList.length" />
     </div>
     <!-- 选择规格 -->
-    <skuModal ref="skuModalRef" />
+    <skuModal ref="skuModalRef" @success="skuConfirm" />
 </template>
 
 <script setup>
@@ -48,9 +60,10 @@ import _ from 'lodash'
 
 import skuModal from '@/components/skuModal.vue'
 
-import { queryCategory, productqueryCommodityInfo } from '@/api/product'
+import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
-const store = useUser();
+const store = useUser()
+const emit = defineEmits(['success'])
 
 const skuModalRef = ref(null)
 
@@ -64,16 +77,44 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
-const inputChange = _.debounce(function (e) {
+const showPopover = ref(false)
+
+const inputChange = _.debounce(function () {
     productqueryCommodityInfoAjax()
 }, 500)
 
+// 确认选择规格回调
+function skuConfirm(params) {
+    emit('success', params)
+}
+
+// 显示全部分类
+function showMoreMenu() {
+    showPopover.value = !showPopover.value
+}
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
+        // 多规格
         skuModalRef.value.show({ ...item })
     } else {
+        // 单规格
+        queryProductSkuAjax(item)
+    }
+}
 
+// 通过选中的商品规格查询价格
+async function queryProductSkuAjax(goods) {
+    try {
+        const res = await queryProductSku({
+            shopId: store.userInfo.shopId,
+            productId: goods.id,
+            spec_tag: ''
+        })
+        emit('success', res)
+    } catch (error) {
+        console.log(error)
     }
 }
 
@@ -88,6 +129,7 @@ function changeShopListType() {
 
 // 切换分类
 function changeCategory(item, index) {
+    showPopover.value = false
     categorysActive.value = index
     if (item.id) {
         goodsList.value = []
@@ -143,6 +185,12 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+.popover_wrap {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
 .header {
     display: flex;
     height: 80px;
@@ -202,6 +250,11 @@ onMounted(async () => {
     .icon {
         color: #555;
         font-size: 20px;
+        transition: all .2s ease-in-out;
+
+        &.active {
+            transform: rotate(45deg)
+        }
     }
 }