w-front-end / select_good · Files

<template>
  <div class="good-details-box">
    <!-- H5唤起App组件 -->
    <!-- 导航栏 -->
    <div class="nav">

      <!-- navBar -->
      <nav-bar @back="back"
               :navs="navs">
      </nav-bar>
    </div>

    <div class="pl"></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="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 v-if="goodsInfo && goodsInfo.content"
             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="health_desc">
          <div class="health_title">
            商品来源
          </div>
          <div class="desc">
            积分商城的商品均由好家园审核的第三方合作商家提供，请放心兑换。
          </div>
        </div> -->
        <!--  商品差异 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            商品差异
          </div>
          <div class="desc">
            商品图片仅供参考，具体请以实物准。
          </div>
        </div> -->
        <!-- 发货时间 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            发货时间
          </div>
          <div class="desc">
            商品兑换成功后，预计3-5个工作日发货，如遇节假日及特殊情况（如疫情严重），发货可能相应延迟，您可以在活动页面中的“兑换记录”查看物流信息。
          </div>
        </div> -->
        <!-- 配送方式 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            配送方式
          </div>
          <div class="desc">
            商品由合作商家通过快递进行配送，配送范围覆盖全国大部分地区（港澳台地区除外）
          </div>
        </div> -->
        <!-- 修改信息 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            修改信息
          </div>
          <div class="desc">
            商品兑换成功后无法更改配送信息，无法退还已使用的积分值，不支持申请退换货。
          </div>
        </div> -->
        <!-- 商品损坏 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            商品损坏
          </div>
          <div class="desc">
            签收时请您先确认商品外包装完整，如有问题请当场拒收，拒收后可以拨打客服电话进行协助处理。
          </div>
        </div> -->
        <!-- 问题咨询 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            问题咨询
          </div>
          <div class="desc">
            您在使用过程中有任何问题，请拨打客服电话进行咨询。
          </div>
        </div> -->
        <!-- 其他 -->
        <!-- <div class="health_desc">
          <div class="health_title">
            其他
          </div>
          <div class="desc">
            收货后恶意损坏商品、恶意投诉等影响正常运营，好家园有权拒绝售后服务并追究相关责任。
          </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"
                  company="2"
                  com="7">
              </column-list-box> -->
      </div>
    </div>
    <!-- 有积分值页脚显示 -->
    <div v-if="goodsInfo && goodsInfo.stock != 0">
      <!-- 积分值充足 -->
      <div v-if="parseInt(goodsInfo.grade)>parseInt(goodsInfo.num) || parseInt(goodsInfo.grade) == parseInt(goodsInfo.num)"
           class="footer">
        <div class="btn"
             @click="exchange">
          立即兑换
        </div>
      </div>
      <!-- 积分值不足页脚显示 -->
      <div v-else-if="parseInt(goodsInfo.grade)<parseInt(goodsInfo.num)"
           class="footer">
        <div class="desc">还差{{parseInt(goodsInfo.num)-parseInt(goodsInfo.grade)}}积分值</div>
        <div class="btn"
             @click="jumpClientIntegralList(goodsInfo)">
          获取积分值
        </div>
      </div>
    </div>
    <!-- 有积分值商品售罄 -->
    <div v-else-if="goodsInfo && goodsInfo.stock == 0"
         class="footer">
      <div class="btn grey">
        补货中
      </div>
    </div>
    <!-- 地址信息组件 -->
    <!-- <app-address-toast v-if="isCNLive.value"
                       ref="itemsInfo"
                       @toUpdate="toLinkPointsMall"
                       v-show="pointsToast_control"></app-address-toast> -->
    <!-- 填写地址浮层 -->
    <address-modal ref="addressModal"
                   :options="addressModalOptions">
      <!-- 底部提示信息slot -->
      <!-- <div class="address-bottom-tips" slot="bottom">
				因气候和水果保鲜等原因，以下地区不发货：海外及港、澳、台、新疆、西藏、海南、青海、甘肃、宁夏、内蒙古、黑龙江、吉林、辽宁。
			</div> -->
    </address-modal>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import swiper from "@/components/swiper/swiper";
import navBar from '@/components/navBar/navBar';
import columnListBox from "@/components/columnListBox/columnListBox";
import addressModal from '@/components/addressModal/addressModal';
import { Toast, Indicator } from "mint-ui";
export default {
  name: 'goodDetails',
  data () {
    return {
      title: "", // 标题
      banner: null,
      goodsInfo: null,
      navs: null, // 后退按钮组
      isExchange: false, // 是否已经兑换
      currentAddress: null,			// 当前选择的地址
      addressModalOptions: null		// 填写地址浮层选项
    }
  },
  //部件
  components: {
    swiper,
    navBar,
    columnListBox,
    addressModal
  },
  //静态
  props: [
  ],
  //对象内部的属性监听，也叫深度监听
  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");
      }
    }
  },
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  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.callApp();
      }
    },
    /**
     * 后退
     */
    back () {
      // 返回先隐藏弹框

      // 判断是否有处理函数
      if (typeof this.$parent.back === 'function') {
        // 隐藏通用浮层
        this.$parent.$refs.showModal.hideLayer();
        // 后退
        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, {
              activityCode: "ds_jfsc"		// 添加页面渠道码
          });
        }
      } else {
        this.$parent.callApp();
      }
    },
    // 兑换
    exchange () {
      // 校验登录
      if (this.$parent.checkLogin()) {
        // 提示用积分值兑换兑换
        let options = {
          title: "",
          message: "兑换将会消耗" + this.goodsInfo.num + "积分值" + '<br/>' + "确定兑换吗?",
          confirmButtonText: "确定",
          confirmButtonCallback: this.addLuckIntegralOrderconfirm,
          showCancelButton: true,
          cancelButtonText: "取消"
        };
        // 调用showModal层参数
        this.$set(this.$parent, "showOptions", options);
        // 显示通用浮层
        this.$parent.$refs.showModal.showLayer();
      }
    },
    // 确定兑换回调
    addLuckIntegralOrderconfirm () {
      /**
       * 判断shop_type是否等于1等于1为实物弹出填写地址,其他商品直接走兑换接口
       */
      if (this.goodsInfo.shop_type == 1) {
        // 判断当前地址是否设置，如果没设置，设置首选地址
        if (window.localStorage.getItem('currentAddress')) {
          // 设置地址浮层参数
          this.setAddressModalOptions();
        } else {
          // 设置首选地址
          this.getMyFirstAddress();
        }
        // 判断组件是否加载
        if (typeof this.$refs.addressModal === 'object') {
          // 存储收货地址显示和隐藏状态
          window.localStorage.setItem('addressModalIsShow', true)
        }
      } else {
        // isExchange为false才可兑换防止连续点击
        if (!this.isExchange) {
          // 兑换
          this.addLuckIntegralOrder();
        }
      }
    },
    /**
     * 分享
     */
    // toShare () {
    //   // 判断分享
    //   if (typeof this.$parent.toShare === 'function') {
    //     this.$parent.toShare(46, this.$route.query.goodsId, "");
    //   }
    // },
    /**
   * 积分值兑换接口
   */
    addLuckIntegralOrder (addressId) {

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

      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().LuckDraw + "/addLuckIntegralOrder", {
        uid: this.getStore("uid"),
        id: this.$route.query.goodsId, // 商品ID
        num: 1, // 数量
        addressId: addressId || (this.currentAddress && this.currentAddress.id ? this.currentAddress.id : '') // 当前地址id
      }, this.addLuckIntegralOrderCallback, {
        method: "POST"
      });
    },

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

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

      // 返回处理
      if (res.code == 200) {
        // 判断组件是否加载
        if (typeof this.$refs.addressModal === 'object') {
          // 隐藏填写地址浮层
          this.$refs.addressModal.hideLayer();
        }
        // 解构数据
        let { data: datas } = res;
        // 方式连续点击兑换
        this.isExchange = true;
        // 两秒后可继续兑换
        let _this = this
        setTimeout(function () {
          _this.isExchange = false;
        }, 1500);
        // 显示查看地址弹框
        let options = {
          title: "兑换成功",
          // message: "预计3-5个工作日发货，在活动页面的《兑换记录》里可以查看物流",
          message: "",
          messageAlign: "center",
          confirmButtonText: "我知道了",
          confirmButtonCallback: ""
          // 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);
      }
    },
    /**
    * 跳转赚取积分值页面
    * @param {Object} item [数据对象]
    */
    jumpClientIntegralList (item) {
      // onLine线上报名  offline线下报名 partyBuilding党建答题
      if (this.$route.query.jumpPath == 'partyBuilding') {
        // 跳转党建首页
        window.location.href = "https://wjjh5" + (this.mode == 'prod' ? "" : "test") + ".cnlive.com/activityH5/djdt/index.html?modelId=1&channelName=tg_wjdc_djdt&isShowTitle=true&isWjjReport=true" + "&oid=" + this.$route.query.oid
      } else if (this.$route.query.jumpPath == 'onLine') {
        // 跳转智慧教育线上报名首页
        window.location.href = "http://wjjh5" + (this.mode == 'prod' ? "" : "test") + ".cnlive.com/cnWisdomEducation.html?oid=" + this.$route.query.oid + "&pageId=" + this.$route.query.pageId + "&channelName=" + this.$route.query.channelName;
      } else if (this.$route.query.jumpPath == 'offline') {
        // 跳转智慧教育线下报名首页
        window.location.href = "http://wjjh5" + (this.mode == 'prod' ? "" : "test") + ".cnlive.com/cnWeOfflineCourseRegistration.html?oid=" + this.$route.query.oid + "&pageId=" + this.$route.query.pageId + "&channelName=" + this.$route.query.channelName;
      } else {
        // 跳转智慧教育线上报名首页
        window.location.href = "http://wjjh5" + (this.mode == 'prod' ? "" : "test") + ".cnlive.com/education/vitalityValueIndex"
      }
    },
    /**
     * 积分值商品详情页页面接口
     */
    getGoodsInfo (goodsId) {
      // 加载中提示
      Indicator.open("加载中...");
      // 获取证书请求接口
      this.http("/Api/" + this.getApiVersion().LuckDraw + "/luckGoodsInfo", {
        id: goodsId, // 商品ID
        uid: this.getStore("uid"), // 用户ID
        activityCode: this.$route.query.channelName // 埋点统计
      }, 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("获取积分值商品详情页失败");
      }
    },
    /**
     * 我的首选地址
     */
    getMyFirstAddress () {

      // 校验必要参数
      if (this.getStore("uid")) {

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().index) + "/myFirstAddress", {
          uid: this.getStore("uid")
        }, this.getMyFirstAddressCallback, {
            method: "POST"
          });
      }
    },

    /**
     * 我的首选地址回调
     * @param {object} res [服务器返回数据]
     * @param {object} ext [扩展参数]
     */
    getMyFirstAddressCallback (res, ext) {

      // 返回处理
      if (res.code == 200) {
        // 解构数据
        let datas = res.data;
        if (datas) {
          // 设置当前地址对象
          this.$set(this, 'currentAddress', datas);

          // 校验用户登录信息
          if (datas.uid === this.getStore("uid")) {
            // 显示填写地址浮层
            this.$refs.addressModal.showLayer();
            // 同步当前选中的地址信息
            window.localStorage.setItem('currentAddress', JSON.stringify(datas));
          }
        }
      }

      // 设置地址浮层参数
      this.setAddressModalOptions();
    },
    /**
     * 设置地址浮层参数
     */
    setAddressModalOptions () {
      // 显示填写地址浮层
      this.$nextTick(() => {
        // 判断组件是否加载
        if (typeof this.$refs.addressModal === 'object') {

          // 设置地址浮层选项
          this.$set(this, 'addressModalOptions', {
            title: '收货地址',
            showCancelButton: true,
            bottomClose: true
          });

          // 根据当前地址信息状态，设置浮层参数
          if (this.currentAddress && this.currentAddress.name && this.currentAddress.phone && this.currentAddress.address) {

            // 设置参数
            this.$set(this.addressModalOptions, 'name', this.currentAddress.name);
            this.$set(this.addressModalOptions, 'phone', this.currentAddress.phone);
            this.$set(this.addressModalOptions, 'address', this.currentAddress.address);
            this.$set(this.addressModalOptions, 'confirmButtonText', '确定');
            this.$set(this.addressModalOptions, 'confirmButtonCallback', this.addLuckIntegralOrder);
            this.$set(this.addressModalOptions, 'cancelButtonText', '更换地址');
            this.$set(this.addressModalOptions, 'cancelButtonClass', 'btn-yellow');
            this.$set(this.addressModalOptions, 'cancelButtonCallback', this.toAddressList);
          } else {

            // 设置参数
            this.$set(this.addressModalOptions, 'noDataCallback', this.toAddressList);
            this.$set(this.addressModalOptions, 'confirmButtonText', '创建地址');
            this.$set(this.addressModalOptions, 'confirmButtonCallback', this.toAddressList);
            this.$set(this.addressModalOptions, 'cancelButtonText', '取消');
            this.$set(this.addressModalOptions, 'cancelButtonCallback', this.$refs.addressModal.hideLayer);
          }
          console.log(this.addressModalOptions);
          // 显示填写地址浮层
          this.$refs.addressModal.showLayer();
        }
      });
    },
    /**
     * 地址列表（首先验证登录状态）
     */
    toAddressList () {
      // 验证是否登录
      if (this.$parent.checkLogin()) {
        // 跳转地址簿列表页面
        this.$router.push({
          path: "/addressList",
          query: {
            mode: 'select_edit',
            uid: this.getStore("uid")
          }
        });
      }
    },
  },
  //请求数据
  created () {
    // 设置标题
    this.$set(this, "title", "积分值商品详情页");
    this.$set(this, "navs", {
      back: {
        img: "static/img/icon_back.png"
      },
      title: this.title
    });
    // 获取商品ID
    let goodsId = this.$route.query.goodsId;
    if (goodsId && this.$parent.checkLogin()) {
      // 获取商品信息
      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', '商品详情页');
    // }

    /* 获取当前设置的地址对象 开始 */
    let tempCurrentAddress = JSON.parse(window.localStorage.getItem('currentAddress'));
    if (tempCurrentAddress && tempCurrentAddress.uid === this.getStore("uid")) {
      // 设置当前选择地址
      this.$set(this, 'currentAddress', tempCurrentAddress);

      // 判断地址簿层当前显示状态
      if (window.localStorage.getItem("addressModalIsShow")) {
        this.$nextTick(() => {
          // 显示填写地址浮层
          this.$refs.addressModal.showLayer();
          // 判断组件是否加载
          if (typeof this.$refs.addressModal === 'object') {
            // 页面返回，地址簿显示中，重新设置地址簿信息
            this.setAddressModalOptions();
          }
        });
      }
    } else {

      // 没有地址，初始化currentAddress
      this.$set(this, 'currentAddress', null);
    }

    /* 获取当前设置的地址对象 结束 */

  },
  mounted () {
    var that = this;
    // 如果是App外，设置唤起App和微信内分享参数
    if (!this.isCNLive.value) {
      // 设置积分值首页唤起app参数
      if (typeof this.$parent.getOpenApp === "function") {
        this.$parent.getOpenApp({
          type: 46,
          id: this.$route.query.goodsId,
          url: ""
        });
      }
    }
  },
  destroyed () {
    // 隐藏通用浮层
    this.$parent.$refs.showModal.hideLayer();
  }
}
</script>

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

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