w-front-end / select_good · Files

<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
                infinite-scroll-immediate-check="true"
                v-infinite-scroll="recommendMore"
                infinite-scroll-disabled="loading"
                :infinite-scroll-distance="50">
                    <!-- 达人列表组件 -->
                    <dresserList @fansShop="fansShop" @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: "",
                backs: {            // nav导航条数据
                    title: "推荐达人",
                    funcs: {
                        back: {
                            icon: "static/img/icon_back.png"
                        }
                    }
                },
                list: null,           // 达人列表
                loading: false,      // 上拉加载控制
                pages:0, // 分页
            }
        },
        components: {
            backBox,
            dresserList
        },
        created() {

            // 设置标题
            this.$set(this, "title", "推荐达人页");
            document.title = "推荐达人页"
            // 获取更多的推荐达人
            this.recommendMore();
        },
        methods: {

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

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

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

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

                // 校验登录
                if (this.$parent.checkLogin()) {
                    this.loading = true;
                    this.pages++
                    // 加载中提示
                    Indicator.open("加载中...");

                    // 请求接口
                    this.http("/Api/" + this.getApiVersion().dynamic + "/hotDarenList", {
                        uid: this.getStore("uid"),
                        page: this.pages
                    },this.recommendMoreCallback, {
                        method: "post"
                    });
                }
            },

            /**
             * 已关注达人列表回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            recommendMoreCallback(res, ext) {

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

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

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

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

                    /*获取裂变数据*/
                    if (datas.list && datas.list.length) {
                        // 隐藏加载圈
                        this.loading = false;
                        if(this.pages>1){
                            this.$set(this, "list",[...this.list,...datas.list]);
                        }else {
                            this.$set(this, "list",datas.list);
                        }

                    }
                }
            },
            /**
             * 关注/取消关注达人
             */
            fansShop(item) {
                Indicator.open("加载中...");
                // 判断必要参数
                if (item.id && this.$route.query.uid) {
                    // 请求接口
                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShop", {
                            id: item.id || 0,
                            uid: this.getStore("uid") || 0
                        }, this.fansShopCallback, {
                            method: "post",
                            item
                        }
                    );
                }
            },

            /**
             * 关注/取消关注达人回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            fansShopCallback(res, ext) {

                // 加载完成
                Indicator.close();
                if (res.code) {
                    // 设置已关注
                    if (ext.item.is_fans == "0") {
                        // 关注达人
                        this.$set(ext.item, "is_fans", "1");
                    }else{
                        // 取消关注达人
                        this.$set(ext.item, "is_fans", "0");
                    }
                }else if (res.statusCode === 200 && res.data.code == 400) {

                    // 关注失败
                    this.showToast(res.data.message);
                } else {

                    // 关注失败
                    this.showToast("关注失败");
                }
            },
            /**
             * 通用跳转
             * @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.id + "&uid=" + this.getStore("uid")
                            : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?from=redirect"+ "&id=" + item.id + "&uid=" + this.getStore("uid"),
                        shop_type: ""
                    });


                    console.log("userJump", item);

                    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 "recommendMore";
</style>