<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>