w-front-end / select_good · Commits

Commit 3e836e82e55d297119978da702a8a25439a90281

Authored by 王强
1 parent ee55ba87

新版店铺主页（旗舰店）对接完成~

Inline Side-by-side
Showing 1 changed file with 104 additions and 194 deletions
src/pages/mall2/mall2.vue
  View file @3e836e8
... ... @@ -37,23 +37,27 @@
37 37 <!-- 店铺列表 -->
38 38 <div class="shop-list-box" v-if="shopLists && shopLists.length">
39 39  
40   - <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toShop(items)">
41   -
42   - <!-- 头图 -->
43   - <div class="header-img-box">
44   - <img v-lazy="items.img + SIGN.BIG" class="header-img" />
45   - </div>
46   -
47   - <!-- 商品列表 -->
48   - <div class="list-box">
49   -
50   - <!-- 商品展示样式 2 -->
51   - <goods-item-2 class="item" v-for="(item, i) in items.goods" :key="i"
52   - :item="item"
53   - pid="3">
54   - </goods-item-2>
55   - </div>
56   - </div>
  40 + <!-- 上拉加载 -->
  41 + <van-list v-model="shopListsPage.loading" :finished="shopListsPage.finished" finished-text="没有更多了" @load="loadMore">
  42 +
  43 + <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toShop(items)">
  44 +
  45 + <!-- 头图 -->
  46 + <div class="header-img-box">
  47 + <img v-lazy="items.img + SIGN.BIG" class="header-img" />
  48 + </div>
  49 +
  50 + <!-- 商品列表 -->
  51 + <div class="list-box">
  52 +
  53 + <!-- 商品展示样式 2 -->
  54 + <goods-item-2 class="item" v-for="(item, i) in items.goods" :key="i"
  55 + :item="item"
  56 + pid="3">
  57 + </goods-item-2>
  58 + </div>
  59 + </div>
  60 + </van-list>
57 61 </div>
58 62 </div>
59 63 </div>
... ... @@ -62,21 +66,31 @@
62 66 <script>
63 67  
64 68 // 引入组件
  69 + import Vue from "vue";
65 70 import { Toast, Indicator } from "mint-ui";
  71 + import { List } from "vant";
66 72 import callAppBox from "@/components/callAppBox/callAppBox";
67 73 import backBox from "@/components/backBox/backBox";
68 74 import titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom";
69 75 import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
70 76 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
71 77  
  78 + Vue.use(List);
  79 +
72 80 export default {
73 81 name: "mallBox",
74 82 data() {
75 83 return {
76   - title: "", // 标题
77   - backs: null, // 后退按钮组
78   - navs: null, // 导航
79   - shopLists: null // 店铺列表
  84 + title: "", // 标题
  85 + backs: null, // 后退按钮组
  86 + CALL_STATUS: {
  87 + INIT: "init", // 初始化页面
  88 + REFRESH: "refresh", // 刷新页面
  89 + LOAD_MORE: "loadMore" // 加载更多
  90 + },
  91 + navs: null, // 导航
  92 + shopListsPage: {}, // 店铺商品列表分页相关参数
  93 + shopLists: null // 店铺商品列表
80 94 };
81 95 },
82 96 components: {
... ... @@ -116,180 +130,39 @@
116 130 }
117 131 });
118 132 }
  133 + },
  134 + methods: {
  135 +
  136 + /**
  137 + * 加载更多
  138 + */
  139 + loadMore() {
119 140  
  141 + // 判断是否可加载
  142 + if (this.shopListsPage.loadingNow === false || this.shopListsPage.loadingNow === undefined) {
120 143  
  144 + // 设置加载中状态
  145 + this.$set(this.shopListsPage, 'loadingNow', true);
121 146  
  147 + if (this.shopListsPage.page === undefined) {
122 148  
123   - // 临时，初始化店铺列表数据
124   - this.$set(this, 'shopLists', [
125   - {
126   - header_img: 'static/img/box_banner.jpg',
127   - list: [
128   - {
129   - ads: "广告语",
130   - id: "9519164",
131   - price: "5.01",
132   - prices: "6.00",
133   - shop_type: "1",
134   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
135   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
136   - },
137   - {
138   - ads: "广告语",
139   - id: "9519164",
140   - price: "5.01",
141   - prices: "6.00",
142   - shop_type: "1",
143   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
144   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
145   - },
146   - {
147   - ads: "广告语",
148   - id: "9519164",
149   - price: "5.01",
150   - prices: "6.00",
151   - shop_type: "1",
152   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
153   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
154   - }
155   - ]
156   - },
157   - {
158   - header_img: 'static/img/box_banner.jpg',
159   - list: [
160   - {
161   - ads: "广告语",
162   - id: "9519164",
163   - price: "5.01",
164   - prices: "6.00",
165   - shop_type: "1",
166   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
167   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
168   - },
169   - {
170   - ads: "广告语",
171   - id: "9519164",
172   - price: "5.01",
173   - prices: "6.00",
174   - shop_type: "1",
175   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
176   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
177   - },
178   - {
179   - ads: "广告语",
180   - id: "9519164",
181   - price: "5.01",
182   - prices: "6.00",
183   - shop_type: "1",
184   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
185   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
186   - }
187   - ]
188   - },
189   - {
190   - header_img: 'static/img/box_banner.jpg',
191   - list: [
192   - {
193   - ads: "广告语",
194   - id: "9519164",
195   - price: "5.01",
196   - prices: "6.00",
197   - shop_type: "1",
198   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
199   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
200   - },
201   - {
202   - ads: "广告语",
203   - id: "9519164",
204   - price: "5.01",
205   - prices: "6.00",
206   - shop_type: "1",
207   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
208   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
209   - },
210   - {
211   - ads: "广告语",
212   - id: "9519164",
213   - price: "5.01",
214   - prices: "6.00",
215   - shop_type: "1",
216   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
217   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
218   - }
219   - ]
220   - },
221   - {
222   - header_img: 'static/img/box_banner.jpg',
223   - list: [
224   - {
225   - ads: "广告语",
226   - id: "9519164",
227   - price: "5.01",
228   - prices: "6.00",
229   - shop_type: "1",
230   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
231   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
232   - },
233   - {
234   - ads: "广告语",
235   - id: "9519164",
236   - price: "5.01",
237   - prices: "6.00",
238   - shop_type: "1",
239   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
240   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
241   - },
242   - {
243   - ads: "广告语",
244   - id: "9519164",
245   - price: "5.01",
246   - prices: "6.00",
247   - shop_type: "1",
248   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
249   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
250   - }
251   - ]
252   - },
253   - {
254   - header_img: 'static/img/box_banner.jpg',
255   - list: [
256   - {
257   - ads: "广告语",
258   - id: "9519164",
259   - price: "5.01",
260   - prices: "6.00",
261   - shop_type: "1",
262   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
263   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
264   - },
265   - {
266   - ads: "广告语",
267   - id: "9519164",
268   - price: "5.01",
269   - prices: "6.00",
270   - shop_type: "1",
271   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
272   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
273   - },
274   - {
275   - ads: "广告语",
276   - id: "9519164",
277   - price: "5.01",
278   - prices: "6.00",
279   - shop_type: "1",
280   - simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
281   - title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
282   - }
283   - ]
284   - }
285   - ]);
  149 + // 旗舰店店铺商品
  150 + this.flagshipList(this.CALL_STATUS.INIT, 1);
  151 + } else {
286 152  
  153 + // 增加页码
  154 + this.$set(this.shopListsPage, 'page', ++this.shopListsPage.page);
287 155  
  156 + // 判断页码是数字再执行
  157 + if (!isNaN(parseInt(this.shopListsPage.page))) {
288 158  
  159 + // 旗舰店店铺商品（加载更多）
  160 + this.flagshipList(this.CALL_STATUS.LOAD_MORE, this.shopListsPage.page);
  161 + }
  162 + }
  163 + }
  164 + },
289 165  
290   - },
291   - methods: {
292   -
293 166 /**
294 167 * 旗舰店swiper
295 168 */
... ... @@ -342,8 +215,13 @@
342 215  
343 216 /**
344 217 * 旗舰店店铺商品
  218 + * @param {String} CALL_STATUS [何处触发请求]
  219 + * @param {Int} page [页码]
345 220 */
346   - flagshipList() {
  221 + flagshipList(CALL_STATUS = this.CALL_STATUS.INIT, page = 1) {
  222 +
  223 + // 加载中
  224 + this.$set(this.shopListsPage, "loading", true);
347 225  
348 226 // 加载中提示
349 227 Indicator.open("加载中...");
... ... @@ -351,9 +229,11 @@
351 229 // 获取证书请求接口
352 230 this.http("/Api/" + this.getApiVersion().good + "/flagshipList", {
353 231 uid: this.getStore("uid") || 0,
354   - page: 1
  232 + page: page
355 233 }, this.flagshipListCallback, {
356   - method: "POST"
  234 + method: "POST",
  235 + CALL_STATUS,
  236 + page
357 237 });
358 238 },
359 239  
... ... @@ -373,12 +253,42 @@
373 253 // 解构数据
374 254 let { data: datas } = res;
375 255  
376   - /* 获取优选库精选活动数据 开始 */
  256 + /* 获取旗舰店店铺商品数据 开始 */
  257 +
  258 + // 判断如果有数据
  259 + if (datas.list && datas.list.length) {
  260 +
  261 + // 判断如何操作数据
  262 + switch (ext.CALL_STATUS) {
  263 + case this.CALL_STATUS.INIT:
  264 + case this.CALL_STATUS.REFRESH:
  265 +
  266 + // 初始化数据
  267 + this.$set(this.shopListsPage, 'page', ext.page);
  268 + this.$set(this.shopListsPage, 'loading', true);
  269 +
  270 + // 设置商铺商品列表数据
  271 + this.$set(this, 'shopLists', datas.list);
  272 + break;
  273 + case this.CALL_STATUS.LOAD_MORE:
377 274  
378   - // 设置商铺商品列表数据
379   - this.$set(this, 'shopLists', datas.list);
  275 + // 追加列表数据
  276 + this.$set(this, 'shopLists', [...this.shopLists, ...datas.list]);
  277 + break;
  278 + }
  279 +
  280 + // 设置还有需要加载的内容
  281 + this.$set(this.shopListsPage, 'loading', false);
  282 + this.$set(this.shopListsPage, 'loadingNow', false);
  283 + } else {
  284 +
  285 + // 没有需要加载的内容，停止上拉加载
  286 + this.$set(this.shopListsPage, 'loading', false);
  287 + this.$set(this.shopListsPage, 'loadingNow', false);
  288 + this.$set(this.shopListsPage, 'finished', true);
  289 + }
380 290  
381   - /* 获取优选库精选活动数据 结束 */
  291 + /* 获取旗舰店店铺商品数据 结束 */
382 292  
383 293 } else if (res.code == 400) {
384 294  
... ...