修改购物车功能

tanghaolin

2025-03-09 2839044a1269268e277f23f66cf2b86dcf85de3b

 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">
@@ -87,7 +106,9 @@
                        <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>
                           <span class="eec-level-name" @click="handleCertificateClick(app)">{{
                              EecLevelEnum[app.EnergyEfficiencyClass].name
                           }}</span>
                        </div>
                     </div>

@@ -96,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"
@@ -215,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 = [
@@ -272,6 +305,9 @@
   currentPage: 1,
   pageSize: 12,
});

// 搜索相关
const searchQuery = ref('');

onMounted(() => {
   initComanyData();
@@ -343,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');
@@ -377,6 +431,7 @@
         }
      });
   }

   dispEecProduct.value = getSelectPageData(filterProductData.value);
};
const handleCurrentChange = (val: number) => {
@@ -413,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));
   }
   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;
@@ -428,6 +491,10 @@
   EecSelect.value = tag;
   filterProduct();
};

const handleSearch = () => {
   filterProduct();
};
</script>

<style lang="scss" scoped>