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

王强
1 parent a5bfdb55
Showing 7 changed files with 120 additions and 49 deletions
src/pages/common/common.vue
src/pages/discountList/discountList.less
src/pages/discountList/discountList.vue
src/pages/newDaren/newDaren.vue
src/pages/optimization2/optimization2.vue
src/pages/recommendMore/recommendMore.vue
static/img/icon_tips_book.png
@@ -29,8 +29,11 @@
     // 读取文件属性
     import Exif from 'exif-js';
+
+    // 公用组件
     import maskLayer from "@/components/maskLayer/maskLayer";
     import showModal from "@/components/showModal/showModal";
+    
     export default {
         name: "common",
         data () {
@@ -41,10 +41,23 @@
             margin: 0 auto;
             width: 630px;
             height: auto;
-            .text {
-                color: #633531;
-                font-size: 24px;
-                font-weight: 400;
+            .state {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                .icon-tips-img {
+                    display: block;
+                    width: 22px;
+                    height: 22px;
+                    & + .text {
+                        margin-left: 13px;
+                    }
+                }
+                .text {
+                    color: #633531;
+                    font-size: 24px;
+                    font-weight: 400;
+                }
             }
         }
         .section {
 <template>
-    <div class="discount-list-page" :style="{'backgroundColor': datas && datas.discount_color ? datas.discount_color : ''}">
+    <div class="discount-list-page" :style="{'backgroundColor': discountColor}">
         <!-- H5唤起App组件 -->
         <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
@@ -18,39 +18,35 @@
         <div class="main-box">
             <!-- 头图 -->
-            <div class="header-box" v-if="datas && datas.discount_img">
-                <img :src="datas.discount_img + SIGN.BIG" class="header-img" />
+            <div class="header-box" v-if="discountImg">
+                <img :src="discountImg + SIGN.BIG" class="header-img" />
             </div>
             <!-- 倒计时 -->
-            <div class="count-down-box" v-if="datas && datas.discount_time && datas.discount_time > 0">
-                <div class="text">
-                    距离活动结束仅剩
+            <div class="count-down-box">
+                <div class="state" v-if="discountType == '0'">
+                    <div class="text">距离活动开始仅剩</div>
                 </div>
-
-                <!-- 倒计时组件 -->
-                <count-down-com slot="extend"
-                    :time="parseInt(datas.discount_time) * 1000"
-                    sty="5">
-                </count-down-com>
-            </div>
-            <div class="count-down-box" v-if="datas && (!datas.discount_time || datas.discount_time <= 0)">
-                <div class="text">
-                    活动已结束
+                <div class="state" v-if="discountType == '1'">
+                    <div class="text">距离活动结束仅剩</div>
+                </div>
+                <div class="state" v-if="discountType === '2'">
+                    <img src="/static/img/icon_tips_book.png" class="icon-tips-img" />
+                    <div class="text">本次活动已结束，敬请期待下次折扣活动～</div>
                 </div>
                 <!-- 倒计时组件 -->
-                <count-down-com slot="extend"
-                    :time="-1"
+                <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && (discountType == '0' || discountType == '1')"
+                    :time="parseInt(discountTime) * 1000"
                     sty="5">
                 </count-down-com>
             </div>
             <!-- 商品列表 -->
-            <div class="section goods-list" v-if="goodsLists && goodsLists.length">
+            <div class="section goods-list" v-if="discountLists && discountLists.length">
                 <!-- 商品列表 -->
-                <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary"
+                <goods-item-8 v-for="(item, index) in discountLists" :key="index" @jump="toDetail" @primary="primary"
                     :item="item"
                     sty="1">
@@ -93,10 +89,14 @@
         name: 'discountListPage',
         data () {
             return {
-                title: "",          // 标题
-                backs: null,        // 后退按钮组
-                datas: null,        // 接口数据
-                goodsLists: null    // 商品列表
+                title: "",              // 标题
+                backs: null,            // 后退按钮组
+                discountColor: null,    // 背景颜色
+                discountImg: null,      // 头图
+                discountType: null,     // 折扣专区状态，0：未开始；1：进行中；2：已结束
+                discountTimeout: 0,     // 倒计时超时时间计数
+                discountTime: null,     // 倒计时时间
+                discountLists: null     // 折扣专区数据
             }
         },
         computed: {
@@ -185,20 +185,43 @@
                     /* 获取折扣专区列表数据 开始 */
-                    // 判断接口是否有数据
-                    if (datas) {
+                    // 设置折扣商品状态
+                    this.$set(this, 'discountType', datas.discount_type);
-                        // 设置接口数据
-                        this.$set(this, 'datas', datas);
+                    // 设置背景色
+                    this.$set(this, 'discountColor', datas.discount_color);
+                    
+                    // 头图
+                    this.$set(this, 'discountImg', datas.discount_img);
-                        // 判断是否有列表数据
-                        if (datas.list && datas.list.length) {
+                    // 设置折扣专区数据
+                    if (datas.discount_time > 0 && datas.list && datas.list.length) {
-                            // 设置商品列表数据
-                            this.$set(this, 'goodsLists', datas.list);
-                        }
+                        // 设置倒计时时间
+                        this.$set(this, 'discountTime', datas.discount_time);
+
+                        // 设置倒计时超时轮训
+                        let timeoutInterval = setInterval(() => {
+
+                            // 判断是否超时
+                            if (this.discountTimeout > this.discountTime) {
+
+                                // 停止倒计时
+                                clearInterval(timeoutInterval);
+
+                                // 刷新页面
+                                window.location.reload();
+                            } else {
+
+                                // 倒计时超时时间计数
+                                this.discountTimeout++;
+                            }
+                        }, 1000);
                     }
+                    // 设置折扣专区列表数据
+                    this.$set(this, 'discountLists', datas.list);
+                    
                     /* 获取折扣专区列表数据 结束 */
                 } else if (res.code == 400) {
@@ -221,6 +244,14 @@
                 // 判断App内
                 if (this.isCNLive.value) {
+                    // 判断是活动未开始状态，弹窗提示活动未开始
+                    if (this.discountType == '0') {
+                        
+                        // 通用弹窗提示
+                        this.showModal();
+                        return false;
+                    }
+
                     // 已抢光，不跳转
                     if (item.num == '2' || (item.num == '1' && item.stock == '0')) {
                         return false;
@@ -256,6 +287,24 @@
                 this.toDetail(item);
             },
+            showModal() {
+
+                // 判断通用弹窗是否存在
+                if (typeof this.$parent.showModal === 'function') {
+
+                    // 设置通用弹窗参数
+                    let options = {
+                        title: "提示",
+                        message: "当前活动未开始，请耐心等待",
+                        confirmButtonText: "我知道了",
+                        closeOnClickModal: true
+                    };
+
+                    // 调用函数，显示通用弹窗
+                    this.$parent.showModal(options);
+                }
+            },
+
             /**
              * 唤起App封装
              */
@@ -308,11 +308,11 @@
                 }else if (res.statusCode === 200 && res.data.code == 400) {
                     // 关注失败
-                    this.showToast(res.data.message);
+                    Toast(res.data.message);
                 } else {
                     // 关注失败
-                    this.showToast("关注失败");
+                    Toast("关注失败");
                 }
             },
             /**
@@ -18,7 +18,7 @@
         <div class="main-box">
             <!-- 折扣专区 -->
-            <div class="section shop-list" v-if="discountTime && discountTime > 0">
+            <div class="section shop-list" v-if="discountLists && discountLists.length">
                 <!-- 标题 -->
                 <text-bg-title-com @more="toDiscountList"
@@ -28,8 +28,8 @@
                     }">
                     <!-- 倒计时组件 -->
-                    <count-down-com slot="extend"
-                        :time="discountTime * 1000"
+                    <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'"
+                        :time="parseInt(discountTime) * 1000"
                         sty="4">
                     </count-down-com>
                 </text-bg-title-com>
@@ -168,6 +168,7 @@
                 title: "",              // 标题
                 backs: null,            // 后退按钮组
                 navs: null,             // 导航
+                discountType: null,     // 折扣专区状态，0：未开始；1：进行中；2：已结束
                 discountTimeout: 0,     // 倒计时超时时间计数
                 discountTime: null,     // 倒计时时间
                 discountLists: null,    // 折扣专区数据
@@ -313,6 +314,9 @@
                     /* 获取优选库“优选”数据 开始 */
+                    // 设置折扣商品状态
+                    this.$set(this, 'discountType', datas.discount_type);
+
                     // 设置折扣专区数据
                     if (datas.discount_time > 0 && datas.discount && datas.discount.length) {
@@ -328,17 +332,19 @@
                                 // 停止倒计时
                                 clearInterval(timeoutInterval);
-                                // 设置倒计时时间为负数，隐藏“折扣专区”区块
-                                this.$set(this, 'discountTime', '-1');
+                                // 刷新页面
+                                window.location.reload();
                             } else {
+
+                                // 倒计时超时时间计数
                                 this.discountTimeout++;
                             }
                         }, 1000);
-
-                        // 设置折扣专区数据
-                        this.$set(this, 'discountLists', datas.discount);
                     }
+                    // 设置折扣专区列表数据
+                    this.$set(this, 'discountLists', datas.discount);
+
                     // 判断品质优选是否有数据
                     if (datas.quality && datas.quality.length) {
@@ -168,11 +168,11 @@
                 }else if (res.statusCode === 200 && res.data.code == 400) {
                     // 关注失败
-                    this.showToast(res.data.message);
+                    Toast(res.data.message);
                 } else {
                     // 关注失败
-                    this.showToast("关注失败");
+                    Toast("关注失败");
                 }
             },
             /**