w-front-end / select_good · Files

<template>
  <div class="gift_zone_detail">
    <call-app-box class="call-app-box"
                  :style="'padding-top: ' + $parent.top.value + 'px'"
                  ref="callApp"
                  v-if="!isCNLive.value"
                  :callApps="$parent.callApps">
    </call-app-box>
    <back-box v-if="isCNLive.value"
              :class="{'hide': $route.query.hideBack == true}"
              class="back-box"
              :style="'padding-top: ' + $parent.top.value + 'px'"
              @back="back"
              :backs="backs">
    </back-box>
    <!-- pl -->
    <div class="pl"
         :style="'padding-top: ' + $parent.top.value + 'px'"
         :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></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 callAppBox from "@/components/callAppBox/callAppBox";
import backBox from "@/components/backBox/backBox";
import { Toast, Indicator } from "mint-ui";
import columnListBox from "@/components/columnListBox/columnListBox";
export default {
  name: 'morePoints',
  data () {
    return {
      myGrade: 0, // 我的积分
      title: "积分商城",              // 标题
      backs: null, // 后退按钮组
      loading: true,
      distance: 50,
      phyicalGoods: { list: [] }, // 实物商品
      page: 1,
      isNoMore: false
    }
  },
  //部件
  components: {
    backBox,
    columnListBox,
    callAppBox
  },
  //静态
  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: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
            }
          })
        }
    },
    /**
    * 上拉加载
    */
    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()) {
        if (this.isCNLive.value) {
          通用跳转跳转到商品详情页新打开webview
          if (typeof this.$parent.gotoDetail === 'function') {

            // 设置跳转参数
            let params = {
              type: '5',
              to: window.location.origin + '/html/select_good/1/#/healthGoodDetails?goodsId=' + item.id,
              shop_type: ''
            };

            // 页面跳转
            this.$parent.gotoDetail(params);
          }
        } else {
          // 路由跳转到党建答题积分商品详情页
          this.$router.push({
            path: "/partyBuildingGoodDetails",
            query: {
              goodsId: item.id
            }
          });
        }
      }
    },
    /**
       * 跳转赚取积分页面
       * @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);

    // 判断是否在App内
    if (this.isCNLive.value) {

      // 添加后退按钮组“后退”和“分享”按钮
      this.$set(this, 'backs', {
        funcs: {
          back: {
            icon: "static/img/icon_back.png"
          }
          // funcArray: [
          //   {
          //     icon: "static/img/icon_share.png",
          //     func: this.toShare
          //   }
          // ]
        }
      });

      /*设置标题 */
      this.$set(this.backs, 'title', "积分商城");
    }
     // 获取积分商城商品信息接口
    this.integralMallIndex();
  },
  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>