w-front-end / select_good · Files

<template>
    <div class="optimization-box">

        <!-- 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-search-box class="back-search-box" :style="{'paddingTop': (isAndroid.value ? '0px' : ($parent.top.value) + 'px')}" ref="backBox" v-if="!isWeChat.value && showSearch" @back="back" @toSearch="toSearch"
            :backs="backs">
        </back-search-box>

        <!-- 后退导航 -->
        <!-- <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="isCNLive.value && $route.query.showBack == true" @back="back"
            :backs="backs">
        </back-box> -->

        <!-- pl -->
        <div class="pl" :class="{'is-cnlive': !isWeChat.value, 'is-open-app': $parent.isOpenApp.value}" :style="{'paddingTop': (isAndroid.value ? '0px' : ($parent.top.value) + 'px')}" v-if="showSearch"></div>

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

            <!-- 主Banner -->
            <div class="section banner-box" :class="{'bottom': !showNavs}" v-if="swipers && swipers.length">
                <swiper-box
                    :swipers="swipers"
                    :options="{
                        showIndicators: true,
                        autoplay: 5000
                    }">
                </swiper-box>
            </div>

            <!-- 其它频道 -->
            <div class="section page-list" v-if="swiperNavs && showNavs">

                <!-- 轮播展示其它频道 -->
                <icon-swiper-box @jump="toPage"
                    :icons="swiperNavs"
                    no-radius="true">
                </icon-swiper-box>
            </div>

            <!-- 折扣专区/积分商城/电视购物 -->
            <div class="section-col-2" v-if="(showIntegral && pointsLists && pointsLists.length) || (showTVGoods && tvGoodsLists && tvGoodsLists.length)">

                <!-- 折扣专区 -->
                <div class="section-2 shop-list" v-if="discountLists && discountLists.length">

                    <!-- 标题 -->
                    <text-bg-title-com
                        :titles="{
                            bg: 'static/img/text_bg_title_bg_3.png'
                        }">

                        <!-- 倒计时组件 -->
                        <count-down-com slot="extend" v-if="discountTime && discountTime > 0 && discountType == '1'"
                            :time="parseInt(discountTime) * 1000"
                            sty="6"
                            type='h'
                            prefixImg='static/img/icon_discount.png'>
                        </count-down-com>
                    </text-bg-title-com>

                    <!-- 商品列表 -->
                    <div class="list-box">

                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="discountData.now && discountData.now.length && discountData.now[0].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])"
                                    :item="discountData.now[0]"
                                    pid="5">

                                    <!-- 折扣角标 -->
                                    <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)">
                                        {{discountData.now[0].tag || getDiscount(discountData.now[0].price, discountData.now[0].prices)}}
                                    </div>
                                </goods-item-10>
                            </div>
                        </transition>

                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="discountData.now && discountData.now.length && discountData.now[1].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])"
                                    :item="discountData.now[1]"
                                    pid="5">

                                    <!-- 折扣角标 -->
                                    <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)">
                                        {{discountData.now[1].tag || getDiscount(discountData.now[1].price, discountData.now[1].prices)}}
                                    </div>
                                </goods-item-10>
                            </div>
                        </transition>
                    </div>
                </div>

                <!-- 积分商城 -->
                <div class="section-2 shop-list" ref="integralMallBox" v-if="showIntegral && pointsLists && pointsLists.length">

                    <!-- 标题 -->
                    <text-bg-title-com
                        :titles="{
                            bg: 'static/img/text_bg_title_bg_4.png'
                        }">
                    </text-bg-title-com>

                    <!-- 商品列表 -->
                    <div class="list-box">

                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[0].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" @jump="pointsMore(pointsData.now[0])"
                                    :item="pointsData.now[0]"
                                    pid="4">
                                </goods-item-10>
                            </div>
                        </transition>
                        
                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[1].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" @jump="pointsMore(pointsData.now[1])"
                                    :item="pointsData.now[1]"
                                    pid="4">
                                </goods-item-10>
                            </div>
                        </transition>
                    </div>
                </div>
                
                <!-- 电视购物 -->
                <div class="section-2 shop-list" v-if="showTVGoods && tvGoodsLists && tvGoodsLists.length">

                    <!-- 标题 -->
                    <text-bg-title-com
                        :titles="{
                            bg: 'static/img/text_bg_title_bg_6.png'
                        }">
                    </text-bg-title-com>

                    <!-- 商品列表 -->
                    <div class="list-box">

                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="tvGoodsData.now && tvGoodsData.now.length && tvGoodsData.now[0].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" @jump="tvGoodsMore(tvUrl)"
                                    :item="tvGoodsData.now[0]"
                                    pid="5">
                                </goods-item-10>
                            </div>
                        </transition>
                        
                        <!-- 动画 -->
                        <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">

                            <!-- 区域容器 -->
                            <div class="list" v-if="tvGoodsData.now && tvGoodsData.now.length && tvGoodsData.now[1].id">

                                <!-- 商品展示样式 10 -->
                                <goods-item-10 class="item" @jump="tvGoodsMore(tvUrl)"
                                    :item="tvGoodsData.now[1]"
                                    pid="5">
                                </goods-item-10>
                            </div>
                        </transition>
                    </div>
                </div>
            </div>

            <!-- 折扣专区 -->
            <div class="section shop-list" v-else-if="discountLists && discountLists.length">

                <!-- 标题 -->
                <text-bg-title-com @more="toDiscountList"
                    :titles="{
                        bg: 'static/img/text_bg_title_bg.png',
                        more: true
                    }">

                    <!-- 倒计时组件 -->
                    <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>

                <!-- 商品列表 -->
                <div class="list-box">

                    <!-- 商品展示样式 2 -->
                    <goods-item-2 class="item" v-for="(item, index) in discountLists" :key="index" @jump="toDiscountList(item)"
                        :item="item"
                        pid="4">

                        <!-- 折扣角标 -->
                        <div class="discount-flag" slot="flag" v-if="parseFloat(item.price) < parseFloat(item.prices)">
                            {{item.tag || getDiscount(item.price, item.prices)}}
                        </div>
                    </goods-item-2>
                </div>
            </div>

            <!-- 锚点区域 -->
            <!-- <div class="section anchor-list" v-if="navs && navs.length"> -->

                <!-- 锚点区域（单个图标） -->
                <!-- <icons-com v-for="(item, index) in navs" :key="index" @jump="anchor(item)"
                    :item="item">
                </icons-com>
            </div> -->

            <!-- 积分商城 -->
            <!-- <div class="section shop-list" ref="integralMallBox" v-if="showIntegral && pointsLists && pointsLists.length"> -->

                <!-- 标题 -->
                <!-- <text-bg-title-com
                    :titles="{
                        bg: 'static/img/text_bg_title_bg_4.png'
                    }">
                </text-bg-title-com> -->

                <!-- 商品列表 -->
                <!-- <div class="list-box"> -->

                    <!-- 商品展示样式 2 -->
                    <!-- <goods-item-2 class="item" v-for="(item, index) in pointsLists" :key="index" @jump="pointsMore"
                        :item="item"
                        pid="5">
                    </goods-item-2>
                </div> -->

                <!-- 积分展示 -->
                <!-- <more-com class="points-box" @more="pointsMore"
                    :mores="points">
                </more-com>
            </div> -->

            <!-- 品质优选 -->
            <div class="shop-list-box" ref="optimizationBox" v-if="showOptimization && quality && quality.length">

                <div class="section shop-list" v-for="(items, index) in quality" :key="index" @click="toOptimizationList(items)">

                    <!-- 头图 -->
                    <div class="header-img-box">
                        <img :src="items.header_img + SIGN.BIG" class="header-img" />
                    </div>

                    <!-- 商品列表 -->
                    <div class="list-box">

                        <!-- 商品展示样式 2 -->
                        <goods-item-2 class="item" v-for="(item, i) in items.list" :key="i"
                            :item="item"
                            pid="1">
                        </goods-item-2>
                    </div>
                </div>
            </div>

            <!-- 热销排行 -->
            <!-- <div class="section hot-box" ref="hotBox" @click="toHotSaleList"> -->
                
                <!-- 3D轮播 -->
                <!-- <swiper-3d-com @onMainSlideClick="toHotSaleList"
                    :items="sales"
                    :options="salesOptions">
                </swiper-3d-com>
            </div> -->

            <!-- 热销排行 -->
            <div class="section hot-box" ref="hotBox" v-if="sales && sales.length">
                
                <!-- 商品样式 10 滑动 -->
                <!-- <horiz-list class="components-box"
                    :lists="sales"
                    com="10"
                    pid="1"> -->

                    <!-- 标题 -->
                    <!-- <text-bg-title-com slot="title-box"
                        :titles="{
                            bg: 'static/img/text_bg_title_bg_5.png',
                            more: true
                        }">
                    </text-bg-title-com>
                </horiz-list> -->

                <!-- 热销商品自动滚动 -->
                <marquee-box class="marquee-box" @jump="toDetail"
                    :lists="sales"
                    :options="marqueeOptions">

                    <!-- 标题 -->
                    <text-bg-title-com slot="title-box" @more="toHotSaleList"
                        :titles="{
                            bg: 'static/img/text_bg_title_bg_5.png',
                            more: true
                        }">
                    </text-bg-title-com>
                </marquee-box>
            </div>

            <!-- 猜你喜欢 -->
            <!-- <div class="section goods-list" ref="guessLikeBox"> -->

                <!-- 标题 -->
                <!-- <text-title-box @more='changeGoods'
                    :titles="{
                        title: '猜你喜欢',
                        more: true,
                        moreText: '换一组',
                        icon: 'static/img/icon_refresh.png'
                    }">
                </text-title-box> -->

                <!-- 商品样式 7 列表 -->
                <!-- <column-list-box class="column-list-box" v-if="likeLists && likeLists.list && likeLists.list.length && likeLists.list[likeNum] && likeLists.list[likeNum].length" @jump="toDetail" @primary="primary"
                    :lists="likeLists.list[likeNum]"
                    com="7">
                </column-list-box>
            </div> -->

            <!-- 副Banner -->
            <div class="section sub-banner-box" v-if="subBanner && subBanner.length">
                <!-- <img :src="subBanner.simg" class="sub-banner-img" @click="toBanner(subBanner)" /> -->
                <swiper-box
                    :swipers="subBanner"
                    :options="{
                        showIndicators: true,
                        autoplay: 5000
                    }">
                </swiper-box>
            </div>

            <!-- 好物推荐（瀑布流） -->
            <div class="section goods-list" v-if="showGoodsList">

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

                    <!-- 标题 -->
                    <text-title-box v-if="shopGoodsLists && shopGoodsLists.list && shopGoodsLists.list.length"
                        :titles="{
                            title: '好物推荐'
                        }">
                    </text-title-box>

                    <!-- 商品样式 7 列表 -->
                    <column-list-box class="column-list-box" v-if="shopGoodsLists && shopGoodsLists.list && shopGoodsLists.list.length" @jump="toDetail" @primary="primary"
                        :lists="shopGoodsLists.list"
                        com="7">
                    </column-list-box>
                </van-list>
            </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 backSearchBox from "@/components/backSearchBox/backSearchBox";
    import swiperBox from "@/components/swiper/swiper";
    import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
    import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
    import countDownCom from "@/components/countDownCom/countDownCom";
    import marqueeBox from '@/components/marqueeBox/marqueeBox';
    import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
    import goodsItem10 from "@/components/goodsItem_10/goodsItem_10";
    import iconsCom from "@/components/iconsCom/iconsCom";
    import swiper3dCom from "@/components/swiper3dCom/swiper3dCom";
    import horizList from "@/components/horizList/horizList";
    import moreCom from "@/components/moreCom/moreCom";
    import textTitleBox from "@/components/textTitleBox/textTitleBox";
    import columnListBox from "@/components/columnListBox/columnListBox";
    import gotoTop from "@/components/gotoTop/gotoTop";

    Vue.use(List);

    export default {
        name: 'optimization',
        data () {
            return {
                title: "",                      // 标题
                backs: null,                    // 后退按钮组
                swipers: null,                  // 主Banner
                swiperNavs: null,               // 其它频道列表
                navs: null,                     // 导航
                discountType: null,             // 折扣专区状态，0：未开始；1：进行中；2：已结束
                discountTimeout: 0,             // 倒计时超时时间计数
                discountTime: null,             // 倒计时时间
                discountLists: null,            // 折扣专区数据
                discountData: {
                    now: [],                    // 当前折扣专区数据（用于动画展示）
                    next: 0,                    // 下一个需要展示的折扣专区数组下标（折扣专区总数据）
                    index: 0,                   // 下一个需要展示的位置下标（折扣专区now数据）
                    interval: null              // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了
                },
                quality: null,                  // 品质优选
                salesOptions: null,             // 热销排行选项
                sales: null,                    // 热销排行数据
                marqueeOptions: {               // 无限滚动配置选项
                    minCount: 10,               // 初始化最小项目总数量
                    timer: 30                   // 轮训时间
                },
                showSearch: false,              // 是否显示搜索，默认不显示
                showNavs: false,                // 是否显示其它频道跳转，默认不显示
                showIntegral: false,            // 是否显示积分商城模块，默认不显示
                showOptimization: true,         // 默认显示品质优选，高版本不显示品质优选
                toAddToShoppingCart: false,     // 是否支持App内“好物推荐”的“+”加入购物车，默认跳转详情
                toJumpToShopSearch: false,      // 是否支持App内搜索栏跳转原生搜索页面，默认跳转H5搜索页面
                points: null,                   // 用户积分
                pointsLists: null,              // 积分商城数据
                pointsData: {
                    now: [],                    // 当前积分商城数据（用于动画展示）
                    next: 0,                    // 下一个需要展示的积分商城数组下标（积分商城总数据）
                    index: 0,                   // 下一个需要展示的位置下标（积分商城now数据）
                    interval: null              // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了
                },
                showTVGoods: false,             // 是否显示电视购物模块，默认不显示
                tvGoodsLists: null,             // 积分商城数据
                tvGoodsData: {
                    now: [],                    // 当前电视购物数据（用于动画展示）
                    next: 0,                    // 下一个需要展示的电视购物数组下标（电视购物总数据）
                    index: 0,                   // 下一个需要展示的位置下标（电视购物now数据）
                    interval: null              // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了
                },
                tvUrl: null,                    // 电视购物跳转连接
                likeLists: null,                // 猜你喜欢列表
                likeNum: 0,                     // 猜你喜欢二维数组当前显示的下标
                subBanner: null,                // 副Banner
                showGoodsList: false,           // 推荐商品瀑布流显示控制
                shopGoodsLists: {               // 推荐商品瀑布流
                    loading: false,
                    loadingNow: false,
                    finished: false,
                    page: 1,
                    list: []
                }
            }
        },
        computed: {

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

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

                    // 折扣
                    let discount = ((Math.floor(x * 1000) / 1000) * 10).toString();

                    // 判断折扣大于0
                    if (discount > 0) {

                        // 判断折扣是否太长，如果太长截断
                        if (discount.length > 3) {
                            discount = discount.substr(0, 3);
                        }

                        // 返回折扣数据
                        return discount + '折';
                    }
                }
            }
        },
        components: {
            callAppBox,
            backBox,
            backSearchBox,
            swiperBox,
            iconSwiperBox,
            textBgTitleCom,
            countDownCom,
            marqueeBox,
            goodsItem2,
            goodsItem10,
            iconsCom,
            swiper3dCom,
            horizList,
            moreCom,
            textTitleBox,
            columnListBox,
            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"
                        },
                        search: {
                            text: '请输入你要搜索的商品'
                        },
                        funcArray: [
                            {
                                icon: "static/img/icon_share.png",
                                func: this.toShare
                            }
                        ]
                    }
                });
            // }

            // 优选页面接口
            this.index();

            // 商品列表
            // this.shopGoodsList();

            // 设置锚点定位数据
            this.$set(this, 'navs', [
                {
                    ref: 'optimizationBox',
                    simg: 'static/img/icon_nav_optimization.png',
                    title: '品质优选'
                },
                {
                    ref: 'hotBox',
                    simg: 'static/img/icon_nav_hot_sale.png',
                    title: '热销排行'
                },
                {
                    ref: 'integralMallBox',
                    simg: 'static/img/icon_nav_points_mall.png',
                    title: '积分商城'
                },
                {
                    ref: 'guessLikeBox',
                    simg: 'static/img/icon_guess_like.png',
                    title: '猜你喜欢'
                }
            ]);

            // 热销排行背景图
            this.$set(this, 'salesOptions', {
                bg: 'static/img/hot_img_bg.png'
            });

            // 用户积分数据设置
            this.$set(this, 'points', {
                key: '我的积分',
                value: '0',
                moreText: '查看更多',
                icon: 'static/img/icon_more_arrow_right.png'
            });
        },
        methods: {

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

                // 判断是否可加载
                if (this.shopGoodsLists.loadingNow === false && this.shopGoodsLists.finished === false) {
                    
                    // 商品列表
                    this.shopGoodsList();
                }
            },

            /**
             * 优选页面接口
             */
            index() {

                // 校验登录
                if (this.$parent.checkLogin()) {

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

                    // 请求接口
                    this.http("/Api/" + this.getApiVersion().good + "/index", {
                        uid: this.getStore("uid") || 0
                    }, this.indexCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 优选页面接口回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            indexCallback(res, ext) {

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

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

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

                    /* 获取优选库“优选”数据 开始 */

                    // 设置Banner
                    if (datas.banner && datas.banner.length) {
                        this.$set(this, 'swipers', datas.banner);
                    }

                    // 设置单条banner(ads)
                    if (datas.ads && datas.ads.length) {
                        this.$set(this, 'subBanner', datas.ads);
                    }

                    // 设置导航
                    if (datas.navigate && datas.navigate.length) {
                        this.$set(this, 'swiperNavs', datas.navigate);
                    }

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

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

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

                        // 设置倒计时超时轮训
                        let timeoutInterval = setInterval(() => {

                            // 倒计时超时时间计数
                            this.discountTimeout++;

                            // 判断是否超时
                            if (this.discountTimeout >= this.discountTime) {

                                // 停止倒计时
                                clearInterval(timeoutInterval);

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

                    // 设置折扣专区列表数据
                    this.$set(this, 'discountLists', datas.discount);

                    // 判断品质优选是否有数据
                    if (datas.quality && datas.quality.length) {

                        // 设置品质优选数据
                        this.$set(this, 'quality', [
                            {
                                header_img: 'static/img/box_banner.jpg',
                                list: datas.quality
                            }
                        ]);
                    }

                    // 判断是否有热销商品
                    if (datas.sale && datas.sale.length) {

                        // 热销排行数据
                        this.$set(this, 'sales', datas.sale);
                    }

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

                        // 设置显示电视购物模块
                        this.$set(this, 'showTVGoods', true);

                        // 判断App版本，判断是否显示积分商城模块
                        if (typeof this.$parent.compareVersion === 'function') {

                            // 获取平台版本
                            let version = this.$route.query.version;

                            // 根据平台，判断是否符合版本，支持列表的“+”加入购物车/搜索跳转原生
                            if ((this.isiPhone.value && this.$parent.compareVersion(version, '2.0.0')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.7.0'))) {
                                
                                // 设置列表的“+”加入购物车/搜索跳转原生
                                this.$set(this, 'toAddToShoppingCart', true);
                                this.$set(this, 'toJumpToShopSearch', true);
                            }

                            // 根据平台，判断是否符合版本，显示搜索和其它导航菜单
                            if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.6')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.5.3'))) {
                                
                                // 设置显示搜索和其它导航菜单模块
                                this.$set(this, 'showSearch', true);
                                this.$set(this, 'showNavs', true);
                                this.$set(this, 'showOptimization', false);
                            }

                            // 根据平台，判断是否符合版本，显示积分商城
                            if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.1')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.7.3.3'))) {
                                
                                // 设置显示积分商城模块
                                this.$set(this, 'showIntegral', true);
                            }
                        }
                    }

                    // 设置用户积分
                    this.$set(this.points, 'value', datas.grade);

                    // 判断是否有积分商城模块
                    if (this.showIntegral && datas.integral_goods && datas.integral_goods.length) {

                        // 判断折扣专区是否有数据
                        if (this.discountLists.length) {

                            // 当前展示的折扣专区数据（兼容数据不足 2 个的情况）
                            if (this.discountLists.length >= 2) {
                                this.$set(this.discountData, 'now', [this.discountLists[0], this.discountLists[1]]);
                            } else {
                                this.$set(this.discountData, 'now', [this.discountLists[0]]);
                            }

                            // 设置折扣专区下一条数据数组下标（根据数组长度，兼容数据 <= 2 的情况）
                            this.$set(this.discountData, 'next', this.discountData.now.length < this.discountLists.length ? this.discountData.now.length : 0);

                            // 设置折扣专区计时器，每3秒切换一次数据
                            this.$nextTick(() => {

                                // 判断是否已有轮训对象
                                if (!this.discountData.interval) {

                                    // 判断数据数量是否 > 2 ，如果是，执行切换轮训
                                    if (this.discountData.now.length < this.discountLists.length) {

                                        // 轮训计时器
                                        this.discountData.interval = setInterval(() => {
                                            
                                            // 切换折扣专区数据
                                            this.fade(this.discountData, this.discountLists);
                                        }, 5000);
                                    }
                                }
                            });
                        }

                        // 积分商城数据
                        this.$set(this, 'pointsLists', datas.integral_goods);

                        // 当前展示的积分商城数据（兼容数据不足 2 个的情况）
                        if (this.pointsLists.length >= 2) {
                            this.$set(this.pointsData, 'now', [this.pointsLists[0], this.pointsLists[1]]);
                        } else {
                            this.$set(this.pointsData, 'now', [this.pointsLists[0]]);
                        }

                        // 设置积分商城下一条数据数组下标
                        this.$set(this.pointsData, 'next', this.pointsData.now.length < this.pointsLists.length ? this.pointsData.now.length : 0);

                        // 设置积分商城计时器，每3秒切换一次数据
                        this.$nextTick(() => {

                            // 判断是否已有轮训对象
                            if (!this.pointsData.interval) {

                                // 判断数据数量是否 > 2 ，如果是，执行切换轮训
                                if (this.pointsData.now.length < this.pointsLists.length) {

                                    // 和折扣专区岔开，延时1秒执行
                                    setTimeout(() => {
                                        
                                        // 随机生成轮训时间
                                        let timer = (parseInt(Math.random() * (500 + 1) + 5000, 10) || 5000);

                                        // 轮训计时器
                                        this.pointsData.interval = setInterval(() => {
                                            
                                            // 切换积分商城数据
                                            this.fade(this.pointsData, this.pointsLists);
                                        }, timer);
                                    }, 1000);
                                }
                            }
                        });
                    } else {

                        // 如果不需要展示积分商城/积分商城数据为空，并且折扣专区商品数量大于3，重新设置折扣专区模块商品数量
                        if (this.discountLists.length > 3) {

                            // 设置折扣专区模块产品数量为3个
                            this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
                        }

                        // 判断是否有积分商城，如果有，删除积分商城
                        for (let i = 0; i < this.navs.length; i++) {

                            // 如果是积分商城
                            if (this.navs[i].title === '积分商城') {

                                // 删除积分商城的navs项目
                                this.navs.splice(i, 1);
                                break;
                            }
                        }

                        // 设置隐藏积分商城模块
                        this.$set(this, 'showIntegral', false);
                    }

                    // 判断是否有电视购物模块
                    if (datas.tv_goods && datas.tv_goods.length) {

                        // 判断折扣专区是否有数据
                        if (this.discountLists.length) {

                            // 当前展示的折扣专区数据（兼容数据不足 2 个的情况）
                            if (this.discountLists.length >= 2) {
                                this.$set(this.discountData, 'now', [this.discountLists[0], this.discountLists[1]]);
                            } else {
                                this.$set(this.discountData, 'now', [this.discountLists[0]]);
                            }

                            // 设置折扣专区下一条数据数组下标（根据数组长度，兼容数据 <= 2 的情况）
                            this.$set(this.discountData, 'next', this.discountData.now.length < this.discountLists.length ? this.discountData.now.length : 0);

                            // 设置折扣专区计时器，每3秒切换一次数据
                            this.$nextTick(() => {

                                // 判断是否已有轮训对象
                                if (!this.discountData.interval) {

                                    // 判断数据数量是否 > 2 ，如果是，执行切换轮训
                                    if (this.discountData.now.length < this.discountLists.length) {

                                        // 轮训计时器
                                        this.discountData.interval = setInterval(() => {
                                            
                                            // 切换折扣专区数据
                                            this.fade(this.discountData, this.discountLists);
                                        }, 5000);
                                    }
                                }
                            });
                        }

                        // 设置电视购物页面地址
                        this.$set(this, 'tvUrl', datas.tv_url);

                        // 电视购物数据
                        this.$set(this, 'tvGoodsLists', datas.tv_goods);

                        // 当前展示的电视购物数据（兼容数据不足 2 个的情况）
                        if (this.tvGoodsLists.length >= 2) {
                            this.$set(this.tvGoodsData, 'now', [this.tvGoodsLists[0], this.tvGoodsLists[1]]);
                        } else {
                            this.$set(this.tvGoodsData, 'now', [this.tvGoodsLists[0]]);
                        }

                        // 设置电视购物下一条数据数组下标
                        this.$set(this.tvGoodsData, 'next', this.tvGoodsData.now.length < this.tvGoodsLists.length ? this.tvGoodsData.now.length : 0);

                        // 设置电视购物计时器，每3秒切换一次数据
                        this.$nextTick(() => {

                            // 判断是否已有轮训对象
                            if (!this.tvGoodsData.interval) {

                                // 判断数据数量是否 > 2 ，如果是，执行切换轮训
                                if (this.tvGoodsData.now.length < this.tvGoodsLists.length) {

                                    // 和折扣专区岔开，延时1秒执行
                                    setTimeout(() => {
                                        
                                        // 随机生成轮训时间
                                        let timer = (parseInt(Math.random() * (500 + 1) + 5000, 10) || 5000);

                                        // 轮训计时器
                                        this.tvGoodsData.interval = setInterval(() => {
                                            
                                            // 切换电视购物数据
                                            this.fade(this.tvGoodsData, this.tvGoodsLists);
                                        }, timer);
                                    }, 1000);
                                }
                            }
                        });

                        // 显示推荐商品瀑布流
                        this.$set(this, 'showGoodsList', true);
                    } else {

                        // 如果不需要展示电视购物/电视购物数据为空，并且折扣专区商品数量大于3，重新设置折扣专区模块商品数量
                        if (this.discountLists.length > 3) {

                            // 设置折扣专区模块产品数量为3个
                            this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
                        }

                        // 设置隐藏电视购物模块
                        this.$set(this, 'showTVGoods', false);
                    }

                    // 判断是否有猜你喜欢
                    if (datas.recommend_goods && datas.recommend_goods.length) {

                        // 猜你喜欢产品列表
                        this.$set(this, 'likeLists', {
                            list: datas.recommend_goods
                        });
                    }

                    /* 获取优选库“优选”数据 结束 */

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

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

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

            /**
             * 商品列表
             */
            shopGoodsList() {

                // 校验登录
                if (this.$parent.checkLogin()) {

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

                    // 设置开始加载
                    this.$set(this.shopGoodsLists, 'loading', true);
                    this.$set(this.shopGoodsLists, 'loadingNow', true);

                    // 请求接口
                    this.http("/Api/" + this.getApiVersion().index + "/shopNewGoodsList", {
                        page: this.shopGoodsLists.page
                    }, this.shopGoodsListCallback, {
                        method: "POST"
                    });
                }
            },

            /**
             * 商品列表回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            shopGoodsListCallback(res, ext) {

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

                // 设置加载结束
                this.$set(this.shopGoodsLists, 'loading', false);
                this.$set(this.shopGoodsLists, 'loadingNow', false);

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

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

                    /* 获取商品列表数据 开始 */

                    // 判断是否有商品
                    if (datas && datas.length) {

                        // 设置列表数据
                        this.$set(this.shopGoodsLists, 'list', [...this.shopGoodsLists.list, ...datas]);

                        // 设置页码
                        this.$set(this.shopGoodsLists, 'page', ++this.shopGoodsLists.page);
                    } else {

                        // 设置全部商品加载完成
                        this.$set(this.shopGoodsLists, 'finished', true);
                    }

                    /* 获取商品列表数据 结束 */

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

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

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

            /**
             * 跳转到其它模块
             * @param {Object} item [通用跳转对象]
             */
            toPage(item) {

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

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

            /**
             * Banner跳转
             * @param {Object} item [跳转对象]
             */
            toBanner(item) {

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

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

            /**
             * 跳转折扣专区列表
             * @param {Object} item [通用跳转对象]
             */
            toDiscountList(item) {

                // 跳转封装
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/discountList' + (item && item.id ? '?user_selected_goods_id=' + item.id : ''),
                        shop_type: ''
                    };
                    
                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

            /**
             * 锚点定位
             * @param {Object} item [数据对象]
             */
            anchor(item) {

                // 判断锚点是否存在
                if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {

                    // 根据头部设置锚点位置
                    let safeDistance = 0;

                    // 判断是否有callApp组件
                    if (typeof this.$refs.callApp === 'object') {
                        safeDistance += this.$refs.callApp.$el.clientHeight;
                    }

                    // 判断是否有backBox组件
                    if (typeof this.$refs.backBox === 'object') {
                        safeDistance += this.$refs.backBox.$el.clientHeight;
                    }

                    document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750));
                }
            },

            /**
             * 跳转品质优选列表
             * @param {Object} item [通用跳转对象]
             */
            toOptimizationList(item) {

                // 跳转封装
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/optimizationList',
                        shop_type: ''
                    };

                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

            /**
             * 跳转热销排行列表
             * @param {Object} item [通用跳转对象]
             */
            toHotSaleList(item) {

                // 跳转封装
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/hotSaleList',
                        shop_type: ''
                    };

                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

            /**
             * 查看积分详情
             * @param {Object} item [数据对象]
             */
            pointsDetail(item) {

                // 跳转封装
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/goodDetails?goodsId=' + item.id,
                        shop_type: ''
                    };

                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

            /**
             * 查看更多积分
             * @param {Object} item [数据对象]
             */
            pointsMore(item) {

                // 跳转封装
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/pointsMall' + (item && item.id ? '?user_selected_goods_id=' + item.id : ''),
                        shop_type: ''
                    };

                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

            /**
             * 跳转电视购物首页
             * @param {String} url [电视购物首页连接地址]
             */
            tvGoodsMore(url) {

                // 判断必要参数
                if (url) {

                    // 跳转封装
                    if (typeof this.$parent.gotoDetail === 'function') {

                        // 设置跳转参数
                        let params = {
                            type: '34',
                            to: url.indexOf('?') > -1 ? (url + '&type=web') : (url + '?type=web'),
                            shop_type: ''
                        };

                        // 页面跳转
                        this.$parent.gotoDetail(params);
                    }
                }
            },

            /**
             * 换一租
             * @param {Object} item [数据对象]
             */
            changeGoods(item) {

                // 设置数组下标
                this.$set(this, 'likeNum', ++this.likeNum);

                // 判断如果超出数组下标，设置为0，循环数组
                if (this.likeNum >= this.likeLists.list.length) {

                    // 初始化数组下标
                    this.$set(this, 'likeNum', 0);
                }
            },

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

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

                    // 构建通用跳转数据
                    let params = {
                        type: '2',
                        to: item.id,
                        shop_type: item.shop_type
                    };

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

            /**
             * 列表加号按钮事件
             * @param {Object} item [数据对象]
             */
            primary(item) {

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

                    // 判断App版本是否支持“好物推荐”的“+”加入购物车
                    if (this.toAddToShoppingCart) {

                        // 判断库存，无货不允许加入购物车
                        if (item.stock == 0) {

                            // 吐司提示
                            Toast('商品补货中');

                            return false;
                        }

                        // 判断加入购物车函数是否存在
                        if (typeof this.$parent.addToShoppingCart === 'function') {

                            // 加入购物车
                            this.$parent.addToShoppingCart(item);
                        }
                    } else {

                        // 跳转详情页面
                        this.toDetail(item);
                    }
                } else {

                    // 跳转详情页面
                    this.toDetail(item);
                }
            },

            /**
             * 跳转搜索页面
             */
            toSearch() {

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

                    // 判断App版本是否支持跳转原生搜索页面
                    if (this.toJumpToShopSearch) {

                        // 判断加入购物车函数是否存在
                        if (typeof this.$parent.jumpToShopSearch === 'function') {

                            // 跳转搜索页面（原生交互）
                            this.$parent.jumpToShopSearch();
                        }
                    } else {

                        // 跳转搜索页面（H5，跳转封装）
                        this.toSearchH5();
                    }
                } else {

                    // 跳转搜索页面（H5，跳转封装）
                    this.toSearchH5();
                }
            },

            /**
             * 跳转H5搜索页面
             */
            toSearchH5() {

                // 跳转搜索页面（H5，跳转封装）
                if (typeof this.$parent.gotoDetail === 'function') {

                    // 设置跳转参数
                    let params = {
                        type: '5',
                        to: window.location.origin + window.location.pathname + '#/search',
                        shop_type: ''
                    };

                    // 页面跳转
                    this.$parent.gotoDetail(params);
                }
            },

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

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

            /**
             * 淡入淡出切换函数
             * @param {Object} nows [当前数据对象]
             * @param {Object} sources [原始数据对象]
             */
            fade(nows, sources) {

                // 清空当前折扣专区数据（为了实现动画效果，VUE识别）
                this.$set(nows.now, nows.index, []);

                // 延时设置新的数据
                setTimeout(() => {

                    // 更新当前显示的折扣专区数据
                    this.$set(nows.now, nows.index, sources[nows.next]);

                    // 设置下一个更新的数据位置
                    if (nows.index >= nows.now.length - 1) {

                        // 重置index
                        this.$set(nows, 'index', 0);
                    } else {

                        // index++
                        this.$set(nows, 'index', ++nows.index);
                    }

                    // 判断下一条数据是否超出数组下标范围，如果超出，设置为0
                    if (nows.next >= sources.length - 1) {

                        // 重置next
                        this.$set(nows, 'next', 0);
                    } else {

                        // next下移
                        this.$set(nows, 'next', ++nows.next);
                    }
                }, 500);
            },

            /**
             * 后退
             */
            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: 0,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
    
                // 分享详情页
                if (typeof this.$parent.getShareData === "function") {
                    this.$parent.getShareData({
                        type: 0,
                        id: this.$route.query.id || 1,
                        url: ""
                    });
                }
            }

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

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

                    // 优选页面接口
                    this.index();
                }
            });
        }
    }
</script>

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