cashierdesktop/src/views/home/components/goods.vue

<!-- 商品列表 -->
<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>