<template>
  <div class="main">
    <div class="section-1">
      <van-swipe :touchable="true" :autoplay="3000" style="width:100%">
        <van-swipe-item v-for="(item, index) in shopImg" :key="index">
          <img v-lazy="item.picUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="shop_title">
      <h1>{{shopData.ProductName}}</h1>
        <div v-if='shopData.productLevel.length == 0'>
                <p :style="{'color':'red',' text-decoration':'line-through'}" >{{shopData.MarketIng}}积分+{{shopData.MarketPrice|fixed}}元</p>
        </div>
              <div v-if="shopData.productLevel.length > 0">
                <p style="color:red;text-decoration:none" >{{shopData.productLevel[0].marketIng}}积分+{{shopData.productLevel[0].marketPrice | fixed}}元</p>
                <p style="color:#999999;text-decoration:line-through">{{shopData.MarketIng}}积分+{{shopData.MarketPrice|fixed}}元</p>
              </div>
      
    </div>
    <div class="section-2">
      <p>{{shopData.ProductDesc}}</p>
      <!-- <p>注:非实物商品，一经兑换概不退换</p> -->
      <h2>详细介绍</h2>
      <section v-html="shopData.ProductText"></section>
    </div>
    <div class="over">已到底~</div>
    <div class="btn">
      <div class="zxkf" @click="navigatorToKefu"><img src="../assets/images/MCenter/kf.png">客服</div>
      <div class="duihuan" @click="jumpqueding">马上兑换</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "shopDetails",
  data() {
    return {
      images: [
        "https://image.360lj.com/s/upload/prodimage/201704/201742110649889!320x320.jpg",
        "https://image.360lj.com/s/upload/prodimage/201907/201971511101219!320x320.jpg",
        "https://image.360lj.com/s/upload/prodimage/201704/201742110649889!320x320.jpg"
      ],
      shopData: {
        productLevel:[]
      },
      productID: "",
      productCode: "",
      shopImg: {},
      openid:sessionStorage.getItem("openId"),
      userphone:sessionStorage.getItem("userphone"),
      isbd: sessionStorage.getItem("userDate") == null //正确是没绑定
    };
  },
  created() {
    this.productCode = this.$route.query.ProductCode;
  },
  filters: {
    fixed: function(value) {
      return (value / 100).toFixed(2);
    }
  },
  methods: {
    // 联系客服
    navigatorToKefu(){
   
      location.href = `https://m.360lj.com/baidu?openid='+{{openid}}+"&name=&r=3.14'+name`
    },
    haveShopDate() {
      var obj  = {}
      if(this.isbd){
          obj.productCode = this.productCode
          obj.secretPhone = ""
      }else{
         obj.productCode = this.productCode
          obj.secretPhone= this.userphone
      }
      this.$http.productInfo(obj).then(res => {
        this.shopData = res.data.data;
        this.shopImg = this.shopData.pics;
      });
    },
    //跳转确认订单
    jumpqueding() {
      if (this.isbd) {
        this.$dialog.confirm({
          message: "请先绑定手机号"
        })
          .then(() => {
            this.$router.push({
              path: "/binding"
            });
          })
          .catch(() => {});
      } else {
        this.$router.push({
          path: "/deteorder",
          query: {  productCode: this.productCode }
        });
      }
    }
  },
  mounted() {
    this.haveShopDate();
  }
};
</script>
<style scoped lang="less">
.main {
  background-color: #f4f4f6;
  padding-bottom: 1rem;
}
.section-1 {
  width: 100%;
  background-color: #fff;
  padding-bottom: 0.7rem;
  img {
    // width: 100%;
    // height: 100%;
    object-fit: contain;
  }
}
.shop_title {
  position: relative;
  top: -0.5rem;
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.2rem #8199ff3d;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  h1 {
    width: 100%;
    font-size: 0.3rem;
    text-align: left;
  }
  div{
    width: 100%
  }
  p {
    width: 100%;
    font-size: 0.2rem;
    text-align: left;
  }
}
.section-2 {
  background-color: #fff;
  padding: 0.2rem;
  > p:first-child {
    font-size: 0.3rem;
  }
  > p:nth-child(2) {
    color: red;
    font-size: 0.25rem;
  }
  h2 {
    font-size: 0.4rem;
    font-weight: bold;
  }
}
.btn {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  box-shadow: 0 -0.01rem 0.1rem #0000002e;
  padding: 0.1rem;
  z-index: 10;
}
.btn > div {
  width: 2.16rem;
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.4rem;
  color: #fff;
  border-radius: 0.3rem;
  box-shadow: none;
  text-align: center;
  margin-left: 0.2rem;
}
.btn .zxkf {
  background-color: #ffb00f;
  text-align: center;
  img{
    width: .36rem;
    height: .29rem;
    display: inline-block;
    margin-right: .1rem
  }
}
.btn .duihuan {
  background-color: #4ca0ff;
}
.over {
  text-align: center;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  color: #999999;
  background-color: #fff;
  margin-top: 0.3rem;
}
</style>