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 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: "",
      backs: null,        // nav导航条数据
      isLoading: false,   // 下拉刷新控制
      list: [],           // 达人列表
      loading: false      // 上拉加载控制
    }
  },
  components: {
    backBox,
    dresserList
  },
  created () {

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

    // nav导航条数据
    this.$set(this, 'backs', {
      title: this.title,
      funcs: {
        back: {
          icon: "static/img/icon_back.png"
        }
      }
    });

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

    // 获取关注人列表2
    this.fansShopList();
  },
  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);

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

      }
    },

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

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

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

        // 请求接口
        this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopList", {
          uid: this.getStore("uid")
        }, this.fansShopListCallback, {
            method: "POST"
          });
      }
    },

    /**
     * 已关注达人列表2回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    fansShopListCallback (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");
      }
    }
  },
  mounted () {
    // 页面显示监听
    document.addEventListener('visibilitychange', () => {
      // 页面显示出来了
      if (document.hidden === false) {
        // 接口刷新
        this.fansShopMessageList();
      }
    });
  }
}
</script>

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