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
            v-if="$parent.isBack && $parent.isCNLive.value"
            class="back-box"
            :style="'padding-top: ' + $parent.top.value + 'px'"
            @back="back"
            :backs="backs"
        >
        </back-box>
        <!--轮播-->
        <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>

        <!-- 遍历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 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,
        tabBox,
        backBox,
        callAppBox
    },
    created() {
        // 获取优选库精选活动
        this.activityAd();
        // // 判断是否在App内
        // 设置后退按钮组
        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: ""
            });
        }

        // 分享详情页
        if (typeof this.$parent.getShareData === "function") {
            this.$parent.getShareData({
                type: 38,
                id: this.$route.query.id || 0,
                url: ""
            });
        }
    },
    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(37, 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);
                }
                /* 获取优选库精选活动数据 结束 */
            } 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);
            }
        },

        /**
         * 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>