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>
    <!--轮播-->
    <!-- <swiper
          :style="
                'margin-top:' +
                    ($parent.isBack && isCNLive.value ? 62 : 10) +
                    'px'
            "
            v-if="simgList"
            :swipers="goodsInfo.simg"
            :isPointsMall= 'true'
            :options="{
                showIndicators: true
            }"
        >
        </swiper> -->
    <img v-if="goodsInfo && goodsInfo.simg"
         class="goods-img"
         v-lazy="goodsInfo.simg"
         alt="" />
    <!-- 内容 -->
    <div class="main-box">
      <!-- 标题 -->
      <div v-if="goodsInfo && goodsInfo.title"
           class="title">
        {{goodsInfo.title}}
      </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､ 使用说明：此优惠券每个手机号只能领取一次；<br> 2、优惠券有效期：优惠券使用有效期截止到2022年4月22日；
            <!-- <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="addIntegralOrder">
          立即领取
        </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(71, "1", (this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""));
      }
    },
    // type=2跳转原生优惠券列表3跳转原生购买内容列表
    jumpType (type) {
      // 跳转到优惠券列表
      window.obj.jumpCoupon();
    },
    /**
     * 领取优惠券接口
     */
    addIntegralOrder () {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().LuckDraw + "/addIntegralOrder", {
        uid: this.getStore("uid"),
        id: this.$route.query.goodsId, // 商品ID
        num: 1
      }, this.addIntegralOrderCallback, {
          method: "POST"
        });
    },

    /**
     * 积分兑换接口回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
    addIntegralOrderCallback (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);
      }
    },
    /**
    * 积分商品详情页页面接口
    */
    getGoodsInfo (goodsId) {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
        id: goodsId, // 商品ID
        uid: this.getStore("uid") // 用户ID
      }, this.getGoodsInfoCallback, {
          method: "POST"
        });
    },

    /**
     * 积分商品详情页页面接口回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} ext [扩展参数]
     */
    getGoodsInfoCallback (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 goodsId = this.$route.query.goodsId;
    if (goodsId) {
      // 获取商品信息
      this.getGoodsInfo(goodsId);
    }
    // 判断是否在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: 71,
          id: "1",
          url: "",
          ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""
        });
      }
      if (typeof this.$parent.getShareData === "function") {
        this.$parent.getShareData({
          type: 71,
          id: 1,
          url: "",
          ext: this.$route.query.goodsId ? { "goodsId": this.$route.query.goodsId } : ""
        });
      }
    }
  }
}
</script>

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