<template>
  <div>
   <form-preview header-label="繳費信息" :header-value="payMoney" :body-items="orderInfo"></form-preview>
        <div class="submitBox">
          <flexbox>
            <flexbox-item :span="2">
            </flexbox-item>
            <
 
flexbox-item :span="8">
              <x-button type="primary"   @click.native="confirmPay">確認繳費</x-button>
            </flexbox-item>
          </flexbox>
        </div>
      <alert v-model="alertShow" :title="alertTitle" >{{alertMsg}}</alert>
  </div>
 

</template>

<script >
import {Flexbox,FlexboxItem,XButton,FormPreview,AlertPlugin,Alert } from ‘vux‘

export default {
  name: ‘payRecord‘,
  components: {
    Flexbox,FlexboxItem,XButton,FormPreview,AlertPlugin,Alert
  },
  data () {
    return {
        alertShow:false,
        alertMsg:
 
"",
        alertTitle:"",
        money:"",
        orderId:‘‘,
      orderInfo: [{
        label: ‘姓名‘,
        value: ‘‘
      }, {
        label: ‘學校‘,
        value: ‘‘
      }, {
        label: ‘班級‘,
        value: ‘‘
      },{
        label: ‘聯系電話‘,
        value: ‘‘
      }],
    }
  },
  methods:{
    confirmPay(){
        this.$vux.loading.show({
            text: ‘加載中‘
        })
        const vm=this;
        this.$http.post(‘/tuition/tuition-order/confirm-money‘,{order_id:this.orderId}).then((result) =>{
            if(result.data.status==1){
                this.$vux.loading.hide();
                var payData = result.data.data.options;
                var outTradeNo = result.data.data.outTradeNo;
                wx.ready(function () {
                    wx.chooseWXPay({
                        timestamp: payData.timestamp, // 支付簽名時間戳，註意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
                        nonceStr: payData.nonceStr, // 支付簽名隨機串，不長於 32 位
                        package: payData.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
                        signType: payData.signType, // 簽名方式，默認為‘SHA1‘，使用新版支付需傳入‘MD5‘
                        paySign: payData.paySign, // 支付簽名
                        success: function (re) {
                            // 支付成功後的回調函數
                            if (re.errMsg == "chooseWXPay:ok") {
                                var storage = window.localStorage;
                                //清場
                                storage.clear();
                                vm.alertTitle="支付成功";
                                vm.alertMsg="支付成功";
                                vm.alertShow=true;
                                vm.$router.push({ path: ‘payRecord‘ });
                            } else {
                                vm.alertShow=true;
                                vm.alertTitle="支付失敗";
                                vm.alertMsg=re.errMsg;
                            }
                        },
                        cancel: function(re){
                            vm.alertShow=true;
                            vm.alertTitle="取消成功"
                            vm.alertMsg="取消成功";
                        }
                    });
                });
            }else{
                vm.alertShow=true;
                vm.alertTitle="支付失敗"
                vm.alertMsg=result.data.message;
            }
        }).catch((error) => {
            this.$vux.loading.hide();
            this.$vux.toast.show({
                text: ‘支付失敗:網絡出現問題‘,
                type: ‘cancel‘
            });
        })
    },
      wechatConfig(){
          this.$vux.loading.show({
              text: ‘加載中‘
          })
          this.$http.post(‘/tuition/pay-js/get-js-config‘).then((res) =>{
              this.$vux.loading.hide();
              wx.config(res.data);
          }).catch((error) => {
              this.$vux.loading.hide();
              this.$vux.toast.show({
                  text: ‘出現錯誤:微信配置出現問題‘,
                  type: ‘cancel‘
              });
          })
      },
      getOrderInfo(){
          this.$vux.loading.show({
              text: ‘加載中‘
          })
          this.orderId=window.location.hash.split(‘?‘)[1];//獲取上一個頁面傳來的orderId
          this.$http.post(‘/tuition/tuition-order/tuition-order-detail‘,{order_id:this.orderId}).then((res) =>{
              this.$vux.loading.hide();
              if(res.data.status==1){
                  var res=res.data.data;
                  this.money=res.money;
                  this.orderInfo[0].value=res.user_name;
                  this.orderInfo[1].value=res.school_name;
                  this.orderInfo[2].value=res.class_name;
                  this.orderInfo[3].value=res.phone;
              }else{
                  this.alertShow=true;
                  this.alertTitle="信息獲取失敗"
                  this.alertMsg=res.data.message;
              }
          }).catch((error) => {
              this.$vux.loading.hide();
              this.$vux.toast.show({
                  text: ‘拉取信息失敗:網絡出現問題‘,
                  type: ‘cancel‘
              });
          })
      }
  },
  computed:{
      payMoney(){
          return "￥"+this.money
      }
  },
    created(){
      this.wechatConfig();
      this.getOrderInfo();
    }

}
</script>

<style >
.weui-form-preview__value{
    color:black;
}
</style>

tuition-獲取上一個頁面傳來的id和微信支付