cashier_desktop/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="changeCategory(item, 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" v-model="commdityName" style="width: 400px;" clearable
                @input="inputChange"></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 goodsList" :key="item.id" @click="showSkuHandle(item)">
            <div class="item">
                <div class="dot">2</div>
                <div class="cover" v-if="shopListType == 'img'">
                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;" fit="cover"></el-image>
                </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>￥{{ item.lowPrice }}</el-text>
                </div>
            </div>
        </div>
    </div>
    <div class="empty">
        <el-empty description="空空如也~" v-if="!goodsList.length" />
    </div>
    <!-- 选择规格 -->
    <skuModal ref="skuModalRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import _ from 'lodash'

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('img')

const categorys = ref([])
const categorysActive = ref(0)

const commdityName = ref('')

const originalGoods = ref([])
const goodsList = ref([])

const inputChange = _.debounce(function () {
    productqueryCommodityInfoAjax()
}, 500)

// 显示sku
function showSkuHandle(item) {
    if (item.typeEnum == 'sku') {
        skuModalRef.value.show({ ...item })
    } else {

    }
}

// 切换商品显示模式
function changeShopListType() {
    if (shopListType.value == 'text') {
        shopListType.value = 'img'
    } else {
        shopListType.value = 'text'
    }
}

// 切换分类
function changeCategory(item, index) {
    categorysActive.value = index
    if (item.id) {
        goodsList.value = []
        originalGoods.value.map(val => {
            if (val.categoryId == item.id) {
                goodsList.value.push(val)
            }
        })
    } else {
        goodsList.value = [...originalGoods.value]
    }
}

// 查询分类信息
async function queryCategoryAjax() {
    try {
        const res = await queryCategory({
            shopId: store.userInfo.shopId,
            page: 1,
            pageSize: 100
        })
        categorys.value = res.list
        categorys.value.unshift({
            name: '全部',
            id: ''
        })
    } catch (error) {
        console.log(error)
    }
}

// 查询商品信息
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
        })
        originalGoods.value = res
        goodsList.value = res
    } catch (error) {
        console.log(error)
    }
}

onMounted(async () => {
    await queryCategoryAjax()
    await productqueryCommodityInfoAjax()
})
</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 14px;
            background-color: var(--el-color-danger);
            color: #fff;
            border-radius: 20px;
            position: absolute;
            top: 4px;
            right: 4px;
            z-index: 1;
            font-size: 12px;
            font-size: 18px;
        }

        .cover {
            width: 100%;
            height: 300px;
        }

        .name {
            padding: 0 10px;
            height: 50px;
            margin-top: 20px;

            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>