添加产品过滤

tanghaolin

2025-02-12 cc27985706d644ddca074820255e99b96106269b

添加产品过滤

 src/views/IndustrialSoftware.vue

@@ -67,18 +67,18 @@
                <div class="flex gap-4 p-4" style="background-color: #ecedee;">
                    <el-button v-for="sort in sortOptions" :key="sort.tag"
                        :type="selectedSort === sort.tag ? 'primary' : 'default'" class="!px-6"
                        @click="selectedSort = sort.tag">
                        @click="changeSelectType(sort.tag)">
                        {{ sort.name }}
                    </el-button>
                </div>
            </div>
            <!-- 软件列表 -->
            <div class="grid grid-cols-5 gap-4" style="padding: 0 10px;">
                <div v-for="(app, index) in softwareList" :key="index" class="goods-warp-item software-card">
                <div v-for="(app, index) in dispProductType" :key="index" class="goods-warp-item software-card">
                    <div class="flex flex-col h-full" style="cursor: pointer;">
                        <img :src="app.logo" :alt="app.name" class=" object-contain mx-auto goods-img" />
                        <!-- <h3 class="text-lg font-medium mb-2">{{ app.name }}</h3> -->
                        <div class="goods-name">{{ app.name }}</div>
                        <div class="goods-name" :title="app.name">{{ app.name }}</div>
                        <div class="metertitle mb-2"><span>订货编码：{{ app.applicationCode }}</span></div>
                        <!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> -->
                        <div class="flex flex-wrap gap-2 mb-4">
@@ -86,10 +86,10 @@
                            <el-tag size="small" type="success">{{ app.industry }}</el-tag>
                        </div>
                        <div class="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </div>
                        <div class="flex justify-between items-center">
                        <!-- <div class="flex justify-between items-center">
                            <el-rate v-model="app.rating" disabled />
                            <span class="text-gray-400 text-sm">{{ app.date }}</span>
                        </div>
                        </div> -->

                        <div class="link-btn">立即购入</div>
                    </div>
@@ -98,15 +98,17 @@

            <!-- 分页 -->
            <div class="flex justify-center mt-8">
                <el-pagination v-model:current-page="currentPage" :page-size="12" :total="100"
                    layout="prev, pager, next" />
                <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 50, 300, 400]" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" /> -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ref, onMounted } from 'vue';

// 分类选项
const industryTypes = ['全部', '基础共性类', '行业通用类', '企业专用类', '其他类'];
@@ -133,6 +135,7 @@
// 示例数据
const softwareList = ref([
    {
        id:1,
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '微信小程序客户端自主开发的下单系统，用户仅需通过微信内的报废车预约下单，用户可通过微信内的报废车预约下单。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
@@ -142,8 +145,10 @@
        price: '¥1770.65',
        rating: 5,
        date: '2024-01-06',
        tag: 'motorPower'
    },
    {
        id:2,
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '权客专利年费管理软件是由运营权客信息科技有限公司自主开发的一款专利年费管理软件。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
@@ -153,8 +158,10 @@
        price: '¥1770.65',
        rating: 4.5,
        date: '2024-12-25',
        tag: 'motorPower'
    },
    {
        id:3,
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '通信信号处理与分析系统软件是一套用于对通信信号进行分析和处理的系统。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
@@ -164,9 +171,11 @@
        price: '¥1770.65',
        rating: 4.8,
        date: '2024-12-20',
        tag: 'motorPower'
    },
    {
        name: '智能技术服务管理系统',
        id:4,
        name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735295148000',
        type: '行业通用类',
@@ -175,9 +184,11 @@
        price: '¥1770.65',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'motorPower'
    },
    {
        name: '智能技术服务管理系统',
        id:5,
        name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735295148000',
        type: '行业通用类',
@@ -186,8 +197,90 @@
        price: '¥1770.65',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'motorPower'
    },

    {
        id:6,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL70-20-5.5/2 进出口DN100 额定流量70m³/h 额定扬程20m 5.5kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: "AC0394822",
        industry: '运维服务类',
        price: '¥7399.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'pump'
    },
    {
        id:7,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-32-15/2 进出口DN100 额定流量100m³/h 额定扬程32m 15kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: "AC0394822",
        industry: '运维服务类',
        price: '¥10390.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'pump'
    },
    {
        id:8,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-50-22/2 进出口DN100 额定流量100m³/h 额定扬程50m 22kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: "AC0394822",
        industry: '运维服务类',
        price: '¥13490.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'pump'
    },
    {
        id:9,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL115-34-15/2 进出口DN100 额定流量115m³/h 额定扬程34m 15kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: "AC0394822",
        industry: '运维服务类',
        price: '¥10390.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'pump'
    },
    {
        id:10,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL50-12.5-3/4 进出口DN100 额定流量50m³/h 额定扬程12.5m 3kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: "AC0394822",
        industry: '运维服务类',
        price: '¥5319.0',
        rating: 4.2,
        date: '2024-12-20',
        tag: 'pump'
    },
]);
const dispProductType = ref([])

onMounted(() => {
    filterProduct();
})
const filterProduct = () => {
    dispProductType.value = softwareList.value.filter((item) => {
        return item.tag===selectedSort.value
    })
}
//监听类型选择筛选
const changeSelectType = (tag: string) => {
    selectedSort.value = tag;
    filterProduct()
};
</script>

<style scoped>
@@ -210,13 +303,14 @@
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color .1s ease;
    /* transition: border-color .1s ease; */
    border-radius: 5px;
    transition: all .3s;
}

.goods-warp-item:hover {
    border-color: #e9e9e9;
    box-shadow: 0 0 2px 2px #eee;
    border-color: rgba(0, 0, 0, .09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
}

.bg-grey {
@@ -260,16 +354,13 @@
.goods-name {
    position: relative;
    width: 100%;
    height: 45px;
    height: 42px;
    line-height: 150%;
    margin-top: 5px;
    color: #333;
    overflow: hidden;
    text-align: left;
    padding-left: 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.metertitle {