fansShopMessageList.vue 6.19 KB
<template>
    <div class="fans-shop-message-list-box">

        <!-- nav -->
        <back-box :style="'padding-top: ' + ($parent.top.value) + 'px'" @back="back"
            :backs="backs">
        </back-box>

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

            <!-- 已关注达人列表 -->
            <div class="item_box">
                <div
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="loading"
                    :infinite-scroll-distance="list.length">
                        <!-- 达人列表组件 -->
                        <dresserList @toDetail="toDetail"
                            :dresserList="list">
                        </dresserList>
                </div>
            </div>
        <!-- </van-pull-refresh> -->
    </div>
</template>

<script>
    // 引入组件
    import { Toast, Indicator } from 'mint-ui';
    import backBox from "@/components/backBox/backBox";
    import dresserList from "@/components/dresserList/dresserList";

    export default {
        name: 'fansShopMessageList',
        data() {
            return {
                title: "",
                isLoading: false,   // 下拉刷新控制
                backs: {            // nav导航条数据
                    title: "已关注达人",
                    funcs: {
                        back: {
                            icon: "static/img/icon_back.png"
                        }
                    }
                },
                list: [],           // 达人列表
                loading: false      // 上拉加载控制
            }
        },
        components: {
            backBox,
            dresserList
        },
        created() {

            // 设置标题
            this.$set(this, "title", "已关注达人");

            // 获取关注人列表
            this.fansShopMessageList();
        },
        methods: {

            // 下拉刷新
            // 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;

                    /*获取裂变数据*/

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

            /**
             * 上拉加载
             */
            loadMore() {
    //            this.loading = true;
    //            setTimeout(() => {
    //                let last = this.list[this.list.length - 1];
    //                for (let i = 1; i <= 10; i++) {
    //                    this.list.push(last + i);
    //                }
    //                this.loading = false;
    //            }, 2500);
            },

            /**
             * 通用跳转
             * @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);
                }
            },

            /**
             * 后退
             */
            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");
                }
            }
        }
    }
</script>

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