w-front-end / select_good · Files

<template>
  <div class="gift_zone_detail">

    <!-- 导航栏 -->
    <div class="nav" :style="'padding-top: ' + $parent.top.value + 'px'">

      <!-- navBar -->
      <nav-bar @back="back"
               :navs="navs">
      </nav-bar>
    </div>

    <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
    <!-- 商品样式 7 列表 -->
    <div class="top_main">
      <!-- 头部 -->
      <div class="top">
        <div class="left">
          我的积分:
          <span>{{myGrade || 0}}</span>
        </div>
        <div @click="toExchangeRecord"
             class="right">
          兑换记录
          <!-- 返回图标 -->
          <img class="back_right_iocn"
               src="static/img/points_icon_grey_right.png"
               alt="" />
        </div>
      </div>
      <!--积分赚取  -->
      <!-- <div class="earn_points_box">
        <img class="earn_icon"
             src="static/img/points_icon_pice.png"
             alt="">
        <div class="desc">赚取更多积分，兑换精美礼品～</div>
        <div @click="jumpClientIntegralList"
             class="btn">赚积分 <img class="earn_right_back"
               src="static/img/points_icon_white_right.png"
               alt="" /></div>
      </div> -->
    </div>
    <div class="gift_main_box"
         v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length"
         infinite-scroll-immediate-check="true"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         :infinite-scroll-distance="distance">
      <column-list-box class="column-list-box"
                       v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length"
                       @jump="toDetail"
                       :lists="phyicalGoods.list"
                       company="1"
                       com="7">
      </column-list-box>
    </div>
    <!-- 没有更多了 -->
    <div v-if="isNoMore && page>1"
         class="no_more">
      — 没有更多了 —
    </div>
    <!-- 暂无商品 -->
    <div v-else-if="phyicalGoods.list.length == 0 && page==1"
         class="no_more not_yet">
      — 暂无商品 —
    </div>
  </div>
</template>

<script>
import navBar from '@/components/navBar/navBar';
import { Toast, Indicator } from "mint-ui";
import columnListBox from "@/components/columnListBox/columnListBox";
export default {
  name: 'morePoints',
  data () {
    return {
      myGrade: 0, // 我的积分
      title: "积分商城",              // 标题
      navs: null, // 后退按钮组
      loading: true,
      distance: 50,
      phyicalGoods: { list: [] }, // 实物商品
      page: 1,
      isNoMore: false
    }
  },
  //部件
  components: {
    navBar,
    columnListBox
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  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");
      }
    }
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    /**
  * 跳转到兑换记录详情页
  * @param {Object} item [数据对象]
  */
    toExchangeRecord () {
      // 校验登录
      if (this.$parent.checkLogin()) {
        this.$router.push({
          path: '/pointsExchangeRecords',
          query: {
            uid: this.getStore("uid"),
            type: this.$route.query.type // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城 10 党建积分商城
          }
        })
      }
    },
    /**
    * 上拉加载
    */
    loadMore () {
      this.$set(this, "page", ++this.page);
      this.getIntegralNewGoodsList(this.page);
    },
    /**
     * 加载积分商城商品更多
     * @param {int} page [页码]
     * @param  {int}type [类型1为实物 2为虚拟物品 3为红包]
     */
    getIntegralNewGoodsList (page) {

      // 判断必须参数
      if (this.$route.query.type) {

        // 加载中
        this.$set(this, "loading", true);

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

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralMallGoods", {
          type: this.$route.query.type,
          page: page || 1
        }, this.getIntegralNewGoodsListCallback, {
            method: "POST"
          });
      }
    },

    /**
     * 礼品专区详情页回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    getIntegralNewGoodsListCallback (res, ext) {

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

      // 返回处理
      if (res.code == 200) {
        // 解构数据
        let { data: datas } = res;
        /* 获取商品数据 开始 */
        if (datas.goods && datas.goods.length) {
          // 设置列表
          this.$set(this.phyicalGoods, "list", [...this.phyicalGoods.list, ...datas.goods]);
          // 设置还有需要加载的内容
          this.$set(this, "loading", false);
        } else {
          this.isNoMore = true; // 没有更多了
          // 没有需要加载的内容，停止上拉加载
          this.$set(this, "loading", true);
        }
        /* 获取抽奖记录数据 结束 */

      } else if (res.code == 400) {

        // 获取抽奖记录失败
        Toast(res.message);
      } else {

        // 获取抽奖记录失败
        Toast("获取专区礼包失败");
      }
    },

    /**
   * 跳转商品详情
   * @param {Object} item [数据对象]
   */
    toDetail (item) {
      // 校验登录
      if (this.$parent.checkLogin()) {
        // 路由跳转到党建答题积分商品详情页
        this.$router.push({
          path: "/partyBuildingGoodDetails",
          query: {
            goodsId: item.id,
            uid: this.$route.query.uid,
            oid: this.$route.query.oid,
            pageId: this.$route.query.pageId,
            channelName: this.$route.query.channelName,
            jumpPath: this.$route.query.jumpPath, // onLine线上报名  Offline线下报名
          }
        });
      }
    },
    /**
       * 跳转赚取积分页面
       * @param {Object} item [数据对象]
       */
    // jumpClientIntegralList () {
    //   // 判断APP内
    //   if (this.isCNLive.value) {
    //     // 校验登录
    //     if (this.$parent.checkLogin()) {
    //       // （判断app内是否有该方法）
    //       if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
    //         // 跳转到原生的任务列表
    //         window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
    //       } else if (window.obj && window.obj.jumpClientIntegralList) {
    //         // 跳转到原生的任务列表
    //         window.obj.jumpClientIntegralList();
    //       }
    //     }
    //   } else {
    //     this.$parent.callApp();
    //   }
    // },
    // 积分商场首页
    /**
     * 获取积分商场首页信息
     * * @param {string} uid [用户id]
     */
    integralMallIndex () {

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

      // 请求接口
      this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewIndex", {
        uid: this.getStore("uid"),
        goods_id: this.$route.query.user_selected_goods_id || 0 // 记录从优选库那个商品点击进入进来的
      }, this.integralMallIndexCallback, {
          method: "POST"
        });
    },

    /**
     * 获取积分商场首页信息
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    integralMallIndexCallback (res, ext) {

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

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

        // 解构数据
        let { data: datas } = res;
        this.info = datas
        /* 积分商场首页信息 开始 */
        /*用户信息 */
        this.$set(this, "myGrade", datas.grade);
      } else if (res.code == 400) {

        // 获取积分商场首页信息失败
        Toast(res.message || "获取积分商场首页信息失败");
      } else {
        // 获取积分商场首页信息失败
        Toast(res.message);
      }
    },
    /**
    * 后退
    */
    back () {
      // 返回先隐藏弹框

      // 判断是否有处理函数
      if (typeof this.$parent.back === 'function') {
        // 隐藏通用浮层
        this.$parent.$refs.showModal.hideLayer();
        // 后退
        this.$parent.back();
      } else {

        // 后退
        window.history.go(-1);
      }
    },

    /**
    * 分享
    */
    toShare () {
      // 判断分享
      if (typeof this.$parent.toShare === 'function') {
        this.$parent.toShare(46, this.$route.query.goodsId, "");
      }
    },

  },
  //请求数据
  created () {
    // 加载商品列表
    this.getIntegralNewGoodsList(this.page);
    this.$set(this, "navs", {
      back: {
        img: "static/img/icon_back.png"
      },
      title: this.title
    });
    if (this.$parent.checkLogin()) {
      // 获取积分商城商品信息接口
      this.integralMallIndex();
    }
    window.localStorage.removeItem('currentAddress');
    window.localStorage.removeItem('addressModalIsShow');
  },
  mounted () {
    // 如果是App外，设置唤起App和微信内分享参数
    if (!this.isCNLive.value) {
      // 设置积分首页唤起app参数
      if (typeof this.$parent.getOpenApp === "function") {
        this.$parent.getOpenApp({
          type: 45,
          id: 1,
          url: ""
        });
      }
    }
  }
}
</script>

<style rel="stylesheet/less" lang="less" scoped>
@import 'partyBuildingPointsMall';
</style>