yoe-shop-web/src/views/search/index.vue

<template>
  <div class="search-pages">
    <div v-if="httpObj.searchKeyword && type == 1" class="breadcrumb flex-row-center">
      <div class="breadcrumb-bos flex-row-start">
        <div class="home" @click="onPath('/index')">首页</div>
        <div class="nav-list">
          <el-icon style="margin: 0 4px">
            <ArrowRight />
          </el-icon>
          <div class="like">搜索结果</div>
        </div>
        <el-icon style="margin: 0 4px">
          <ArrowRight />
        </el-icon>
        <div>{{ httpObj.searchKeyword || '' }}</div>
      </div>
    </div>
    <div v-else style="height: 15px"></div>
    <!-- 筛选 -->
    <div class="search-head">
      <div class="head-bos">
        <div class="head-title">分类:</div>
        <div class="head-box">
          <div
            @click="onHead(item, type == 1 ? 'topCategoryId' : type == 2 ? 'middleCategoryId' : 'bottomCategoryId')"
            class="classify-list"
            v-for="(item, index) in classifyList"
            :key="index"
            :class="{
              hig:
                type == 1 ? item.id == httpObj.topCategoryId : type == 2 ? item.id == httpObj.middleCategoryId : item.id == httpObj.bottomCategoryId
            }"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="head-bos" v-if="type == 1">
        <div class="head-title">品牌:</div>
        <div class="head-box">
          <el-select v-model="httpObj.brandId" filterable remote :remote-method="remoteMethod" placeholder="请输入名牌名称" style="width: 240px">
            <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id" />
          </el-select>
        </div>
      </div>
      <div class="head-bos" v-else>
        <div class="head-title">品牌:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'brandId')"
            class="classify-list"
            v-for="(item, index) in brandList"
            :key="index"
            :class="item.id == httpObj.brandId ? 'hig' : ''"
          >
            {{ item.brandName }}
          </div>
        </div>
      </div>
      <div class="head-bos">
        <div class="head-title">价格:</div>
        <div class="head-box">
          <div
            @click="onHead(item, 'priceRange')"
            class="classify-list"
            v-for="(item, index) in priceList"
            :key="index"
            :class="item.id == httpObj.priceRange ? 'hig' : ''"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="flex-row-between">
      <div class="head-bos">
        <div class="head-sort flex-row-center" @click="onSort(1)" :class="sortField1 != '' ? 'hig' : ''">
          <div>智能匹配</div>
          <div class="sort-box">
            <el-icon :color="sortField1 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12">
              <CaretTop />
            </el-icon>
            <el-icon :color="sortField1 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12">
              <CaretBottom />
            </el-icon>
          </div>
        </div>
        <div class="head-sort flex-row-center" @click="onSort(2)" :class="sortField2 != '' ? 'hig' : ''">
          <div>库存排序</div>
          <div class="sort-box">
            <el-icon :color="sortField2 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12">
              <CaretTop />
            </el-icon>
            <el-icon :color="sortField2 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12">
              <CaretBottom />
            </el-icon>
          </div>
        </div>
        <div class="head-sort flex-row-center" @click="onSort(3)" :class="sortField3 != '' ? 'hig' : ''">
          <div>价格排序</div>
          <div class="sort-box">
            <el-icon :color="sortField3 == 'Asc' ? '#E7000B' : '#333333'" class="icon1" :size="12">
              <CaretTop />
            </el-icon>
            <el-icon :color="sortField3 == 'Desc' ? '#E7000B' : '#333333'" class="icon2" :size="12">
              <CaretBottom />
            </el-icon>
          </div>
        </div>
        <el-checkbox-group v-model="checkList" style="margin-top: 15px" @change="getList">
          <el-checkbox label="可定制" value="isCustomize" />
        </el-checkbox-group>
      </div>
      <!-- 游标分页控制 -->
      <pagination
        v-show="dataList.length > 0"
        v-model:page="httpObj.pageNum"
        v-model:limit="httpObj.pageSize"
        v-model:way="way"
        :cursor-mode="true"
        :has-more="hasMore"
        @pagination="getList"
      />
    </div>

    <!-- 商品 -->
    <div class="expert-bos">
      <div v-for="(item, index) in dataList" :key="index" class="expert-list" @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)">
        <img :src="item.productImage" alt="" />
        <div class="itemName ellipsis">{{ item.itemName || '' }}</div>
        <div class="price">
          <span class="memberPrice">¥{{ item.memberPrice }}</span>
          <span class="marketPrice">¥{{ item.marketPrice }}</span>
        </div>
      </div>
      <div class="empty-bos" v-if="dataList.length === 0">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <!-- 游标分页控制 -->
    <pagination
      v-show="dataList.length > 0"
      v-model:page="httpObj.pageNum"
      v-model:limit="httpObj.pageSize"
      v-model:way="way"
      :cursor-mode="true"
      :has-more="hasMore"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { getPcProductPage, getBrandPage, getBrandByCategoryList } from '@/api/search/index';
import { getProductCategoryTree } from '@/api/home/index';
import { onPath } from '@/utils/siteConfig';
import Pagination from '@/components/Pagination/index.vue';
const route = useRoute();
const type = ref<any>(1);
const dataList = ref<any>([]);
const checkList = ref<any>([]);
const classifyList = ref<any>([]);
const brandList = ref<any>([]);
const categoryName = ref<any>('');
const hasMore = ref(true); // 是否还有更多数据
const way = ref<any>(1);
const httpObj = ref<any>({
  itemName: '',
  topCategoryId: '',
  middleCategoryId: '',
  bottomCategoryId: '',
  brandId: '',
  priceRange: '',
  sortField: '',
  sortOrder: '',
  isCustomize: '',
  pageSize: 20,
  pageNum: 1
});
const priceList = ref<any>([
  { label: '全部', id: '' },
  { label: '1-100', id: 1 },
  { label: '100-500', id: 2 },
  { label: '500-1000', id: 3 },
  { label: '1000以上', id: 4 }
]);
const sortField1 = ref<any>('');
const sortField2 = ref<any>('');
const sortField3 = ref<any>('');

const getList = () => {
  if (sortField1.value) {
    httpObj.value.sortField = '1';
    httpObj.value.sortOrder = sortField1.value;
  }
  if (sortField2.value) {
    httpObj.value.sortField = httpObj.value.sortField + (httpObj.value.sortField ? ',2' : '2');
    httpObj.value.sortOrder = httpObj.value.sortOrder + (httpObj.value.sortOrder ? ',' + sortField2.value : sortField2.value);
  }
  if (sortField3.value) {
    httpObj.value.sortField = httpObj.value.sortField + (httpObj.value.sortField ? ',3' : '3');
    httpObj.value.sortOrder = httpObj.value.sortOrder + (httpObj.value.sortOrder ? ',' + sortField3.value : sortField3.value);
  }
  if (checkList.value.length > 0) {
    httpObj.value.isCustomize = 1;
  } else {
    httpObj.value.isCustomize = '';
  }
  getPcProductPage(httpObj.value).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows ? res.rows : [];
      // 判断是否还有更多数据
      hasMore.value = dataList.value.length === httpObj.value.pageSize;
    }
  });
};

// 获取分类
const getClassify = () => {
  getProductCategoryTree({}).then((res) => {
    if (res.code == 200) {
      if (type.value == 2 && httpObj.value.middleCategoryId) {
        res.data.forEach((item1: any) => {
          item1.children.unshift({
            label: '全部',
            id: ''
          });
          item1.children.forEach((item2: any) => {
            if (item2.id == httpObj.value.middleCategoryId) {
              httpObj.value.topCategoryId = item1.id;
              classifyList.value = item1.children;
            }
          });
        });
        getList();
        //获取当前分类下得品牌
        getBrand2();
      } else if (type.value == 3 && httpObj.value.bottomCategoryId) {
        res.data.forEach((item1: any) => {
          item1.children.forEach((item2: any) => {
            if (item2.children && item2.children.length > 0) {
              item2.children.unshift({
                label: '全部',
                id: ''
              });
              item2.children.forEach((item3: any) => {
                if (item3.id == httpObj.value.bottomCategoryId) {
                  httpObj.value.topCategoryId = item1.id;
                  httpObj.value.middleCategoryId = item2.id;
                  classifyList.value = item2.children;
                }
              });
            }
          });
        });
        getList();
        //获取当前分类下得品牌
        getBrand2();
      } else {
        res.data.unshift({
          label: '全部',
          id: ''
        });
        classifyList.value = res.data;
      }
    }
  });
};

const onHead = (item: any, type: string) => {
  httpObj.value[type] = item.id;
  getList();
};

//查询品牌
const getBrand1 = () => {
  getBrandPage({
    categoryName: categoryName.value,
    categoryId: httpObj.value.topCategoryId,
    pageSize: 100,
    pageNum: 1
  }).then((res) => {
    if (res.code == 200) {
      brandList.value = res.rows;
    }
  });
};

//查询分类下得品牌
const getBrand2 = () => {
  getBrandByCategoryList({
    categoryId: httpObj.value.topCategoryId,
    pageSize: 100,
    pageNum: 1
  }).then((res) => {
    if (res.code == 200) {
      res.rows.unshift({
        brandName: '全部',
        id: ''
      });
      brandList.value = res.rows;
    }
  });
};

//筛选品牌
const remoteMethod = (res: any) => {
  if (res) {
    categoryName.value = res;
  } else {
    categoryName.value = '';
  }
  getBrand1();
};

// 筛选条件
const onSort = (type: number) => {
  if (type == 1) {
    if (sortField1.value == '' || sortField1.value == 'Desc') {
      sortField1.value = 'Asc';
    } else if (sortField1.value == 'Asc') {
      sortField1.value = 'Desc';
    }
  }
  if (type == 2) {
    if (sortField2.value == '' || sortField2.value == 'Desc') {
      sortField2.value = 'Asc';
    } else if (sortField2.value == 'Asc') {
      sortField2.value = 'Desc';
    }
  }
  if (type == 3) {
    if (sortField3.value == '' || sortField3.value == 'Desc') {
      sortField3.value = 'Asc';
    } else if (sortField3.value == 'Asc') {
      sortField3.value = 'Desc';
    }
  }
  getList();
};

// 核心修复：统一初始化函数
const initData = () => {
  httpObj.value.searchKeyword = '';
  httpObj.value.topCategoryId = '';
  httpObj.value.pageNum = 1;
  type.value = route.query.type;
  if (route.query.input) {
    httpObj.value.searchKeyword = route.query.input;
  }
  if (type.value == 1) {
    getBrand1();
    if (route.query.topCategoryId) {
      httpObj.value.topCategoryId = route.query.topCategoryId;
    }
    getList();
  }
  if (type.value == 2 && route.query.middleCategoryId) {
    httpObj.value.middleCategoryId = route.query.middleCategoryId;
  }
  if (type.value == 3 && route.query.bottomCategoryId) {
    httpObj.value.bottomCategoryId = route.query.bottomCategoryId;
  }
  getClassify();
};

watch(route, () => {
  initData();
});

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.search-pages {
  width: 1200px;
  margin: 0px auto 0 auto;
  // 筛选
  .search-head {
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    padding: 0 15px 15px 15px;
    font-size: 14px;
    color: #101828;
  }
  .head-bos {
    display: flex;
    .head-title {
      width: 70px;
      padding-top: 15px;
    }
    .head-box {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      width: 0;
      gap: 10px 15px;
      border-bottom: 1px solid #e5e7eb;
      padding: 15px 0;
      .classify-list {
        cursor: pointer;
        &.hig {
          color: var(--el-color-primary);
        }
      }
    }
    .head-sort {
      margin: 15px 15px 0 0;
      width: 108px;
      height: 32px;
      border: 1px solid #e5e7eb;
      border-radius: 2px 2px 2px 2px;
      cursor: pointer;
      font-size: 14px;
      background-color: #ffffff;
      &.hig {
        border: 1px solid var(--el-color-primary);
      }
      .sort-box {
        margin-left: 10px;
        position: relative;
        height: 32px;
        .icon1 {
          position: absolute;
          top: 6px;
        }
        .icon2 {
          position: absolute;
          bottom: 6px;
        }
      }
    }
  }
  // 商品
  // 行家精选
  .expert-bos {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    gap: 20px 12.5px;
    .expert-list {
      width: 230px;
      height: 306px;
      background: #ffffff;
      padding: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 190px;
      }
      .itemName {
        font-weight: 400;
        font-size: 14px;
        color: #101828;
        margin: 27px 0 2px 0;
      }
      .price {
        .memberPrice {
          color: var(--el-color-primary);
          font-size: 16px;
          color: #e7000b;
        }
        .marketPrice {
          font-size: 12px;
          color: #99a1af;
          line-height: 20px;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 6px;
        }
      }
    }

    .empty-bos {
      width: 100%;
      background-color: #ffffff;
      border-radius: 10px;
      margin-bottom: 20px;
    }
  }

  //面包屑
  .breadcrumb {
    width: 100%;
    height: 44px;
    padding-left: 20px;
    .breadcrumb-bos {
      width: 1200px;
      font-size: 14px;
      color: #101828;
      .nav-list {
        height: 44px;
        display: flex;
        align-items: center;
      }
      .home {
        cursor: pointer;
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
}
</style>