w-front-end / select_good · Commits

Commit 4c5e0044c56b3736e275f3695512194f3561e519

Authored by 王强
1 parent a5bfdb55

折扣专区添加未开始、进行中、已结束状态判断及处理~

Inline Side-by-side
Showing 7 changed files with 120 additions and 49 deletions
src/pages/common/common.vue
  View file @4c5e004
... ... @@ -29,8 +29,11 @@
29 29  
30 30 // 读取文件属性
31 31 import Exif from 'exif-js';
  32 +
  33 + // 公用组件
32 34 import maskLayer from "@/components/maskLayer/maskLayer";
33 35 import showModal from "@/components/showModal/showModal";
  36 +
34 37 export default {
35 38 name: "common",
36 39 data () {
... ...
src/pages/discountList/discountList.less
  View file @4c5e004
... ... @@ -41,10 +41,23 @@
41 41 margin: 0 auto;
42 42 width: 630px;
43 43 height: auto;
44   - .text {
45   - color: #633531;
46   - font-size: 24px;
47   - font-weight: 400;
  44 + .state {
  45 + display: flex;
  46 + justify-content: flex-start;
  47 + align-items: center;
  48 + .icon-tips-img {
  49 + display: block;
  50 + width: 22px;
  51 + height: 22px;
  52 + & + .text {
  53 + margin-left: 13px;
  54 + }
  55 + }
  56 + .text {
  57 + color: #633531;
  58 + font-size: 24px;
  59 + font-weight: 400;
  60 + }
48 61 }
49 62 }
50 63 .section {
... ...
src/pages/discountList/discountList.vue
  View file @4c5e004
1 1 <template>
2   - <div class="discount-list-page" :style="{'backgroundColor': datas && datas.discount_color ? datas.discount_color : ''}">
  2 + <div class="discount-list-page" :style="{'backgroundColor': discountColor}">
3 3  
4 4 <!-- H5唤起App组件 -->
5 5 <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
... ... @@ -18,39 +18,35 @@
18 18 <div class="main-box">
19 19  
20 20 <!-- 头图 -->
21   - <div class="header-box" v-if="datas && datas.discount_img">
22   - <img :src="datas.discount_img + SIGN.BIG" class="header-img" />
  21 + <div class="header-box" v-if="discountImg">
  22 + <img :src="discountImg + SIGN.BIG" class="header-img" />
23 23 </div>
24 24  
25 25 <!-- 倒计时 -->
26   - <div class="count-down-box" v-if="datas && datas.discount_time && datas.discount_time > 0">
27   - <div class="text">
28   - 距离活动结束仅剩
  26 + <div class="count-down-box">
  27 + <div class="state" v-if="discountType == '0'">
  28 + <div class="text">距离活动开始仅剩</div>
29 29 </div>
30   -
31   - <!-- 倒计时组件 -->
32   - <count-down-com slot="extend"
33   - :time="parseInt(datas.discount_time) * 1000"
34   - sty="5">
35   - </count-down-com>
36   - </div>
37   - <div class="count-down-box" v-if="datas && (!datas.discount_time || datas.discount_time <= 0)">
38   - <div class="text">
39   - 活动已结束
  30 + <div class="state" v-if="discountType == '1'">
  31 + <div class="text">距离活动结束仅剩</div>
  32 + </div>
  33 + <div class="state" v-if="discountType === '2'">
  34 + <img src="/static/img/icon_tips_book.png" class="icon-tips-img" />
  35 + <div class="text">本次活动已结束，敬请期待下次折扣活动～</div>
40 36 </div>
41 37  
42 38 <!-- 倒计时组件 -->
43   - <count-down-com slot="extend"
44   - :time="-1"
  39 + <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && (discountType == '0' || discountType == '1')"
  40 + :time="parseInt(discountTime) * 1000"
45 41 sty="5">
46 42 </count-down-com>
47 43 </div>
48 44  
49 45 <!-- 商品列表 -->
50   - <div class="section goods-list" v-if="goodsLists && goodsLists.length">
  46 + <div class="section goods-list" v-if="discountLists && discountLists.length">
51 47  
52 48 <!-- 商品列表 -->
53   - <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary"
  49 + <goods-item-8 v-for="(item, index) in discountLists" :key="index" @jump="toDetail" @primary="primary"
54 50 :item="item"
55 51 sty="1">
56 52  
... ... @@ -93,10 +89,14 @@
93 89 name: 'discountListPage',
94 90 data () {
95 91 return {
96   - title: "", // 标题
97   - backs: null, // 后退按钮组
98   - datas: null, // 接口数据
99   - goodsLists: null // 商品列表
  92 + title: "", // 标题
  93 + backs: null, // 后退按钮组
  94 + discountColor: null, // 背景颜色
  95 + discountImg: null, // 头图
  96 + discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束
  97 + discountTimeout: 0, // 倒计时超时时间计数
  98 + discountTime: null, // 倒计时时间
  99 + discountLists: null // 折扣专区数据
100 100 }
101 101 },
102 102 computed: {
... ... @@ -185,20 +185,43 @@
185 185  
186 186 /* 获取折扣专区列表数据 开始 */
187 187  
188   - // 判断接口是否有数据
189   - if (datas) {
  188 + // 设置折扣商品状态
  189 + this.$set(this, 'discountType', datas.discount_type);
190 190  
191   - // 设置接口数据
192   - this.$set(this, 'datas', datas);
  191 + // 设置背景色
  192 + this.$set(this, 'discountColor', datas.discount_color);
  193 +
  194 + // 头图
  195 + this.$set(this, 'discountImg', datas.discount_img);
193 196  
194   - // 判断是否有列表数据
195   - if (datas.list && datas.list.length) {
  197 + // 设置折扣专区数据
  198 + if (datas.discount_time > 0 && datas.list && datas.list.length) {
196 199  
197   - // 设置商品列表数据
198   - this.$set(this, 'goodsLists', datas.list);
199   - }
  200 + // 设置倒计时时间
  201 + this.$set(this, 'discountTime', datas.discount_time);
  202 +
  203 + // 设置倒计时超时轮训
  204 + let timeoutInterval = setInterval(() => {
  205 +
  206 + // 判断是否超时
  207 + if (this.discountTimeout > this.discountTime) {
  208 +
  209 + // 停止倒计时
  210 + clearInterval(timeoutInterval);
  211 +
  212 + // 刷新页面
  213 + window.location.reload();
  214 + } else {
  215 +
  216 + // 倒计时超时时间计数
  217 + this.discountTimeout++;
  218 + }
  219 + }, 1000);
200 220 }
201 221  
  222 + // 设置折扣专区列表数据
  223 + this.$set(this, 'discountLists', datas.list);
  224 +
202 225 /* 获取折扣专区列表数据 结束 */
203 226  
204 227 } else if (res.code == 400) {
... ... @@ -221,6 +244,14 @@
221 244 // 判断App内
222 245 if (this.isCNLive.value) {
223 246  
  247 + // 判断是活动未开始状态，弹窗提示活动未开始
  248 + if (this.discountType == '0') {
  249 +
  250 + // 通用弹窗提示
  251 + this.showModal();
  252 + return false;
  253 + }
  254 +
224 255 // 已抢光，不跳转
225 256 if (item.num == '2' || (item.num == '1' && item.stock == '0')) {
226 257 return false;
... ... @@ -256,6 +287,24 @@
256 287 this.toDetail(item);
257 288 },
258 289  
  290 + showModal() {
  291 +
  292 + // 判断通用弹窗是否存在
  293 + if (typeof this.$parent.showModal === 'function') {
  294 +
  295 + // 设置通用弹窗参数
  296 + let options = {
  297 + title: "提示",
  298 + message: "当前活动未开始，请耐心等待",
  299 + confirmButtonText: "我知道了",
  300 + closeOnClickModal: true
  301 + };
  302 +
  303 + // 调用函数，显示通用弹窗
  304 + this.$parent.showModal(options);
  305 + }
  306 + },
  307 +
259 308 /**
260 309 * 唤起App封装
261 310 */
... ...
src/pages/newDaren/newDaren.vue
  View file @4c5e004
... ... @@ -308,11 +308,11 @@
308 308 }else if (res.statusCode === 200 && res.data.code == 400) {
309 309  
310 310 // 关注失败
311   - this.showToast(res.data.message);
  311 + Toast(res.data.message);
312 312 } else {
313 313  
314 314 // 关注失败
315   - this.showToast("关注失败");
  315 + Toast("关注失败");
316 316 }
317 317 },
318 318 /**
... ...
src/pages/optimization2/optimization2.vue
  View file @4c5e004
... ... @@ -18,7 +18,7 @@
18 18 <div class="main-box">
19 19  
20 20 <!-- 折扣专区 -->
21   - <div class="section shop-list" v-if="discountTime && discountTime > 0">
  21 + <div class="section shop-list" v-if="discountLists && discountLists.length">
22 22  
23 23 <!-- 标题 -->
24 24 <text-bg-title-com @more="toDiscountList"
... ... @@ -28,8 +28,8 @@
28 28 }">
29 29  
30 30 <!-- 倒计时组件 -->
31   - <count-down-com slot="extend"
32   - :time="discountTime * 1000"
  31 + <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'"
  32 + :time="parseInt(discountTime) * 1000"
33 33 sty="4">
34 34 </count-down-com>
35 35 </text-bg-title-com>
... ... @@ -168,6 +168,7 @@
168 168 title: "", // 标题
169 169 backs: null, // 后退按钮组
170 170 navs: null, // 导航
  171 + discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束
171 172 discountTimeout: 0, // 倒计时超时时间计数
172 173 discountTime: null, // 倒计时时间
173 174 discountLists: null, // 折扣专区数据
... ... @@ -313,6 +314,9 @@
313 314  
314 315 /* 获取优选库“优选”数据 开始 */
315 316  
  317 + // 设置折扣商品状态
  318 + this.$set(this, 'discountType', datas.discount_type);
  319 +
316 320 // 设置折扣专区数据
317 321 if (datas.discount_time > 0 && datas.discount && datas.discount.length) {
318 322  
... ... @@ -328,17 +332,19 @@
328 332 // 停止倒计时
329 333 clearInterval(timeoutInterval);
330 334  
331   - // 设置倒计时时间为负数，隐藏“折扣专区”区块
332   - this.$set(this, 'discountTime', '-1');
  335 + // 刷新页面
  336 + window.location.reload();
333 337 } else {
  338 +
  339 + // 倒计时超时时间计数
334 340 this.discountTimeout++;
335 341 }
336 342 }, 1000);
337   -
338   - // 设置折扣专区数据
339   - this.$set(this, 'discountLists', datas.discount);
340 343 }
341 344  
  345 + // 设置折扣专区列表数据
  346 + this.$set(this, 'discountLists', datas.discount);
  347 +
342 348 // 判断品质优选是否有数据
343 349 if (datas.quality && datas.quality.length) {
344 350  
... ...
src/pages/recommendMore/recommendMore.vue
  View file @4c5e004
... ... @@ -168,11 +168,11 @@
168 168 }else if (res.statusCode === 200 && res.data.code == 400) {
169 169  
170 170 // 关注失败
171   - this.showToast(res.data.message);
  171 + Toast(res.data.message);
172 172 } else {
173 173  
174 174 // 关注失败
175   - this.showToast("关注失败");
  175 + Toast("关注失败");
176 176 }
177 177 },
178 178 /**
... ...
static/img/icon_tips_book.png 0 → 100644
View file @4c5e004

653 Bytes