添加联系我们界面

tanghaolin

2025-04-18 e3ab5c403cce86811f9bdf8ae5f0d00f1f776b1f

 src/views/IndustrialSoftware.vue

@@ -1,36 +1,30 @@
<template>
   <div
      class="container mx-auto px-4 py-8 bg-white industrial-soft-style"
      v-loading="m_PageLoading"
      style="margin-top: 20px; padding-top: 15px"
   >
   <div class="container mx-auto px-4 py-8 bg-white" v-loading="m_PageLoading" style="margin-top: 20px; padding-top: 15px">
      <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 class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 30px">
            <!-- 厂商 -->
            <div class="border-b border-bottom-dashed-1 box-border px-[10px]">
               <div class="flex items-center">
                  <span class="text-gray-500 text-[20px]">厂商：</span>
                  <div class="flex flex-1 h-full">
                     <span
                        v-for="item in factory"
                        :key="item.CompanyId"
                        class="ant-tag !px-4"
                        :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''"
                        @click="clickFactory(item)"
                     >
                        {{ item.CompanyAbbName }}
                     </span>
                  </div>
               </div>
            </div>
				
            <!-- 类型 -->
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <span class="text-gray-500">类型：</span>
                  <div class="flex flex-1">
            <div class="border-b p-4 border-bottom-dashed-1 box-border catalog-filter-bar">
               <div class="h-full flex items-center">
                  <span class="text-gray-500 text-[20px]">类型：</span>
                  <div class="flex flex-1 h-full">
                     <span
                        v-for="item in type"
                        class="ant-tag !px-4"
@@ -46,26 +40,9 @@
               </div>
            </div>

            <!-- 厂商 -->
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <span class="text-gray-500">厂商：</span>
                  <div class="flex flex-1">
                     <span
                        v-for="item in factory"
                        :key="item.CompanyId"
                        class="ant-tag !px-4"
                        :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''"
                        @click="clickFactory(item)"
                     >
                        {{ item.CompanyAbbName }}
                     </span>
                  </div>
               </div>
            </div>

            <!-- 能效等级 -->
            <div class="flex eec-filter-sortbar" style="background-color: #ecedee">
            <div class="flex eec-filter-sortbar px-[10px]">
               <span class="text-gray-500 text-[20px]"></span>
               <ul>
                  <li
                     v-for="sort in EecClass"
@@ -81,128 +58,89 @@
               </ul>
            </div>
         </div>
         <!-- 软件列表 -->
         <div class="grid grid-cols-4 gap-4" style="padding: 0 10px; min-height: 417px">
            <div v-for="(app, index) in dispEecProduct" :key="index" class="goods-warp-item software-card">
               <el-tooltip class="box-item" effect="dark" :offset="20" placement="top">
                  <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>
                     <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>
                     <!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> -->
                     <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">面议</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" @click="handleCertificateClick(app)">{{
                              EecLevelEnum[app.EnergyEfficiencyClass].name
                           }}</span>
                        </div>
                     </div>

                     <!-- <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 class="flex justify-between gap-4">
                        <div class="link-btn text-nowrap" @click="handleBuyClick(app.Id)">
                           <svg
                              t="1739504206748"
                              class="svg-size-style"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="35851"
                              width="128"
                              height="128"
                           >
                              <path
                                 d="M96.6656 1013.76a88.064 88.064 0 0 1-88.064-88.064V607.1296a38.4 38.4 0 0 1 47.7184-37.2736L502.6816 744.448a40.96 40.96 0 0 0 18.6368 0L967.68 569.856a38.2976 38.2976 0 0 1 46.08 27.8528 36.5568 36.5568 0 0 1 1.2288 9.4208v320.512A86.1184 86.1184 0 0 1 929.28 1013.76z"
                                 fill="#C2E3FF"
                                 opacity=".64"
                                 p-id="35852"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M815.104 14.2336H197.632A88.3712 88.3712 0 0 0 109.3632 102.4v347.3408a72.9088 72.9088 0 0 0 46.6944 68.096L480.1536 643.072a73.728 73.728 0 0 0 52.5312 0l324.096-125.2352a72.9088 72.9088 0 0 0 46.6944-68.096V102.4a88.3712 88.3712 0 0 0-88.3712-88.1664z m-469.4016 387.072a24.3712 24.3712 0 0 1-24.3712 24.3712h-38.8096a25.088 25.088 0 0 1-25.088-25.088v-38.7072A24.4736 24.4736 0 0 1 281.9072 337.92h39.424a24.4736 24.4736 0 0 1 24.3712 24.4736z m0-175.104a24.4736 24.4736 0 0 1-24.3712 24.4736h-39.424a24.4736 24.4736 0 0 1-24.4736-24.4736v-39.424a24.4736 24.4736 0 0 1 24.4736-24.3712h39.424a24.4736 24.4736 0 0 1 24.3712 24.3712z m421.4784 175.104a24.2688 24.2688 0 0 1-24.3712 24.3712H434.8928a20.48 20.48 0 0 1-20.48-20.48v-43.3152A24.4736 24.4736 0 0 1 438.6816 337.92h304.128a24.3712 24.3712 0 0 1 24.3712 24.4736z m0-175.104a24.3712 24.3712 0 0 1-24.3712 24.4736h-304.128a24.4736 24.4736 0 0 1-24.3712-24.4736v-39.424a24.4736 24.4736 0 0 1 24.3712-24.3712h304.128a24.3712 24.3712 0 0 1 24.3712 24.3712z"
                                 fill="#43ADFF"
                                 p-id="35853"
                                 class="icon-path"
                              ></path>
                           </svg>
                           立即购买
                        </div>
                        <div class="link-btn text-nowrap" v-if="false">
                           <svg
                              t="1739503834540"
                              class="svg-size-style"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="34740"
                              width="128"
                              height="128"
                           >
                              <path
                                 d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z"
                                 fill="#1989FA"
                                 opacity=".3"
                                 p-id="34741"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34742"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34743"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34744"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z"
                                 fill="#1989FA"
                                 p-id="34745"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z"
                                 fill="#1989FA"
                                 p-id="34746"
                                 class="icon-path"
                              ></path></svg
                           >报告
                        </div>
                     </div>
         <!-- 内容div -->
         <div class="flex gap-[30px]">
            <!-- 左侧系列列表，当前选中的类型为1的时候显示 -->
            <div class="left-div w-[336px] h-[487px]" v-show="typeSelect === 1" style="border:2px solid rgba(158,158,158,0.4)">
               <div class="flex flex-col w-full items-center justify-center">
                  <div class="flex w-full items-center justify-center py-[18px] box-border" style="border-bottom: 4px solid #003a8f">
                     <span class="text-600 font-bold text-[#003a8f] text-[24px]">系列列表</span>
                  </div>
                  <template #content>
                     <div class="goods-tip-content" style="white-space: pre-wrap">{{ app.Tip }}</div>
                  </template>
               </el-tooltip>
                  <div class="flex flex-col gap-[10px]"></div>
               </div>
            </div>
            <!-- 右侧软件列表，当左侧div不显示的时候占满整个父容器 -->
            <div class="right-div flex-1">
               <!-- 软件列表 -->
               <div class="grid grid-cols-4 gap-4" style="padding: 0 10px; min-height: 417px">
                  <div v-for="(app, index) in dispEecProduct" :key="index" class="goods-warp-item software-card">
                     <el-tooltip class="box-item" effect="dark" :offset="20" placement="top">
                        <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>
                           <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>
                           <!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> -->
                           <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">面议</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" @click="handleCertificateClick(app)">{{
                                    EecLevelEnum[app.EnergyEfficiencyClass].name
                                 }}</span>
                              </div>
                           </div>
                           <div class="flex justify-between gap-4">
                              <div class="link-btn text-nowrap" @click="handleBuyClick(app.Id)">
                                 <svg
                                    t="1739504206748"
                                    class="svg-size-style"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="35851"
                                    width="128"
                                    height="128"
                                 >
                                    <path
                                       d="M96.6656 1013.76a88.064 88.064 0 0 1-88.064-88.064V607.1296a38.4 38.4 0 0 1 47.7184-37.2736L502.6816 744.448a40.96 40.96 0 0 0 18.6368 0L967.68 569.856a38.2976 38.2976 0 0 1 46.08 27.8528 36.5568 36.5568 0 0 1 1.2288 9.4208v320.512A86.1184 86.1184 0 0 1 929.28 1013.76z"
                                       fill="#C2E3FF"
                                       opacity=".64"
                                       p-id="35852"
                                       class="icon-path"
                                    ></path>
                                    <path
                                       d="M815.104 14.2336H197.632A88.3712 88.3712 0 0 0 109.3632 102.4v347.3408a72.9088 72.9088 0 0 0 46.6944 68.096L480.1536 643.072a73.728 73.728 0 0 0 52.5312 0l324.096-125.2352a72.9088 72.9088 0 0 0 46.6944-68.096V102.4a88.3712 88.3712 0 0 0-88.3712-88.1664z m-469.4016 387.072a24.3712 24.3712 0 0 1-24.3712 24.3712h-38.8096a25.088 25.088 0 0 1-25.088-25.088v-38.7072A24.4736 24.4736 0 0 1 281.9072 337.92h39.424a24.4736 24.4736 0 0 1 24.3712 24.4736z m0-175.104a24.4736 24.4736 0 0 1-24.3712 24.4736h-39.424a24.4736 24.4736 0 0 1-24.4736-24.4736v-39.424a24.4736 24.4736 0 0 1 24.4736-24.3712h39.424a24.4736 24.4736 0 0 1 24.3712 24.3712z m421.4784 175.104a24.2688 24.2688 0 0 1-24.3712 24.3712H434.8928a20.48 20.48 0 0 1-20.48-20.48v-43.3152A24.4736 24.4736 0 0 1 438.6816 337.92h304.128a24.3712 24.3712 0 0 1 24.3712 24.4736z m0-175.104a24.3712 24.3712 0 0 1-24.3712 24.4736h-304.128a24.4736 24.4736 0 0 1-24.3712-24.4736v-39.424a24.4736 24.4736 0 0 1 24.3712-24.3712h304.128a24.3712 24.3712 0 0 1 24.3712 24.3712z"
                                       fill="#43ADFF"
                                       p-id="35853"
                                       class="icon-path"
                                    ></path>
                                 </svg>
                                 立即购买
                              </div>
                           </div>
                        </div>
                        <template #content>
                           <div class="goods-tip-content" style="white-space: pre-wrap">{{ app.Tip }}</div>
                        </template>
                     </el-tooltip>
                  </div>
               </div>
            </div>
         </div>

         <!-- 分页 -->
         <div class="flex justify-center mt-8">
            <el-pagination
@@ -268,6 +206,8 @@
   { name: '二级能效', tag: 2 },
];

const m_catalogList = ref([]);

const m_PageLoading = ref(false);
const dialogVisibleCertifcate = ref(false);

@@ -276,6 +216,7 @@
const factorySelect = ref('-99');
const factoryIncludeType = ref(null);
const EecSelect = ref(0);
const catalogSelect = ref(0);

const m_curCertificatePath = ref('');

@@ -309,10 +250,27 @@
// 搜索相关
const searchQuery = ref('');

//监听当前路由的参数变化
watch(
   () => route.query.keywords,
   () => {
      const keywords = route.query.keywords ?? '';
      searchQuery.value = String(keywords);
      filterProduct();
   }
);

onMounted(() => {
   const keywords = route.query.keywords ?? '';
   const type = route.query.type ?? 1;
   const company = route.query.company ?? '-99';
   typeSelect.value = Number(type);
   factorySelect.value = String(company);
   factoryIncludeType.value = [typeSelect.value];

   searchQuery.value = String(keywords);
   initComanyData();
   initData();
   // filterProduct();
});
const initComanyData = () => {
   axios({
@@ -344,7 +302,17 @@
         let result = res.data;

         let arr = [];
         let catalogList = [{
            Id: 0,
            Name: '全部'
         }]
         result.forEach((item: any, index: number) => {
            if(typeSelect.value === 1){
               catalogList.push({
                  Id: item.CatalogID,
                  Name:item.ModelType
               })
            }
            if (typeSelect.value === 2) {
               item.Price = item.Price * 10;
            }
@@ -353,7 +321,8 @@
            }
            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,
@@ -370,7 +339,9 @@
            };
            arr.push(node);
         });

         // catalogList进行去重
         m_catalogList.value = catalogList.filter((item, index, self) => self.findIndex((t) => t.Id === item.Id) === index);
         console.log(m_catalogList.value);
         allEecProduct.value = arr;
         filterProduct();
      })
@@ -383,7 +354,6 @@
   filterProductData.value = allEecProduct.value.filter((item) => {
      return item.Type === typeSelect.value;
   });

   // 搜索筛选
   if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase();
@@ -402,7 +372,6 @@
         return item.EnergyEfficiencyClass === EecSelect.value;
      });
   }

   // 厂商筛选
   if (factorySelect.value !== '-99') {
      filterProductData.value = filterProductData.value.filter((item) => {
@@ -431,7 +400,6 @@
         }
      });
   }

   dispEecProduct.value = getSelectPageData(filterProductData.value);
};
const handleCurrentChange = (val: number) => {
@@ -473,7 +441,7 @@
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   if (userInfo.value&& userInfo.value.Token) {
   if (userInfo.value && userInfo.value.Token) {
      router.push(`/product/${currentProduct.Id}`);
   } else {
      loginStore.logOut();
@@ -520,7 +488,7 @@
   /* transition: border-color .1s ease; */
   border-radius: 5px;
   transition: all 0.3s;
   margin-top: 10px;
   margin-top: 0px;
}

.goods-warp-item:hover {
@@ -546,6 +514,12 @@

.box-border {
   box-sizing: border-box;
}
.catalog-filter-bar {
   padding: 0 10px;
   height: 54px;
   display: flex;
   align-items: center;
}

.industrial-soft-style::after {
@@ -646,33 +620,31 @@
}

.ant-tag {
   height: 100%;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.65);
   font-size: 14px;
   color: #1d1d1f;
   font-size: 22px;
   font-variant: tabular-nums;
   line-height: 1.5;
   line-height: 54px;
   list-style: none;
   font-feature-settings: 'tnum';
   display: inline-block;
   height: auto;
   margin: 0 8px 0 0;
   padding: 2px 7px;
   font-size: 12px;
   line-height: 20px;
   white-space: nowrap;
   cursor: default;
   opacity: 1;
   transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   margin-right: 24px;
   font-size: 14px;
   font-size: 22px;
}

.ant-tag:hover {
   color: #1c97b7;
   color: var(--theme-color);
}

.ant-tag-checked {
   background-color: #1c97b7;
   background-color: var(--theme-color);
   color: #fff;
}

@@ -681,41 +653,38 @@
}

.eec-filter-sortbar {
   background-color: #ecedee;
   height: 54px;
}

.eec-filter-sortbar ul {
   padding-left: 0;
   list-style: none;
   margin: 0;
   display: flex;
   box-sizing: border-box;
   gap: 5px;
   padding-left: 42px;
   padding-left: 58px;
   height: 100%;
}

.eec-filter-sortbar li {
   padding: 4px 18px;
   cursor: pointer;
   /* transition: all .3s; */
   margin: 0 2px;
   line-height: 32px;
   line-height: 54px;
   box-sizing: border-box;
   font-size: 22px;
}

.eec-filter-sortbar li:hover {
   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;
   border-bottom: 4px solid var(--theme-color);
}

.eec-filter-currentOrder {
   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;
   color: #fff;
   background-color: var(--theme-color);
}

.eec-filter-currentOrder:hover {
   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;
   border-bottom: 4px solid var(--theme-color);
}

.eec-level-div {