新增请求配置，对接登录接口

src/views/home/components/goods.vue

@@ -0,0 +1,221 @@
+<!-- 商品列表 -->
+<template>
+    <div class="header">
+        <div class="menus">
+            <div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
+                :key="item.id" @click="categorysActive = index">
+                <el-text>{{ item.name }}</el-text>
+            </div>
+        </div>
+        <div class="all">
+            <el-icon class="icon">
+                <Menu />
+            </el-icon>
+        </div>
+    </div>
+    <div class="search_wrap">
+        <div class="input">
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search"></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">
+                <div class="dot">2</div>
+                <div class="cover" v-if="shopListType == 'img'">
+                    <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="empty" v-if="shopListType == 'text'"></div>
+                <div class="price">
+                    <el-text>￥0.03</el-text>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { queryCategory } from '@/api/product'
+import { ref, onMounted } from 'vue'
+
+import { useUser } from "@/store/user.js"
+const store = useUser();
+
+const shopListType = ref('text')
+const categorys = ref([])
+const categorysActive = ref(0)
+
+// 切换商品显示模式
+function changeShopListType() {
+    if (shopListType.value == 'text') {
+        shopListType.value = 'img'
+    } else {
+        shopListType.value = 'text'
+    }
+}
+
+// 查询分类信息
+async function queryCategoryAjax() {
+    try {
+        const res = await queryCategory({
+            shopId: store.userInfo.shopId,
+            page: 1,
+            pageSize: 100
+        })
+        categorys.value = res.list
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+onMounted(() => {
+    queryCategoryAjax()
+})
+</script>
+
+<style scoped lang="scss">
+.header {
+    display: flex;
+    height: 80px;
+    justify-content: space-between;
+    border-bottom: 1px solid #ececec;
+}
+
+.menus {
+    display: flex;
+    padding: 0 10px;
+
+    .item {
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        span {
+            font-size: 24px;
+        }
+
+        &.active {
+            &::after {
+                content: "";
+                width: 70%;
+                height: 2px;
+                border-radius: 4px;
+                position: absolute;
+                bottom: 0;
+                left: 15%;
+                background-color: var(--primary-color);
+            }
+
+            span {
+                color: #333;
+            }
+        }
+    }
+}
+
+.all {
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &::before {
+        content: "";
+        height: 60%;
+        border-left: 1px solid #ececec;
+        position: absolute;
+        left: 0;
+        top: 20%;
+    }
+
+    .icon {
+        color: #555;
+        font-size: 20px;
+    }
+}
+
+.search_wrap {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 20px;
+}
+
+.shop_list {
+    max-height: calc(100vh - 40px - 80px - 80px);
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 10px;
+
+    &.img {
+        .item_wrap {
+            width: 25%;
+        }
+    }
+
+    .item_wrap {
+        width: 20%;
+        padding: 0 10px;
+        padding-bottom: 20px;
+    }
+
+    .item {
+        border: 1px solid #ececec;
+        border-radius: 10px;
+        overflow: hidden;
+        position: relative;
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        .dot {
+            padding: 0 8px;
+            background-color: var(--el-color-danger);
+            color: #fff;
+            border-radius: 20px;
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            z-index: 1;
+            font-size: 12px;
+        }
+
+        .cover {
+            width: 100%;
+            height: 300px;
+        }
+
+        .name {
+            padding: 14px 10px;
+
+            span {
+                font-weight: bold;
+                font-size: 18px;
+            }
+        }
+
+        .empty {
+            height: 50px;
+        }
+
+        .price {
+            padding: 10px 20px;
+            background-color: var(--primary-color);
+
+            span {
+                color: #fff;
+                font-weight: bold;
+                font-size: 18px;
+            }
+        }
+    }
+}
+</style>