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,39 +110,53 @@
110 margin-top: 40px; 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 .bottom-pl { 162 .bottom-pl {
@@ -182,4 +196,4 @@ @@ -182,4 +196,4 @@
182 } 196 }
183 } 197 }
184 } 198 }
185 -}  
186 \ No newline at end of file 199 \ No newline at end of file
  200 +}
src/pages/discountList/discountList.vue
  View file @ec141d0
@@ -52,21 +52,25 @@ @@ -52,21 +52,25 @@
52 </count-down-com> 52 </count-down-com>
53 </div> 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 <div class="bottom-pl"></div> 74 <div class="bottom-pl"></div>
71 75
72 <!-- 活动规则提示 --> 76 <!-- 活动规则提示 -->
@@ -88,13 +92,17 @@ @@ -88,13 +92,17 @@
88 <script> 92 <script>
89 93
90 // 引入组件 94 // 引入组件
  95 + import Vue from "vue";
91 import { Toast, Indicator } from "mint-ui"; 96 import { Toast, Indicator } from "mint-ui";
  97 + import { List } from "vant";
92 import callAppBox from "@/components/callAppBox/callAppBox"; 98 import callAppBox from "@/components/callAppBox/callAppBox";
93 import backBox from "@/components/backBox/backBox"; 99 import backBox from "@/components/backBox/backBox";
94 import countDownCom from "@/components/countDownCom/countDownCom"; 100 import countDownCom from "@/components/countDownCom/countDownCom";
95 import goodsItem8 from "@/components/goodsItem_8/goodsItem_8"; 101 import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
96 import gotoTop from "@/components/gotoTop/gotoTop"; 102 import gotoTop from "@/components/gotoTop/gotoTop";
97 103
  104 + Vue.use(List);
  105 +
98 export default { 106 export default {
99 name: 'discountListPage', 107 name: 'discountListPage',
100 data () { 108 data () {
@@ -178,15 +186,49 @@ @@ -178,15 +186,49 @@
178 methods: { 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 initDiscount() { 225 initDiscount() {
184 - 226 +
185 // 结束倒计时 227 // 结束倒计时
186 if (this.tabs.list[0].timeoutInterval) { 228 if (this.tabs.list[0].timeoutInterval) {
187 clearInterval(this.tabs.list[0].timeoutInterval); 229 clearInterval(this.tabs.list[0].timeoutInterval);
188 } 230 }
189 - 231 +
190 // 初始化数据 232 // 初始化数据
191 this.$set(this.tabs.list[0], 'img', null); // 头图 233 this.$set(this.tabs.list[0], 'img', null); // 头图
192 this.$set(this.tabs.list[0], 'discountType', null); // 折扣专区状态，0：未开始；1：进行中；2：已结束 234 this.$set(this.tabs.list[0], 'discountType', null); // 折扣专区状态，0：未开始；1：进行中；2：已结束
@@ -199,7 +241,16 @@ @@ -199,7 +241,16 @@
199 * 请求接口封装 241 * 请求接口封装
200 * @param {Number} index [tabs索引] 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 // 设置tabs活动项 255 // 设置tabs活动项
205 if (index) { 256 if (index) {
@@ -262,7 +313,7 @@ @@ -262,7 +313,7 @@
262 313
263 // 设置背景色 314 // 设置背景色
264 this.$set(this.tabs.list[0], 'color', datas.discount_color); 315 this.$set(this.tabs.list[0], 'color', datas.discount_color);
265 - 316 +
266 // 头图 317 // 头图
267 this.$set(this.tabs.list[0], 'img', datas.discount_img); 318 this.$set(this.tabs.list[0], 'img', datas.discount_img);
268 319
@@ -299,16 +350,24 @@ @@ -299,16 +350,24 @@
299 // 合并数组 350 // 合并数组
300 this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]); 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 for (let i = 1; i < this.tabs.list.length; i++) { 359 for (let i = 1; i < this.tabs.list.length; i++) {
304 this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color); 360 this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
305 this.$set(this.tabs.list[i], 'page', 1); 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 this.$set(this.tabs, 'first', false); 369 this.$set(this.tabs, 'first', false);
311 - 370 +
312 /* 获取折扣专区列表数据 结束 */ 371 /* 获取折扣专区列表数据 结束 */
313 372
314 } else if (res.code == 400) { 373 } else if (res.code == 400) {
@@ -330,13 +389,13 @@ @@ -330,13 +389,13 @@
330 389
331 // 判断必要参数 390 // 判断必要参数
332 if (this.tabs.list[this.tabs.active].shop_id) { 391 if (this.tabs.list[this.tabs.active].shop_id) {
333 - 392 +
334 // 设置开始加载 393 // 设置开始加载
335 this.$set(this.tabs.list[this.tabs.active], "loading", true); 394 this.$set(this.tabs.list[this.tabs.active], "loading", true);
336 395
337 // 加载中提示 396 // 加载中提示
338 Indicator.open('加载中...'); 397 Indicator.open('加载中...');
339 - 398 +
340 // 请求接口 399 // 请求接口
341 this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", { 400 this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
342 shop_id: this.tabs.list[this.tabs.active].shop_id, 401 shop_id: this.tabs.list[this.tabs.active].shop_id,
@@ -347,7 +406,7 @@ @@ -347,7 +406,7 @@
347 }); 406 });
348 } 407 }
349 }, 408 },
350 - 409 +
351 /** 410 /**
352 * 获取店铺首页推荐商品列表回调 411 * 获取店铺首页推荐商品列表回调
353 * param {res} [服务器返回数据] 412 * param {res} [服务器返回数据]
@@ -355,79 +414,55 @@ @@ -355,79 +414,55 @@
355 */ 414 */
356 getShopRecommendGoodsCallback(res, ext) { 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 if (res.code == 200) { 421 if (res.code == 200) {
369 - 422 +
370 // 解构数据 423 // 解构数据
371 let {data: datas} = res; 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 } else if (res.code == 400) { 460 } else if (res.code == 400) {
426 - 461 +
427 // 获取商品出错 462 // 获取商品出错
428 Toast(res.message); 463 Toast(res.message);
429 } else { 464 } else {
430 - 465 +
431 // 获取商品出错 466 // 获取商品出错
432 Toast("获取商品出错"); 467 Toast("获取商品出错");
433 } 468 }
@@ -444,7 +479,7 @@ @@ -444,7 +479,7 @@
444 479
445 // 判断是活动未开始状态，弹窗提示活动未开始 480 // 判断是活动未开始状态，弹窗提示活动未开始
446 if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '0') { 481 if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '0') {
447 - 482 +
448 // 通用弹窗提示 483 // 通用弹窗提示
449 this.showModal(); 484 this.showModal();
450 return false; 485 return false;
@@ -539,7 +574,7 @@ @@ -539,7 +574,7 @@
539 * 后退 574 * 后退
540 */ 575 */
541 back() { 576 back() {
542 - 577 +
543 // 判断是否有处理函数 578 // 判断是否有处理函数
544 if (typeof this.$parent.back === 'function') { 579 if (typeof this.$parent.back === 'function') {
545 580
@@ -571,7 +606,7 @@ @@ -571,7 +606,7 @@
571 } 606 }
572 }, 607 },
573 mounted() { 608 mounted() {
574 - 609 +
575 // 如果是App外，设置唤起App和微信内分享参数 610 // 如果是App外，设置唤起App和微信内分享参数
576 if (!this.isCNLive.value) { 611 if (!this.isCNLive.value) {
577 612
@@ -583,7 +618,7 @@ @@ -583,7 +618,7 @@
583 url: "" 618 url: ""
584 }); 619 });
585 } 620 }
586 - 621 +
587 // 分享详情页 622 // 分享详情页
588 if (typeof this.$parent.getShareData === "function") { 623 if (typeof this.$parent.getShareData === "function") {
589 this.$parent.getShareData({ 624 this.$parent.getShareData({
@@ -611,4 +646,4 @@ @@ -611,4 +646,4 @@
611 <!-- Add "scoped" attribute to limit CSS to this component only --> 646 <!-- Add "scoped" attribute to limit CSS to this component only -->
612 <style rel="stylesheet/less" lang='less' scoped> 647 <style rel="stylesheet/less" lang='less' scoped>
613 @import "discountList"; 648 @import "discountList";
614 -</style>  
615 \ No newline at end of file 649 \ No newline at end of file
  650 +</style>