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 27 font-weight: 400;
28 28 width: 100%;
29 29 height: 100%;
  30 + min-height: 32px;
30 31 white-space: nowrap;
31 32 text-overflow: ellipsis;
32 33 overflow: hidden;
... ...
src/components/titleSubTitleCom/titleSubTitleCom.vue
  View file @e44af2a
1 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 4 <div class="title">
5 5 {{item.title}}
6 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 9 </div>
10 10 </div>
11 11 <div class="line" v-if="line"></div>
... ... @@ -16,13 +16,29 @@
16 16 export default {
17 17 data() {
18 18 return {
19   -
  19 + activeId: 0 // 活动项目id
20 20 };
21 21 },
22 22 props: ["item", "line"],
23 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 43 * @param {object} item [对象]
28 44 */
... ...
src/pages/optimization/optimization.vue
  View file @e44af2a
... ... @@ -112,10 +112,10 @@
112 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 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 119 :lists="newGoodsTabs.list"
120 120 com="tab"
121 121 :pid="true">
... ... @@ -131,20 +131,15 @@
131 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 143 </div>
149 144 </div>
150 145 <!-- </van-pull-refresh> -->
... ... @@ -175,6 +170,17 @@
175 170 return {
176 171 title: "",
177 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 184 dresserList: null, // 达人列表
179 185 darenLists: null, // 达人动态列表
180 186 darenListsMore: null, // 达人动态列表更多
... ... @@ -184,7 +190,6 @@
184 190 newBuyGoods: null, // 最新购买
185 191 recommendGoods: null, // 猜你喜欢
186 192 newGoodsTabs: null, // 最新上架tabs对象
187   - newGoodsTabsActiveIndex: 0, // 最新上架tabs活动项目序号
188 193 newGoods: null // 最新上架
189 194 }
190 195 },
... ... @@ -207,6 +212,22 @@
207 212 },
208 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 232 // onRefresh() {
212 233  
... ... @@ -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 302 if (datas.list && datas.list.length) {
264 303 // 设置“达人列表数据”数据
... ... @@ -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 338 if (datas.newBuyGoods && datas.newBuyGoods.length) {
... ... @@ -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 466 h5More() {
... ... @@ -525,13 +617,31 @@
525 617 */
526 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 647 head: {
... ...