|
|
@@ -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>
|
|
|
|