1.对接商品分类 2.对接商品列表

src/api/product.js

@@ -12,3 +12,16 @@ export function queryCategory(params) {
         params
     });
 }
+
+/**
+ * 查询商品信息
+ * @param {*} params 
+ * @returns 
+ */
+export function productqueryCommodityInfo(params) {
+    return request({
+        method: "get",
+        url: "product/queryCommodityInfo",
+        params
+    });
+}

src/components/skuModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="选择规格" width="800" v-model="show">
+    <el-dialog title="选择规格" width="800" v-model="dialogVisible">
         <div class="header">选择规格</div>
         <div class="row">
             <div class="title">规格</div>
@@ -34,9 +34,16 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, defineExpose } from 'vue'
-const show = ref(false)
+const dialogVisible = ref(false)
 
+function show() {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
 </script>
 
 <style scoped lang="scss">

src/views/home/components/goods.vue

@@ -15,40 +15,53 @@
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search"></el-input>
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
     </div>
     <div class="shop_list" :class="{ img: shopListType == 'img' }">
-        <div class="item_wrap" v-for="item in 7" :key="item">
+        <div class="item_wrap" v-for="item in shopList" :key="item.id" @click="showSkuHandle">
             <div class="item">
                 <div class="dot">2</div>
                 <div class="cover" v-if="shopListType == 'img'">
-                    <el-image
+                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;" fit="cover"></el-image>
-                        src="https://img1.baidu.com/it/u=2183780444,2807225961&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
-                        style="width: 100%;height: 100%;" fit="cover"></el-image>
                 </div>
-                <div class="name"><el-text>酱香拿铁</el-text></div>
+                <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
                 <div class="empty" v-if="shopListType == 'text'"></div>
                 <div class="price">
-                    <el-text>￥0.03</el-text>
+                    <el-text>￥{{ item.lowPrice }}</el-text>
                 </div>
             </div>
         </div>
     </div>
+    <!-- 选择规格 -->
+    <skuModal ref="skuModalRef" />
 </template>
 
 <script setup>
-import { queryCategory } from '@/api/product'
 import { ref, onMounted } from 'vue'
+import skuModal from '@/components/skuModal.vue'
 
+import { queryCategory, productqueryCommodityInfo } from '@/api/product'
 import { useUser } from "@/store/user.js"
 const store = useUser();
 
+const skuModalRef = ref(null)
+
 const shopListType = ref('text')
+
 const categorys = ref([])
 const categorysActive = ref(0)
 
+const commdityName = ref('')
+
+const shopList = ref([])
+
+// 显示sku
+function showSkuHandle() {
+    skuModalRef.value.show()
+}
+
 // 切换商品显示模式
 function changeShopListType() {
     if (shopListType.value == 'text') {
@@ -67,13 +80,34 @@ async function queryCategoryAjax() {
             pageSize: 100
         })
         categorys.value = res.list
+        categorys.value.unshift({
+            name: '全部',
+            id: ''
+        })
     } catch (error) {
         console.log(error)
     }
 }
 
-onMounted(() => {
+// 查询商品信息
-    queryCategoryAjax()
+async function productqueryCommodityInfoAjax() {
+    try {
+        const res = await productqueryCommodityInfo({
+            shopId: store.userInfo.shopId,
+            categoryId: categorys.value[categorysActive.value].id,
+            commdityName: commdityName.value,
+            page: 1,
+            pageSize: 1000
+        })
+        shopList.value = res
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+onMounted(async () => {
+    await queryCategoryAjax()
+    await productqueryCommodityInfoAjax()
 })
 </script>
 
@@ -194,7 +228,9 @@ onMounted(() => {
         }
 
         .name {
-            padding: 14px 10px;
+            padding: 0 10px;
+            height: 50px;
+            margin-top: 20px;
 
             span {
                 font-weight: bold;

src/views/home/index.vue

@@ -123,8 +123,6 @@
       <goods />
     </div>
   </div>
-  <!-- 选择规格 -->
-  <skuModal />
   <!-- 备注 -->
   <remarkModal ref="remarkRef" />
   <!-- 修改取餐号 -->
@@ -134,7 +132,6 @@
 <script setup>
 import { ref } from 'vue'
 
-import skuModal from '@/components/skuModal.vue'
 import remarkModal from '@/components/remarkModal.vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'