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,23 +37,27 @@
37 <!-- 店铺列表 --> 37 <!-- 店铺列表 -->
38 <div class="shop-list-box" v-if="shopLists && shopLists.length"> 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 </div> 61 </div>
58 </div> 62 </div>
59 </div> 63 </div>
@@ -62,21 +66,31 @@ @@ -62,21 +66,31 @@
62 <script> 66 <script>
63 67
64 // 引入组件 68 // 引入组件
  69 + import Vue from "vue";
65 import { Toast, Indicator } from "mint-ui"; 70 import { Toast, Indicator } from "mint-ui";
  71 + import { List } from "vant";
66 import callAppBox from "@/components/callAppBox/callAppBox"; 72 import callAppBox from "@/components/callAppBox/callAppBox";
67 import backBox from "@/components/backBox/backBox"; 73 import backBox from "@/components/backBox/backBox";
68 import titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom"; 74 import titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom";
69 import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox"; 75 import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
70 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2"; 76 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
71 77
  78 + Vue.use(List);
  79 +
72 export default { 80 export default {
73 name: "mallBox", 81 name: "mallBox",
74 data() { 82 data() {
75 return { 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 components: { 96 components: {
@@ -116,180 +130,39 @@ @@ -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 * 旗舰店swiper 167 * 旗舰店swiper
295 */ 168 */
@@ -342,8 +215,13 @@ @@ -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 Indicator.open("加载中..."); 227 Indicator.open("加载中...");
@@ -351,9 +229,11 @@ @@ -351,9 +229,11 @@
351 // 获取证书请求接口 229 // 获取证书请求接口
352 this.http("/Api/" + this.getApiVersion().good + "/flagshipList", { 230 this.http("/Api/" + this.getApiVersion().good + "/flagshipList", {
353 uid: this.getStore("uid") || 0, 231 uid: this.getStore("uid") || 0,
354 - page: 1 232 + page: page
355 }, this.flagshipListCallback, { 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,12 +253,42 @@
373 // 解构数据 253 // 解构数据
374 let { data: datas } = res; 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 } else if (res.code == 400) { 293 } else if (res.code == 400) {
384 294