<style scoped>
hr{margin: 0;border: 0.19rem solid #e6e6e9;}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  overflow: hidden;
  _zoom: 1;
}
.comp-scoreinfo {
  background-color: #e6e6e9; height: 100%;
  height: 100vh;
}
.comp-scoreinfo .scoreTitle {
  padding-left: 3%;
  background-color: #fff;
}
.comp-scoreinfo .scoreTitle span{
  font-size: 1rem;
  line-height: 3rem;
  height: 3rem;
  display: block;
  color: #d70101;
  padding-left: 2.6rem;
  background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_shop/icon_exchangelist.png) no-repeat left center;
  background-size: 2rem 2rem;
  font-weight: 600;
}
.comp-scoreinfo .scoredesc {
  background: #ffffff;
  border-top: 0.1rem solid #e6e6e9;
}

.addressProduct .productList {
  display: flex;
  min-height: 4.2rem;
  border-bottom: 0.01rem solid #f5f5f5;
  padding-bottom: 0.4rem;
}
.addressProduct .productList:nth-last-of-type(1){
  border-bottom-width: 0;
}
.addressProduct .productImg {
  width: 5rem;
  margin-right: 0.2rem;
  position: relative;
}
.addressProduct .productImg img {
  width: 100%;
  height: 5rem;
  margin-top: 5%;
}
.addressProduct .productContent {
  flex: 1;
}
.addressProduct .productContent .productName{
  font-size: 1rem;
  margin-bottom: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  height: 2.76rem;
}
.addressProduct .productContent .clearfix {
  color: #b3b3b3;
  vertical-align: bottom;
  height: 1.5rem;
  line-height: 1.2rem;
  margin-top: 1rem;
}
.addressProduct .productContent .clearfix > span:nth-of-type(1) {
  float: left;
  line-height: 20px;
}
.addressProduct .productContent .clearfix > span:nth-of-type(2) {
  float: right;
}
.text-gray {
  color: #b3b3b3;
}
.text-danger {
  color: #c03546;
}
.dangerIntegral {
  color: #c03546;
  font-weight: 700;
  margin-right: 0.2rem;
}
hr {
  margin: 0;
  border: 0.17rem solid #e6e6e9;
}

.addressProduct {
  padding: 0.6rem 3%;
  background-color: #fff;
}

.button {
  outline: none;
  float: right;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 2em 0.55em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.8em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.orange {
  color: #ffffff;
  border: solid 1px #eb7741;
  background: #eb7741;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#eb7741),
    to(#eb7741)
  );
  background: -moz-linear-gradient(top, #eb7741, #eb7741);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb7741', endColorstr='#eb7741');
}
.small {
  padding: 0em 0.4rem;
}


</style>

<style scoped>
.myAddress{
  width: 100%;
  background-color: white;
  border-top: 4px solid rgba(245,245,245,1);
  color:#333;
}
.myAddress .cont{
  border-bottom: 1px solid rgba(245,245,245,0.8);
}
.myAddress .cont span{
  display: inline-block;
  font-size: 0.28rem;
  color: #333;
  line-height: 0.88rem;
  margin-left: 0.32rem;
}
.myAddress .cont section{
  float:left;
}
.myAddress .cont p{
  display: inline-block;
  font-size: 0.28rem;
  color: #333333;
  line-height: 0.88rem;
  margin-left: 1rem;
}
.myAddress .cont .pic2{
  float: right;
  width: 0.14rem;
  height: 0.24rem;
  margin: 0.32rem 0.32rem 0.32rem 0;
}
.myAddress .cont p.text{
  margin-left: 0.72rem;
}
.showChose{
  width:100%;
  height:100%;
  position:inherit;
  top:0;
  left:0;
  z-index:120;
  background:rgba(77,82,113,0.8);
}
.address{
  position:absolute;
  bottom:0;
  left:0;
  z-index:121;
  background:#fff;
  width:100%;
}
.title h4{
  display:inline-block;
  margin-left:3.2rem;
  font-size:0.32rem;
  line-height:0.88rem;
  font-weight:normal;
  color:#999;
}
.title span{
  margin:0.42rem 0 0 2.2rem;
  font-size:0.45rem;
  line-height:0.34rem;
  color:#D8D8D8;
}
.area{
  display:inline-block;
  font-size:0.24rem;
  line-height:0.88rem;
  margin-left:0.42rem;
  color:#333;
}
.addList{
  width:100%;
  padding-left:0.32rem;
  font-size:0.34rem;
  line-height:0.88rem;
  color:#333;
}
/* 修改的格式 */
.address ul{
  width:95%;
  height:100%;
  max-height: 4.4rem;
  overflow:auto;
}
.address ul li{
  margin-left:5%;
}
.address .title .active{
  color:#0071B8;
  border-bottom:0.02rem solid #0071B8;
}
.address ul .active{
  color:#0071B8;
}
.nodata{width:12rem;height:10rem;background: url(https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_shop/empty_exchange.png) no-repeat center center;position: absolute;top:45%;margin-top:-5rem;left:50%;margin-left: -6rem;background-size: 12rem 10rem;}
</style>>
<template>
  <div class="jfBaseSize container comp-scoreinfo" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
    <div class="scoreTitle">
      <span>兑换记录</span>
    </div>
    <hr v-if="!nodatashow" />
    <div class="addressProduct" v-if="!nodatashow">
      <div class="productList" v-for="item in DataList" :key="item.Id">
        <div class="productImg">
          <img v-bind:src="item.Gift_ProductImg" />
        </div>
        <div class="productContent">
          <p class="productName">{{item.Gift_Name}}</p>
          <p class="clearfix">
            <span>
              <span class="dangerIntegral">{{item.UnitPoints*item.Amount}}</span>
              <span>积分</span>
            </span>
            <a @click="GoDetail(item.GiftType,item.Id)" class="button orange small">订单详情</a>
          </p>
        </div>
      </div>
    </div>
    <div class="nodata" v-if="nodatashow"></div>
  </div>
  
  
</template>
<script>
import JfapiHelper from "../assets/js/JfapiHelper.js";
import "../assets/js/libs/js.cookie";
import { Indicator } from "mint-ui";
export default {
  name: "JfCompReg",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      DataList: [],nodatashow:false,vh:false,
    };
  },
  methods: {
      GoDetail(GiftType,Id){
        //alert(Id);
        sessionStorage.setItem("ExchangeOrderId",Id)
        if(GiftType!=3)
        {
              this.$parent.changeSelectedPage("19");
        }
        else
        {
              this.$parent.changeSelectedPage("16");
        }
      }
  },
  watch: {},
  created: function() { 
     
    var that = this;
     JfapiHelper.CheckLogin(this.$parent, that.sup8.context.enterpriseno);
      Indicator.open();
    //that.sup8.context.enterpriseno
var url = "/integral/GetMallOrderList";
    var dataParams = {
      Enterpriseno: that.sup8.context.enterpriseno,
      UserToken: JfapiHelper.GetUserToken(),
      LanguageType:JfapiHelper.GetLanguageType(),
      Offset: 0,
      Limit: 100
    };
    var cbSuccess = function(res) {
        Indicator.close();
      if (res.flag) {
        that.DataList = res.data.Rows;
          if(that.DataList==null)
          {
            that.nodatashow=true;
          }
      }else{
              that.nodatashow=true;
            }
    };
    var cbBeforeSend = function() {};
    JfapiHelper.CommonCallService(url,dataParams,
      cbSuccess,null,cbBeforeSend,null
    );

  },
  mounted: function() {
    var that=this;
    var isDesign=  location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that,'vh',true);
    }else{
        that.$set(that,'vh',false);
    }
  }
};
</script>

