JDD-WXCP/pages/order/confirm.vue

<template>
  <div>
    <van-row>
      <van-col span="24">
        <center class="title">
          {{this.stationName}}
          <p>
            <van-tag plain type="success">{{this.gasNum+'号枪'}}</van-tag>
            <van-tag plain type="success">{{this.oilName}}</van-tag>
          </p>
        </center>
      </van-col>
    </van-row>

    <van-cell-group>
      <van-cell title="订单金额">{{this.account}}</van-cell>
      <van-cell title="满减/立减/优惠券" value="0" />
      <van-cell title="实付金额">{{this.account}}</van-cell>
    </van-cell-group>

    <div class="btn-box">
      <van-button type="primary" round block @click="confirmOrderAndPay()">立即支付</van-button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import aesutil from '../utils/utils.js'
  import {
    Col,
    Row,
    Tag,
    Cell,
    CellGroup,
    Button,
    Toast
  } from 'vant';

  Vue.use(Col);
  Vue.use(Row);
  Vue.use(Tag);
  Vue.use(Cell);
  Vue.use(CellGroup);
  Vue.use(Button);
  Vue.use(Toast);
  Vue.prototype.$edcodeUtil = aesutil;

  export default Vue.extend({
    head() {
      return {
        title: '确认订单'
      }
    },
    data() {
      return {
        stationId: '',
        stationName: '',
        gasNum: '',
        oilName: '',
        account: ''

      };
    },
    created() {
      console.log(this.$route.query);
      this.stationId = this.$route.query.stationId;
      this.stationName = this.$route.query.stationName;
      this.gasNum = this.$route.query.gasNum;
      this.oilName = this.$route.query.oilName;
      this.account = this.$route.query.account;
    },
    mounted() {
      alert(this.$route.query.openId);
      alert(this.$route.query.orderNo);
    },
    methods: {
      //支付前，先进行订单确认，确认无误后，获取到订单id，作为入参，调用支付平台的下单接口，
      confirmOrderAndPay: function() {
        let openId = this.$route.query.openId;
        let orderNo = this.$route.query.orderNo;
        var record = this.$axios.get('/getPayOrderList', {
          params: {
            orderNo: orderNo,
            "openId": openId,
            "userType": "1"
          },
        });
        record.then(res => {
          if (res.data.retCode == 0) {
            //支付 ( 支付按钮绑定@click="confirmOrderAndPay()"事件)
            //根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
            let orderId = res.data.data[0].orderId;
            let data = {
              "userType": "1",
              "openId": openId,
              "orderId": orderId,
              "mno": "399201207783923"
            }
            var payUrl = '/getJhPayInfo';
            this.$axios.post(payUrl, data)
              .then(function(response) {
                if (response.data.retCode === 0) {
                  let data = response.data.data.respData
                  WeixinJSBridge.invoke(
                    "getBrandWCPayRequest", {
                      appId: data.payAppId,
                      timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                      nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
                      package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                      signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                      paySign: data.paySign, // 支付签名
                    },
                    function(res) {

                      //跳转到支付成功页面有这个页面
                      // $this.$router.push({
                      //   path: "/success_page",
                      //   name: "success_page"
                      // })
                      console.log("支付结果是", res);
                      if (res.err_msg === "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        Toast('支付成功');
                      } else {
                        Toast('支付失败，请重试');
                      }
                    })
                  // })
                } else {
                  Toast({
                    message: '获取支付信息失败，请重试',
                  });
                }
              }).catch(function(error) {
                Toast({
                  message: '获取下单信息失败，请重试',
                });
                console.log(error);
              });
          } else {}
        }).catch(function(error) {
          Toast({
            message: '确认订单信息失败，请重试',
          });
          console.log(error);
        })
      }
      //支付 ( 支付按钮绑定@click="confirmOrderAndPay()"事件)
      //根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
      // goPay: function() {
      //   var $this = this;
      //   let openId = this.$route.query.openId;
      //   let data = {
      //     "userType": "1",
      //     "token": openId,
      //     "orderId": "37",
      //     "mno": "399201207783923"
      //   }
      //   var payUrl = '/getJhPayInfo';
      //   this.$axios.post(payUrl, data)
      //     .then(function(response) {
      //       if (response.data.retCode === 0) {
      //         let data = response.data.data.respData
      //         WeixinJSBridge.invoke(
      //           "getBrandWCPayRequest", {
      //             appId: data.payAppId,
      //             timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      //             nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
      //             package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
      //             signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
      //             paySign: data.paySign, // 支付签名
      //           },
      //           function(res) {

      //             //跳转到支付成功页面有这个页面
      //             // $this.$router.push({
      //             //   path: "/success_page",
      //             //   name: "success_page"
      //             // })
      //             console.log("支付结果是", res);
      //             if (res.err_msg === "get_brand_wcpay_request:ok") {
      //               // 使用以上方式判断前端返回,微信团队郑重提示：
      //               //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      //               Toast('支付成功');
      //             } else {
      //               Toast('支付失败，请重试');
      //             }
      //           })
      //         // })
      //       } else {
      //         Toast({
      //           message: '获取支付信息失败，请重试',
      //         });
      //       }
      //     }).catch(function(error) {
      //       Toast({
      //         message: '获取下单信息失败，请重试',
      //       });
      //       console.log(error);
      //     });
      // }
    }
  })
</script>

<style lang="less">
  .title {
    font-size: 18px;
    padding: 20px 0;
  }

  .btn-box {
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0;
    z-index: 1;
    padding: 0 20px;
  }
</style>