文章目录

• • 12-支付-跳转支付
  • 13-支付-结果展示

12-支付-跳转支付

目的：支付打开新页，当前页打开提示框。

1.准备支付跳转链接
src/utils/request.js

export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'

src/views/member/pay/index.vue

    // 支付地址// const payUrl = '后台服务基准地址+支付页面地址+订单ID+回跳地址'const redirect = encodeURIComponent('http://www.corho.com:8080/#/pay/callback')const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.orderId}&redirect=${redirect}`return { order, countdownText, payUrl }

2.

2.等待弹窗

src/views/component/pay/index.vue

    
如果支付成功：
查看订单详情>
如果支付失败：
查看相关疑问>

    // 支付提示const visibleDialog = ref(false)return { order, timeText, visibleDialog }

.pay-wait {display: flex;justify-content: space-around;p {margin-top: 30px;font-size: 14px;}a {color: @xtxColor;}
}

13-支付-结果展示

目的：准备一个支付完成的回调页面，展示支付后订单状态。

大致步骤：

• 准备一个基础页面
• 根据地址订单ID查询订单状态进行展示，或者是地址栏支付结果。

落的代码：

1.准备一个基础页面

2.根据地址订单ID查询订单状态进行展示