zoukankan      html  css  js  c++  java
  • tuition-获取上一个页面传来的id和微信支付

    以后这种需求不需要通过路由传参数,通过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>
  • 相关阅读:
    python面向对象之类,对象
    面向对象简介
    序列化模块
    sys模块简单使用
    day26作业
    day22
    day21作业
    day21
    day20作业
    day20
  • 原文地址:https://www.cnblogs.com/MR-cui/p/8479012.html
Copyright © 2011-2022 走看看