tanghaolin
2025-04-15 8c3d15eae99d51193e20ff222dedf96cdba57b33
src/views/IndustrialSoftware.vue
@@ -7,6 +7,25 @@
      <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">
@@ -69,9 +88,12 @@
                  <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>
@@ -79,12 +101,14 @@
                     <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>
@@ -93,7 +117,7 @@
                     <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"
@@ -118,9 +142,9 @@
                                 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"
@@ -212,10 +236,22 @@
<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 = [
@@ -249,13 +285,13 @@
};
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() },
};
// 源数据
@@ -269,6 +305,9 @@
   currentPage: 1,
   pageSize: 12,
});
// 搜索相关
const searchQuery = ref('');
onMounted(() => {
   initComanyData();
@@ -340,20 +379,38 @@
      });
};
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');
@@ -374,6 +431,7 @@
         }
      });
   }
   dispEecProduct.value = getSelectPageData(filterProductData.value);
};
const handleCurrentChange = (val: number) => {
@@ -410,12 +468,20 @@
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;
@@ -423,6 +489,10 @@
};
const handleEecLevel = (tag: number) => {
   EecSelect.value = tag;
   filterProduct();
};
const handleSearch = () => {
   filterProduct();
};
</script>
@@ -501,7 +571,7 @@
.goods-name {
   position: relative;
   width: 100%;
   height: 42px;
   height: auto;
   line-height: 150%;
   margin-top: 5px;
   color: #333;
@@ -537,6 +607,7 @@
   margin-top: 3px;
   box-sizing: border-box;
   padding: 0 25px;
   justify-content: center;
   align-items: center;
   gap: 15px;
}