cardList.vue
3.9 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
<view class="content">
<!-- 顶部搜索 -->
<view class="search_wrap layer_between">
<view class="search_input">
<input type="text" @confirm="toSearch()" v-model="keyword" placeholder="请输入名称、型号、品牌、厂家搜索" />
<image class="search_icon" src="../../static/search.png" mode=""></image>
</view>
<view class="search_word" @click="toSearch()">搜索</view>
</view>
<!-- 轴承列表 -->
<view class="bearing_classify layer_nostar">
<!-- 左侧类目 -->
<view class="bearing_l">
<view class="bear_l_box flex_column_center">
<view class="bear_l_single flex_warp" :class="{ bear_l_active: isLeft == item.id }" v-for="(item, index) in leftList" :key="index" @click="changeLeft(item,index)">
<view class="bear_l_child">{{ item.name }}</view>
</view>
</view>
</view>
<!-- 右侧具体分类 -->
<view class="bearing_r">
<view class="bear_r_box">
<view class="bear_r_single" :class="{bear_r_active:isRight == item.id}" v-for="(item, index) in rightList" :key="index" @click="changeRight(item,index)">{{ item.name }}</view>
</view>
</view>
</view>
<!-- 热搜名片 -->
<view class="hot_search">
<!-- 名片 -->
<view class="hot_card_wrap flex_wrap_between">
<view class="card_single" v-for="(item,index) in cardList" :key="index" @click="toDetail(item)">
<image :src="item.front_image" mode=""></image>
</view>
</view>
<!-- 分页 -->
<view class="card_pagation layer_between">
<view class="prev_page" :class="{next_page:pageNum>1}" @click="prevPage()">上一页</view>
<view class="layer_between jump_page">
跳转到
<input type="text" @confirm="jumpPage()" v-model="pageNum" />
页
</view>
<view class="next_page" :class="{prev:pageNum >= totalPage}" @click="nextPage()">下一页</view>
<view class="total_page">共{{totalPage/1}}页</view>
</view>
</view>
</view>
</template>
<script>
import App from "../../App.vue";
export default {
data() {
return {
// 搜索
keyword:"",
// 轴承列表
// 左侧
leftList: [],
isLeft: 0,
// 右侧
rightList: [],
isRight: -1,
// 名片列表
cardList:[],
// 分页
pageNum:1,
// 总页数
totalPage:"",
};
},
methods: {
// 首页分类数据 左侧一级分类
getType(){
let t = this;
t.leftList = [];
t.rightList = [];
let url = "/api/category/get_category_one";
App.post(url)
.then(res=>{
t.leftList = res;
// 数据回显
t.leftList.forEach(el=>{
if(el.id == t.isLeft){
t.rightList = el.children;
}
})
})
},
// 左侧列表选中
changeLeft(item,index) {
this.isLeft = item.id;
this.rightList = item.children;
},
// 右侧列表选中
changeRight(item,index){
this.isRight = item.id;
this.getCardList();
},
// 获取名片列表
getCardList(){
let t = this;
let url = "/api/goods/goods_list";
let params = {
category_id:t.isRight,
page:t.pageNum
};
App.post(url,params)
.then(res=>{
t.totalPage = res.page_sum;
t.cardList = res.list;
})
},
// 名片详情
toDetail(item){
uni.navigateTo({
url:"/pages/index/cardDetail?id="+item.id
})
},
// 搜索 去名片列表
toSearch(){
uni.navigateTo({
url:"/pages/index/search?keyword="+this.keyword
})
},
// 上一页
prevPage(){
if(this.pageNum <=1 )
return false;
this.pageNum --;
this.getCardList()
},
// 下一页
nextPage(){
if(this.pageNum == this.totalPage){
return false
}
this.pageNum ++;
this.getCardList()
},
// 跳转到某一页
jumpPage(){
if(this.pageNum>this.totalPage)
this.pageNum = this.totalPage;
this.getCardList()
},
},
onLoad(options) {
this.isLeft = options.pid;
this.isRight = options.id;
// 首页分类数据
this.getType();
// 名片列表数据
this.getCardList();
},
};
</script>
<style>
@import url('../../style/index');
</style>