# 支付流程
从用户点击“订阅”按钮开始,支付流程就开启了:
- 首先创建订单(状态为等待确认 WAIT_CONFIRM);
- 然后跳转订单确认页面;
- 用户确认订单(状态变为等待支付 WAIT_PAY);
- 并跳转支付页面;
- 用户扫码支付结束(订单状态变为已完成 COMPLETED);
- 页面发现订单完成跳转至课程详情页。
# 页面设计
下面是流程中两个关键页面的草图,分别是:
订单确认页,order-confirm.vue。

支付页,order-pay.vue。

# 接口实现
我们需要实现两个接口:
- /order:创建订单。
- method: post
- body:{ courseId: number }
- 返回 { ok: boolean, data: { orderId: number } }
- /order/[id]:获取订单详情。
- method:get
- 返回 { ok: boolean, data: Order }
- /order: 更新订单状态。
- method:patch
- body: { id: number, status: string }
- 返回 { ok: boolean }
创建 orderRepository,server/database/repositories/orderRepository.ts
vbnet
复制代码import type { Order } from '@prisma/client'
import prisma from '~/server/database/client'
export async function createOrder(data: Order) {
const user = await prisma.order.create({ data })
return user
}
export async function getOrderById(id: number) {
const result = await prisma.order.findUnique({
where: {
id,
},
include: {
course: {
select: {
title: true,
cover: true,
price: true,
},
},
},
})
return result
}
export async function updateOrder(id: number, data: Partial<Order>) {
const result = await prisma.order.update({
where: {
id,
},
data,
})
return result
}
@前端进阶之旅: 代码已经复制到剪贴板
分别实现 3 个接口:
- 创建订单,server/api/order.post.ts
- 更新订单,server/api/order.patch.ts
- 订单详情,server/api/order/[id].ts
server/api/order.post.ts
typescript
复制代码import type { Order } from '@prisma/client'
import { OrderStatus } from '@prisma/client'
import { isNuxtError } from 'nuxt/app'
import { getTokenInfo } from '../database/service/token'
import { createOrder } from '../database/repositories/orderRepositor'
export default