w-front-end / select_good · Files

<template>
    <div class="mall-box">
        
        <!-- 下拉刷新 -->
        <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->
        <!-- 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 class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="$parent.isBack && isCNLive.value" @back="back"
            :backs="backs">
        </back-box>

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

        <!--轮播-->
        <swiper v-if="banner"
            :swipers="banner"
            :options="{
                showIndicators: true
            }">
        </swiper>

        <!--导航-->
        <!-- <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
            :lists="navs"
            com="4">
        </horiz-list> -->

        <!-- 其它频道 -->
        <div class="navs-box" v-if="navs && navs.length">

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

        <!-- 遍历ads，输出列表数据 -->
        <div class="ads-box">
            <div class="ads" v-for="(item, index) in ads" :key="index">
                
                <!--优惠专区-->
                <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
                    :discountZoneInfo="item">
                </discountZone>

                <!--天天特惠-->
                <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
                    :preferentialInfo="item">
                </preferential>

                <!--视听专区-->
                <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
                    :videoAreaInfo="item">
                </videoArea>

                <!-- style_7组件 -->
                <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump="jump" @addCart="addCart"
                    :styles="item">
                </style-7>
            </div>

            <tabBox v-if="tabbar"
                :tabbar="tabbar"
                :tabbarBackgroud="tabbarBackgroud">
            </tabBox>
        </div>
        <!-- </van-pull-refresh> -->
    </div>
</template>

<script>

    // 引入组件
    import { Toast, Indicator } from "mint-ui";
    import callAppBox from "@/components/callAppBox/callAppBox";
    import swiper from "@/components/swiper/swiper";
    import swiperItem from "@/components/swiperItem/swiperItem";
    import discountZone from "@/components/discountZone/discountZone";
    import preferential from "@/components/preferential/preferential";
    import videoArea from "@/components/videoArea/videoArea";
    import style7 from "@/components/style_7/style_7";
    import horizList from "@/components/horizList/horizList";
    import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
    import tabBox from "@/components/tabBox/tabBox";
    import backBox from "@/components/backBox/backBox";

    export default {
        name: "mall",
        data() {
            return {
                title: "", // 标题
                isLoading: false, // 下拉刷新控制
                banner: null, // banner
                navs: null, // 导航
                ads: null, // 列表
                tabbar: null, // tabbar嵌套组件
                tabbarBackgroud: null, // 整体tabbar背景
                backs: null // 后退按钮组
            };
        },
        components: {
            swiper,
            swiperItem,
            discountZone,
            preferential,
            videoArea,
            style7,
            horizList,
            iconSwiperBox,
            tabBox,
            backBox,
            callAppBox
        },
        created() {

            // 获取优选库精选活动
            this.activityAd();
            
            // 设置后退按钮组
            this.$set(this, "backs", {
                title: ""
            });

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

                // 添加后退按钮组“后退”和“分享”按钮
                Object.assign(this.backs, {
                    funcs: {
                        back: {
                            icon: "static/img/icon_back.png"
                        },
                        // funcArray: [
                        //     {
                        //         icon: "static/img/icon_share.png",
                        //         func: this.toShare
                        //     }
                        // ]
                    }
                });
            }
        },
        mounted() {
            
            // 唤起详情页
            if (typeof this.$parent.getOpenApp === "function") {
                this.$parent.getOpenApp({
                    type: 38,
                    id: this.$route.query.id || 0,
                    url: "",
                    ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : "" 
                });
            }

            // 分享详情页
            if (typeof this.$parent.getShareData === "function") {
                this.$parent.getShareData({
                    type: 38,
                    id: this.$route.query.id || 0,
                    url: "",
                    ext: this.$parent.isBack ? JSON.stringify({"isBack":'true'}) : "" 
                });
            }
            // let schemeParams = this.$parent.schemeParams;
            // // 判断如果是分享链接没有isBack=true在后面加上isBack=true；为了在app内打开可以展示
            // if (!schemeParams.isBack) {
            //     // 设置参数
            //    this.$parent.schemeParams = this.$parent.schemeParams + "&isBack=true";
            // }
        },
        methods: {
            // 下拉刷新
            // onRefresh() {

            //     // 下拉刷新中
            //     this.$set(this, "isLoading", true);

            //     // 获取优选库精选活动
            //     this.activityAd();
            // },
            /**
             * 后退
             */
            back() {
                // App内
                if (this.isCNLive.value) {
                    // 调用App，返回按键
                    if (
                        window.webkit &&
                        window.webkit.messageHandlers &&
                        window.webkit.messageHandlers.pop
                    ) {
                        // App内，iOS销毁WebView
                        window.webkit.messageHandlers.pop.postMessage({ body: {} });
                    } else if (window.obj && window.obj.finish) {
                        // App内，Android销毁WebView
                        window.obj.finish();
                    }
                } else {
                    // 后退
                    window.history.go(-1);
                }
            },
            /**
             * 分享
             */
            toShare() {
                // 判断分享
                if (typeof this.$parent.toShare === "function") {
                    this.$parent.toShare(38, this.$route.query.id || 0);
                }
            },
            /**
             * 获取优选库精选活动
             */
            activityAd() {
                // 加载中提示
                Indicator.open("加载中...");

                // 获取证书请求接口
                this.http(
                    "/Api/" + this.getApiVersion().index + "/activityAd",
                    {
                        id: this.$route.query.id
                    },
                    this.activityAdCallback,
                    {
                        method: "post"
                    }
                );
            },

            /**
             * 获取优选库精选活动回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            activityAdCallback(res, ext) {
                // 加载完成
                Indicator.close();

                // 下拉刷新结束
                this.$set(this, "isLoading", false);

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

                    /* 获取优选库精选活动数据 开始 */

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

                    // 设置banner数据
                    if (datas.banner && datas.banner.length) {
                        this.$set(this, "banner", datas.banner);
                    }

                    // 设置navs数据
                    if (datas.navs && datas.navs.length) {
                        this.$set(this, "navs", datas.navs);
                    }

                    // 设置ads数据
                    if (datas.ads && datas.ads.length) {
                        this.$set(this, "ads", datas.ads);
                    }
                    // 设置tabbar数据
                    if (datas.tabbar && datas.tabbar.length) {
                        this.$set(this, "tabbar", datas.tabbar);
                    }
                    // 设置tabbarBackgroud数据
                    if (datas.color && datas.color.length) {
                        this.$set(this, "tabbarBackgroud", datas.color);
                    }
                     // 获取页面title
                    this.$set(this.backs, "title", datas.title);
                    /* 获取优选库精选活动数据 结束 */
                } else if (res.code == 400) {
                    // 获取优选库精选活动失败
                    Toast(res.message);
                } else {
                    // 获取优选库精选活动失败
                    Toast("获取优选库精选活动失败");
                }
            },

            /**
             * 调用通用跳转，navs使用
             * @param {object} item [通用跳转对象]
             */
            toPage(item) {
                // 判断是否有通用跳转函数
                if (typeof this.$parent.gotoDetail === "function") {
                    
                    // 调用通用跳转
                    this.$parent.gotoDetail(item);
                }
            },

            /**
             * 调用通用跳转
             * @param {object} item [通用跳转对象]
             */
            toDetail(item) {
                // 判断是否有通用跳转函数
                if (typeof this.$parent.gotoDetail === "function") {
                    // 调用通用跳转
                    this.$parent.gotoDetail(item);
                }
            },

            /**
             * style7跳转
             * @param {object} item [数据对象]
             */
            jump(item) {
                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {
                    // 构造跳转详情页参数
                    let options = {
                        type: "2",
                        to: item.id,
                        shop_type: item.shop_type
                    };

                    this.$parent.gotoDetail(options);
                }
            },

            /**
             * 加入购物车
             * @param {object} item [数据对象]
             */
            addCart(item) {
                // 通用跳转
                this.jump(item);
            }
        },
        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");
                }
            }
        }
    }
</script>

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