查询

src/views/search/index.vue

@@ -16,6 +16,14 @@
           </div>
         </div>
       </div>
+      <div class="head-bos">
+        <div class="head-title">品牌:</div>
+        <div class="head-box" v-if="type == 1">
+          <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">
         <div class="head-title">价格:</div>
         <div class="head-box">
@@ -68,23 +76,41 @@
         </div>
       </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 } from '@/api/search/index';
+import { getPcProductPage, getBrandPage } 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>({
   topCategoryId: '',
+  brandId: '',
   priceRange: '',
   sortField: '',
   sortOrder: '',
   isCustomize: '',
-  pageSize: 14,
+  pageSize: 10,
   pageNum: 1
 });
 const priceList = ref<any>([
@@ -119,6 +145,8 @@ const getList = () => {
   getPcProductPage(httpObj.value).then((res) => {
     if (res.code == 200) {
       dataList.value = res.rows;
+      // 判断是否还有更多数据
+      hasMore.value = dataList.value.length === httpObj.value.pageSize;
     }
   });
 };
@@ -135,9 +163,40 @@ getProductCategoryTree({}).then((res) => {
 });
 
 const onHead = (item: any, type: string) => {
+  if (type == 'topCategoryId') {
+    if (item.id) {
+      getBrand();
+    } else {
+    }
+  }
   httpObj.value[type] = item.id;
 };
 
+//查询品牌
+const getBrand = () => {
+  getBrandPage({
+    categoryName: categoryName.value,
+    categoryId: httpObj.value.topCategoryId,
+    pageSize: 100,
+    pageNum: 1
+  }).then((res) => {
+    if (res.code == 200) {
+      brandList.value = res.rows;
+    }
+  });
+};
+
+//筛选品牌
+const remoteMethod = (res: any) => {
+  if (res) {
+    categoryName.value = res;
+  } else {
+    categoryName.value = '';
+  }
+  getBrand();
+};
+
+// 筛选条件
 const onSort = (type: number) => {
   if (type == 1) {
     if (sortField1.value == '' || sortField1.value == 'Desc') {
@@ -164,7 +223,12 @@ const onSort = (type: number) => {
 };
 
 onMounted(() => {
+  type.value = route.query.type;
+  if (type.value == 1) {
+    httpObj.value.topCategoryId = '';
+  }
   getList();
+  getBrand();
 });
 </script>