w-front-end / select_good · Commits

Commit ec141d0b68a7da765e88c960bb911ba6ca25995a

Authored by 王强
1 parent 0ebe6fe5

添加“中免奢侈品会场”

Inline Side-by-side
Showing 2 changed files with 169 additions and 120 deletions
src/pages/discountList/discountList.less
  View file @ec141d0
... ... @@ -110,39 +110,53 @@
110 110 margin-top: 40px;
111 111 }
112 112 }
113   - .section {
114   - background-color: #ffffff;
115   - margin: 0 auto 40px auto;
116   - width: 690px;
117   - height: auto;
118   - border-radius: 24px;
119   - overflow: hidden;
120   - &:last-child {
121   - margin-bottom: 0;
122   - }
123   - &.goods-list {
124   - /deep/ .goods-item-8-box {
125   - .main-box {
126   - border-bottom: 1px solid #EAEAEA;
127   - }
  113 + .column-list-container {
  114 + .section {
  115 + background-color: #ffffff;
  116 + margin: 0 auto 40px auto;
  117 + width: 690px;
  118 + height: auto;
  119 + border-radius: 24px;
  120 + overflow: hidden;
  121 + &:last-child {
  122 + margin-bottom: 0;
128 123 }
129   - /deep/ .goods-item-8-box:last-child {
130   - .main-box {
131   - border-bottom: none;
  124 + &.goods-list {
  125 + /deep/ .goods-item-8-box {
  126 + .main-box {
  127 + border-bottom: 1px solid #EAEAEA;
  128 + }
  129 + }
  130 + /deep/ .goods-item-8-box:last-child {
  131 + .main-box {
  132 + border-bottom: none;
  133 + }
  134 + }
  135 + .discount-flag {
  136 + position: absolute;
  137 + top: 10px;
  138 + left: 10px;
  139 + z-index: 1;
  140 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  141 + padding: 1px 8px;
  142 + color: #945A08;
  143 + font-size: 20px;
  144 + font-weight: 400;
  145 + border-radius: 6px;
132 146 }
133 147 }
134   - .discount-flag {
135   - position: absolute;
136   - top: 10px;
137   - left: 10px;
138   - z-index: 1;
139   - background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
140   - padding: 1px 8px;
141   - color: #945A08;
142   - font-size: 20px;
143   - font-weight: 400;
144   - border-radius: 6px;
145   - }
  148 + }
  149 + /deep/ .van-list__loading-text {
  150 + margin-bottom: 30px;
  151 + color: #333333;
  152 + font-size: 28px;
  153 + font-weight: 400;
  154 + }
  155 + /deep/ .van-list__finished-text {
  156 + margin-bottom: 30px;
  157 + color: #333333;
  158 + font-size: 28px;
  159 + font-weight: 400;
146 160 }
147 161 }
148 162 .bottom-pl {
... ... @@ -182,4 +196,4 @@
182 196 }
183 197 }
184 198 }
185   -}
186 199 \ No newline at end of file
  200 +}
... ...
src/pages/discountList/discountList.vue
  View file @ec141d0
... ... @@ -52,21 +52,25 @@
52 52 </count-down-com>
53 53 </div>
54 54  
55   - <!-- 商品列表 -->
56   - <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  55 + <!-- 上拉加载 -->
  56 + <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
57 57  
58 58 <!-- 商品列表 -->
59   - <goods-item-8 v-for="(item, index) in lists[tabs.active]" :key="index" @jump="toDetail" @primary="primary"
60   - :item="item"
61   - sty="1">
62   -
63   - <!-- 折扣角标 -->
64   - <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (parseFloat(item.price) < parseFloat(item.prices))">
65   - {{item.tag || getDiscount(item.price, item.prices)}}
66   - </div>
67   - </goods-item-8>
68   - </div>
69   -
  59 + <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  60 +
  61 + <!-- 商品列表 -->
  62 + <goods-item-8 v-for="(item, index) in lists[tabs.active]" :key="index" @jump="toDetail" @primary="primary"
  63 + :item="item"
  64 + sty="1">
  65 +
  66 + <!-- 折扣角标 -->
  67 + <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (parseFloat(item.price) < parseFloat(item.prices))">
  68 + {{item.tag || getDiscount(item.price, item.prices)}}
  69 + </div>
  70 + </goods-item-8>
  71 + </div>
  72 + </van-list>
  73 +
70 74 <div class="bottom-pl"></div>
71 75  
72 76 <!-- 活动规则提示 -->
... ... @@ -88,13 +92,17 @@
88 92 <script>
89 93  
90 94 // 引入组件
  95 + import Vue from "vue";
91 96 import { Toast, Indicator } from "mint-ui";
  97 + import { List } from "vant";
92 98 import callAppBox from "@/components/callAppBox/callAppBox";
93 99 import backBox from "@/components/backBox/backBox";
94 100 import countDownCom from "@/components/countDownCom/countDownCom";
95 101 import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
96 102 import gotoTop from "@/components/gotoTop/gotoTop";
97 103  
  104 + Vue.use(List);
  105 +
98 106 export default {
99 107 name: 'discountListPage',
100 108 data () {
... ... @@ -178,15 +186,49 @@
178 186 methods: {
179 187  
180 188 /**
  189 + * 加载更多
  190 + */
  191 + loadMore() {
  192 +
  193 + // 判断是否执行上拉加载
  194 + if (this.tabs.list[this.tabs.active].type != '0') {
  195 +
  196 + // 判断是否可加载
  197 + if (this.tabs.list[this.tabs.active].loadingNow === false || this.tabs.list[this.tabs.active].loadingNow === undefined) {
  198 +
  199 + // 设置加载中状态
  200 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', true);
  201 +
  202 + if (this.tabs.list[this.tabs.active].page === undefined) {
  203 +
  204 + // 设置初始化页码
  205 + this.$set(this.tabs.list[this.tabs.active], 'page', 1);
  206 +
  207 + // 获取店铺首页推荐商品列表
  208 + this.getShopRecommendGoods(this.CALL_STATUS.INIT);
  209 + } else {
  210 +
  211 + // 判断页面是数字再执行
  212 + if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
  213 +
  214 + // 获取店铺首页推荐商品列表
  215 + this.getShopRecommendGoods(this.CALL_STATUS.LOAD_MORE);
  216 + }
  217 + }
  218 + }
  219 + }
  220 + },
  221 +
  222 + /**
181 223 * 初始化数据
182 224 */
183 225 initDiscount() {
184   -
  226 +
185 227 // 结束倒计时
186 228 if (this.tabs.list[0].timeoutInterval) {
187 229 clearInterval(this.tabs.list[0].timeoutInterval);
188 230 }
189   -
  231 +
190 232 // 初始化数据
191 233 this.$set(this.tabs.list[0], 'img', null); // 头图
192 234 this.$set(this.tabs.list[0], 'discountType', null); // 折扣专区状态，0：未开始；1：进行中；2：已结束
... ... @@ -199,7 +241,16 @@
199 241 * 请求接口封装
200 242 * @param {Number} index [tabs索引]
201 243 */
202   - request(index) {
  244 + request(index = 0) {
  245 +
  246 + // 判断App内
  247 + if (!this.isCNLive.value && this.tabs.list[index].type != '0') {
  248 +
  249 + // App外，唤起App
  250 + this.openApp();
  251 +
  252 + return false;
  253 + }
203 254  
204 255 // 设置tabs活动项
205 256 if (index) {
... ... @@ -262,7 +313,7 @@
262 313  
263 314 // 设置背景色
264 315 this.$set(this.tabs.list[0], 'color', datas.discount_color);
265   -
  316 +
266 317 // 头图
267 318 this.$set(this.tabs.list[0], 'img', datas.discount_img);
268 319  
... ... @@ -299,16 +350,24 @@
299 350 // 合并数组
300 351 this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]);
301 352  
302   - // 单独设置标题颜色/起始页码
  353 + // 首页取消上拉加载
  354 + this.$set(this.tabs.list[0], 'loading', false);
  355 + this.$set(this.tabs.list[0], 'loadingNow', false);
  356 + this.$set(this.tabs.list[0], 'finished', true);
  357 +
  358 + // 单独设置标题颜色/起始页码/加载中控制
303 359 for (let i = 1; i < this.tabs.list.length; i++) {
304 360 this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
305 361 this.$set(this.tabs.list[i], 'page', 1);
  362 + this.$set(this.tabs.list[i], 'loading', false);
  363 + this.$set(this.tabs.list[i], 'loadingNow', false);
  364 + this.$set(this.tabs.list[i], 'finished', false);
306 365 }
307 366 }
308 367  
309 368 // 设置非第一次请求接口
310 369 this.$set(this.tabs, 'first', false);
311   -
  370 +
312 371 /* 获取折扣专区列表数据 结束 */
313 372  
314 373 } else if (res.code == 400) {
... ... @@ -330,13 +389,13 @@
330 389  
331 390 // 判断必要参数
332 391 if (this.tabs.list[this.tabs.active].shop_id) {
333   -
  392 +
334 393 // 设置开始加载
335 394 this.$set(this.tabs.list[this.tabs.active], "loading", true);
336 395  
337 396 // 加载中提示
338 397 Indicator.open('加载中...');
339   -
  398 +
340 399 // 请求接口
341 400 this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
342 401 shop_id: this.tabs.list[this.tabs.active].shop_id,
... ... @@ -347,7 +406,7 @@
347 406 });
348 407 }
349 408 },
350   -
  409 +
351 410 /**
352 411 * 获取店铺首页推荐商品列表回调
353 412 * param {res} [服务器返回数据]
... ... @@ -355,79 +414,55 @@
355 414 */
356 415 getShopRecommendGoodsCallback(res, ext) {
357 416  
358   - // 隐藏加载中提示
359   - switch (ext.CALL_STATUS) {
360   - case this.CALL_STATUS.LOAD_MORE:
361   -
362   - // 加载完成
363   - Indicator.close();
364   - break;
365   - }
  417 + // 加载完成
  418 + Indicator.close();
366 419  
367 420 // 返回处理
368 421 if (res.code == 200) {
369   -
  422 +
370 423 // 解构数据
371 424 let {data: datas} = res;
372   -
373   - // 判断shop是否有值，有值再赋值
374   - if (datas.shop) {
375   -
376   - // 设置页面标题
377   - if (datas.shop.title) {
378   - this.$set(this, "title", datas.shop.title);
379   - }
380   -
381   - /* 推荐商品头部图片 开始 */
382   -
383   - if (datas.shop.recommend_img && (!this.goodsHeaderBoxs || !this.goodsHeaderBoxs.img)) {
384   - this.$set(this, "goodsHeaderBoxs", {
385   - img: datas.shop.recommend_img
386   - });
387   - }
388   -
389   - /* 推荐商品头部图片 结束 */
390   -
391   - }
392   -
393   - // 设置是否无背景
394   - this.$set(this, "goodsListsNoBg", !this.goodsHeaderBoxs);
395   -
396   - /* 设置列表数据 开始 */
397   - switch (ext.CALL_STATUS) {
398   - case this.CALL_STATUS.INIT:
399   -
400   - // 设置推荐商品列表
401   - this.$set(this, "goodsLists", datas.list);
402   -
403   - // 设置页码
404   - this.$set(this, "page", ++this.page);
405   - break;
406   - case this.CALL_STATUS.LOAD_MORE:
407   -
408   - // 判断是否有数据
409   - if (datas.list.length) {
410   -
411   - // 添加数据到数组
412   - this.$set(this, "goodsLists", [...this.goodsLists, ...datas.list]);
413   -
414   - // 设置页码
415   - this.$set(this, "page", ++this.page);
416   -
417   - // 取消Loading中状态，恢复LoadingMore功能
418   - this.$set(this, "loading", false);
419   - }
420   - break;
421   - }
  425 +
  426 + // 判断如果有数据
  427 + if (datas.list && datas.list.length) {
  428 +
  429 + /* 设置列表数据 开始 */
  430 + switch (ext.CALL_STATUS) {
  431 + case this.CALL_STATUS.INIT:
  432 +
  433 + // 设置推荐商品列表
  434 + this.$set(this.lists, this.tabs.active, datas.list);
  435 + break;
  436 + case this.CALL_STATUS.LOAD_MORE:
  437 +
  438 + // 添加数据到数组
  439 + this.$set(this.lists, this.tabs.active, [...this.lists[this.tabs.active], ...datas.list]);
  440 + break;
  441 + }
  442 +
  443 + // 设置页码
  444 + this.$set(this.tabs.list[this.tabs.active], 'page', ++this.tabs.list[this.tabs.active].page);
  445 +
  446 + // 取消Loading中状态，恢复LoadingMore功能
  447 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  448 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  449 + this.$set(this.tabs.list[this.tabs.active], 'finished', false);
  450 + } else {
  451 +
  452 + // 取消Loading中状态，恢复LoadingMore功能
  453 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  454 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  455 + this.$set(this.tabs.list[this.tabs.active], 'finished', true);
  456 + }
422 457  
423 458 /* 设置列表数据 结束 */
424   -
  459 +
425 460 } else if (res.code == 400) {
426   -
  461 +
427 462 // 获取商品出错
428 463 Toast(res.message);
429 464 } else {
430   -
  465 +
431 466 // 获取商品出错
432 467 Toast("获取商品出错");
433 468 }
... ... @@ -444,7 +479,7 @@
444 479  
445 480 // 判断是活动未开始状态，弹窗提示活动未开始
446 481 if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '0') {
447   -
  482 +
448 483 // 通用弹窗提示
449 484 this.showModal();
450 485 return false;
... ... @@ -539,7 +574,7 @@
539 574 * 后退
540 575 */
541 576 back() {
542   -
  577 +
543 578 // 判断是否有处理函数
544 579 if (typeof this.$parent.back === 'function') {
545 580  
... ... @@ -571,7 +606,7 @@
571 606 }
572 607 },
573 608 mounted() {
574   -
  609 +
575 610 // 如果是App外，设置唤起App和微信内分享参数
576 611 if (!this.isCNLive.value) {
577 612  
... ... @@ -583,7 +618,7 @@
583 618 url: ""
584 619 });
585 620 }
586   -
  621 +
587 622 // 分享详情页
588 623 if (typeof this.$parent.getShareData === "function") {
589 624 this.$parent.getShareData({
... ... @@ -611,4 +646,4 @@
611 646 <!-- Add "scoped" attribute to limit CSS to this component only -->
612 647 <style rel="stylesheet/less" lang='less' scoped>
613 648 @import "discountList";
614   -</style>
615 649 \ No newline at end of file
  650 +</style>
... ...