w-front-end / select_good · Files

<template>
  <div class="good-details-box">
    <!-- 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"
         :style="'padding-top: ' + $parent.top.value + 'px'"
         :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
    <div class="banner_box"
         v-if="goodsInfo">
      <div class="banner_desc">
        满{{parseInt(goodsInfo.filled)}}可用
      </div>
      <div class="discount">
        {{parseInt(goodsInfo.discount) > 10000 ? this.formatDecimal((parseInt(goodsInfo.discount) / 10000), 1) + "万" : parseInt(goodsInfo.discount)}}
        <span>¥</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main-box">
      <!-- 标题 -->
      <div v-if="goodsInfo"
           class="title">
        满{{parseInt(goodsInfo.filled)}}减{{parseInt(goodsInfo.discount)}} 满{{parseInt(goodsInfo.filled)}}可用
        (<span v-if="goodsInfo.sort==1">店铺全场</span>
        <span v-else-if="goodsInfo.sort==3">单品优惠</span>)
      </div>
      <!-- 商品信息 -->
      <div class="goods-info">
        <!-- 商品规格 -->
        <div class="good-title">
          <span class="left"></span>领取规则
          <span class="right"></span>
        </div>
        <div class="good-desc">
          <!-- 优惠券 -->
          <div class="desc_title">兑换流程</div>
          <div class="text-left">
            1､ 领取后需在优惠券有效期内使用<br> 2、请到【购物车】或购好物挑选商品下单使用。
          </div>
          <div class="desc_title mar_top10">注意事项</div>
          <div class="text-left">
            1､ 使用说明：此优惠券每个手机号
            <span v-if="goodsInfo && goodsInfo.receive_number == 1">不限次数领；</span>
            <span v-else-if="goodsInfo && goodsInfo.receive_number == 2">只能领取一次；</span>
            <br> 2、优惠券有效期：优惠券使用有效期截止到
            <span v-if="goodsInfo && goodsInfo.endtime">{{goodsInfo.endtime*1000 | datetime('yyyy-MM-dd')}}</span>；
            <!-- <a href="tel:010-65832485">010-65832485</a> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 有积分页脚显示 -->
    <div v-if="goodsInfo && goodsInfo.stock != 0">
      <!-- 积分充足 -->
      <div class="footer">
        <div class="btn"
             @click="coupon">
          立即领取
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import callAppBox from "@/components/callAppBox/callAppBox";
import swiper from "@/components/swiper/swiper";
import backBox from "@/components/backBox/backBox";
import { Toast, Indicator } from "mint-ui";
export default {
  data () {
    return {
      title: "", // 标题
      banner: null,
      goodsInfo: null,
      backs: null, // 后退按钮组
    }
  },
  //部件
  components: { callAppBox, swiper, backBox },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    /**
    * 分享
    */
    toShare () {
      // 判断分享
      if (typeof this.$parent.toShare === 'function') {
        this.$parent.toShare(77, (this.$route.query.couponId || 1));
      }
    },
    // type=2跳转原生优惠券列表3跳转原生购买内容列表
    jumpType (type) {
      // 跳转到优惠券列表
      window.obj.jumpCoupon();
    },
    // 领取优惠券
    coupon () {
      if (this.isCNLive.value) {
        // 校验登录
        if (this.$parent.checkLogin()) {
          // 实物商品不提示用积分
          this.getShopCoupon();
        }
      } else {
        this.$parent.callApp();
      }
    },
    /**
     * 领取优惠券接口
     */
    getShopCoupon () {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().index + "/getShopCoupon", {
        uid: this.getStore("uid"),
        coupon_id: this.$route.query.couponId, // 优惠券ID
      }, this.getShopCouponCallback, {
          method: "POST"
        });
    },

    /**
     * 积分兑换接口回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
    getShopCouponCallback (res, ext) {

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

      // 返回处理
      if (res.code == 200) {
        // 解构数据
        let { data: datas } = res;
        // 方式连续点击兑换
        this.isExchange = true;
        // 两秒后可继续兑换
        let _this = this
        setTimeout(function () {
          _this.isExchange = false;
        }, 1500);
        // 提示语判断
        let tipMessage = "优惠券已存入您的账户，前往“我的”—“我的卡券查看”"
        // 显示查看地址弹框
        let options = {
          message: tipMessage,
          messageAlign: "center",
          confirmButtonText: "确定",
          showCancelButton: true,
          cancelButtonText: "取消",
          confirmButtonCallback: this.jumpType,
        };
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else {
        Toast(res.message);
      }
    },
    /**
    * 优惠券商品详情页页面接口
    */
    couponInfo (couponId) {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().index + "/couponInfo", {
        coupon_id: couponId, // 商品ID
        uid: this.getStore("uid") // 用户ID
      }, this.couponInfoCallback, {
          method: "POST"
        });
    },

    /**
     * 优惠券商品详情页页面接口回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
    couponInfoCallback (res, ext) {

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

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

        // 解构数据
        let { data: datas } = res;
        /* 获取详细信息 */
        this.goodsInfo = datas
        /* 设置商品详情页 */
        /* 相似商品 */
      } else if (res.code == 400) {

        // 获取优惠券商品详情页失败
        Toast(res.message);
      } else {

        // 获取优惠券商品详情页失败
        Toast("获取优惠券商品详情页失败");
      }
    },
    /**
    * 后退
    */
    back () {
      // 返回先隐藏弹框

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

        // 后退
        window.history.go(-1);
      }
    },
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "优惠券");
    // 获取商品ID
    let couponId = this.$route.query.couponId;
    if (couponId) {
      // 获取商品信息
      this.couponInfo(couponId);
    }
    // 判断是否在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', '优惠券');
    }

  },
  mounted () {
    // 如果是App外，设置唤起App和微信内分享参数
    if (!this.isCNLive.value) {
      // 设置积分首页唤起app参数
      if (typeof this.$parent.getOpenApp === "function") {
        this.$parent.getOpenApp({
          type: 77,
          id: this.$route.query.couponId || 1,
          url: ""
        });
      }
      if (typeof this.$parent.getShareData === "function") {
        this.$parent.getShareData({
          type: 77,
          id: this.$route.query.couponId || 1,
          url: ""
        });
      }
    }
  }
}
</script>

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