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" :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" :src="goodsInfo.simg" alt=""/>
        <!-- 内容 -->
        <div class="main-box">
            <!-- 标题 -->
            <div v-if="goodsInfo && goodsInfo.title" class="title">
             {{goodsInfo.title}}
            </div>
            <!-- 积分 -->
            <div class="title-t">
              <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
              <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
              <span class="integral-in">积分</span>
            </div>
            <!-- 商品信息 -->
            <div class="goods-info">
              <div class="good-title">
                <span class="left"></span>商品详情<span class="right"></span>
              </div>
              <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box">
              </div>
              <div class="good-title">
                <span class="left"></span>兑换规则<span class="right"></span>
              </div>
              <div class="good-desc">
                <div v-if="goodsInfo && goodsInfo.shop_type && (goodsInfo.shop_type == 1 || goodsInfo.shop_type == 2)">
                    <div class="text-left">
                      兑换此积分即可0元购买该商品；<br>
                      仅限此商品使用，兑换后7天内有效；
                    </div>
                    <div class="text-left">
                      <span>· 正版授权</span>
                      所售商品均已官方授权，请放心购买；
                    </div>
                    <div class="text-left">
                      <span>· 正品保障</span>
                      独家正品保障。
                    </div>
                </div>
                <div v-if="goodsInfo && goodsInfo.shop_type && goodsInfo.shop_type == 2" class="text-left">
                  1､ 您兑换的音频内容，音频上线期间可长期收听；<br>
                  2､ 兑换后暂不支持退款，感谢您的支持；<br>
                  3､ 兑换完成后若显示异常，请10分钟之后尝试；<br>
                  4､您兑换的音频内容为网家家版权内容，请勿恶意转载；<br>
                  5､客服电话：010-65832485;<br>
                  6､ 具体注意事项详情可见
                  <span @click="toLink" class="to-link">
                    《网家家APP购买音频内容服务协议》
                  </span>
                </div>
              </div>
              <div class="good-title">
                <span class="left"></span>相似商品<span class="right"></span>
              </div>
               <!-- 像是商品推荐 -->
              <!-- 商品样式 7 列表 -->
              <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail" 
                  :lists="goodsInfo"
                  com="7">
              </column-list-box>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">
          <div class="btn" @click="exchange">
            立即兑换
          </div>
        </div>
        <!-- 地址信息组件 -->
        <address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></address-toast>
</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 columnListBox from "@/components/columnListBox/columnListBox";
import addressToast from "@/components/addressToast/addressToast";
import { Toast, Indicator } from "mint-ui";
export default {
  name: 'goodDetails',
  data () {
    return {
      banner: null,
      goodsInfo: null,
      backs: null, // 后退按钮组
      pointsToast_control: this.$route.query.pointsToast_control,
      isExchange: false, // 是否已经兑换
    }
  },
  //部件
  components: {
    callAppBox,
    swiper,
    backBox,
    columnListBox,
    addressToast
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 跳转网家家购买音频协议
    toLink () {
      if (this.isCNLive.value) {
        // 跳转封装
        if (typeof this.$parent.gotoDetail === 'function') {
          // 设置跳转参数
          let params = {
            type: '34',
            to: "https://wjj.ys1.cnliveimg.com/term/liveFwxy.html?type=web",
            shop_type: ''
          };
          // 页面跳转
          this.$parent.gotoDetail(params);
        }
      } else {
        this.$parent.callApps();
      }
    },
    toLinkPointsMall () {
      this.$router.push({
        path: '/pointsMall',
        query: {
          uid: this.getStore("uid")
        }
      })
    },
    /**
     * 后退
     */
    back () {
      // 判断是否有处理函数
      if (typeof this.$parent.back === 'function') {

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

        // 后退
        window.history.go(-1);
      }
    },
    /**
    * 跳转商品详情
    * @param {Object} item [数据对象]
    */
    toDetail (item) {
      if (this.isCNLive.value) {
        // 跳转封装
        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.callApps();
      }
    },
    // 兑换
    exchange () {
      if (this.isCNLive.value) {
        // 提示用积分兑换兑换
        let options = {
          title: "",
          message: "确定使用" + this.goodsInfo.num + "积分兑换?",
          confirmButtonText: "确定",
          confirmButtonCallback: this.addIntegralOrderconfirm,
          showCancelButton: true,
          cancelButtonText: "取消"
        };
        // 调用showModal层参数
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else {
        this.$parent.callApps();
      }
    },
    // 确定兑换回调
    addIntegralOrderconfirm () {
      // isExchange为false才可兑换防止连续点击
      if (!this.isExchange) {
        // 兑换
        this.addIntegralOrder();
      }
    },
    /**
     * 分享
     */
    toShare () {
      // 判断分享
      if (typeof this.$parent.toShare === 'function') {
        this.$parent.toShare(46, this.$route.query.goodsId, "");
      }
    },
    /**
   * 积分商品详情页页面接口
   */
    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 options = {
          message: datas.shop_type == 3 ? "付费音频已存入您的账户，可前往“我的——我的付费内容——已购内容”收听" : "兑换成功",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: this.addAddressCallback,
          params: { shopType: datas.shop_type, id: datas.id }
        };
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else if (res.code == 401) {
        // 获取积分商品详情页失败
        // 
        // 显示查看地址弹框
        let options = {
          title: "积分不足",
          message: "你的积分不足" + "<br>" + "赚取更多积分，请至任务列表",
          messageAlign: "center",
          confirmButtonText: "确定",
          confirmButtonCallback: this.jumpClientIntegralList,
          showCancelButton: true,
          cancelButtonText: "取消"
        };
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      } else {
        Toast(res.message);
      }
    },
    // 填写地址
    addAddressCallback (params) {
      // 如果是实物弹起填写地址弹窗
      if (params.shopType == 1) {
        this.pointsToast_control = true;
        // 礼品兑换弹框派发
        this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
      }
    },
    /**
    * 跳转赚取积分页面
    * @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();
        }
      }
    },
    /**
     * 积分商品详情页页面接口
     */
    getGoodsInfo () {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
        id: this.$route.query.goodsId // 商品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("获取积分商品详情页失败");
      }
    },
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "积分商品详情页");
    // 获取商品信息
    this.getGoodsInfo();
    // ios从url获取安卓localStorage
    if (this.isiPhone.value) {
      this.pointsToast_control = this.$route.query.pointsToast_control;
    } else {
      let ext = window.localStorage.getItem("ext");
      this.pointsToast_control = this.getParameterByName(
        "pointsToast_control",
        ext
      );
    }

    // 判断是否在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: 46,
          id: this.$route.query.goodsId,
          url: ""
        });
      }
    }
  }
}
</script>

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

<style>
.html_box img {
  display: block;
  width: 100%;
}
</style>