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) {

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

        // 关注失败
        Toast("关注失败");
      }
    },
    /**
     * 通用跳转
     * @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: ""
        });

        // 调用通用跳转
        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");
      }
    }
  },
  mounted () {
    // 页面显示监听
    document.addEventListener('visibilitychange', () => {

      // 页面显示出来了
      if (document.hidden === false) {
        this.loading = false;      // 上拉加载控制
        this.pages = 0;
        // 刷新达人更多详情页信息接口
        this.recommendMore();
      }
    });
  },
}
</script>

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