<template>
  <!-- 各种回调页面 -->
  <div class="app-content awaitPayYe awaitPayYe">
    <div class="callback-wrap">
      <div class="bg_01"></div>
      <div class="callback-blo">
        <!-- 使用icon -->
        <!-- 待支付 -->
        <block>
          <div class="icon">
            <i class="iconfont icondaizhifu"></i>
          </div>
        </block>
        <view class="wait">待付款</view>
        <!-- 待支付 -->
        <block>
          <div class="price">
            <span>￥</span>
            <span class="app-size-36 app-bold">{{ actPrice || ''}}</span>
          </div>
          <div class="order-num app-color-3 order-show">订单号: {{ orderSn || ''}}</div>
          <div class="order-num app-color-3 order-show" v-if="orderTime>0">{{orderTime}} 秒后订单失效</div>
          <div class="order-num app-color-3 order-show" v-else>订单已失效</div>
        </block>
        <block>
          <div class="call-one-btn">
            <button class="button-com green pay-wx" v-if="orderTime>0" @click="_wxPay" >微信支付</button>
            <button class="button-com disable pay-wx" v-else>微信支付</button>
          </div>
        </block>
      </div>
    </div>
  </div>
</template>

<script>
import { purchaseClearWxPay } from "@/api/purchase/index";
import { mapGetters } from "vuex";
export default {
  name: "callback",
  data () {
    return {
    	orderTime:120,
      type: '',
      modalForm: {
        payPassword: ''
      },
      psdKey: '',
      orderSn: '',
      actPrice: '',
      _type: '1'
    };
  },
  onLoad (options) {
    // this.getWeChat(options.ids,options.id)
    this.orderSn = options.orderSn
    this.actPrice = options.actPrice
    this.orderTimeFun();
  },
  computed: {
    ...mapGetters(["getLoginInfo", 'getDictionariesInfo']),
  },
  mounted () {
  },
  methods: {
			orderTimeFun(){
				if(this.orderTime==0)return;
				setTimeout(()=>{
					this.orderTime--;
					this.orderTimeFun();
				},1000)
			},
    _wxPay () {
      purchaseClearWxPay({ orderSn: this.orderSn }).then(res => {
        wexinPay(res.data, this.getSuccess, this.getError)
      }).catch(err => { console.log(err) })
    },
    getSuccess () {
      this.pageTo({
        url: '/pagesPurchase/gatherResult',
        type: 2
      })
    },
    getError () {
    },
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  .callback-wrap {
    padding-top: 50px;
    // background-image: url("../../src/static/images/callback/bg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    .bg_01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 290upx;
      background: #3385ff;
      border-radius: 0rpx 0rpx 83rpx 83rpx;
      z-index: 1;
    }
    .callback-blo {
      position: absolute;
      z-index: 9;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      margin: 0 auto;
      padding: 70px 0;
      background-color: #fff;
      box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
      border-radius: 10px;
      text-align: center;
      // 使用icon
      .icon {
        .iconfont {
          font-size: 170px;
        }
      }
      // 一个按钮
      .call-one-btn {
        .button-com {
          width: 80%;
          padding-top: 22px;
          padding-bottom: 22px;
          font-size: 32px;
          margin-top: 40px;
        }
      }
    }
    .order-show{
      margin-top:20rpx;
    }
  }
}
// 待支付 - 公共
.awaitPayWx,
.awaitPayYe {
  .status-text {
    margin-top: 22px;
    margin-bottom: 52px;
    color: #ffa92e;
  }
  .surplus {
    margin-top: 22px;
    margin-bottom: 38px;
  }
  .icon {
    .iconfont {
      color: #ffa92e;
    }
  }
}
// 待确认样式
.wait {
  color: #ffa92e;
  font-size: 40upx;
  font-weight: 700;
  margin: 20upx 0;
}
</style>
