更新记录

1.8.0（2024-03-31）

支持商品排序

1.2.0（2024-03-02）

更新配置

1.0.1（2024-03-02）

新增限时秒杀标签、立即抢按钮

平台兼容性

1.如需云函数后台服务

导入插件后再导入云服务即可 商品分类页面云函数插件 或者直接导入 商品分类页面组件+云函数完整插件

<template>
    <view class="shop-list">
        <shop-list :typeValue="typeValue" :sortType="sortType" :typeList="typeList" :shopList="shopList" @changeType="handleChangeType"
            @detail="handleDetail" @sort="handleSort"></shop-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                sortType: '',
                typeValue: '1',
                typeList: [{
                    _id: '1',
                    label: '为你推荐'
                }, {
                    _id: '2',
                    label: '新品上架'
                }, {
                    _id: '3',
                    label: '生菜/叶菜'
                }, {
                    _id: '4',
                    label: '进口水果'
                }, {
                    _id: '5',
                    label: '海鲜水产'
                }, {
                    _id: '6',
                    label: '豆制品'
                }, {
                    _id: '7',
                    label: '冻品面点'
                }, {
                    _id: '8',
                    label: '豆类/芽苗'
                }, {
                    _id: '9',
                    label: '辣椒/椒类'
                }, {
                    _id: '10',
                    label: '豆类/芽苗'
                }],
                shopList: [{
                    _id: '1',
                    title: '丹山草莓 500g (单果20g起)',
                    desc: '进口 | 口感享甜',
                    tagList: '换购 优惠',
                    price: 25.99,
                    discount: 4.5,
                    sale: 100,
                    originPrice: 28.99,
                    titleTag: '限时秒杀',
                    url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit1.jpeg'
                }, {
                    _id: '2',
                    title: '精选海南哈密瓜4kg',
                    desc: '新鲜采摘 | 口感享甜',
                    tagList: '换购',
                    price: 22.99,
                    discount: 5.5,
                    sale: 10,
                    originPrice: 26.99,
                    titleTag: '限时秒杀',
                    url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit2.jpeg'
                }, {
                    _id: '3',
                    title: '爆汁圣女果500g',
                    desc: '本地种植 | 甜甜蜜蜜',
                    tagList: '买一送一',
                    price: 10.80,
                    discount: 10,
                    sale: 20,
                    originPrice: 14.99,
                    url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit3.jpeg'
                }, {
                    _id: '4',
                    title: '海南小台农芒果500g(单果60g期)',
                    desc: '香甜细腻',
                    tagList: '优惠',
                    price: 22.90,
                    sale: 30,
                    discount: 9.8,
                    originPrice: 28.99,
                    url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit4.jpeg'
                }, {
                    _id: '5',
                    title: '云南人参果500g(单果50g起)',
                    desc: '果肉清香 | 高甜水润',
                    tagList: '换购',
                    sale: 40,
                    discount: 10,
                    price: 24.90,
                    originPrice: 28.90,
                    url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit5.jpeg'
                }]
            };
        },
        methods: {
            handleChangeType(typeValue) {
                this.typeValue = typeValue
            },
            handleDetail(item) {
                console.log(item)
            },
            handleSort(sortType) {
                console.log(sortType)
                this.sortType = sortType
            },
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: #fff;
    }
</style>