w-front-end / select_good · Files

<template>
    <div class="discount-list-page" :style="{'backgroundColor': tabs.list[tabs.active].color}">

        <!-- 导航区域 -->
        <div class="nav-box" :style="'padding-top: ' + $parent.top.value + 'px'">

            <!-- H5唤起App组件 -->
            <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
                :callApps="$parent.callApps">
            </call-app-box>

            <!-- 后退导航 -->
            <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" v-if="isCNLive.value" @back="back"
                :backs="backs">
            </back-box>

            <!-- tab导航 -->
            <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true}">

                <!-- 横向滑动tabs导航组件 -->
                <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
                    :lists="tabs.list"
				    com="tab2"
				    :pid="tabs.active">
			    </horiz-list>
            </div>
        </div>

        <!-- pl -->
        <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>

        <!-- 主区域 -->
        <div class="main-box">

            <!-- 头图 -->
            <div class="header-box" v-if="tabs.list[tabs.active].img">
                <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
            </div>

            <!-- 倒计时 -->
            <div class="count-down-box">
                <div class="state" v-if="tabs.list[tabs.active].discountType == '0'">
                    <div class="text">距离活动开始仅剩</div>
                </div>
                <div class="state" v-if="tabs.list[tabs.active].discountType == '1'">
                    <div class="text">距离活动结束仅剩</div>
                </div>
                <div class="state" v-if="tabs.list[tabs.active].discountType === '2'">
                    <img src="static/img/icon_tips_book.png" class="icon-tips-img" />
                    <div class="text">本次活动已结束，敬请期待下次折扣活动～</div>
                </div>

                <!-- 倒计时组件 -->
                <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')"
                    :time="parseInt(tabs.list[tabs.active].discountTime) * 1000"
                    sty="5">
                </count-down-com>
            </div>

            <!-- 上拉加载 -->
            <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">

                <!-- 商品列表 -->
                <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">

                    <!-- 商品列表 -->
                    <goods-item-8 v-for="(item, index) in lists[tabs.active]" :key="index" @jump="toDetail" @primary="primary"
                        :item="item"
                        sty="1"
                        :discountType="tabs.list[tabs.active].discountType">

                        <!-- 折扣角标 -->
                        <div class="discount-flag" slot="flag" v-if="tabs.list[tabs.active].type == '0' && (item.tag || (parseFloat(item.price) < parseFloat(item.prices)))">
                            {{item.tag || getDiscount(item.price, item.prices)}}
                        </div>
                    </goods-item-8>
                </div>
            </van-list>

            <div class="bottom-pl"></div>

            <!-- 活动规则提示 -->
            <!-- <div class="tips-box">
                <div class="tips">
                    <img src="static/img/icon_tips.png" class="tips-img" />
                    <div class="text">本次活动每个商品每个用户限购一件</div>
                </div>
            </div> -->
        </div>

        <!-- 回到顶部按钮 -->
        <goto-top
            :top="parseInt(150)">
        </goto-top>
    </div>
</template>

<script>

    // 引入组件
    import Vue from "vue";
    import { Toast, Indicator } from "mint-ui";
    import { List } from "vant";
    import callAppBox from "@/components/callAppBox/callAppBox";
    import backBox from "@/components/backBox/backBox";
    import horizList from "@/components/horizList/horizList";
    import countDownCom from "@/components/countDownCom/countDownCom";
    import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
    import gotoTop from "@/components/gotoTop/gotoTop";

    Vue.use(List);

    export default {
        name: 'discountListPage',
        data () {
            return {
                title: "",              // 标题
                backs: null,            // 后退按钮组
                CALL_STATUS: {
					INIT: "init",				// 初始化页面
					LOAD_MORE: "loadMore"		// 加载更多
				},
                tabs: {                 // tabs设置
                    first: true,        // 第一次访问接口
                    active: 0,
                    list: [
                        {
                            title: '平台补贴',
                            color: null,            // 背景颜色
                            titleColor: '#F65600',  // 标题颜色
                            type: '0',
                            img: null,              // 头图
                            discountType: null,     // 折扣专区状态，0：未开始；1：进行中；2：已结束
                            discountTimeout: 0,     // 倒计时超时时间计数
                            discountTime: null,     // 倒计时时间
                            timeoutInterval: null   // 倒计时对象
                        }
                    ]
                },
                lists: [],      // 列表数据
            }
        },
        computed: {

            /**
             * 计算折扣
             */
            getDiscount() {
                return (price, prices) => {

                    // 售价/原价
                    let x = (price * 100) / (prices * 100);

                    return ((Math.floor(x * 1000) / 1000) * 10).toString() + '折';
                }
            }
        },
        components: {
            callAppBox,
            backBox,
            horizList,
            countDownCom,
            goodsItem8,
            gotoTop
        },
        created() {

            // 设置标题
            this.$set(this, "title", "折扣专区");

            // 判断是否在App内
            if (this.isCNLive.value) {

                // 添加后退按钮组“后退”和“分享”按钮
                this.$set(this, 'backs', {
                    title: this.title,
                    funcs: {
                        back: {
                            icon: "static/img/icon_back.png"
                        },
                        funcArray: [
                            {
                                icon: "static/img/icon_share.png",
                                func: this.toShare
                            }
                        ]
                    }
                });
            }

            // 请求接口封装
            this.request();
        },
        methods: {

            /**
             * 加载更多
             */
            loadMore() {

                // 判断是否执行上拉加载
                if (this.tabs.list[this.tabs.active].type != '0') {

                    // 判断是否可加载
                    if (this.tabs.list[this.tabs.active].loadingNow === false || this.tabs.list[this.tabs.active].loadingNow === undefined) {

                        // 设置加载中状态
                        this.$set(this.tabs.list[this.tabs.active], 'loadingNow', true);

                        if (this.tabs.list[this.tabs.active].page === undefined) {

                            // 设置初始化页码
                            this.$set(this.tabs.list[this.tabs.active], 'page', 1);

                            // 获取店铺首页推荐商品列表
                            this.getShopRecommendGoods(this.CALL_STATUS.INIT);
                        } else {

                            // 判断页面是数字再执行
                            if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {

                                // 获取店铺首页推荐商品列表
                                this.getShopRecommendGoods(this.CALL_STATUS.LOAD_MORE);
                            }
                        }
                    }
                }
            },

            /**
             * 初始化数据
             */
            initDiscount() {

                // 结束倒计时
                if (this.tabs.list[0].timeoutInterval) {
                    clearInterval(this.tabs.list[0].timeoutInterval);
                }

                // 初始化数据
                this.$set(this.tabs.list[0], 'img', null);              // 头图
                this.$set(this.tabs.list[0], 'discountType', null);     // 折扣专区状态，0：未开始；1：进行中；2：已结束
                this.$set(this.tabs.list[0], 'discountTimeout', 0);     // 倒计时超时时间计数
                this.$set(this.tabs.list[0], 'discountTime', null);     // 倒计时时间
                this.$set(this.tabs.list[0], 'discountLists', null);    // 折扣专区数据
            },

            /**
             * 切换tab
             * @param {Object} item [对象数据]
             * @param {Number} index [索引]
             */
            change(item, index) {

                // 请求接口
                this.request(index);
            },

            /**
             * 请求接口封装
             * @param {Number} index [tabs索引]
             */
            request(index = 0) {

                // 判断App外，特殊情况不允许点击查看列表
                // if (!this.isCNLive.value && this.tabs.list[index].type != '0') {

                //     // App外，唤起App
                //     this.openApp();

                //     return false;
                // }

                // 设置tabs活动项
                if (index) {
                    this.$set(this.tabs, 'active', index);
                } else {
                    this.$set(this.tabs, 'active', 0);
                }

                // 初始化数据
                this.initDiscount();

                // 根据参数判断请求哪个接口，获取哪个列表
                if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {

                        // 获取店铺首页推荐商品列表
                        this.getShopRecommendGoods(this.CALL_STATUS.INIT);
                } else if (this.tabs.list[this.tabs.active].type == '0') {

                    // 折扣专区列表
                    this.discountGoods();
                }
            },

            /**
             * 折扣专区列表
             */
            discountGoods() {

                // 加载中提示
                Indicator.open("加载中...");

                // 获取证书请求接口
                this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods", {
                    uid: this.getStore("uid") || 0
                }, this.discountGoodsCallback, {
                    method: "POST"
                });
            },

            /**
             * 折扣专区列表回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            discountGoodsCallback(res, ext) {

                // 加载完成
                Indicator.close();

                // 返回处理
                if (res.code == 200) {

                    // 解构数据
                    let { data: datas } = res;

                    /* 获取折扣专区列表数据 开始 */

                    // 设置折扣商品状态
                    this.$set(this.tabs.list[0], 'discountType', datas.discount_type);

                    // 设置背景色
                    this.$set(this.tabs.list[0], 'color', datas.discount_color);

                    // 头图
                    this.$set(this.tabs.list[0], 'img', datas.discount_img);

                    // 设置折扣专区数据
                    if (datas.discount_time > 0 && datas.list && datas.list.length) {

                        // 设置倒计时时间
                        this.$set(this.tabs.list[0], 'discountTime', parseInt(datas.discount_time) + 10);

                        // 设置倒计时超时轮训
                        this.$set(this.tabs.list[0], 'timeoutInterval', setInterval(() => {

                            // 倒计时超时时间计数
                            this.tabs.list[0].discountTimeout++;

                            // 判断是否超时
                            if (this.tabs.list[0].discountTimeout >= this.tabs.list[0].discountTime) {

                                // 停止倒计时
                                clearInterval(this.tabs.list[0].timeoutInterval);

                                // 刷新页面
                                window.location.reload();
                            }
                        }, 1000));
                    }

                    // 设置折扣专区列表数据
                    this.$set(this.lists, 0, datas.list);

                    // 设置其它tab数据
                    if (this.tabs.first === true) {

                        // 首页取消上拉加载
                        this.$set(this.tabs.list[0], 'loading', false);
                        this.$set(this.tabs.list[0], 'loadingNow', false);
                        this.$set(this.tabs.list[0], 'finished', true);

                        if (datas.nav && datas.nav.length) {

                            // 合并数组
                            this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.nav]);

                            // 单独设置标题颜色/起始页码/加载中控制
                            for (let i = 1; i < this.tabs.list.length; i++) {
                                this.$set(this.tabs.list[i], 'titleColor', this.tabs.list[i].color);
                                this.$set(this.tabs.list[i], 'page', 1);
                                this.$set(this.tabs.list[i], 'loading', false);
                                this.$set(this.tabs.list[i], 'loadingNow', false);
                                this.$set(this.tabs.list[i], 'finished', false);
                            }
                        }

                        // 设置非第一次请求接口
                        this.$set(this.tabs, 'first', false);
                    }

                    /* 获取折扣专区列表数据 结束 */

                } else if (res.code == 400) {

                    // 获取优选失败
                    Toast(res.message);
                } else {

                    // 获取优选失败
                    Toast("获取列表失败");
                }
            },

            /**
			 * 获取店铺首页推荐商品列表
			 * @param {object} CALL_STATUS	[何处触发请求]
			 */
			getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {

				// 判断必要参数
				if (this.tabs.list[this.tabs.active].shop_id) {

					// 设置开始加载
					this.$set(this.tabs.list[this.tabs.active], "loading", true);

                    // 加载中提示
                	Indicator.open('加载中...');

					// 请求接口
					this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
						shop_id: this.tabs.list[this.tabs.active].shop_id,
						page: this.tabs.list[this.tabs.active].page
					}, this.getShopRecommendGoodsCallback, {
						method: "POST",
						CALL_STATUS
					});
				}
			},

			/**
			 * 获取店铺首页推荐商品列表回调
			 * param {res}	[服务器返回数据]
			 * param {ext}		[扩展参数]
			 */
			getShopRecommendGoodsCallback(res, ext) {

				// 加载完成
				Indicator.close();

				// 返回处理
				if (res.code == 200) {

					// 解构数据
                    let {data: datas} = res;

                    // 判断如果有数据
                    if (datas.list && datas.list.length) {

                        /* 设置列表数据 开始 */
                        switch (ext.CALL_STATUS) {
                            case this.CALL_STATUS.INIT:

                                // 设置推荐商品列表
                                this.$set(this.lists, this.tabs.active, datas.list);
                                break;
                            case this.CALL_STATUS.LOAD_MORE:

                                // 添加数据到数组
                                this.$set(this.lists, this.tabs.active, [...this.lists[this.tabs.active], ...datas.list]);
                                break;
                        }

                        // 设置页码
                        this.$set(this.tabs.list[this.tabs.active], 'page', ++this.tabs.list[this.tabs.active].page);

                        // 取消Loading中状态，恢复LoadingMore功能
                        this.$set(this.tabs.list[this.tabs.active], 'loading', false);
                        this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
                        this.$set(this.tabs.list[this.tabs.active], 'finished', false);
                    } else {

                        // 取消Loading中状态，恢复LoadingMore功能
                        this.$set(this.tabs.list[this.tabs.active], 'loading', false);
                        this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
                        this.$set(this.tabs.list[this.tabs.active], 'finished', true);
                    }

					/* 设置列表数据 结束 */

				} else if (res.code == 400) {

					// 获取商品出错
					Toast(res.message);
				} else {

					// 获取商品出错
					Toast("获取商品出错");
				}
			},

            /**
             * 跳转商品详情
             * @param {Object} item [数据对象]
             */
            toDetail(item) {

                // 判断App内
                if (this.isCNLive.value) {

                    // 判断是活动未开始状态，弹窗提示活动未开始
                    if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '0') {

                        // 通用弹窗提示
                        this.showModal();
                        return false;
                    }

                    // 已结束，不跳转
                    if (this.tabs.list[this.tabs.active].type == '0' && this.tabs.list[this.tabs.active].discountType == '2') {
                        return false;
                    }

                    // 已抢光，不跳转
                    if (this.tabs.list[this.tabs.active].type == '0' && (item.num == '2' || (item.num == '1' && item.stock == '0'))) {
                        return false;
                    }

                    // 判断通用跳转函数是否存在
                    if (typeof this.$parent.gotoDetail === 'function') {

                        // 跳转参数
                        let params = {
                            type: '2',
                            to: item.id,
                            shop_type: item.shop_type
                        };

                        // 通用跳转
                        this.$parent.gotoDetail(params);
                    }
                } else {

                    // App外，唤起App
                    this.openApp();
                }
            },

            /**
             * 项目按钮事件
             * @param {Object} item [数据对象]
             */
            primary(item) {

                // 跳转商品详情
                this.toDetail(item);
            },

            showModal() {

                // 判断通用弹窗是否存在
                if (typeof this.$parent.showModal === 'function') {

                    // 设置通用弹窗参数
                    let options = {
                        title: "提示",
                        message: "当前活动未开始，请耐心等待",
                        confirmButtonText: "我知道了",
                        closeOnClickModal: true
                    };

                    // 调用函数，显示通用弹窗
                    this.$parent.showModal(options);
                }
            },

            /**
             * 唤起App封装
             */
            openApp() {

                this.$nextTick(() => {

                    // 唤起App
                    if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {

                        // 设置唤起参数
                        let options = {
                            success: this.$refs.callApp.callApp
                        }

                        // 唤起App
                        this.$parent.callAppModal(options);
                    }
                });
            },

            /**
             * 分享
             */
            toShare() {

                // 判断分享
                if (typeof this.$parent.toShare === 'function') {
                    this.$parent.toShare(49, this.$route.query.id || 1);
                }
            },

            /**
             * 后退
             */
            back() {

                // 判断是否有处理函数
                if (typeof this.$parent.back === 'function') {

                    // 后退
                    this.$parent.back();
                } else {

                    // 后退
                    window.history.go(-1);
                }
            }
        },
        head: {
            title () {
                return {
                    inner: this.title
                }
            }
        },
        watch: {

            // 设置页面标题
            title(newVal) {
                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
                    this.$iFrame.insertIFrame(newVal);
                } else {
                    this.$emit("updateHead");
                }
            }
        },
        mounted() {

            // 如果是App外，设置唤起App和微信内分享参数
            if (!this.isCNLive.value) {

                // 唤起详情页
                if (typeof this.$parent.getOpenApp === "function") {
                    this.$parent.getOpenApp({
                        type: 49,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }

                // 分享详情页
                if (typeof this.$parent.getShareData === "function") {
                    this.$parent.getShareData({
                        type: 49,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
            }

            // 页面切换可见状态监听
            document.addEventListener('visibilitychange', () => {

                // 页面显示出来了
                if (document.hidden === false && this.$route.name == 'discountList') {

                    // 只有折扣专区的刷新页面
                    if (this.tabs.list[this.tabs.active].type == '0') {

                        // 请求接口封装
                        this.request(this.tabs.active);
                    }
                }
            });
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang='less' scoped>
    @import "discountList";
</style>