
<style scoped>  
.comp-login {background-color:#F3F6FF;height:100%;height:100vh;padding:0;margin:0;}
.input-box {background:#FFF;}
.giftinfo{
  height: 4rem;background:#fff;margin-bottom: 0.5rem;padding-top: 1rem;
}
.giftinfo .giftimg{float:left; padding-left: 0.8rem; }
.giftinfo .gifttitle{float:left; font-weight: bolder;margin-left:1rem;padding-top: 1rem;}
.giftinfo .giftcount{color:#B3B3B3; line-height: 3rem;padding-top: 0.5rem;text-align: right;padding-left:1rem;padding-right: 1rem;}
.writeoffinfo{height: 6rem;background: #fff; margin-bottom: 0.5rem;}
.writeoffinfo .writeoffcode,.writeoffinfo .writeoffstate{line-height:3rem;height:3rem; margin-left:1rem;margin-right: 1rem;}
.writeoffinfo .writeoffcode{border-bottom: 0.1rem solid #F7F7F7; }
.writeoffinfo .writeoffcode span:nth-child(1),.writeoffinfo .writeoffstate  span:nth-child(1) {text-align: left;
width: 20%;display: inline-block;}
.writeoffinfo .writeoffcode span:nth-child(2),.writeoffinfo .writeoffstate  span:nth-child(2) {text-align: right;color:#818181;
width:80%;display: inline-block;}
.prizeinfo{height: 9rem;background: #fff; margin-bottom: 0.5rem;}
.prizeinfo div{line-height:3rem;height:3rem; margin-left:1rem;margin-right: 1rem;}
.prizeinfo .prizedate,.ordernumber{border-bottom: 0.1rem solid #F7F7F7;}
.prizeinfo div span:nth-child(1){text-align: left;
width: 20%;display: inline-block;}
.prizeinfo div span:nth-child(2){text-align: right;color:#818181;
width:80%;display: inline-block;}
.item-btn {display:inline-block;width:92%;height:2.6rem;padding:0;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin:0 4%;margin-top:0px;margin-bottom:0px;font-size:1rem;line-height:2.6rem;text-align:center;color:#fff;background:#3A8AFB;border:none;border-radius:0.2rem;margin-top:9rem;margin-bottom:1rem;}

.auditPopu{position: fixed;text-align: center;top:50%;margin-top:-10rem;min-height: 15.4rem;width: 74%;background: rgba(255, 255, 255, 1);margin-left:13%;border-radius: 0.2rem;}
.auditPopu img{display: block;margin: 0 auto;}
.auditPopu .successImg{width: 5rem;height: 5rem;margin-top: 2rem;}
.auditPopu h3{color:#3A8AFB;}
.auditPopu p{width:86%;margin: 0 auto; margin-top:2.5rem;}
.auditPopu p button{
  border: 0.1rem solid#3A8AFB;width: 70%;background:#fff;color:#3A8AFB;height: 2rem;line-height: 2rem;
}
.auditPopu .closeImg{width: 2rem;height: 2rem;position: absolute;bottom: -3.2rem;margin-left:-1rem;left: 50%;}
.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
input[type=button],button, input[type=submit], input[type=file], button {cursor:pointer;outline:0px; -webkit-appearance:none; }

</style>
<template>     
  <div class="container comp-login jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'"> 
       <div class="giftinfo">
          <div class="giftimg"> <img :src="VerifyCodeInfoModel.Gift_ProductImg" style="width:3.5rem;"/></div>
          <div class="gifttitle" v-html="VerifyCodeInfoModel.Gift_Name"></div>
          <div class="giftcount">数量:{{parseInt(VerifyCodeInfoModel.Amount)}}</div>
       </div>
      <div class="writeoffinfo">
        <div class="writeoffcode"><span>核销码</span><span style="color:#EE8D60;">{{VerifyCodeInfoModel.VerificationCode}}</span></div>
        <div class="writeoffstate"><span>核销状态</span><span style="color:#7A7A7A;">{{VerifyCodeInfoModel.OrderStatusText}}</span></div>
      </div>
      <div class="prizeinfo">
        <div class="prizedate"><span>中奖时间</span><span>{{VerifyCodeInfoModel.ROW_CREATE_DATE}}</span></div>
        <div class="ordernumber"><span>订单号</span><span>{{VerifyCodeInfoModel.WRNo}}</span></div>
        <div class="datevalidity"><span>有效期</span><span>{{VerifyCodeInfoModel.Gift_ExpriseStart}}-{{VerifyCodeInfoModel.Gift_ExpriseEnd}}</span></div>
      </div>

       <button class="item-btn"  @click="EnterIn()">确认核销</button>

         <div class="mask" v-show="isShow.IsshowMask"></div>
          <div class="auditPopu" v-show="isShow.IsshowAudit">
              <img class="successImg" src="http://image.supercarrier8.com/h5_key/icon-OK.png" alt="success">
              <h3>
              核销成功!
              </h3>
              <p>
              <button @click="goPage('Key_WEnter')">继续核销</button>
              </p>
        </div>
        <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import { debug } from 'util';
import '@/assets/js/libs/js.cookie';
import utils from "@/assets/js/utils.js";
import { Indicator } from 'mint-ui';
export default {
  name: "Key_WriteOffInfo",
    components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      isShow:{
        IsshowMask:false,
        IsshowAudit:false
      },
      vh:false,
      VerificationCode:"",
      VerifyCodeInfoModel:{}
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    GetVerifyCodeInfo(){
         var that = this;
        var eno = that.sup8.context.enterpriseno;
        var url = "/channel/GetVerifyCodeInfo";
        var dataParams = {
            VerificationCode:sessionStorage.getItem("VerificationCode"),
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close(); 
            if (res.flag&&res.data){
                that.VerifyCodeInfoModel=res.data;
                that.VerifyCodeInfoModel.Gift_ExpriseStart=utils.formatDate("yyyy.MM.dd",that.VerifyCodeInfoModel.Gift_ExpriseStart);
                that.VerifyCodeInfoModel.Gift_ExpriseEnd=utils.formatDate("yyyy.MM.dd",that.VerifyCodeInfoModel.Gift_ExpriseEnd);
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    },EnterIn(){
        var that = this;
        var eno = that.sup8.context.enterpriseno;
        var url = "/channel/SubmitVerifyCode";
        var dataParams = {
            VerificationCode:sessionStorage.getItem("VerificationCode"),
            UserToken:channelHelper.GetUserToken(),
            EnterpriseNo: eno,
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbError=function(){Indicator.close();}
        var cbSuccess = function(res){
          Indicator.close();
            if (res.flag){
              that.isShow.IsshowMask=true;
              that.isShow.IsshowAudit=true;
            }
            else
            {
               Toast(res.msg);
            }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
    }
  },
  watch: {
  },
  created: function() {
     Indicator.close(); 
     this.GetVerifyCodeInfo();
  },
  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);
      }
      setTimeout(()=>{
        $("#Mobile").removeAttr("readonly");$("#MemberPassword").removeAttr("readonly");
        let offsetHeight = document.body.offsetHeight;
        let scrollHeight = document.body.scrollHeight;
        this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
      },1000);
  }
};
</script>

