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 z-index: 100;
15 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 61 .pl {
18 62 background-color: transparent;
19 63 width: 100%;
20 64 &.is-open-app {
21   - height: 122px;
  65 + height: 212px;
22 66 }
23 67 &.is-cnlive {
24   - height: 93px;
  68 + height: 183px;
  69 + }
  70 + &.is-hide {
  71 + height: 90px;
25 72 }
26 73 }
27 74 .main-box {
... ... @@ -59,10 +106,13 @@
59 106 font-weight: 400;
60 107 }
61 108 }
  109 + & + .section {
  110 + margin-top: 40px;
  111 + }
62 112 }
63 113 .section {
64 114 background-color: #ffffff;
65   - margin: 40px auto;
  115 + margin: 0 auto 40px auto;
66 116 width: 690px;
67 117 height: auto;
68 118 border-radius: 24px;
... ...
src/pages/discountList/discountList.vue
  View file @0ebe6fe
1 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 4 <!-- H5唤起App组件 -->
5 5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
... ... @@ -11,47 +11,57 @@
11 11 :backs="backs">
12 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 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 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 33 </div>
24 34  
25 35 <!-- 倒计时 -->
26 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 38 <div class="text">距离活动开始仅剩</div>
29 39 </div>
30   - <div class="state" v-if="discountType == '1'">
  40 + <div class="state" v-if="tabs.list[tabs.active].discountType == '1'">
31 41 <div class="text">距离活动结束仅剩</div>
32 42 </div>
33   - <div class="state" v-if="discountType === '2'">
  43 + <div class="state" v-if="tabs.list[tabs.active].discountType === '2'">
34 44 <img src="/static/img/icon_tips_book.png" class="icon-tips-img" />
35 45 <div class="text">本次活动已结束，敬请期待下次折扣活动～</div>
36 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 51 sty="5">
42 52 </count-down-com>
43 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 60 :item="item"
51 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 65 {{item.tag || getDiscount(item.price, item.prices)}}
56 66 </div>
57 67 </goods-item-8>
... ... @@ -91,12 +101,28 @@
91 101 return {
92 102 title: "", // 标题
93 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 128 computed: {
... ... @@ -146,12 +172,58 @@
146 172 });
147 173 }
148 174  
149   - // 折扣专区列表
150   - this.discountGoods();
  175 + // 请求接口封装
  176 + this.request();
151 177 },
152 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 229 discountGoods() {
... ... @@ -160,7 +232,7 @@
160 232 Indicator.open("加载中...");
161 233  
162 234 // 获取证书请求接口
163   - this.http("/Api/" + this.getApiVersion().good + "/discountGoods", {
  235 + this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods", {
164 236 uid: this.getStore("uid") || 0
165 237 }, this.discountGoodsCallback, {
166 238 method: "POST"
... ... @@ -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 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 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 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 438 * @param {Object} item [数据对象]
240 439 */
... ... @@ -244,7 +443,7 @@
244 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 449 this.showModal();
... ... @@ -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 455 return false;
257 456 }
258 457  
... ... @@ -401,8 +600,8 @@
401 600 // 页面显示出来了
402 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 }
... ...