以后这种需求不需要通过路由传参数,通过VUE-x 来存取
<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/api/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: '加载中'
})
var url = location.href.split('#')[0]
this.$http.post('/tuition/pay-js/get-js-config', {url}).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/api/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>