1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<div class="product-list">
<van-nav-bar :title="rootCategory.name" left-text="返回" left-arrow
@click-left="onBack">
</van-nav-bar>
<van-tabs v-model="active" @click="onCategoryClick">
<van-tab v-for="category in childCategories" :title="category.name" />
</van-tabs>
<!-- <div v-for="(product,i) in products" :key="i">-->
<!-- <product-card :product='product' @click="showProduct(product)" />-->
<!-- </div>-->
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="(product,i) in products" :key="i">
<product-card :product='product' @click="showProduct(product)" />
</div>
</van-list>
</div>
</template>
<script>
import { getProductCategoryList, getProductSpuPage } from '../../api/product';
import {getProductPage} from "../../api/search";
export default {
data() {
return {
rootCategory: {
id: parseInt(this.$route.query.cidFirst),
name: this.$route.query.title,
},
childCategory: {
id: parseInt(this.$route.query.cidSecond),
},
childCategories: [],
active: -1,
products: [],
page: 0,
pageSize: 10,
loading: false,
finished: false,
};
},
methods: {
onBack() {
history.back();
},
onCategoryClick(key) {
// 设置激活的 key
this.active = key;
// 加载商品
this.products = [];
// 加载商品
this.loadProductList(this.childCategories[key].id, 1);
},
loadProductList(categoryId, page) {
this.childCategory.id = categoryId;
getProductPage({
pageNo: page,
pageSize: this.pageSize,
cid: this.childCategory.id,
}).then(data => {
this.handleData(page, data);
});
},
onLoad() {
// debugger;
// 进入下一页
let page = this.page + 1;
// 加载商品
this.loadProductList(this.childCategory.id, page);
},
handleData(page, data) {
this.loading = true;
// 设置下页面
this.page = page;
// 数据保存到 list 中
this.products.push(...data.list);
// 判断页数
if (this.products.length >= data.total) {
this.finished = true;
}
// 标记不在加载中
this.loading = false;
},
},
mounted() {
let response = getProductCategoryList(this.rootCategory.id);
response.then(data => {
// console.log(data);
// debugger;
// 设置根节点的分类
this.childCategories = data;
// 设置激活的分类
// debugger;
for (let i = 0; i < data.length; i++) {
if (data[i].id === this.childCategory.id) {
this.active = i;
break;
}
}
// 加载商品列表
// this.loadProductList(this.childCategory.id);
});
}
};
</script>
<style lang="less">
.product-list{
.additional .price{
position: absolute;
bottom: 6px;
height: 34px;
}
}
</style>