w-front-end / select_good · Files

<template>
    <div class="mall-box" ref="mallBox">

        <!-- nav -->
        <div class="nav">

            <!-- H5唤起App组件 -->
            <call-app-box class="call-app-box" :style="'padding-top: ' + ($parent.top.value) + 'px'" ref="callApp" v-if="!isCNLive.value"
                :callApps="$parent.callApps">
            </call-app-box>

            <!-- 后退按钮组 -->
            <back-box v-if="$parent.isBackBox.value" class="back-box" :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(250, 36, 95, ' + opacity + ')'" ref="navBox" @back="back"
                :backs="backs">
            </back-box>
        </div>

        <!-- pl callApp -->
        <div class="pl-call-app" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="$parent.isOpenApp.value"></div>

        <!-- pl nav -->
        <div v-if="$parent.isBackBox.value" class="pl-nav" :style="'padding-top: ' + $parent.top.value + 'px'"></div>

        <!-- 头部区域 -->
        <div class="header-box" ref="headerBox">

            <!-- 轮播图 -->
            <swiper-box class="swiper-box" :class="{'padding-top30': !$parent.isBackBox.value}" @detail="toDetail"
                :swipers="swipers">
            </swiper-box>
        </div>

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

            <!-- tabs -->
            <div class="tabs-box" :class="tabs[activeTabIndex] && tabs[activeTabIndex].class ? tabs[activeTabIndex].class : ''" ref="tabsBox">
                <div class="box">
                    <div class="tab" :class="{'active': item.active}" v-for="(item, index) in tabs" :key="index" @click="changeTab(item)">
                        <div class="title">{{item.title}}</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>

            <!-- 滑动列表区域 -->
            <div class="tabs-swiper-box" :style="{height: swiperExce.offsetHeight + 'px', minHeight: 'calc(100vh - ' + ($parent.top.value + 'px') + ' - 38.1vh)'}" ref="tabsSwiperBox">
                <swipe class="swipe" ref="swiperBox" :autoplay="0" :touchable="swiperTouchable.value" :show-indicators="false" :loop="false" :initial-swipe="2" @change="swiperChange">
                    <swipe-item class="swipe-item">

                        <!-- 外部骨架 -->
                        <div class="skeleton brief" ref="brief">

                            <!-- 领头雁简介 -->
                            <html-box
                                :htmls="briefs">
                            </html-box>
                        </div>
                    </swipe-item>
                    <swipe-item class="swipe-item">

                        <!-- 外部骨架 -->
                        <div class="skeleton boutique" ref="boutique">

                            <!-- 精品推荐 -->
                            <div class="boutique-list" v-infinite-scroll="loadBoutique" infinite-scroll-disabled="paging.boutique.loading" :infinite-scroll-distance="paging.distance">

                                <img-list-box @detail="toDetail"
                                    :imgLists="boutiques">
                                </img-list-box>
                                <!--优惠专区-->
                                <!--<discountZone @more="toDetail" @toDetail="toDetail"-->
                                              <!--:discountZoneInfo="item">-->
                                <!--</discountZone>-->
                            </div>
                        </div>
                    </swipe-item>
                    <swipe-item class="swipe-item">

                        <!-- 外部骨架 -->
                        <div class="skeleton commodity" ref="commodity">

                            <!-- 渐变过度 -->
                            <div class="column-commodity-excessive"></div>

                            <!-- 商品推荐 -->
                            <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">

                                <column-commodity-list-box @detail="toCommodityDetail"
                                    :columnLists="commoditys">
                                </column-commodity-list-box>
                            </div>
                        </div>
                    </swipe-item>
                </swipe>
            </div>
        </div>
    </div>
</template>

<script>

    // 引入组件
    import Vue from "vue";
    // import { Toast, Indicator, Swipe, SwipeItem } from "mint-ui";
    import { Toast, Indicator } from "mint-ui";
    import { Swipe, SwipeItem } from "vant";
    import callAppBox from "@/components/callAppBox/callAppBox";
    import swiperBox from "@/components/swiper/swiper";
    import backBox from "@/components/backBox/backBox";
    import htmlBox from "@/components/htmlBox/htmlBox";
    import imgListBox from "@/components/imgListBox/imgListBox";
    import columnCommodityListBox from "@/components/columnCommodityListBox/columnCommodityListBox";
    import discountZone from "@/components/discountZone/discountZone";
    export default {
        data () {
            return {
                title: "",                  // 页面标题
                backs: null,                // 后退按钮组
                opacity: 0,                 // 后退按钮背景色透明度
                swipers: null,              // 轮播图
                tabs: null,                 // tabs内容
                activeTabIndex: -1,         // 活动tab索引
                swiperExce: {               // swiper元素高度，最小高度
                    offsetHeight: 0
                },
                swiperTouchable: {          // 是否可以通过手势滑动
                    value: true
                },
                briefs: null,               // 领头雁简介
                boutiques: {                // 精品推荐
                    list: []
                },
                shopId: null,               // 店铺id
                commoditys: {               // 全部推荐
                    list: []
                },
                paging: {                   // 分页
                    boutique: {
                        loading: true,
                        page: 1
                    },
                    commodity: {
                        loading: true,
                        page: 1
                    },
                    distance: 50
                }
            }
        },
        components: {
            Swipe,
            SwipeItem,
            callAppBox,
            swiperBox,
            backBox,
            htmlBox,
            imgListBox,
            columnCommodityListBox
        },
        created() {

            // 设置后退按钮组
            this.$set(this, "backs", {
                title: ""
            });

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

                // 添加后退按钮组“后退”和“分享”按钮
                Object.assign(this.backs, {
                    funcs: {
                        back: {
                            icon: "static/img/icon_back_white.png"
                        },
                        funcArray: [
                            {
                                icon: "static/img/icon_share_white.png",
                                func: this.toShare
                            }
                        ]
                    }
                });
            }

            // tabs
            this.$set(this, "tabs", [
                {
                    title: "领头雁简介",
                    active: false,
                    class: "bg-white"
                },
                {
                    title: "精品推荐",
                    active: false,
                    class: "bg-excessive-color"
                },
                {
                    title: "全部商品",
                    active: false,
                    class: "bg-white"
                }
            ]);

            // 判断商品列表是否可以滑动
            if (this.$route.query.swiperTouchable) {
                if (typeof this.$route.query.swiperTouchable === "string" && this.$route.query.swiperTouchable === "false") {
                    this.$set(this.swiperTouchable, "value", false);
                }
            }

            // 领头雁电商活动
            this.activityAdsShop();

            // 获取领头雁电商精品推荐
            this.getActivityAdsGoods(this.paging.boutique.page);
        },
        methods: {

            /**
             * 上拉加载“精品推荐”
             */
            loadBoutique() {

                // 判断是“精品推荐”页才加载
                if (this.activeTabIndex === 1) {

                    // 设置“精品推荐”页码
                    this.$set(this.paging.boutique, "page", ++this.paging.boutique.page);

                    // 调用接口
                    this.getActivityAdsGoods(this.paging.boutique.page);
                }
            },

            /**
             * 上拉加载“商品推荐”
             */
            loadCommodity() {

                // 判断是“精品推荐”页才加载
                if (this.activeTabIndex === 2 && this.shopId) {

                    // 设置“精品推荐”页码
                    this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);

                    // 调用接口
                    this.shopRecommendGoods(this.paging.commodity.page);
                }
            },

            /**
             * 领头雁电商活动
             */
            activityAdsShop() {

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

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

                    // 请求接口
                    this.http("/Api/" + (this.getApiVersion().LeadGoose) + "/activityAdsShop", {
                        id: this.$route.query.id
                    }, this.activityAdsShopCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 领头雁电商活动回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            activityAdsShopCallback(res, ext) {

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

                // 返回处理
                if (res.code == 200) {
                    // 解构数据
                    let {data: datas} = res;

                    /* 设置活动数据 开始 */

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

                    // 设置后退按钮组标题
                    this.$set(this.backs, "title", datas.title);

                    // 设置banner
                    if (datas.banner) {
                        this.$set(this, "swipers", datas.banner);
                    }
                    // 设置领头雁简介
                    this.$set(this, "briefs", datas.content);

                    // 设置活动店铺shop_id，用于店铺推荐商品使用
                    if (datas.shop_id) {

                        // 设置活动店铺shop_id
                        this.$set(this, "shopId", datas.shop_id);

                        // 店铺商品推荐
                        this.shopRecommendGoods(this.paging.commodity.page);
                    }

                    /* 设置活动数据 结束 */

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

                    // 获取活动失败
                    Toast(res.message);
                } else {

                    // 获取活动失败
                    Toast("获取活动失败");
                }
            },

            /**
             * 获取领头雁电商精品推荐
             * @param {int} page [页码]
             */
            getActivityAdsGoods(page) {

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

                    // 加载中
                    this.$set(this.paging.boutique, "loading", true);

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

                    // 请求接口
                    this.http("/Api/" + (this.getApiVersion().LeadGoose) + "/getActivityAdsGoods", {
                        id: this.$route.query.id,
                        page: page
                    }, this.getActivityAdsGoodsCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 获取领头雁电商精品推荐回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            getActivityAdsGoodsCallback(res, ext) {

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

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

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

                    /* 设置精品推荐数据 开始 */

                    // 判断是否有数据
                    if (datas.list && datas.list.length) {

                        // 追加列表
                        this.$set(this.boutiques, "list", [...this.boutiques.list, ...datas.list]);

                        // 设置还有需要加载的内容
                        this.$set(this.paging.boutique, "loading", false);

                        // 如果当前显示“精品推荐”，设置swiper高度
                        if (this.activeTabIndex === 1) {

                            this.$nextTick(() => {

                                setTimeout(() => {

                                    // 重新设置swiper高度
                                    this.$set(this.swiperExce, "offsetHeight", this.$refs.boutique.offsetHeight);
                                }, 500);
                            });
                        }
                    } else {

                        // 没有需要加载的内容，停止上拉加载
                        this.$set(this.paging.boutique, "loading", true);
                    }

                    /* 设置精品推荐数据 结束 */

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

                    // 获取精品推荐失败
                    Toast(res.message);
                } else {

                    // 获取精品推荐失败
                    Toast("获取精品推荐失败");
                }
            },

            /**
             * 店铺商品推荐
             * @param {int} page [页码]
             */
            shopRecommendGoods(page) {

                // 判断必要参数
                if (this.shopId) {

                    // 加载中
                    this.$set(this.paging.commodity, "loading", true);

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

                    // 请求接口
                    this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
                        shop_id: this.shopId,
                        page: page
                    }, this.shopRecommendGoodsCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 店铺商品推荐回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            shopRecommendGoodsCallback(res, ext) {

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

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

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

                    /* 设置商品推荐数据 开始 */

                    // 判断是否有数据
                    if (datas.list && datas.list.length) {

                        // 追加列表
                        this.$set(this.commoditys, "list", [...this.commoditys.list, ...datas.list]);

                        // 设置还有需要加载的内容
                        this.$set(this.paging.commodity, "loading", false);

                        // 如果当前显示“全部商品”，设置swiper高度
                        if (this.activeTabIndex === 2) {

                            this.$nextTick(() => {

                                setTimeout(() => {

                                    // 重新设置swiper高度
                                    this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity.offsetHeight);
                                }, 500);
                            });
                        }
                    } else {

                        // 没有需要加载的内容，停止上拉加载
                        this.$set(this.paging.commodity, "loading", true);
                    }

                    /* 设置商品推荐数据 结束 */

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

                    // 获取商品推荐失败
                    Toast(res.message);
                } else {

                    // 获取商品推荐失败
                    Toast("获取商品推荐失败");
                }
            },

            /**
             * 调用通用跳转
             * @param {object} item [通用跳转对象]
             */
            toDetail(item) {

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

                    // 调用通用跳转
                    this.$parent.gotoDetail(item);
                }
            },

            /**
             * 特定跳转商品详情
             * @param {object} item [跳转对象]
             */
            toCommodityDetail(item) {

                // 设置跳转参数
                Object.assign(item, {
                    type: "2",
                    to: item.id
                });

                // 调用通用跳转
                this.toDetail(item);
            },

            /**
             * 切换tab
             * @param {object} item [当前备切换的标签对象]
             */
            changeTab(item) {

                // 判断点击的是非当前活动项目
                if (!item.active) {

                    // 清理所有活动状态
                    for (let i = 0; i < this.tabs.length; i++) {
                        this.$set(this.tabs[i], "active", false);
                    }

                    // 设置新的活动项目
                    this.$set(item, "active", true);

                    // 设置新的活动索引
                    for (let i = 0; i < this.tabs.length; i++) {
                        if (item.title === this.tabs[i].title) {
                            this.$set(this, "activeTabIndex", i);
                            break;
                        }
                    }

                    // 判断是否需要执行切换
                    if (this.$refs.swiperBox.active !== this.activeTabIndex) {

                        // 切换到对应swiper
                        this.$refs.swiperBox.swipeTo(this.activeTabIndex);

                        // 设置swiper高度
                        this.setSwiperHeight();
                    }
                }
            },

            /**
             * swiper滑动改变
             * @param {int} index [swiper索引]
             */
            swiperChange(index) {

                // 如果当前tabs不一致，并且不是在切换中，设置tabs联动
                if (index !== this.activeTabIndex) {

                    // 清理所有活动状态
                    for (let i = 0; i < this.tabs.length; i++) {
                        this.$set(this.tabs[i], "active", false);
                    }

                    // 设置新的活动项目
                    this.$set(this.tabs[index], "active", true);

                    // 设置新的活动索引
                    this.$set(this, "activeTabIndex", index);

                    // 设置swiper高度
                    this.setSwiperHeight();
                }
            },

            /**
             * 设置swiper高度
             */
            setSwiperHeight() {

                this.$nextTick(() => {

                    // 设置swiper高度
                    switch (this.activeTabIndex) {
                        case 0:
                            this.$set(this.swiperExce, "offsetHeight", this.$refs.brief.offsetHeight);
                            break;
                        case 1:
                            this.$set(this.swiperExce, "offsetHeight", this.$refs.boutique.offsetHeight);
                            break;
                        case 2:
                            this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity.offsetHeight);
                            break;
                    }
                });
            },

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

                // 判断后退
                if (typeof this.$parent.back === "function") {
                    this.$parent.back();
                } else {
                    window.history.go(-1);
                }
            },

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

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

            /**
			 * 滚动条滚动/touchmove监听处理
			 * @param {object} e [滚动条对象]
			 * @param {boolean} isTimeout [是否为setTimeout方法调用]
			 */
			onPageScrollFun(e, isTimeout = false) {

				// 获取滚动条位置，浏览器兼容处理
                let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;

                // 滚动控制高度
                let maxHeight = 200;

                // 动态获取百分比分配比例
                if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
                    maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
                }

                if (scrollTop >= 0 && scrollTop <= maxHeight) {
                    this.opacity = scrollTop / maxHeight;
                } else if (scrollTop > maxHeight) {
                    this.opacity = 1;
                } else {
                    this.opacity = 0;
                }

                if (!isTimeout) {

                    if (this.timer) {
                        clearTimeout(this.timer);
                    }

                    // 倒计时校正滚动条位置
                    this.timer = setTimeout(function(options) {

                        // 递归
                        options.context.onPageScrollFun(options.e, true);
                    }, 1000, {e, context: this});
                }
			}
        },
        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() {

            // 监听滚动条，设置滚动条推动渐变颜色和图片
            window.addEventListener("scroll", this.onPageScrollFun, true);

            // 获取并设置分享参数

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

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

            // 设置初始化tab
            this.$nextTick(() => {

                // 设置初始化tab
                this.changeTab(this.tabs[2]);
            });
        }
    }
</script>

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