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="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"
          :goodType="$route.query.type"
          company="1"
          com="7">
      </column-list-box>
    </div>  
    <!-- 没有更多了 -->
     <!-- 暂无记录展示 -->
    <div v-show="phyicalGoods.list && phyicalGoods.list.length == 0 && isCall" class="no_gift_tip">
      <img src="static/img/no_gift_tip.png" alt=""/>
      <div class="text">暂无商品</div>
    </div>
    <div v-show="phyicalGoods.list && phyicalGoods.list.length>0 && isMore" class="is_more">
        没有更多了
    </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 {
      title: "",              // 标题
      backs: null, // 后退按钮组
      loading: true,
      distance: 50,
      phyicalGoods: { list: [] }, // 实物商品
      page: 1,
      isCall: false, // 是否调用接口
      isMore: 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: {
    /**
    * 上拉加载
    */
    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) + "/integralNewGoodsList", {
          type: this.$route.query.type,
          // uid: this.getStore("uid"),
          page: page || 1
        }, this.getIntegralNewGoodsListCallback, {
            method: "POST"
          });
      }
    },

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

      // 加载完成
      Indicator.close();
      // 证明调用过接口
      this.isCall = true;
      // 返回处理
      if (res.code == 200) {
        // 解构数据
        let { data: datas } = res;
        /*设置标题 */
        this.$set(this, "title", datas.title);
        this.$set(this.backs, 'title', datas.title);
        /* 获取商品数据 开始 */
        if (datas.goods && datas.goods.length) {
          // 设置列表
          this.$set(this.phyicalGoods, "list", [...this.phyicalGoods.list, ...datas.goods]);
          // 设置还有需要加载的内容
          this.$set(this, "loading", false);
        } else {
          this.isMore = true; // 没有更多了
          // 没有需要加载的内容，停止上拉加载
          this.$set(this, "loading", true);
        }
        /* 获取抽奖记录数据 结束 */

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

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

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

     /**
    * 跳转商品详情
    * @param {Object} item [数据对象]
    */
    toDetail (item) {
      if (this.isCNLive.value) {
        // this.$router.push({
        //   path: "/goodDetails",
        //   query: {
        //     goodsId: item.id,
        //     uid: this.getStore("uid")
        //   }
        // })
        // 通用跳转跳转到商品详情页新打开webview
        if (typeof this.$parent.gotoDetail === 'function') {

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

          // 页面跳转
          this.$parent.gotoDetail(params);
        }
      } else {
        this.$parent.callApp();
      }
    },

     /**
     * 后退
     */
    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
          //   }
          // ]
        }
      });
    }
  },
  mounted () {
  }
}
</script>

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