w-front-end / select_good · Files

<template>
    <div class="mall-box">
        
        <!-- Nav导航 -->
        <div class="navs-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="showNavs">

            <!-- H5唤起App组件 -->
            <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
                :callApps="$parent.callApps">
            </call-app-box>

            <!-- 后退导航 -->
            <back-box class="back-box" ref="backBox" v-if="!isWeChat.value" @back="back"
                :backs="backs">
            </back-box>

            <!-- 国内品牌和境外品牌切换tabs -->
            <div class="tabs-box">
                <div class="tab" :class="{'active': isActiveTab == 1}" @click="changeTabs(1)">
                    <div class="title">国内</div>
                    <div class="line"></div>
                </div>
                <div class="tab" :class="{'active': isActiveTab == 2}" @click="changeTabs(2)">
                    <div class="title">境外</div>
                    <div class="line"></div>
                </div>
            </div>
        </div>

        <!-- 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="!isWeChat.value && showNavs"></div>

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

            <!-- 店铺精选 -->
            <div class="section shop-hot" v-if="navs">

                <!-- 标题 -->
                <title-sub-title-hori-com
                    :titles="{
                        title: '旗舰店精选',
                        subTitle: '优质品牌 为你推荐'
                    }">
                </title-sub-title-hori-com>

                <!-- 轮播展示店铺 -->
                <icon-swiper-box @jump="toShop"
                    :icons="navs">
                </icon-swiper-box>
            </div>

            <!-- 店铺列表 -->
            <div class="shop-list-box" v-if="shopLists && shopLists.length">

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

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

                        <template v-if="items.goods && items.goods.length">

                            <!-- 头图 -->
                            <div class="header-img-box">
                                <div class="img-box" v-if="items.img">
                                    <img :src="items.img + SIGN.BIG" class="header-img" />
                                </div>
                                <div class="img-box" v-else>
                                    <img src="static/img/header_img_default.jpg" class="header-img" />
                                    <div class="title-box">
                                        <div class="title">{{items.title}}</div>
                                    </div>
                                </div>
                            </div>

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

                                <!-- 商品展示样式 2 -->
                                <goods-item-2 class="item" v-for="(item, i) in items.goods" :key="i"
                                    :item="item"
                                    pid="3">
                                </goods-item-2>
                            </div>
                        </template>
                    </div>
                </van-list>
            </div>
        </div>
    </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 titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom";
    import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
    import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";

    Vue.use(List);

    export default {
        name: "mallBox",
        data() {
            return {
                title: "",                  // 标题
                backs: null,                // 后退按钮组
                isActiveTab: 0,             // 当前活动tab
                CALL_STATUS: {
					INIT: "init",           // 初始化页面
					REFRESH: "refresh",		// 刷新页面
					LOAD_MORE: "loadMore"	// 加载更多
				},
                navs: null,                 // 导航
                showNavs: false,            // 是否显示其它频道跳转，默认不显示
                shopListsPage: {},          // 店铺商品列表分页相关参数
                shopLists: null             // 店铺商品列表
            };
        },
        components: {
            callAppBox,
            backBox,
            titleSubTitleHoriCom,
            iconSwiperBox,
            goodsItem2
        },
        created() {

            // 设置标题
            this.$set(this, 'title', '旗舰店');

            // 设置活动标签
            this.$set(this, 'isActiveTab', this.$route.query.type || 1);

            // 旗舰店swiper
            this.flagship();

            // 旗舰店店铺商品
            this.flagshipList();

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

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

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

                    // 根据平台，判断是否符合版本，显示搜索和其它导航菜单
                    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, 'showNavs', true);
                    }
                }
            }

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

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

                // 判断是否可加载
                if (this.shopListsPage.loadingNow === false || this.shopListsPage.loadingNow === undefined) {

                    // 设置加载中状态
                    this.$set(this.shopListsPage, 'loadingNow', true);

                    if (this.shopListsPage.page === undefined) {

                        // 旗舰店店铺商品
                        this.flagshipList(this.CALL_STATUS.INIT, 1);
                    } else {

                        // 增加页码
                        this.$set(this.shopListsPage, 'page', ++this.shopListsPage.page);

                        // 判断页码是数字再执行
                        if (!isNaN(parseInt(this.shopListsPage.page))) {

                            // 旗舰店店铺商品（加载更多）
                            this.flagshipList(this.CALL_STATUS.LOAD_MORE, this.shopListsPage.page);
                        }
                    }
                }
            },

            /**
             * 切换tab
             * @param {Number} activeTab [被选择的tab]
             */
            changeTabs(activeTab) {

                // 判断是否有切换操作
                if (activeTab != this.isActiveTab) {

                    // 设置type
                    Object.assign(this.$route.query, {
                        type: activeTab
                    });

                    // 设置活动tab项目
                    this.$set(this, 'isActiveTab', activeTab);

                    /* 重新加载页面数据 开始 */

                    // 旗舰店swiper
                    this.flagship();

                    // 旗舰店店铺商品
                    this.flagshipList();

                    /* 重新加载页面数据 结束 */

                }
            },

            /**
             * 旗舰店swiper
             */
            flagship() {

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

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().good + "/flagship", {
                    uid: this.getStore("uid") || 0,
                    type: this.$route.query.type || 0
                }, this.flagshipCallback, {
                    method: "POST"
                });
            },

            /**
             * 旗舰店swiper回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            flagshipCallback(res, ext) {

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

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

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

                    /* 获取旗舰店swiper数据 开始 */

                    // 设置navs数据
                    this.$set(this, 'navs', datas.list);

                    /* 获取旗舰店swiper数据 结束 */

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

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

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

            /**
             * 旗舰店店铺商品
             * @param {String} CALL_STATUS [何处触发请求]
             * @param {Int} page [页码]
             */
            flagshipList(CALL_STATUS = this.CALL_STATUS.INIT, page = 1) {

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

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

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().good + "/flagshipList", {
                    uid: this.getStore("uid") || 0,
                    page: page,
                    type: this.$route.query.type || 0
                }, this.flagshipListCallback, {
                    method: "POST",
                    CALL_STATUS,
                    page
                });
            },

            /**
             * 旗舰店店铺商品回调
             * @param {Object} res [服务器返回数据]
             * @param {Object} ext [扩展参数]
             */
            flagshipListCallback(res, ext) {

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

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

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

                    /* 获取旗舰店店铺商品数据 开始 */

                    // 判断如果有数据
                    if (datas.list && datas.list.length) {

                        // 判断如何操作数据
                        switch (ext.CALL_STATUS) {
                            case this.CALL_STATUS.INIT:
                            case this.CALL_STATUS.REFRESH:

                                // 初始化数据
                                this.$set(this.shopListsPage, 'page', ext.page);
                                this.$set(this.shopListsPage, 'loading', true);

                                // 设置商铺商品列表数据
                                this.$set(this, 'shopLists', datas.list);
                                break;
                            case this.CALL_STATUS.LOAD_MORE:

                                // 追加列表数据
                                this.$set(this, 'shopLists', [...this.shopLists, ...datas.list]);
                                break;
                        }

                        // 设置还有需要加载的内容
                        this.$set(this.shopListsPage, 'loading', false);
                        this.$set(this.shopListsPage, 'loadingNow', false);
                    } else {

                        // 没有需要加载的内容，停止上拉加载
                        this.$set(this.shopListsPage, 'loading', false);
                        this.$set(this.shopListsPage, 'loadingNow', false);
                        this.$set(this.shopListsPage, 'finished', true);
                    }

                    /* 获取旗舰店店铺商品数据 结束 */

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

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

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

            /**
             * 调用通用跳转（跳转店铺首页）
             * @param {Object} item [通用跳转对象]
             */
            toShop(item) {

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

                    // 设置跳转参数（跳转底部有tabBar的WebView）
                    let params = {
                        type: '21',
                        to: item.id,
                        shop_type: window.location.origin + '/html/new_mall/1/#/shop?shop_id=' + item.id
                    };

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

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

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

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

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