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="$parent.isBack && isCNLive.value"
            class="back-box"
            :style="'padding-top: ' + $parent.top.value + 'px'"
            @back="back"
            :backs="backs"
        >
        </back-box>
        <!--轮播-->
        <swiper
          :style="
                'margin-top:' +
                    ($parent.isBack && isCNLive.value ? 62 : 10) +
                    'px'
            "
            v-if="goodsInfo && goodsInfo.simg"
            :swipers="goodsInfo.simg"
            :isPointsMall= 'true'
            :options="{
                showIndicators: true
            }"
        >
        </swiper>
        <!-- 内容 -->
        <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 class="integral">15000</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 class="good-desc">
                商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置
              </div>
              <div class="good-title">
                <span class="left"></span>兑换规则<span class="right"></span>
              </div>
              <div class="good-desc">
                <div class="text-left">商品详情的文字内容的书写的的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置，商品详情的文字内容的书写的位置</div>
                <div class="text-left">
                  <span>· 正版授权</span>
                  所售商品均已官方授权，请放心购买；
                </div>
                <div class="text-left">
                  <span>· 正品保障</span>
                  独家正品保障。
                </div>
                <div v-show="goodsInfo && 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="similarGoods && similarGoods.list && similarGoods.list.length" @jump="toDetail" 
                  :lists="similarGoods"
                  com="7">
              </column-list-box>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="footer">
          <div class="btn" @click="exchange">
            立即兑换
          </div>
        </div>
        <!-- 地址信息组件 -->
        <address-toast ref="itemsInfo" @toUpdate="getGoodsInfo" 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 {
  data () {
    return {
      banner: null,
      goodsInfo: null,
      backs: null, // 后退按钮组
      similarGoods: null, // 相似商品
      pointsToast_control: this.$route.query.pointsToast_control,
    }
  },
  //部件
  components: {
    callAppBox,
    swiper,
    backBox,
    columnListBox,
    addressToast
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  watch: {
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 跳转网家家购买音频协议
    toLink () {

    },
    /**
    * 跳转商品详情
    * @param {Object} item [数据对象]
    */
    toDetail (item) {
      // 判断通用跳转函数是否存在
      this.$router.push({
        path: '/goodDetails',
        query: {
          goodsId: item.id,
        }
      })
    },
    // 兑换
    exchange (item) {
      // 1月3号到1月31号才能领取
      // if (item.shop_type == 2) {
      this.pointsToast_control = true;
      // 礼品兑换弹框派发
      this.$refs.itemsInfo.getItemInfo(item)
      // } else {
      //   // 显示查看地址弹框
      //   let options = {
      //     title: "奖励已过领取时间",
      //     message: "领取时间: 2021-01-03至01-31",
      //     messageAlign: "center",
      //     confirmButtonText: "知道了"
      //   };
      //   // 调用showModal层参数
      //   this.$set(this.$parent, "showOptions", options);
      //   // 显示通用浮层
      //   this.$parent.$refs.showModal.showLayer();

      // }
    },
    /**
     * 积分商品详情页页面接口
     */
    getGoodsInfo () {

      // 校验登录
      if (this.$parent.checkLogin()) {

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

        // 获取证书请求接口
        this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
          uid: this.getStore("uid"),
          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;

        /* 获取banner */
        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', '积分商品详情页');
      // 临时，实物商品列表
      this.$set(this, 'similarGoods', {
        list: [
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500, // 积分
            time_state: 2,
            stock: 0
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          },
          {
            activity: "0",
            activity_desc: "",
            addtime: "1604544867",
            ads: "23123",
            code: "160454486791776561000",
            id: "9525539",
            price: "0.01",
            prices: "0.00",
            shop_type: "1",
            simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
            stock: "0",
            stoptime: "0",
            title: "aabbsdf350ml",
            grade: 1500 // 积分
          }
        ]
      });
    }

  },
  mounted () {
  }
}
</script>

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