fansShopMessageList.vue 4.35 KB
<template>
    <div>

        <!-- nav -->
        <back-box @back="back"
            :backs="backs">
        </back-box>

        <!-- 已关注达人列表 -->
        <div class="item_box">
            <ul
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                :infinite-scroll-distance="list.length">
                <li v-for="(item, index) in list" :key="index" @click="$parent.toDetail(item)">
                    <dresserList
                        :dresserList="item">
                    </dresserList>
                </li>
            </ul>
        </div>
    </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: "",
                backs: {
                    title: "已关注达人",
                    funcs: {
                        back: {
                            icon: "static/img/icon_back.png"
                        }
                    }
                },
                list: [],           // 达人列表
                loading: false      // 上拉加载控制
            }
        },
        components: {
            backBox,
            dresserList
        },
        created() {

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

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

            /**
             * 已关注达人列表
             */
            fansShopMessageList () {

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

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

                    // 请求接口
                    this.http("/api/Dynamic/fansShopMessageList", {
                        uid: (this.$route.query.uid || this.getStore("uid"))
                    },this.fansShopMessageListCallback, {
                        method: "post"
                    });
                }
            },

            /**
             * 已关注达人列表回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            fansShopMessageListCallback(res, ext) {
                // 加载完成
                Indicator.close();
                // 返回处理
                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);
            },

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