w-front-end / select_good · Files

<template>
<div>
    <!-- H5唤起App组件 -->
        <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" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
        <div class="main_box">
            <div class="top_main">
              <!-- 头部 -->
              <div class="top">
                <div class="left">
                  我的积分: <span>{{myGrade}}</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="item_box">
                <div class="item">
                  <img src="static/img/points_item01.png" alt=""/>
                  <div class="text">实物商品</div>
                </div>
                <div class="item">
                  <img src="static/img/points_item02.png" alt=""/>
                  <div class="text">虚拟商品</div>
                </div>
                <div class="item">
                  <img src="static/img/points_item03.png" alt=""/>
                  <div class="text">满减红包</div>
                </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="tab_item_box">
              <div class="item active">为你推荐</div>
              <!-- 分割线 -->
              <div class="line"> </div>
              <div class="item">热门商品</div>
            </div>
            <!-- 为你推荐商品列表 -->
            <div class="list-box">
                <!-- 商品展示样式 2 -->
                <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDetail(item)"
                    :item="item"
                    pid="4">
                </goods-item-2>
            </div>


            <!-- 实物商品 -->
            <div class="tab_item_box">
              <div class="item active">实物商品</div>
              <!-- 分割线 -->
              <div class="line"> </div>
              <div class="item">实物商品实物商品实物商品实物商品</div>
            </div>
            <!-- 实物商品裂变 -->
            <!-- 商品样式 7 列表 -->
            <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" 
                :lists="phyicalGoods"
                com="7">
            </column-list-box>


            <!-- 虚拟商品 -->
            <div class="tab_item_box">
              <div class="item active">虚拟商品</div>
              <!-- 分割线 -->
              <div class="line"> </div>
              <div class="item">热门商品</div>
            </div>
            <!-- 商品样式 7 列表 -->
            <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
                :lists="virtualGoods"
                com="7">
            </column-list-box>


            <!-- 满减红包 -->
            <div class="tab_item_box">
              <div class="item active">满减红包</div>
              <!-- 分割线 -->
              <div class="line"> </div>
              <div class="item">热门商品</div>
            </div>
            <!-- 商品样式 7 列表 -->
            <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail" 
                :lists="redEnvelopeFull"
                com="7">
            </column-list-box>
        </div>
</div>
</template>

<script>
import { Toast, Indicator } from "mint-ui";
import callAppBox from "@/components/callAppBox/callAppBox";
import backBox from "@/components/backBox/backBox";
import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
import columnListBox from "@/components/columnListBox/columnListBox";
export default {
  name: 'pointsmall',
  data () {
    return {
      title: "",              // 标题
      backs: null,            // 后退按钮组
      myGrade: 0, // 我的积分
      goodsLists: null,  // 为你推荐商品
      phyicalGoods: { list: null }, // 实物商品
      virtualGoods: { list: null },   // 虚拟商品
      redEnvelopeFull: { list: null } // 满减红包
    }
  },
  //部件
  components: {
    callAppBox,
    backBox,
    goodsItem2,
    columnListBox
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    /**
    * 跳转到兑换记录详情页
    * @param {Object} item [数据对象]
    */
    toExchangeRecord () {
      this.$router.push({
        path: '/pointsExchangeRecords',
        query: {
          uid: this.getStore("uid"),
        }
      })
    },
    /**
    * 跳转赚取积分页面
    * @param {Object} item [数据对象]
    */
    jumpClientIntegralList () {
      // 判断APP内
      if (this.isCNLive.value) {
        // （判断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();
        }
      }
    },
    /**
    * 跳转商品详情
    * @param {Object} item [数据对象]
    */
    toDetail (item) {
      // 判断通用跳转函数是否存在
      this.$router.push({
        path: '/goodDetails',
        query: {
          goodsId: item.id,
          uid: this.getStore("uid")
        }
      })
    },
    /**
     * 分享
     */
    toShare () {

      // 判断分享
      if (typeof this.$parent.toShare === 'function') {
        this.$parent.toShare(38, this.$route.query.id || 0);
      }
    },

    /**
     * 后退
     */
    back () {

      // 判断是否有处理函数
      if (typeof this.$parent.back === 'function') {

        // 后退
        this.$parent.back();
      } else {

        // 后退
        window.history.go(-1);
      }
    },
    // 积分商场首页
    /**
     * 获取积分商场首页信息
     * * @param {string} uid [用户id]
     */
    integralMallIndex () {

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

      // 请求接口
      this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewIndex", {
        uid: this.getStore("uid"),
      }, 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);
        /*为你推荐 */
        this.$set(this, "goodsLists", datas.hot_goods);
        /*实物商品 */
        this.$set(this.phyicalGoods, "list", datas.goods1);
        /*虚拟商品 */
        this.$set(this.virtualGoods, "list", datas.goods2);
        /*满减红包商品 */
        this.$set(this.redEnvelopeFull, "list", datas.goods3);
      } else if (res.code == 400) {

        // 获取积分商场首页信息失败
        Toast(res.message || "获取积分商场首页信息失败");
      } else {
        // 获取积分商场首页信息失败
        Toast(res.message);
      }
    },
  },
  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");
      }
    }
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "积分商城");

    // 判断是否在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) {

      // 唤起详情页
      if (typeof this.$parent.getOpenApp === "function") {
        this.$parent.getOpenApp({
          type: 38,
          id: this.$route.query.id || 1,
          url: ""
        });
      }

      // 分享详情页
      if (typeof this.$parent.getShareData === "function") {
        this.$parent.getShareData({
          type: 38,
          id: this.$route.query.id || 1,
          url: ""
        });
      }
    }
  }
}
</script>

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