w-front-end / select_good · Commits

Commit 0ebe6fe52972d8368fdb86a9e2dda6ddc40c8319

Authored by 王强
1 parent a9d5821b

折扣专区添加tab进行中~

Inline Side-by-side
Showing 2 changed files with 287 additions and 38 deletions
src/pages/discountList/discountList.less
  View file @0ebe6fe
@@ -14,14 +14,61 @@ @@ -14,14 +14,61 @@
14 z-index: 100; 14 z-index: 100;
15 background-color: #ffffff; 15 background-color: #ffffff;
16 } 16 }
  17 + .tabs-box {
  18 + position: fixed;
  19 + top: 0;
  20 + z-index: 100;
  21 + background-color: #FFFFFF;
  22 + width: 100%;
  23 + height: auto;
  24 + border: 1px solid #E5E5E5;
  25 + &.is-open-app {
  26 + top: 122px;
  27 + }
  28 + &.is-cnlive {
  29 + top: 93px;
  30 + }
  31 + &.is-hide {
  32 + top: 0;
  33 + }
  34 + > .box {
  35 + display: flex;
  36 + justify-content: flex-start;
  37 + align-items: center;
  38 + margin: 0 auto;
  39 + width: 90%;
  40 + .tab {
  41 + margin-right: 50px;
  42 + padding: 23px 0 12px 0;
  43 + color: #B4B4B4;
  44 + &:last-child {
  45 + margin-right: 0;
  46 + }
  47 + .title {
  48 + font-size: 32px;
  49 + font-weight: 400;
  50 + }
  51 + .line {
  52 + background-color: transparent;
  53 + margin: 6px auto 0 auto;
  54 + width: 50px;
  55 + height: 4px;
  56 + border-radius: 3px;
  57 + }
  58 + }
  59 + }
  60 + }
17 .pl { 61 .pl {
18 background-color: transparent; 62 background-color: transparent;
19 width: 100%; 63 width: 100%;
20 &.is-open-app { 64 &.is-open-app {
21 - height: 122px; 65 + height: 212px;
22 } 66 }
23 &.is-cnlive { 67 &.is-cnlive {
24 - height: 93px; 68 + height: 183px;
  69 + }
  70 + &.is-hide {
  71 + height: 90px;
25 } 72 }
26 } 73 }
27 .main-box { 74 .main-box {
@@ -59,10 +106,13 @@ @@ -59,10 +106,13 @@
59 font-weight: 400; 106 font-weight: 400;
60 } 107 }
61 } 108 }
  109 + & + .section {
  110 + margin-top: 40px;
  111 + }
62 } 112 }
63 .section { 113 .section {
64 background-color: #ffffff; 114 background-color: #ffffff;
65 - margin: 40px auto; 115 + margin: 0 auto 40px auto;
66 width: 690px; 116 width: 690px;
67 height: auto; 117 height: auto;
68 border-radius: 24px; 118 border-radius: 24px;
src/pages/discountList/discountList.vue
  View file @0ebe6fe
1 <template> 1 <template>
2 - <div class="discount-list-page" :style="{'backgroundColor': discountColor}"> 2 + <div class="discount-list-page" :style="{'backgroundColor': tabs.list[tabs.active].color}">
3 3
4 <!-- H5唤起App组件 --> 4 <!-- H5唤起App组件 -->
5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value" 5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
@@ -11,47 +11,57 @@ @@ -11,47 +11,57 @@
11 :backs="backs"> 11 :backs="backs">
12 </back-box> 12 </back-box>
13 13
  14 + <!-- tab导航 -->
  15 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'">
  16 + <div class="box">
  17 + <div class="tab" :style="{'color': (index == tabs.active) ? tab.titleColor : ''}" v-for="(tab, index) in tabs.list" :key="index" @click="request(index)">
  18 + <div class="title">{{tab.title}}</div>
  19 + <div class="line" :style="{'backgroundColor': (index == tabs.active) ? tab.titleColor : ''}"></div>
  20 + </div>
  21 + </div>
  22 + </div>
  23 +
14 <!-- pl --> 24 <!-- pl -->
15 - <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'"></div> 25 + <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
16 26
17 <!-- 主区域 --> 27 <!-- 主区域 -->
18 <div class="main-box"> 28 <div class="main-box">
19 29
20 <!-- 头图 --> 30 <!-- 头图 -->
21 - <div class="header-box" v-if="discountImg">  
22 - <img :src="discountImg + SIGN.BIG" class="header-img" /> 31 + <div class="header-box" v-if="tabs.list[tabs.active].img">
  32 + <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
23 </div> 33 </div>
24 34
25 <!-- 倒计时 --> 35 <!-- 倒计时 -->
26 <div class="count-down-box"> 36 <div class="count-down-box">
27 - <div class="state" v-if="discountType == '0'"> 37 + <div class="state" v-if="tabs.list[tabs.active].discountType == '0'">
28 <div class="text">距离活动开始仅剩</div> 38 <div class="text">距离活动开始仅剩</div>
29 </div> 39 </div>
30 - <div class="state" v-if="discountType == '1'"> 40 + <div class="state" v-if="tabs.list[tabs.active].discountType == '1'">
31 <div class="text">距离活动结束仅剩</div> 41 <div class="text">距离活动结束仅剩</div>
32 </div> 42 </div>
33 - <div class="state" v-if="discountType === '2'"> 43 + <div class="state" v-if="tabs.list[tabs.active].discountType === '2'">
34 <img src="/static/img/icon_tips_book.png" class="icon-tips-img" /> 44 <img src="/static/img/icon_tips_book.png" class="icon-tips-img" />
35 <div class="text">本次活动已结束，敬请期待下次折扣活动～</div> 45 <div class="text">本次活动已结束，敬请期待下次折扣活动～</div>
36 </div> 46 </div>
37 47
38 <!-- 倒计时组件 --> 48 <!-- 倒计时组件 -->
39 - <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && (discountType == '0' || discountType == '1')"  
40 - :time="parseInt(discountTime) * 1000" 49 + <count-down-com slot="extend" v-if="tabs.list[tabs.active].discountTime && tabs.list[tabs.active].discountTime > 0 && (tabs.list[tabs.active].discountType == '0' || tabs.list[tabs.active].discountType == '1')"
  50 + :time="parseInt(tabs.list[tabs.active].discountTime) * 1000"
41 sty="5"> 51 sty="5">
42 </count-down-com> 52 </count-down-com>
43 </div> 53 </div>
44 54
45 <!-- 商品列表 --> 55 <!-- 商品列表 -->
46 - <div class="section goods-list" v-if="discountLists && discountLists.length"> 56 + <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
47 57
48 <!-- 商品列表 --> 58 <!-- 商品列表 -->
49 - <goods-item-8 v-for="(item, index) in discountLists" :key="index" @jump="toDetail" @primary="primary" 59 + <goods-item-8 v-for="(item, index) in lists[tabs.active]" :key="index" @jump="toDetail" @primary="primary"
50 :item="item" 60 :item="item"
51 sty="1"> 61 sty="1">
52 62
53 <!-- 折扣角标 --> 63 <!-- 折扣角标 -->
54 - <div class="discount-flag" slot="flag" v-if="parseFloat(item.price) < parseFloat(item.prices)"> 64 + <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (parseFloat(item.price) < parseFloat(item.prices))">
55 {{item.tag || getDiscount(item.price, item.prices)}} 65 {{item.tag || getDiscount(item.price, item.prices)}}
56 </div> 66 </div>
57 </goods-item-8> 67 </goods-item-8>
@@ -91,12 +101,28 @@ @@ -91,12 +101,28 @@
91 return { 101 return {
92 title: "", // 标题 102 title: "", // 标题
93 backs: null, // 后退按钮组 103 backs: null, // 后退按钮组
94 - discountColor: null, // 背景颜色  
95 - discountImg: null, // 头图  
96 - discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束  
97 - discountTimeout: 0, // 倒计时超时时间计数  
98 - discountTime: null, // 倒计时时间  
99 - discountLists: null // 折扣专区数据 104 + CALL_STATUS: {
  105 + INIT: "init", // 初始化页面
  106 + LOAD_MORE: "loadMore" // 加载更多
  107 + },
  108 + tabs: { // tabs设置
  109 + first: true, // 第一次访问接口
  110 + active: 0,
  111 + list: [
  112 + {
  113 + title: '平台补贴会场',
  114 + color: null, // 背景颜色
  115 + titleColor: '#F65600', // 标题颜色
  116 + type: '0',
  117 + img: null, // 头图
  118 + discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束
  119 + discountTimeout: 0, // 倒计时超时时间计数
  120 + discountTime: null, // 倒计时时间
  121 + timeoutInterval: null // 倒计时对象
  122 + }
  123 + ]
  124 + },
  125 + lists: [], // 列表数据
100 } 126 }
101 }, 127 },
102 computed: { 128 computed: {
@@ -146,12 +172,58 @@ @@ -146,12 +172,58 @@
146 }); 172 });
147 } 173 }
148 174
149 - // 折扣专区列表  
150 - this.discountGoods(); 175 + // 请求接口封装
  176 + this.request();
151 }, 177 },
152 methods: { 178 methods: {
153 179
154 /** 180 /**
  181 + * 初始化数据
  182 + */
  183 + initDiscount() {
  184 +
  185 + // 结束倒计时
  186 + if (this.tabs.list[0].timeoutInterval) {
  187 + clearInterval(this.tabs.list[0].timeoutInterval);
  188 + }
  189 +
  190 + // 初始化数据
  191 + this.$set(this.tabs.list[0], 'img', null); // 头图
  192 + this.$set(this.tabs.list[0], 'discountType', null); // 折扣专区状态，0：未开始；1：进行中；2：已结束
  193 + this.$set(this.tabs.list[0], 'discountTimeout', 0); // 倒计时超时时间计数
  194 + this.$set(this.tabs.list[0], 'discountTime', null); // 倒计时时间
  195 + this.$set(this.tabs.list[0], 'discountLists', null); // 折扣专区数据
  196 + },
  197 +
  198 + /**
  199 + * 请求接口封装
  200 + * @param {Number} index [tabs索引]
  201 + */
  202 + request(index) {
  203 +
  204 + // 设置tabs活动项
  205 + if (index) {
  206 + this.$set(this.tabs, 'active', index);
  207 + } else {
  208 + this.$set(this.tabs, 'active', 0);
  209 + }
  210 +
  211 + // 初始化数据
  212 + this.initDiscount();
  213 +
  214 + // 根据参数判断请求哪个接口，获取哪个列表
  215 + if (this.tabs.list[this.tabs.active].type == '1') {
  216 +
  217 + // 获取店铺首页推荐商品列表
  218 + this.getShopRecommendGoods(this.CALL_STATUS.INIT);
  219 + } else {
  220 +
  221 + // 折扣专区列表
  222 + this.discountGoods();
  223 + }
  224 + },
  225 +
  226 + /**
155 * 折扣专区列表 227 * 折扣专区列表
156 */ 228 */
157 discountGoods() { 229 discountGoods() {
@@ -160,7 +232,7 @@ @@ -160,7 +232,7 @@
160 Indicator.open("加载中..."); 232 Indicator.open("加载中...");
161 233
162 // 获取证书请求接口 234 // 获取证书请求接口
163 - this.http("/Api/" + this.getApiVersion().good + "/discountGoods", { 235 + this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods", {
164 uid: this.getStore("uid") || 0 236 uid: this.getStore("uid") || 0
165 }, this.discountGoodsCallback, { 237 }, this.discountGoodsCallback, {
166 method: "POST" 238 method: "POST"
@@ -186,40 +258,56 @@ @@ -186,40 +258,56 @@
186 /* 获取折扣专区列表数据 开始 */ 258 /* 获取折扣专区列表数据 开始 */
187 259
188 // 设置折扣商品状态 260 // 设置折扣商品状态
189 - this.$set(this, 'discountType', datas.discount_type); 261 + this.$set(this.tabs.list[0], 'discountType', datas.discount_type);
190 262
191 // 设置背景色 263 // 设置背景色
192 - this.$set(this, 'discountColor', datas.discount_color); 264 + this.$set(this.tabs.list[0], 'color', datas.discount_color);
193 265
194 // 头图 266 // 头图
195 - this.$set(this, 'discountImg', datas.discount_img); 267 + this.$set(this.tabs.list[0], 'img', datas.discount_img);
196 268
197 // 设置折扣专区数据 269 // 设置折扣专区数据
198 if (datas.discount_time > 0 && datas.list && datas.list.length) { 270 if (datas.discount_time > 0 && datas.list && datas.list.length) {
199 271
200 // 设置倒计时时间 272 // 设置倒计时时间
201 - this.$set(this, 'discountTime', parseInt(datas.discount_time) + 10); 273 + this.$set(this.tabs.list[0], 'discountTime', parseInt(datas.discount_time) + 10);
202 274
203 // 设置倒计时超时轮训 275 // 设置倒计时超时轮训
204 - let timeoutInterval = setInterval(() => { 276 + this.$set(this.tabs.list[0], 'timeoutInterval', setInterval(() => {
205 277
206 // 倒计时超时时间计数 278 // 倒计时超时时间计数
207 - this.discountTimeout++; 279 + this.tabs.list[0].discountTimeout++;
208 280
209 // 判断是否超时 281 // 判断是否超时
210 - if (this.discountTimeout >= this.discountTime) { 282 + if (this.tabs.list[0].discountTimeout >= this.tabs.list[0].discountTime) {
211 283
212 // 停止倒计时 284 // 停止倒计时
213 - clearInterval(timeoutInterval); 285 + clearInterval(this.tabs.list[0].timeoutInterval);
214 286
215 // 刷新页面 287 // 刷新页面
216 window.location.reload(); 288 window.location.reload();
217 } 289 }
218 - }, 1000); 290 + }, 1000));
219 } 291 }
220 292
221 // 设置折扣专区列表数据 293 // 设置折扣专区列表数据
222 - this.$set(this, 'discountLists', datas.list); 294 + this.$set(this.lists, 0, datas.list);
  295 +
  296 + // 设置其它tab数据
  297 + if (this.tabs.first === true && datas.nav && datas.nav.length) {
  298 +
  299 + // 合并数组
  300 + this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]);
  301 +
  302 + // 单独设置标题颜色/起始页码
  303 + for (let i = 1; i < this.tabs.list.length; i++) {
  304 + this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
  305 + this.$set(this.tabs.list[i], 'page', 1);
  306 + }
  307 + }
  308 +
  309 + // 设置非第一次请求接口
  310 + this.$set(this.tabs, 'first', false);
223 311
224 /* 获取折扣专区列表数据 结束 */ 312 /* 获取折扣专区列表数据 结束 */
225 313
@@ -235,6 +323,117 @@ @@ -235,6 +323,117 @@
235 }, 323 },
236 324
237 /** 325 /**
  326 + * 获取店铺首页推荐商品列表
  327 + * @param {object} CALL_STATUS [何处触发请求]
  328 + */
  329 + getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
  330 +
  331 + // 判断必要参数
  332 + if (this.tabs.list[this.tabs.active].shop_id) {
  333 +
  334 + // 设置开始加载
  335 + this.$set(this.tabs.list[this.tabs.active], "loading", true);
  336 +
  337 + // 加载中提示
  338 + Indicator.open('加载中...');
  339 +
  340 + // 请求接口
  341 + this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
  342 + shop_id: this.tabs.list[this.tabs.active].shop_id,
  343 + page: this.tabs.list[this.tabs.active].page
  344 + }, this.getShopRecommendGoodsCallback, {
  345 + method: "POST",
  346 + CALL_STATUS
  347 + });
  348 + }
  349 + },
  350 +
  351 + /**
  352 + * 获取店铺首页推荐商品列表回调
  353 + * param {res} [服务器返回数据]
  354 + * param {ext} [扩展参数]
  355 + */
  356 + getShopRecommendGoodsCallback(res, ext) {
  357 +
  358 + // 隐藏加载中提示
  359 + switch (ext.CALL_STATUS) {
  360 + case this.CALL_STATUS.LOAD_MORE:
  361 +
  362 + // 加载完成
  363 + Indicator.close();
  364 + break;
  365 + }
  366 +
  367 + // 返回处理
  368 + if (res.code == 200) {
  369 +
  370 + // 解构数据
  371 + 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 + }
  422 +
  423 + /* 设置列表数据 结束 */
  424 +
  425 + } else if (res.code == 400) {
  426 +
  427 + // 获取商品出错
  428 + Toast(res.message);
  429 + } else {
  430 +
  431 + // 获取商品出错
  432 + Toast("获取商品出错");
  433 + }
  434 + },
  435 +
  436 + /**
238 * 跳转商品详情 437 * 跳转商品详情
239 * @param {Object} item [数据对象] 438 * @param {Object} item [数据对象]
240 */ 439 */
@@ -244,7 +443,7 @@ @@ -244,7 +443,7 @@
244 if (this.isCNLive.value) { 443 if (this.isCNLive.value) {
245 444
246 // 判断是活动未开始状态，弹窗提示活动未开始 445 // 判断是活动未开始状态，弹窗提示活动未开始
247 - if (this.discountType == '0') { 446 + if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '0') {
248 447
249 // 通用弹窗提示 448 // 通用弹窗提示
250 this.showModal(); 449 this.showModal();
@@ -252,7 +451,7 @@ @@ -252,7 +451,7 @@
252 } 451 }
253 452
254 // 已抢光，不跳转 453 // 已抢光，不跳转
255 - if (item.num == '2' || (item.num == '1' && item.stock == '0')) { 454 + if (this.tabs.list[this.tabs.active].type == '0' && (item.num == '2' || (item.num == '1' && item.stock == '0'))) {
256 return false; 455 return false;
257 } 456 }
258 457
@@ -401,8 +600,8 @@ @@ -401,8 +600,8 @@
401 // 页面显示出来了 600 // 页面显示出来了
402 if (document.hidden === false && this.$route.name == 'discountList') { 601 if (document.hidden === false && this.$route.name == 'discountList') {
403 602
404 - // 折扣专区列表  
405 - this.discountGoods(); 603 + // 请求接口封装
  604 + this.request(this.tabs.active);
406 } 605 }
407 }); 606 });
408 } 607 }