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>
        <div class="main_box">
        <!-- pl -->
        <div class="pl"  :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-open-app': $parent.isOpenApp.value,'is-cnlive': isCNLive.value, 'hide': $route.query.hideBack == true}"></div>
          <back-box
              v-if="isCNLive.value"
              :class="{'hide': $route.query.hideBack == true}"
              class="back-box"
              :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(255, 255, 255, ' + opacity + ')'" ref="navBox"
              @back="back"
              :backs="backs">
          </back-box>
            <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="item_box" v-if="navs && navs.length">
                <div class="item" v-for="(item, index) in navs" :key="index" @click="anchor(item)">
                  <img :src="item.simg" alt=""/>
                  <div class="text">{{item.title}}</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="5">
                </goods-item-2>
            </div>


            <!-- 实物商品 -->
            <div v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" ref="physicalGoodsBox">
              <div class="tab_item_box">
                <div class="item active">实物商品</div>
                <!-- 分割线 -->
                <div class="line"> </div>
                <div class="item">热门商品 精品推荐</div>
                <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
              </div>
              <!-- 实物商品裂变 -->
              <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
              <column-list-box class="column-list-box" @jump="toDetail" 
                  :lists="phyicalGoods"
                  com="7" goodType="1" company="1">
              </column-list-box>
            </div>


            <!-- 虚拟商品 -->
            <div v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" ref="virtualGoodsBox">
                <div class="tab_item_box">
                  <div class="item active">虚拟商品</div>
                  <!-- 分割线 -->
                  <div class="line"> </div>
                  <div class="item">虚拟商品 精品推荐</div>
                  <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
                </div>
                <!-- 商品样式 7 列表 -->
                <column-list-box class="column-list-box" @jump="toDetail"
                    :lists="virtualGoods"
                    com="7" company="1">
                </column-list-box>
            </div>

            <!-- 满减红包 -->
            <div v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" ref="fullReductionBox">
                <div class="tab_item_box">
                  <div class="item active">满减红包</div>
                  <!-- 分割线 -->
                  <div class="line"> </div>
                  <div class="item">满减红包 精品推荐</div>
                  <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png" class="" alt=""/></div>
                </div>
                <!-- 商品样式 7 列表 -->
                <column-list-box class="column-list-box"  @jump="toDetail" 
                    :lists="redEnvelopeFull"
                    com="7" company="1">
                </column-list-box>
            </div>
        </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 {
      opacity: 0,             // 透明度  
      title: "",              // 标题
      backs: null,            // 后退按钮组
      navs: 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 [数据对象]
      */
    anchor (item) {
      if (this.isCNLive.value) {
        // 判断锚点是否存在
        if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {

          // 根据头部设置锚点位置
          let safeDistance = 0;

          // 判断是否有callApp组件
          if (typeof this.$refs.callApp === 'object') {
            safeDistance += this.$refs.callApp.$el.clientHeight;
          }

          // 判断是否有backBox组件
          if (typeof this.$refs.backBox === 'object') {
            safeDistance += this.$refs.backBox.$el.clientHeight;
          }

          document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750)) - (this.$parent.top.value + 60);
        }
      } else {
        this.$parent.callApp();
      }
    },
    /**
    * 跳转到兑换记录详情页
    * @param {Object} item [数据对象]
    */
    toExchangeRecord () {
      if (this.isCNLive.value) {
        // 校验登录
        if (this.$parent.checkLogin()) {
            this.$router.push({
            path: '/pointsExchangeRecords',
            query: {
              uid: this.getStore("uid"),
              type: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
            }
          })
        }
      } else {
        this.$parent.callApp();
      }
    },
    /**
    * 跳转赚取积分页面
    * @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 {Object} item [数据对象]
    */
    toDetail (item) {
      if (this.isCNLive.value) {
          // 校验登录
         if (this.$parent.checkLogin()) {
            // 通用跳转跳转到商品详情页新打开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();
      }
    },
    /**
    * 跳转商品更多页
    * @param {Object} type [数据对象1实物品 2虚拟商品 3满减红包]
    */
    toMore (type) {
      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/#/morePoints?type=' + type,
            shop_type: ''
          };

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

      // 判断分享
      if (typeof this.$parent.toShare === 'function') {
        this.$parent.toShare(45, "1", "");
      }
    },

    /**
     * 后退
     */
    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.redEnvelopeFull, "list", datas.goods2);
        /*虚拟商品 */
        this.$set(this.virtualGoods, "list", datas.goods3);
      } else if (res.code == 400) {

        // 获取积分商场首页信息失败
        Toast(res.message || "获取积分商场首页信息失败");
      } else {
        // 获取积分商场首页信息失败
        Toast(res.message);
      }
    },

    /**
* 滚动条滚动/touchmove监听处理
* @param {object} e [滚动条对象]
* @param {boolean} isTimeout [是否为setTimeout方法调用]
*/
    onPageScrollFun (e, isTimeout = false) {

      // 获取滚动条位置，浏览器兼容处理
      let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;

      // 滚动控制高度
      let maxHeight = 200;

      // 动态获取百分比分配比例
      if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
        maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
      }

      if (scrollTop >= 0 && scrollTop <= maxHeight) {
        this.opacity = scrollTop / maxHeight;
      } else if (scrollTop > maxHeight) {
        this.opacity = 1;
      } else {
        this.opacity = 0;
      }

      if (!isTimeout) {

        if (this.timer) {
          clearTimeout(this.timer);
        }

        // 倒计时校正滚动条位置
        this.timer = setTimeout(function (options) {

          // 递归
          options.context.onPageScrollFun(options.e, true);
        }, 1000, { e, context: this });
      }
    }
  },
  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", "积分商城");

    // 设置锚点定位数据
    this.$set(this, 'navs', [
      {
        ref: 'physicalGoodsBox',
        simg: 'static/img/points_item01.png',
        title: '实物商品'
      },
      {
        ref: 'virtualGoodsBox',
        simg: 'static/img/points_item02.png',
        title: '虚拟商品'
      },
      {
        ref: 'fullReductionBox',
        simg: 'static/img/points_item03.png',
        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) {
      // 设置积分首页唤起app参数
      if (typeof this.$parent.getOpenApp === "function") {
        this.$parent.getOpenApp({
          type: 45,
          id: 1,
          url: ""
        });
      }
    }

    // 监听滚动条，设置滚动条推动渐变颜色和图片
    window.addEventListener("scroll", this.onPageScrollFun, true);

    // 页面显示监听
    document.addEventListener('visibilitychange', () => {

      // 页面显示出来了
      if (document.hidden === false) {

        // 获取积分商城商品信息接口
        this.integralMallIndex();
      }
    });
  }
}
</script>

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