支付、打包优化
支付页
组件准备
创建支付组件文件
// views/pay/index.vue
支付功能
【支付、打包优化】添加路由，注意，支付页要登录才能显示
// router/index.js
...
// 支付页
{
path: '/pay/:courseId/',
name: 'pay',
component: () => import(/* webpackChunkName: 'pay' */'@/views/pay/index'),
meta: { requiresAuth: true },
props: true
},
...
课程详细页中点击购买后跳转，并且传递课程ID
- 检测用户是否登录，登录时跳转支付，未登录时跳转登录页并且记录当前页信息
// course-info/index.vue
...
立即购买
......
支付结构 使用Vant的[Radio单选框]组件与cell一并使用
设置到页面中
- 添加左侧支付宝与微信图标
- 进行布局样式设置
// pay/index.vue
...支付方式
文章图片
微信支付
文章图片
支付宝支付
￥{{ course.discounts }} 立即支付
...
// 支付区域（占满剩余空间）
.pay-channel {
flex: 1;
}
// 让 radio 与 按钮在上下两端
.pay-channel .van-cell__value {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pay-channel .van-cell {
padding: 20px 10px;
}
// 左侧标题插槽
.pay-channel .van-cell__title {
display: flex;
align-items: center;
}
.pay-channel .van-cell img {
width: 28px;
height: 28px;
}
.pay-channel .van-cell span {
font-size: 16px;
margin-left: 10px;
}// 右侧 radio 选中颜色
::v-deep .van-radio__icon--checked .van-icon{
background-color: #fbc546;
border-color: #fbc546;
}// 底部按钮样式
.pay-channel .van-button {
background: linear-gradient(270deg,#faa83e,#fbc546);
border-radius: 20px;
margin-bottom: 5px;
font-size: 18px;
}逻辑处理 支付功能需要有以下的步骤：
- 支付页面打开后，需要根据商品ID（课程ID）创建商品订单
- 用户操作选择支付方式（微信，支付宝）
- 跳转到支付页，支付页会自动唤起对应的APP
- 支付，并且跳转成功，跳转Learn组件
- 订单接口：
- 创建商品订单接口：地址
- 支付接口
- 获取支付方式：地址
- 创建订单（发起支付）：地址
- 查询订单（支付结果）：地址
// services/pay.js
import request from '@/utils/request'// 创建商品订单接口
//- goodsId 商品（课程）ID 必传
export const createOrder = data => {
return request({
method: 'POST',
url: '/front/order/saveOrder',
data
})
}// 获取支付方式接口
//- shopOrderNo 订单号必传
export const getPayInfo = params => {
return request({
method: 'GET',
url: '/front/pay/getPayInfo',
params
})
}// 创建订单（发起支付）
//- goodsOrderNo, channel, returnUrl 必传
export const initPayment = data => {
return request({
method: 'POST',
url: '/front/pay/saveOrder',
data
})
}// 查询订单（查询支付结果）
//- orderNo 订单号必传
//- 由于接口要求传递 JSON，所以进行 headers 设置
export const getPayResult = params => {
return request({
method: 'GET',
url: '/front/pay/getPayResult',
headers: { 'content-type': 'application/json' },
params
})
}
创建订单与获取支付方式 引入并调用接口
- 调用创建商品订单接口获取订单号
- 调用获取支付方式接口
- 根据支付方式接口设置支付区域的radio数据
// pay/index.vue
......
...
...
支付请求 点击支付按钮时，发送请求
// pay/index.vue
...
...
......
