| | |
| | | <div class="w-100 h-100" style="background-color: #fff"> |
| | | <!-- 顶部分类菜单 --> |
| | | <div class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px"> |
| | | <!-- 搜索框 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px"> |
| | | |
| | | <div class="flex items-center gap-4"> |
| | | <span class="text-gray-500" >查询:</span> |
| | | <el-input |
| | | v-model="searchQuery" |
| | | placeholder="请输入公司名称/型号/产品名称" |
| | | class="!w-[300px]" |
| | | clearable |
| | | @input="handleSearch" |
| | | > |
| | | <template #prefix> |
| | | <el-icon><Search /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 类型 --> |
| | | <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px"> |
| | | <div class="flex items-center"> |
| | |
| | | <div class="flex flex-col h-full" style="cursor: pointer"> |
| | | <div style="position: relative; display: flex"> |
| | | <img :src="app.PhysicalPicturePath" :alt="app.Model" class="object-contain mx-auto goods-img" /> |
| | | <div class="goods-company">{{ app.CompanyName }}</div> |
| | | <!-- <div class="goods-company">{{ app.CompanyName }}</div> --> |
| | | </div> |
| | | <div class="goods-name" :title="app.Model">{{ app.ModelType }}</div> |
| | | <div class="goods-name" style="font-size: 14px; font-weight: bold" :title="app.Model">产品名称:{{ app.ModelType }}</div> |
| | | <!-- 产品 --> |
| | | <div class="goods-name" :title="app.Model">厂家名称:{{ app.CompanyName }}</div> |
| | | <!-- 型号 --> |
| | | <div class="metertitle mb-2"> |
| | | <span>型号:{{ app.Model }}</span> |
| | | </div> |
| | |
| | | <div class="flex gap-2" style="justify-content: space-between; align-items: center"> |
| | | <!-- <el-tag size="small" type="success">{{ app.CompanyName }}</el-tag> --> |
| | | <div class="goods-price"> |
| | | <span class="goods-price-selling"> ¥{{ app.Price }}</span> |
| | | <span class="goods-price-selling">面议</span> |
| | | </div> |
| | | <div class="flex items-center eec-level-div"> |
| | | <img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon" /> |
| | | <span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span> |
| | | <span class="eec-level-name">{{ EecLevelEnum[app.EnergyEfficiencyClass].name }}</span> |
| | | <span class="eec-level-name" @click="handleCertificateClick(app)">{{ |
| | | EecLevelEnum[app.EnergyEfficiencyClass].name |
| | | }}</span> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <span class="text-gray-400 text-sm">{{ app.date }}</span> |
| | | </div> --> |
| | | <div class="flex justify-between gap-4"> |
| | | <div class="link-btn text-nowrap" @click="handleBuyClick(app.id)"> |
| | | <div class="link-btn text-nowrap" @click="handleBuyClick(app.Id)"> |
| | | <svg |
| | | t="1739504206748" |
| | | class="svg-size-style" |
| | |
| | | class="icon-path" |
| | | ></path> |
| | | </svg> |
| | | 详细 |
| | | 立即购买 |
| | | </div> |
| | | <div class="link-btn text-nowrap" @click="handleCertificateClick(app)"> |
| | | <div class="link-btn text-nowrap" v-if="false"> |
| | | <svg |
| | | t="1739503834540" |
| | | class="svg-size-style" |
| | |
| | | <script setup lang="ts"> |
| | | import EecLevel1 from '@/assets/icons/energy_level_1.svg'; |
| | | import EecLevel2 from '@/assets/icons/energy_level_2.svg'; |
| | | import { onMounted, ref } from 'vue'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { onMounted, ref, computed } from 'vue'; |
| | | import { useRouter, useRoute } from 'vue-router'; |
| | | import { useLogin } from '@/stores/useLogin'; |
| | | import axios from 'axios'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | const loginStore = useLogin(); |
| | | |
| | | // 获取用户信息 |
| | | const userInfo = computed(() => { |
| | | const UserInfo = loginStore.getUserInfo(); |
| | | return UserInfo ? UserInfo : null; |
| | | }); |
| | | |
| | | // 分类选项 |
| | | const type = [ |
| | |
| | | }; |
| | | |
| | | const m_RequestDataObj = { |
| | | 1: { requestPath: 'static/EecProductData/Pump.json' }, |
| | | 2: { requestPath: 'static/EecProductData/AirCompressor.json' }, |
| | | 3: { requestPath: 'static/EecProductData/Fan.json' }, |
| | | 4: { requestPath: 'static/EecProductData/WaterChiller.json' }, |
| | | 5: { requestPath: 'static/EecProductData/PowerTransformer.json' }, |
| | | 6: { requestPath: 'static/EecProductData/IndustrialBoiler.json' }, |
| | | 7: { requestPath: 'static/EecProductData/ElectricMachinery.json' }, |
| | | 1: { requestPath: 'static/EecProductData/Pump.json?v=' + new Date().getTime() }, |
| | | 2: { requestPath: 'static/EecProductData/AirCompressor.json?v=' + new Date().getTime() }, |
| | | 3: { requestPath: 'static/EecProductData/Fan.json?v=' + new Date().getTime() }, |
| | | 4: { requestPath: 'static/EecProductData/WaterChiller.json?v=' + new Date().getTime() }, |
| | | 5: { requestPath: 'static/EecProductData/PowerTransformer.json?v=' + new Date().getTime() }, |
| | | 6: { requestPath: 'static/EecProductData/IndustrialBoiler.json?v=' + new Date().getTime() }, |
| | | 7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() }, |
| | | }; |
| | | |
| | | // 源数据 |
| | |
| | | currentPage: 1, |
| | | pageSize: 12, |
| | | }); |
| | | |
| | | // 搜索相关 |
| | | const searchQuery = ref(''); |
| | | |
| | | onMounted(() => { |
| | | initComanyData(); |
| | |
| | | .then((res) => { |
| | | m_PageLoading.value = false; |
| | | let result = res.data; |
| | | result.sort((a: any, b: any) => { |
| | | const aPrefix = a.Model.slice(0, 3); |
| | | const bPrefix = b.Model.slice(0, 3); |
| | | const aContainsDP = aPrefix.includes('DP') || aPrefix.includes('DRL'); |
| | | const bContainsDP = bPrefix.includes('DP') || bPrefix.includes('DRL'); |
| | | |
| | | if (aContainsDP && !bContainsDP) { |
| | | return -1; |
| | | } else if (!aContainsDP && bContainsDP) { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | let arr = []; |
| | | result.forEach((item: any, index: number) => { |
| | | if (typeSelect.value === 2) { |
| | | item.Price = item.Price * 10; |
| | | } |
| | | if (typeSelect.value === 4) { |
| | | item.Price = item.Price * 5; |
| | | } |
| | | let incrementFactor = 0.1 * (index + 1); // 根据索引计算递增系数 |
| | | let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 计算新的Price值 |
| | | |
| | | let node = { |
| | | Id: item.Id, |
| | | Type: item.Type, |
| | |
| | | }); |
| | | }; |
| | | const filterProduct = () => { |
| | | // 先按类型筛选 |
| | | filterProductData.value = allEecProduct.value.filter((item) => { |
| | | return item.Type === typeSelect.value; |
| | | }); |
| | | |
| | | // 搜索筛选 |
| | | if (searchQuery.value) { |
| | | const query = searchQuery.value.toLowerCase(); |
| | | filterProductData.value = filterProductData.value.filter((item) => { |
| | | return ( |
| | | item.CompanyName.toLowerCase().includes(query) || |
| | | item.Model.toLowerCase().includes(query) || |
| | | item.ModelType.toLowerCase().includes(query) |
| | | ); |
| | | }); |
| | | } |
| | | |
| | | // 能效等级筛选 |
| | | if (EecSelect.value !== 0) { |
| | | filterProductData.value = filterProductData.value.filter((item) => { |
| | | return item.EnergyEfficiencyClass === EecSelect.value; |
| | | }); |
| | | } |
| | | |
| | | // 厂商筛选 |
| | | if (factorySelect.value !== '-99') { |
| | | filterProductData.value = filterProductData.value.filter((item) => { |
| | | return factoryIncludeType.value.includes(item.Type); |
| | | }); |
| | | } |
| | | |
| | | // 泵类型特殊排序 |
| | | if (typeSelect.value === 1) { |
| | | filterProductData.value.sort((a: any, b: any) => { |
| | | const aContainsDSWQ = a.Model.includes('DSWQ'); |
| | | const bContainsDSWQ = b.Model.includes('DSWQ'); |
| | | const aContainsDRLOrDP = a.Model.substring(0, 3).includes('DRL') || a.Model.substring(0, 2).includes('DP'); |
| | | const bContainsDRLOrDP = b.Model.substring(0, 3).includes('DRL') || b.Model.substring(0, 2).includes('DP'); |
| | | |
| | | if (aContainsDSWQ && !bContainsDSWQ) { |
| | | return -1; |
| | | } else if (!aContainsDSWQ && bContainsDSWQ) { |
| | | return 1; |
| | | } else if (aContainsDRLOrDP && !bContainsDRLOrDP) { |
| | | return -1; |
| | | } else if (!aContainsDRLOrDP && bContainsDRLOrDP) { |
| | | return 1; |
| | | } else { |
| | | return 0; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | dispEecProduct.value = getSelectPageData(filterProductData.value); |
| | | }; |
| | | const handleCurrentChange = (val: number) => { |
| | |
| | | |
| | | const handleBuyClick = (productId: string) => { |
| | | // 找到当前点击的产品 |
| | | const currentProduct = dispEecProduct.value.find((item) => item.id === productId); |
| | | const currentProduct = dispEecProduct.value.find((item) => item.Id === productId); |
| | | if (currentProduct) { |
| | | // 保存产品信息到localStorage |
| | | localStorage.setItem('currentProduct', JSON.stringify(currentProduct)); |
| | | } |
| | | router.push(`/product/${currentProduct.Id}`); |
| | | if (userInfo.value&& userInfo.value.Token) { |
| | | router.push(`/product/${currentProduct.Id}`); |
| | | } else { |
| | | loginStore.logOut(); |
| | | router.replace({ |
| | | path: '/login', |
| | | query: { redirectPath: route.fullPath }, |
| | | }); |
| | | } |
| | | }; |
| | | const handleCertificateClick = (row: any) => { |
| | | dialogVisibleCertifcate.value = true; |
| | |
| | | }; |
| | | const handleEecLevel = (tag: number) => { |
| | | EecSelect.value = tag; |
| | | filterProduct(); |
| | | }; |
| | | |
| | | const handleSearch = () => { |
| | | filterProduct(); |
| | | }; |
| | | </script> |
| | |
| | | .goods-name { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 42px; |
| | | height: auto; |
| | | line-height: 150%; |
| | | margin-top: 5px; |
| | | color: #333; |
| | |
| | | margin-top: 3px; |
| | | box-sizing: border-box; |
| | | padding: 0 25px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | gap: 15px; |
| | | } |