Vue项目实战：订单结算功能实现

目录

• 订单详情数据加载
• 支付宝支付对接
• 微信支付对接
• 微信支付转态轮询

（1）订单详情数据加载

在orderPay.vue中：

<p>
    订单详情
    <em class="icon-down up" :class="{
    'up': showDetail}" @click="showDetail=!showDetail"></em>  <!--控制订单详情是否展示-->
</p>
<script>
export default {
    
  data() {
    
    return {
    
      orderId: this.$route.query.orderNo,
      addressInfo: "", //收货人地址
      orderDetail: [], //订单详情，包含商品列表
      showDetail: false, //是否显示订单详情
      payment:0
    };
  },
  mounted() {
    
    this.getOrderDetail();
  },
  methods: {
    
    getOrderDetail() {
    
      this.axios.get(`/orders/${
      this.orderId}`).then(res => {
    
        let item = res.shippingVo;
        this.addressInfo = `${
      item.receiverName} ${
      item.receiverMobile} ${
      item.receiverProvince} ${
      item.receiverCity} ${
      item.recevierDistrict} ${
      item.receiverAddress}`;
        this.orderDetail = res.orderItemVoList;
        this.payment:0,//订单总金额
      });
    }
  }
};
</script>

（2）支付宝支付对接

在orderPay页面中点击 支付宝支付 后，页面跳转到支付宝支付页面alipay。

• 在orderPay.vue中：

<!--省略了很多代码-->
<div class="pay-way">
     <p>支付平台</p>
<div class="pay pay-ali" :class="{
    'checked' : payType == 1}" @click="paySubmit(1)"</