w-front-end / select_good · Commits

Commit e44af2a1bf9aaafca1b064d118a4137e9db68584

Authored by 王强
1 parent dfd011cc

优选库，“优选”页面，最新上架改成按照分类展示，上拉加载更多页面，完成，待测试~

Inline Side-by-side
Showing 3 changed files with 208 additions and 81 deletions
src/components/titleSubTitleCom/titleSubTitleCom.less
  View file @e44af2a
@@ -27,6 +27,7 @@ @@ -27,6 +27,7 @@
27 font-weight: 400; 27 font-weight: 400;
28 width: 100%; 28 width: 100%;
29 height: 100%; 29 height: 100%;
  30 + min-height: 32px;
30 white-space: nowrap; 31 white-space: nowrap;
31 text-overflow: ellipsis; 32 text-overflow: ellipsis;
32 overflow: hidden; 33 overflow: hidden;
src/components/titleSubTitleCom/titleSubTitleCom.vue
  View file @e44af2a
1 <template> 1 <template>
2 - <div class="title-sub-title-com" v-if="item && item.title" @click="changeTab(item)">  
3 - <div class="title-box" :class="{'active': item.active}"> 2 + <div class="title-sub-title-com" ref="tabs" v-if="item && item.id && item.title" @click="changeTab(item)">
  3 + <div class="title-box" :class="{'active': item.id === activeId}">
4 <div class="title"> 4 <div class="title">
5 {{item.title}} 5 {{item.title}}
6 </div> 6 </div>
7 - <div class="sub-title" v-if="item.subTitle">  
8 - {{item.subTitle}} 7 + <div class="sub-title">
  8 + &nbsp;{{item.titles}}&nbsp;
9 </div> 9 </div>
10 </div> 10 </div>
11 <div class="line" v-if="line"></div> 11 <div class="line" v-if="line"></div>
@@ -16,13 +16,29 @@ @@ -16,13 +16,29 @@
16 export default { 16 export default {
17 data() { 17 data() {
18 return { 18 return {
19 - 19 + activeId: 0 // 活动项目id
20 }; 20 };
21 }, 21 },
22 props: ["item", "line"], 22 props: ["item", "line"],
23 methods: { 23 methods: {
24 24
25 /** 25 /**
  26 + * 获取当前选中项目id
  27 + * @returns
  28 + */
  29 + getActiveId() {
  30 + return this.activeId;
  31 + },
  32 +
  33 + /**
  34 + * 设置活动项目id
  35 + * @param {Int} activeId [选中项目id]
  36 + */
  37 + setActiveId(activeId) {
  38 + this.activeId = activeId;
  39 + },
  40 +
  41 + /**
26 * 切换标签 42 * 切换标签
27 * @param {object} item [对象] 43 * @param {object} item [对象]
28 */ 44 */
src/pages/optimization/optimization.vue
  View file @e44af2a
@@ -112,10 +112,10 @@ @@ -112,10 +112,10 @@
112 </horiz-list> 112 </horiz-list>
113 113
114 <!-- 最新上架组 --> 114 <!-- 最新上架组 -->
115 - <div class="components-box" v-if="newGoods && newGoods.list && newGoods.list.length"> 115 + <div class="components-box" v-if="(newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length) || (newGoods && newGoods.list && newGoods.list.length)">
116 116
117 <!-- tabs横向滚动 --> 117 <!-- tabs横向滚动 -->
118 - <horiz-list v-if="newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length" @changeTab="changeTab" 118 + <horiz-list ref="tabsHoriz" v-if="newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length" @changeTab="changeTab"
119 :lists="newGoodsTabs.list" 119 :lists="newGoodsTabs.list"
120 com="tab" 120 com="tab"
121 :pid="true"> 121 :pid="true">
@@ -131,20 +131,15 @@ @@ -131,20 +131,15 @@
131 </horiz-list> 131 </horiz-list>
132 132
133 133
134 - <!-- 上拉加载 -->  
135 -  
136 -  
137 -  
138 - <!-- 商品样式 7 列表 -->  
139 - <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"  
140 - :lists="newGoods"  
141 - com="7">  
142 - </column-list-box>  
143 -  
144 -  
145 -  
146 - 134 + <!-- 上拉加载 infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题 -->
  135 + <div class="column-list-container" :infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="paging.loading" :infinite-scroll-distance="paging.distance">
147 136
  137 + <!-- 商品样式 7 列表 -->
  138 + <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
  139 + :lists="newGoods"
  140 + com="7">
  141 + </column-list-box>
  142 + </div>
148 </div> 143 </div>
149 </div> 144 </div>
150 <!-- </van-pull-refresh> --> 145 <!-- </van-pull-refresh> -->
@@ -175,6 +170,17 @@ @@ -175,6 +170,17 @@
175 return { 170 return {
176 title: "", 171 title: "",
177 isLoading: false, // 下拉刷新控制 172 isLoading: false, // 下拉刷新控制
  173 + paging: { // 分页、上拉加载
  174 + activeId: 0,
  175 + loading: true,
  176 + page: 0,
  177 + distance: 50
  178 + },
  179 + CALL_STATUS: {
  180 + INIT: "init", // 初始化页面
  181 + REFRESH: "refresh", // 刷新页面
  182 + LOAD_MORE: "loadMore" // 加载更多
  183 + },
178 dresserList: null, // 达人列表 184 dresserList: null, // 达人列表
179 darenLists: null, // 达人动态列表 185 darenLists: null, // 达人动态列表
180 darenListsMore: null, // 达人动态列表更多 186 darenListsMore: null, // 达人动态列表更多
@@ -184,7 +190,6 @@ @@ -184,7 +190,6 @@
184 newBuyGoods: null, // 最新购买 190 newBuyGoods: null, // 最新购买
185 recommendGoods: null, // 猜你喜欢 191 recommendGoods: null, // 猜你喜欢
186 newGoodsTabs: null, // 最新上架tabs对象 192 newGoodsTabs: null, // 最新上架tabs对象
187 - newGoodsTabsActiveIndex: 0, // 最新上架tabs活动项目序号  
188 newGoods: null // 最新上架 193 newGoods: null // 最新上架
189 } 194 }
190 }, 195 },
@@ -207,6 +212,22 @@ @@ -207,6 +212,22 @@
207 }, 212 },
208 methods: { 213 methods: {
209 214
  215 + /**
  216 + * 上拉加载
  217 + */
  218 + loadMore() {
  219 +
  220 + // 判断是否可执行上拉加载
  221 + if (this.paging.activeId && this.paging.page) {
  222 +
  223 + // 增加页码
  224 + this.$set(this.paging, "page", ++this.paging.page);
  225 +
  226 + // 商品列表(追加)
  227 + this.shopGoodsList(this.paging.activeId, this.paging.page, this.CALL_STATUS.LOAD_MORE);
  228 + }
  229 + },
  230 +
210 // 下拉刷新 231 // 下拉刷新
211 // onRefresh() { 232 // onRefresh() {
212 233
@@ -259,6 +280,24 @@ @@ -259,6 +280,24 @@
259 280
260 /* 获取优选库“优选”数据 开始 */ 281 /* 获取优选库“优选”数据 开始 */
261 282
  283 + // 获取最新上架分类列表
  284 + if (datas.hotGroup && datas.hotGroup.length) {
  285 + this.$set(this, "newGoodsTabs", {
  286 + list: datas.hotGroup
  287 + });
  288 +
  289 + // 调用获取商品列表接口，获取第一个分类的列表
  290 + if (datas.hotGroup[0]) {
  291 +
  292 + // 下一周期执行
  293 + this.$nextTick(() => {
  294 +
  295 + // 切换分类
  296 + this.changeTab(datas.hotGroup[0]);
  297 + });
  298 + }
  299 + }
  300 +
262 // 获取“达人列表数据” 301 // 获取“达人列表数据”
263 if (datas.list && datas.list.length) { 302 if (datas.list && datas.list.length) {
264 // 设置“达人列表数据”数据 303 // 设置“达人列表数据”数据
@@ -279,67 +318,21 @@ @@ -279,67 +318,21 @@
279 } 318 }
280 } 319 }
281 320
282 - // 设置“最新上架”tab数据  
283 - this.$set(this, "newGoodsTabs", {  
284 - list: [  
285 - {  
286 - title: "助力",  
287 - subTitle: "副的标题",  
288 - active: true  
289 - },  
290 - {  
291 - title: "原产地",  
292 - subTitle: "副的标题",  
293 - active: false  
294 - },  
295 - {  
296 - title: "扶贫",  
297 - subTitle: "副的标题",  
298 - active: false  
299 - },  
300 - {  
301 - title: "人气",  
302 - subTitle: "副的标题",  
303 - active: false  
304 - },  
305 - {  
306 - title: "助力",  
307 - subTitle: "副的标题",  
308 - active: false  
309 - },  
310 - {  
311 - title: "原产地",  
312 - subTitle: "副的标题",  
313 - active: false  
314 - },  
315 - {  
316 - title: "扶贫",  
317 - subTitle: "副的标题",  
318 - active: false  
319 - },  
320 - {  
321 - title: "人气",  
322 - subTitle: "副的标题",  
323 - active: false  
324 - }  
325 - ]  
326 - });  
327 -  
328 - // 获取“最新上架”  
329 - if (datas.newGoods && datas.newGoods.length) { 321 + // // 获取“最新上架”
  322 + // if (datas.newGoods && datas.newGoods.length) {
330 323
331 - // 设置“最新上架”数据  
332 - this.$set(this, "newGoods", {  
333 - list: datas.newGoods  
334 - }); 324 + // // 设置“最新上架”数据
  325 + // this.$set(this, "newGoods", {
  326 + // list: datas.newGoods
  327 + // });
335 328
336 - // 判断“最新上架”更多  
337 - if (datas.newGoodsMore) { 329 + // // 判断“最新上架”更多
  330 + // if (datas.newGoodsMore) {
338 331
339 - // 设置“最新上架”更多  
340 - this.$set(this, "newGoodsMore", datas.newGoodsMore);  
341 - }  
342 - } 332 + // // 设置“最新上架”更多
  333 + // this.$set(this, "newGoodsMore", datas.newGoodsMore);
  334 + // }
  335 + // }
343 336
344 // 获取“最近购买” 337 // 获取“最近购买”
345 if (datas.newBuyGoods && datas.newBuyGoods.length) { 338 if (datas.newBuyGoods && datas.newBuyGoods.length) {
@@ -369,6 +362,105 @@ @@ -369,6 +362,105 @@
369 }, 362 },
370 363
371 /** 364 /**
  365 + * 商品列表
  366 + * @param {Int} groupId [平台分类id]
  367 + * @param {Int} page [页码]
  368 + * @param {String} CALL_STATUS [何处触发请求]
  369 + */
  370 + shopGoodsList(groupId, page, CALL_STATUS = this.CALL_STATUS.INIT) {
  371 +
  372 + // 校验必填参数
  373 + if (groupId && page) {
  374 +
  375 + // 加载中
  376 + this.$set(this.paging, "loading", true);
  377 +
  378 + // 加载中提示
  379 + Indicator.open("加载中...");
  380 +
  381 + // 获取证书请求接口
  382 + this.http("/Api/" + this.getApiVersion().index + "/shopGoodsList", {
  383 + groupid: groupId,
  384 + page: page,
  385 + order: 5,
  386 + ord: "desc"
  387 + }, this.shopGoodsListCallback, {
  388 + method: "POST",
  389 + CALL_STATUS
  390 + }
  391 + );
  392 + }
  393 + },
  394 +
  395 + /**
  396 + * 商品列表回调
  397 + * @param {object} res [服务器返回数据]
  398 + * @param {object} ext [扩展参数]
  399 + */
  400 + shopGoodsListCallback(res, ext) {
  401 +
  402 + // 加载完成
  403 + Indicator.close();
  404 +
  405 + // 下拉刷新结束
  406 + this.$set(this, "isLoading", false);
  407 +
  408 + // 返回处理
  409 + if (res.code == 200) {
  410 +
  411 + // 解构数据
  412 + let { data: datas } = res;
  413 +
  414 + /* 获取商品列表数据 开始 */
  415 +
  416 + // 判断是否有数据
  417 + if (datas && datas.length) {
  418 +
  419 + // 根据操作，设置列表
  420 + switch (ext.CALL_STATUS) {
  421 + case this.CALL_STATUS.INIT:
  422 +
  423 + // 设置“最新上架”数据
  424 + this.$set(this, "newGoods", {
  425 + list: datas
  426 + });
  427 + break;
  428 + case this.CALL_STATUS.REFRESH:
  429 +
  430 + // 设置“最新上架”数据
  431 + this.$set(this, "newGoods", {
  432 + list: datas
  433 + });
  434 + break;
  435 + case this.CALL_STATUS.LOAD_MORE:
  436 +
  437 + // 设置“最新上架”数据(追加)
  438 + this.$set(this.newGoods, "list", [...this.newGoods.list, ...datas]);
  439 + break;
  440 + }
  441 +
  442 + // 设置还有需要加载的内容
  443 + this.$set(this.paging, "loading", false);
  444 + } else {
  445 +
  446 + // 没有需要加载的内容，停止上拉加载
  447 + this.$set(this.paging, "loading", true);
  448 + }
  449 +
  450 + /* 获取商品列表数据 结束 */
  451 +
  452 + } else if (res.code == 400) {
  453 +
  454 + // 获取最新上架列表失败
  455 + Toast(res.message);
  456 + } else {
  457 +
  458 + // 获取最新上架列表失败
  459 + Toast("获取最新上架列表失败");
  460 + }
  461 + },
  462 +
  463 + /**
372 * 跳转到关注人列表数据 464 * 跳转到关注人列表数据
373 */ 465 */
374 h5More() { 466 h5More() {
@@ -525,13 +617,31 @@ @@ -525,13 +617,31 @@
525 */ 617 */
526 changeTab(item) { 618 changeTab(item) {
527 619
  620 + // 判断是否有滚动分类
  621 + if (this.$refs.tabsHoriz) {
528 622
  623 + // 设置children数组
  624 + let children = this.$refs.tabsHoriz.$children;
529 625
530 - console.log("changeTab", item);  
531 - 626 + // 循环处理
  627 + for (let i = 0; i < children.length; i++) {
  628 +
  629 + // 设置当前活动分类id
  630 + if (children[i].$refs.tabs && typeof children[i].setActiveId === "function") {
  631 + children[i].setActiveId(item.id);
  632 + }
  633 + }
  634 +
  635 + }
532 636
  637 + // 设置当前活动分类id
  638 + this.$set(this.paging, "activeId", item.id);
533 639
  640 + // 初始化页码
  641 + this.$set(this.paging, "page", 1);
534 642
  643 + // 获取数据
  644 + this.shopGoodsList(item.id, this.paging.page, this.CALL_STATUS.INIT);
535 } 645 }
536 }, 646 },
537 head: { 647 head: {