w-front-end / select_good · Files

<template>
    <div class="act-list-page" v-if="tabs.list[tabs.active]">

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

            <!-- 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>
        </div>

        <!-- pl -->
        <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="'padding-top: ' + $parent.top.value + 'px'"></div>

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

            <!-- 轮播组件 -->
            <div class="section banner-box" v-if="swipers && swipers.length">

                <!-- 轮播组件 -->
                <swiper-box @jump="swiperJump"
                    :swipers="swipers"
                    :options="{
                        showIndicators: true
                    }">
                </swiper-box>
            </div>
            
            <!-- 节 -->
            <div class="section coupon-box" v-if="coupons && coupons.length">

                <!-- 优惠券列表 滑动 -->
                <horiz-list class="coupon-horiz-box" @todo="todo"
                    :lists="coupons"
                    com="coupon">
                </horiz-list>
            </div>

            <!-- 分割线 -->
            <div class="dividing-line" v-if="coupons && coupons.length"></div>

            <!-- tab导航 -->
            <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox' v-if="!tabs.isHide">

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

                    <!-- 商品样式 7 列表 -->
                    <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
                        :lists="lists[tabs.active]"
                        com='7'
                        goodType='2'
                        flag=''>
                    </column-list-box>
                </div>
            </van-list>

            <div class="bottom-pl"></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 swiperBox from "@/components/swiperBox/swiperBox";
    import horizList from "@/components/horizList/horizList";
    import columnListBox from "@/components/columnListBox/columnListBox";
    import gotoTop from "@/components/gotoTop/gotoTop";

    Vue.use(List);

    export default {
        name: 'actListPage',
        data () {
            return {
                title: '',                                  // 标题
                backs: null,                                // 后退按钮组
                shareParams: {},                            // 分享参数
                CALL_STATUS: {
					INIT: "init",				            // 初始化页面
					LOAD_MORE: "loadMore"		            // 加载更多
				},
                swipers: null,                              // 主Banner
                coupons: null,                              // 优惠券数据对象
                tabs: {                                     // tabs设置
                    fixed: false,                           // 是否吸顶
                    offsetTop: 0,                           // 距离顶部距离
                    top: 0,                                 // 吸顶的top值
                    active: 0,                              // 活动项
                    init: false,                            // tabs数据是否初始化过，防止重复设置tabs列表
                    isHide: false,                          // 是否隐藏分类，默认不隐藏
                    list: [                                 // tabs数组
                        {
                            id: 0,
                            title: '全部',
                            page: 1,
                            loading: false,
                            loadingNow: false,
                            finished: false
                        }
                    ]
                },
                lists: []                                   // 列表数据
            }
        },
        components: {
            callAppBox,
            backBox,
            swiperBox,
            horizList,
            columnListBox,
            gotoTop
        },
        computed: {

            /**
             * 获取输入数字的整数部分
             */
            getInteger () {
                return (number) => {
                    return parseInt(number);
                }
            },

            /**
             * 获取输入数字的小数部分
             */
            getDecimal () {
                return (number) => {
                    
                    // 拆分数字
                    let numberArr = number.toString().split(".");
                    
                    // 判断是否有效数部分
                    if (numberArr.length === 2) {
                        return numberArr[1];
                    } else {
                        return "00";
                    }
                }
            }
        },
        created() {

			// 初始化页面
			this.initPage();

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

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

            // 获取页面头部数据
            this.getDiscountActivityInfo();

            // 商品列表（初始化）
            this.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
        },
        methods: {

            /**
			 * 初始化页面
			 */
			initPage() {
				
				// 设置分享参数
				this.$set(this, 'shareParams', {
					type: 25,
					id: this.$route.query.id || 0
				});
			},

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

                // 判断是否可加载
                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 == '1' || this.tabs.list[this.tabs.active].page === undefined) {

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

                        // 商品列表
                        this.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
                    } else {

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

                            // 商品列表
                            this.getDiscountActivityGoodsList(this.CALL_STATUS.LOAD_MORE);
                        }
                    }
                }
            },

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

                // 切换前检查网络状态
                if (this.$parent.onLine) {

                    // 切换tab
                    this.$set(this.tabs, 'active', index);
    
                    // 根据参数判断请求哪个接口，获取哪个列表
                    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.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
                    }
    
                    // 回到顶部
                    this.gotoTop();
                } else {

                    // 网络异常提醒
                    Toast("网络异常，请检查网络");
                }
            },

            /**
			 * 回到顶部
			 */
			gotoTop() {
				document.documentElement.scrollTop = document.body.scrollTop = 0;
			},
            
            /**
             * 获取页面头部数据
             */
            getDiscountActivityInfo() {

                // 判断必要参数
                if (this.$route.query.id) {

                    // 加载中提示
                    Indicator.open("加载中...");
    
                    // 获取证书请求接口
                    this.http("/Api/" + (this.getApiVersion().index) + "/getDiscountActivityInfo", {
                        id: this.$route.query.id,
                        uid: this.$route.query.uid || 0
                    }, this.getDiscountActivityInfoCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 获取页面头部数据回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            getDiscountActivityInfoCallback(res, ext) {

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

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

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

                    /* 设置首页数据 开始 */

                    // 判断是否为首次加载
                    if (!this.tabs.init) {

                        // 设置标题
                        this.$set(this, 'title', datas.title);

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

                            // 设置nav标题
                            this.$set(this.backs, 'title', this.title);
                        }

                        // 获取头部swiper的banner
                        if (datas.banner && typeof datas.banner === 'object' && datas.banner.length) {

                            // 设置banner
                            this.$set(this, 'swipers', datas.banner);
                        }

                        // 判断在App内再设置优惠券
                        if (this.isCNLive.value) {

                            // 如果有优惠券，设置优惠券信息
                            if (datas.coupon && datas.coupon.length) {

                                // 设置优惠券
                                this.$set(this, 'coupons', datas.coupon);
                            }
                        }

                        // 获取tabs数据
                        if (datas.list && datas.list.length && datas.list.length >= 2) {
                            
                            // 合并数组
                            this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
                        } else {

                            // 不显示分类
                            this.$set(this.tabs, 'isHide', true);
                        }

                        // 设置为已加载过，不重复加载重复数据
                        this.$set(this.tabs, 'init', true);
                    }

                    /* 设置首页数据 结束 */

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

                    // 获取数据失败
                    Toast(res.message);
                } else {

                    // 获取数据失败
                    Toast("获取数据失败");
                }
            },

            /**
			 * 商品列表
			 * @param {Object} CALL_STATUS	[何处触发请求]
			 */
			getDiscountActivityGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {

				// 判断必要参数
				if (this.$route.query.id && this.tabs.list[this.tabs.active].id >= 0) {

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

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

					// 请求接口
					this.http("/Api/" + (this.getApiVersion().index) + "/getDiscountActivityGoodsList", {
                        id: this.$route.query.id,
                        uid: this.$route.query.uid || 0,
						groupid: this.tabs.list[this.tabs.active].id,
						page: this.tabs.list[this.tabs.active].page
					}, this.getDiscountActivityGoodsListCallback, {
						method: "POST",
						CALL_STATUS
					});
				}
			},

			/**
			 * 商品列表回调
			 * @param {Object} res [服务器返回数据]
			 * @param {Object} ext [扩展参数]
			 */
			getDiscountActivityGoodsListCallback(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} coupons [优惠券对象]
             */
            getUserCoupon(coupons) {

                // 判断必要参数
                if (this.$route.query.uid && coupons.id) {

                    // 加载中提示
                    Indicator.open("加载中...");
    
                    // 获取证书请求接口
                    this.http("/Api/" + (this.getApiVersion().index) + "/getUserCoupon", {
                        coupon_id: coupons.id,
                        uid: this.$route.query.uid
                    }, this.getUserCouponCallback, {
                        method: "POST",
                        coupons
                    });
                }
            },

            /**
             * 领取优惠券回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            getUserCouponCallback(res, ext) {

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

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

                    // 设置优惠券状态（不能再领取）
                    this.$set(ext.coupons, 'state', '1');

                    // 领取成功提示
                    Toast('领取成功');
                } else if (res.code == 400) {

                    // 获取数据失败
                    Toast(res.message);
                } else {

                    // 获取数据失败
                    Toast("获取数据失败");
                }
            },

            /**
             * swiper跳转事件
             * @param {Object} item [数据对象]
             */
            swiperJump(item) {

                // 判断在App内
                if (this.isCNLive.value || this.$route.query.id == '3') {

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

                        // 判断是否有跳转参数
                        if (item.type && item.id) {

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

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

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

            /**
			 * 优惠券点击事件
			 * @param {Object} coupons [优惠券对象]
			 */
			todo(coupons) {

                // 判断必要参数
                if (coupons.id) {

                    // 判断优惠券状态
                    if (coupons.state == '0') {
                        
                        // 领取优惠券
                        this.getUserCoupon(coupons);
                    } else if (coupons.state == '1') {

                        // 已经领取过优惠券提示
                        Toast('您已领取该优惠劵');
                    }
                }
			},
            
            /**
             * 跳转商品详情
             * @param {Object} item [数据对象]
             */
            toDetail(item) {

                // 判断在App内
                if (this.isCNLive.value || this.$route.query.id == '3') {

                    // 判断通用跳转函数是否存在
                    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);
            },

            /**
             * 播放视频
             * @param {String} videoUrl [数据对象]
             */
            playNow(videoUrl) {
                
                // 判断在App内
                if (this.isCNLive.value) {

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

                        // 设置跳转参数
                        let params = {
                            type: '22',
                            to: item.to,
                            shop_type: ''
                        };

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

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

            /**
             * 监听函数，设置滚动条new位置
             */
            scrollEventListenerFun() {

                // 下一周期执行
                this.$nextTick(() => {

                    // 判断组件是否存在
                    if (typeof this.$refs.tabsBox === 'object') {
                        
                        // 判断tabs的offsetTop是否设置
                        if (this.tabs.offsetTop == 0) {

                            // 设置tabs原始位置
                            this.$set(this.tabs, 'offsetTop', this.$refs.tabsBox.offsetTop);
                        }

                        // 判断是否有标题栏
                        if (typeof this.$refs.navBox === 'object') {

                            // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
                            this.$set(this.tabs, 'fixed', window.scrollY +  (this.$refs.navBox.offsetHeight) >= this.tabs.offsetTop);
                        } else {

                            // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
                            this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
                        }

                        // 如果需要吸顶，设置tabsBox的top值
                        if (this.tabs.fixed) {

                            // 设置吸顶的top值
                            this.$set(this.tabs, 'top', (this.$refs.navBox.offsetHeight - 1) + 'px');
                        } else {

                            // 设置吸顶的top值
                            this.$set(this.tabs, 'top', 0);
                        }
                    }
                });
            },

            /**
             * 设置滚动条监听
             */
            handleScroll() {
                window.addEventListener("scroll", this.scrollEventListenerFun);
            },

            /**
             * 唤起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' && typeof this.shareParams === 'object' && this.shareParams.type) {
                    this.$parent.toShare(this.shareParams.type, this.shareParams.id || 0);
                }
            },

            /**
             * 后退
             */
            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" && typeof this.shareParams === 'object' && this.shareParams.type) {
                    this.$parent.getOpenApp({
                        type: this.shareParams.type,
                        id: this.shareParams.id || 1,
                        url: ""
                    });
                }

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

            // 设置滚动条监听
            this.handleScroll();

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

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

                    // 获取页面头部数据
                    this.getActShopIndex();
                }
            });
        }
    }
</script>

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