w-front-end / select_good · Files

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

        <!-- 下拉刷新 -->
        <!-- <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh"> -->

            <!-- 已关注达人 -->
            <div v-if="dresserList&&dresserList.length">

                <!-- 标题 -->
                <text-title-box @more="h5More"
                    :titles="{
                        title: '已关注达人',
                        more: true
                    }">
                </text-title-box>

                <!-- 已关注达人列表（4条） -->
                <div>
                    <!-- 达人列表组件 -->
                    <dresserList @toDetail="toDetail"
                        :dresserList="dresserList">
                    </dresserList>
                </div>
            </div>

            <!-- 暂时不修改 开始 -->

            <!-- 已关注达人 -->
            <!-- <div class="follow-daren-box" v-if="dresserList && dresserList.length"> -->

                <!-- tabs横向滚动 -->
                <!-- <horiz-list v-if="dresserList && dresserList.length" @jump="followDarenJump"
                    :lists="dresserList"
                    com="daren-tab"> -->

                    <!-- 标题 -->
                    <!-- <text-title-box slot="title-box" @more="more"
                        :titles="{
                            title: '已关注达人',
                            more: false
                        }">
                    </text-title-box>
                </horiz-list>
            </div> -->

            <!-- 最新动态 -->
            <!-- <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
                :lists="{}"> -->

                <!--最新达人动态-->
                <!-- <text-title-box slot="title-box"
                    :titles="{
                        title: '最新动态',
                        more: darenListsMore
                    }">
                </text-title-box>
            </daren-list-box> -->

            <!-- 暂时不修改 结束 -->

            <!-- 商品部分 -->
            <div class="goods-list-box">

                <!-- 商品样式 2 横排flex -->
                <horiz-list-flex class="components-box" v-if="hotGoods && hotGoods.length" @jump="jump"
                    :lists="hotGoods"
                    com="2"
                    pid="2"
                    :flags="{
                        icon: [
                            'static/img/icon_n1.png',
                            'static/img/icon_n2.png',
                            'static/img/icon_n3.png'
                        ]
                    }">

                    <!-- 标题 -->
                    <text-title-box slot="title-box" @more="more"
                        :titles="{
                            title: '热销商品',
                            more: hotGoodsMore
                        }">
                    </text-title-box>
                </horiz-list-flex>

                <!-- 商品样式 2 滑动 -->
                <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
                    :lists="newBuyGoods"
                    com="2"
                    pid="1">

                    <!-- 标题 -->
                    <text-title-box slot="title-box"
                        :titles="{
                            title: '最近购买'
                        }">
                    </text-title-box>
                </horiz-list>

                <!-- 商品样式 3 滑动 -->
                <horiz-list class="components-box" v-if="recommendGoods && recommendGoods.length" @jump="jump" @primary="primary"
                    :lists="recommendGoods"
                    com="3">

                    <!-- 标题 -->
                    <text-title-box slot="title-box"
                        :titles="{
                            title: '猜你喜欢'
                        }">
                    </text-title-box>
                </horiz-list>

                <!-- 最新上架组 -->
                <div class="components-box" v-if="(newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length) || (newGoods && newGoods.list && newGoods.list.length)">

                    <!-- tabs横向滚动 -->
                    <horiz-list ref="tabsHoriz" v-if="newGoodsTabs && newGoodsTabs.list && newGoodsTabs.list.length" @changeTab="changeTab"
                        :lists="newGoodsTabs.list"
                        com="tab"
                        :pid="true">

                        <!-- 标题 -->
                        <text-title-box slot="title-box" @more="more"
                            :titles="{
                                title: '最新上架',
                                //more: newGoodsMore
                                more: false
                            }">
                        </text-title-box>
                    </horiz-list>


                    <!-- 上拉加载 infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题 -->
                    <div class="column-list-container" :infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="paging.loading" :infinite-scroll-distance="paging.distance">

                        <!-- 商品样式 7 列表 -->
                        <column-list-box class="column-list-box" v-if="newGoods && newGoods.list && newGoods.list.length" @jump="jump" @primary="primary"
                            :lists="newGoods"
                            com="7">
                        </column-list-box>
                    </div>
                </div>
            </div>
        <!-- </van-pull-refresh> -->

        <!-- 回到顶部按钮 -->
        <goto-top
            :top="parseInt(150)">
        </goto-top>
    </div>
</template>

<script>

    // 引入组件
    import { Toast, Indicator } from "mint-ui";
    import { Tab, Tabs } from 'vant';
    import dresserList from "@/components/dresserList/dresserList";
    import darenListBox from "@/components/darenListBox/darenListBox";
    import horizList from "@/components/horizList/horizList";
    import horizListFlex from "@/components/horizListFlex/horizListFlex";
    import textTitleBox from "@/components/textTitleBox/textTitleBox";
    import columnListBox from "@/components/columnListBox/columnListBox";
    import gotoTop from "@/components/gotoTop/gotoTop";

    export default {
        name: 'optimization',
        data () {
            return {
                title: "",
                isLoading: false,               // 下拉刷新控制
                paging: {                       // 分页、上拉加载
                    activeId: 0,
                    loading: true,
                    page: 0,
                    distance: 50
                },
                CALL_STATUS: {
					INIT: "init",				// 初始化页面
					REFRESH: "refresh",			// 刷新页面
					LOAD_MORE: "loadMore"		// 加载更多
				},
                dresserList: null,              // 达人列表
                darenLists: null,               // 达人动态列表
                darenListsMore: null,           // 达人动态列表更多
                hotGoods: null,                 // 热销商品
                hotGoodsMore: null,             // 热销商品更多
                newGoodsMore: null,             // 最新上架更多
                newBuyGoods: null,              // 最新购买
                recommendGoods: null,           // 猜你喜欢
                newGoodsTabs: null,             // 最新上架tabs对象
                newGoods: null                  // 最新上架
            }
        },
        components: {
            dresserList,
            darenListBox,
            horizList,
            horizListFlex,
            textTitleBox,
            columnListBox,
            gotoTop
        },
        created() {

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

            // 优选页面接口
            this.fansShopMessageList();
        },
        methods: {

            /**
             * 上拉加载
             */
            loadMore() {

                // 判断是否可执行上拉加载
                if (this.paging.activeId && this.paging.page) {

                    // 增加页码
                    this.$set(this.paging, "page", ++this.paging.page);

                    // 商品列表(追加)
                    this.shopGoodsList(this.paging.activeId, this.paging.page, this.CALL_STATUS.LOAD_MORE);
                }
            },

            // 下拉刷新
            // onRefresh() {

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

            //     // 优选页面接口
            //     this.fansShopMessageList();
            // },

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

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

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

                    // 获取证书请求接口
                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
                            uid: this.getStore("uid")
                        }, this.fansShopMessageListCallback, {
                            method: "post"
                        }
                    );
                }
            },

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

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

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

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

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

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

                    // 获取最新上架分类列表
                    if (datas.hotGroup && datas.hotGroup.length) {
                        this.$set(this, "newGoodsTabs", {
                            list: datas.hotGroup
                        });

                        // 调用获取商品列表接口，获取第一个分类的列表
                        if (datas.hotGroup[0]) {

                            // 下一周期执行
                            this.$nextTick(() => {

                                // 切换分类
                                this.changeTab(datas.hotGroup[0]);
                            });
                        }
                    }

                    // 获取“达人列表数据”
                    if (datas.list && datas.list.length) {
                        // 设置“达人列表数据”数据
                        this.$set(this, "dresserList", datas.list.filter((item,index,arr) =>{return index <4}));
                    }

                    // 获取“热销商品”
                    if (datas.hotGoods && datas.hotGoods.length) {

                        // 设置“热销商品”数据
                        this.$set(this, "hotGoods", datas.hotGoods);

                        // 判断“热销商品”更多
                        if (datas.hotGoodsMore) {

                            // 设置“热销商品”更多
                            this.$set(this, "hotGoodsMore", datas.hotGoodsMore);
                        }
                    }

                    // // 获取“最新上架”
                    // if (datas.newGoods && datas.newGoods.length) {

                    //     // 设置“最新上架”数据
                    //     this.$set(this, "newGoods", {
                    //         list: datas.newGoods
                    //     });

                    //     // 判断“最新上架”更多
                    //     if (datas.newGoodsMore) {

                    //         // 设置“最新上架”更多
                    //         this.$set(this, "newGoodsMore", datas.newGoodsMore);
                    //     }
                    // }

                    // 获取“最近购买”
                    if (datas.newBuyGoods && datas.newBuyGoods.length) {

                        // 设置“最近购买”数据
                        this.$set(this, "newBuyGoods", datas.newBuyGoods);
                    }

                    // 获取“猜你喜欢”
                    if (datas.recommendGoods && datas.recommendGoods.length) {

                        // 设置“猜你喜欢”数据
                        this.$set(this, "recommendGoods", datas.recommendGoods);
                    }

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

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

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

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

            /**
             * 商品列表
             * @param {Int} groupId [平台分类id]
             * @param {Int} page [页码]
             * @param {String} CALL_STATUS [何处触发请求]
             */
            shopGoodsList(groupId, page, CALL_STATUS = this.CALL_STATUS.INIT) {

                // 校验必填参数
                if (groupId && page) {

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

                    // 获取证书请求接口
                    this.http("/Api/" + this.getApiVersion().index + "/shopGoodsList", {
                            groupid: groupId,
                            page: page
                        }, this.shopGoodsListCallback, {
                            method: "POST",
                            CALL_STATUS
                        }
                    );
                }
            },

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

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

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

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

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

                    // 判断是否有数据
                    if (datas) {        // datas肯定为数组，但是可能为空，会影响数据更新，所以不判断数组长度

                        // 根据操作，设置列表
                        switch (ext.CALL_STATUS) {
                            case this.CALL_STATUS.INIT:
                            
                                // 设置“最新上架”数据
                                this.$set(this, "newGoods", {
                                    list: datas
                                });
                                break;
                            case this.CALL_STATUS.REFRESH:
                                
                                // 设置“最新上架”数据
                                this.$set(this, "newGoods", {
                                    list: datas
                                });
                                break;
                            case this.CALL_STATUS.LOAD_MORE:
                                
                                // 设置“最新上架”数据(追加)
                                this.$set(this.newGoods, "list", [...this.newGoods.list, ...datas]);
                                break;
                        }
                        
                        // 设置还有需要加载的内容
                        this.$set(this.paging, "loading", false);
                    } else {

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

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

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

                    // 获取最新上架列表失败
                    Toast(res.message);
                } else {

                    // 获取最新上架列表失败
                    Toast("获取最新上架列表失败");
                }
            },

            /**
             * 跳转到关注人列表数据
             */
            h5More() {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 设置跳转参数
                    let options = {
                        type: "5",
                        to: (window.location.href.split("#")[0] + "#/fansShopMessageList?uid=" + this.getStore("uid")),
                        shop_type: ""
                    }

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

            /**
             * 用户头像/昵称，点击跳转
             * @param {object} item [数据对象]
             * type等于2属于达人跳转传uid,type=1传id
             */
            userJump(item) {
                
                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 临时，设置跳转达人个人主页用户数据
                    Object.assign(item, {
                        type: "5",
                        to: (this.mode == "prod") ?
                            "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid") :
                            "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.type==2?item.uid:item.id) + "&uid=" + this.getStore("uid"),
                        shop_type: ""
                    });

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

            /**
             * 点击跳转商品
             * @param {object} item [数据对象]
             */
            goodsJump(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 临时，设置跳转商品详情参数
                    Object.assign(item, {
                        type: "2",
                        to: item.id,
                        shop_type: "1"
                    });

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

            /**
             * 点击跳转商品购买
             * @param {object} item [数据对象]
             */
            goodsPrimary(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 临时，设置跳转商品详情参数
                    Object.assign(item, {
                        type: "2",
                        to: item.id,
                        shop_type: "1"
                    });

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

            /**
             * 跳转
             * @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 [数据对象]
			 */
			primary(item) {

                // 调用详情
                this.jump(item);
			},

            /**
             * 更多
             * @param {object} item [数据对象]
             */
            more(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {
                    this.$parent.gotoDetail(item);
                }
            },

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

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

                    // 设置跳转达人个人主页用户数据
                    Object.assign(item, {
                        type: "5",
                        to: (this.mode == "prod") ?
                            "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect" + "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : "") :
                            "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + (item.user_id) + (this.getStore("uid") ? "&uid=" + this.getStore("uid") : ""),
                        shop_type: ""
                    });

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

            /**
			 * 切换标签
			 * @param {object} item [对象]
			 */
            changeTab(item) {

                // 判断是否有滚动分类
                if (this.$refs.tabsHoriz) {

                    // 设置children数组
                    let children = this.$refs.tabsHoriz.$children;

                    // 循环处理
                    for (let i = 0; i < children.length; i++) {

                        // 设置当前活动分类id
                        if (children[i].$refs.tabs && typeof children[i].setActiveId === "function") {
                            children[i].setActiveId(item.id);
                        }
                    }
    
                }

                // 设置当前活动分类id
                this.$set(this.paging, "activeId", item.id);

                // 上拉加载控制参数初始化
                this.$set(this.paging, "loading", true);

                // 初始化页码
                this.$set(this.paging, "page", 1);

                // 获取数据
                this.shopGoodsList(item.id, this.paging.page, this.CALL_STATUS.INIT);
            }
        },
        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 "optimization";
</style>