type
Post
status
Published
date
Feb 8, 2026
slug
nextjs-shopping-platform-007
summary
tags
Next.js
category
编程学习
icon
password
😀

1. Section Intro

Payment Method & Orders Page 支付方式与订单页面
In this section, we'll be adding more pages to the checkout process. We're going to have a payment method selection page where the use can select Paypal, Stripe or Cash on Delivery. We will also have a place order page so the user can review the order items and then place the order. After they place the order, they'll be taken to an order details page with the payment buttons.
在本节中，我们将为结账流程添加更多页面。我们将创建一个支付方式选择页面，用户可以选择 PayPal、Stripe 或货到付款。我们还将创建一个下单页面，用户可以在其中查看订单商品然后下单。下单后，他们将被带到订单详情页面，其中包含支付按钮。
We're going to create the payment select form and the action that that form will submit to. It will update the user's payment method in the database.
我们将创建支付选择表单以及该表单将提交到的操作。它将更新数据库中用户的支付方式。
After the payment method page is done, we'll create an order schema as well as an orderItems schema for each item. Because when a user places an order, the items will be stored in the orderItems table while the basic order info like the totalPrice will be in the order table.
支付方式页面完成后，我们将创建订单模式以及每个商品的 orderItems 模式。因为当用户下单时，商品将存储在 orderItems 表中，而基本订单信息（如 totalPrice）将存储在 order 表中。
We'll need to create a createOrder action to add that stuff to the database.
我们需要创建一个 createOrder 操作来将这些内容添加到数据库。
We're going to have a place order page with a summary of the items and a button to place the order.
我们将创建一个下单页面，其中包含商品摘要和下单按钮。
Once they place the order, they will be taken to the order page and will have the option to pay with their seleced method. Of course, we have not added the PayPal or Stripe integration, but later on they will have either PayPal buttons or a Stripe form.
下单后，他们将被带到订单页面，并可以选择使用他们选择的方式支付。当然，我们还没有添加 PayPal 或 Stripe 集成，但稍后它们将拥有 PayPal 按钮或 Stripe 表单。
We're also going to be creating some utility functions along the way to shorten the id for display as well as the date and time.
我们还将在此过程中创建一些实用函数，用于缩短显示的 ID 以及日期和时间格式化。

2. Payment Method Action & Zod Schema 支付方式操作与模式

Now that we have the shipping page, we will start to add the payment method page. This page will allow the user to select a payment method and enter their payment details.
既然我们已经有了收货地址页面，我们将开始添加支付方式页面。这个页面将允许用户选择支付方式并输入他们的支付详情。
Before we create the actual page, we will need to create the schema for the payment method page as well as the action.
在创建实际页面之前，我们需要为支付方式页面创建模式以及操作。

Payment Methods 支付方式

The payment methods that we will accept will be PayPal, Stripe and Cash on Delivery.
我们将接受的支付方式包括 PayPal、Stripe 和货到付款。
Open your .env file and add the following line:
打开您的 .env 文件并添加以下内容：
Then open the lib/constants/index.ts file and add the following code:
然后打开 lib/constants/index.ts 文件并添加以下代码：
We are just exporting the PAYMENT_METHODS and DEFAULT_PAYMENT_METHOD constants from the lib/constants/index.ts file. We are using split() to convert the comma-separated string into an array. If the PAYMENT_METHODS environment variable is not set, we will use the default values.
我们只是从 lib/constants/index.ts 文件导出 PAYMENT_METHODS 和 DEFAULT_PAYMENT_METHOD 常量。我们使用 split() 将逗号分隔的字符串转换为数组。如果未设置 PAYMENT_METHODS 环境变量，我们将使用默认值。

Payment Method Schema 支付方式模式

We need to create our Zod schema for the payment method. Opent the lib/validators.ts file and import the constant:
我们需要为支付方式创建 Zod 模式。打开 lib/validators.ts 文件并导入常量：
Then add the following schema:
然后添加以下模式：
We are making sure that the payment method is one of the payment methods that we support.
我们确保支付方式是我们支持的支付方式之一。

updateUserPaymentMethod Action updateUserPaymentMethod 操作

Open the lib/actions/user.actions.ts file and import the new schema and Zod:
打开 lib/actions/user.actions.ts 文件并导入新模式和 Zod：
Now add the following function:
现在添加以下函数：
We are just updating the user's payment method by finding the user by their id and updating the paymentMethod field. We are also validating the data using the paymentMethodSchema schema.
我们只是通过用户 ID 查找用户并更新 paymentMethod 字段来更新用户的支付方式。我们还使用 paymentMethodSchema 模式验证数据。

3. Payment Method Page & Form 支付方式页面与表单

Just like with shipping, payment method will have a page and then a form embedded into it.
就像收货地址一样，支付方式将有一个页面，然后一个表单嵌入其中。
Create a new file at app/(root)/payment-method/page.tsx and add the following code:
在 app/(root)/payment-method/page.tsx 创建一个新文件并添加以下代码：
Now when you continue from the shipping page, you should see the text "Payment Method Form" on the screen.
现在当您从收货地址页面继续时，您应该在屏幕上看到文本 "Payment Method Form"。

Payment Method Form 支付方式表单

We need to create the payment method form. We will create the file and add some some imports and initialization but we'll add the actual form components in the next lesson.
我们需要创建支付方式表单。我们将创建文件并添加一些导入和初始化，但实际的表单组件将在下一课中添加。
Now create a file at app/(root)/payment-method/payment-method-form.tsx and add the following code:
现在在 app/(root)/payment-method/payment-method-form.tsx 创建文件并添加以下代码：
We just have all the imports that we will need along with the PaymentMethodForm component which takes in a preferredPaymentMethod prop. This prop will be used to set the default value of the radio group. We are initializing the router and the toast hook. We are also initializing the form with the paymentMethodSchema and the default value of the radio group. We are also initializing the isPending state and the startTransition function.
我们拥有了所有需要的导入以及 PaymentMethodForm 组件，该组件接收一个 preferredPaymentMethod 属性。这个属性将用于设置单选按钮组的默认值。我们初始化了 router 和 toast 钩子。我们还使用 paymentMethodSchema 和单选按钮组的默认值初始化了表单。我们还初始化了 isPending 状态和 startTransition 函数。
Then we return the CheckoutSteps component.
然后我们返回 CheckoutSteps 组件。
Now let's bring it into the PaymentMethodPage component. Update the PaymentMethodPage component in app/(root)/payment-method/page.tsx to the following:
现在让我们将其引入 PaymentMethodPage 组件。在 app/(root)/payment-method/page.tsx 中更新 PaymentMethodPage 组件如下：
In the return:
在 return 中：
You should now see the checkout steps if you click continue from the shipping page or go to /payment-method directly.
如果您从收货地址页面点击继续或直接访问 /payment-method，您现在应该能看到结账步骤。
In the next lesson, we will add all the form components and handle the form submission.
在下一课中，我们将添加所有表单组件并处理表单提交。

4. Payment Method Form & Submission 支付方式表单与提交

We have our PaymentMethodPage and PaymentMethodForm components. However, we have yet to display the form and handle the form submission. That's what we'll do now.
我们已经有了 PaymentMethodPage 和 PaymentMethodForm 组件。但是，我们还没有显示表单和处理表单提交。这就是我们现在要做的。
In this form, we will use ShadCN radio buttons. So we need to install them. Open a terminal and run the following command:
在这个表单中，我们将使用 ShadCN 单选按钮。所以我们需要安装它们。打开终端并运行以下命令：
Open the app/(root)/payment-method/payment-method-form.tsx file and add the following code to the return:
打开 app/(root)/payment-method/payment-method-form.tsx 文件并将以下代码添加到 return 语句中：
We are displaying the payment methods as radio buttons. We are also displaying the submit button. We are also disabling the submit button when the form is pending. We are also displaying the loader when the form is pending.
我们将支付方式显示为单选按钮。我们还显示提交按钮。当表单处于 pending 状态时，我们禁用提交按钮。当表单处于 pending 状态时，我们还显示加载器。

Submit Handler 提交处理程序

Let's add the following function above the return statement:
让我们在 return 语句上方添加以下函数：
We are using the startTransition function to wrap the async function. We are also using the updateUserPaymentMethod function to update the user's payment method. We are also checking if the response is successful. If it is not, we are displaying the error message. If it is, we are redirecting the user to the place-order page.
我们使用 startTransition 函数包装异步函数。我们还使用 updateUserPaymentMethod 函数来更新用户的支付方式。我们还检查响应是否成功。如果不成功，我们显示错误消息。如果成功，我们将用户重定向到 place-order 页面。
Now you should see the payment method form on the payment method page.
现在您应该在支付方式页面上看到支付方式表单。

Test Flow 测试流程

So the way that we have it setup is you can add items to the cart as a guest and when you checkout you will be asked to log in. When you log in, you will be taken back to where you left off. Go ahead and try it by logging out and adding an item to the cart. Then go to the checkout page and log in. You should be taken back to the checkout process.
我们的设置方式是，您可以以访客身份将商品添加到购物车，结账时系统会要求您登录。登录后，您将被带回离开的位置。继续尝试注销并向购物车添加商品。然后转到结账页面并登录。您应该会被带回结账流程。

5. Order & OrderItem Prisma Schema 订单与订单商品模型

Our checkout process is looking good. Now we need to create the page where the user can place the order. Before we do that though, we need to setup our database to handle orders. This means creating a new model and table for orders and order items.
我们的结账流程看起来不错。现在我们需要创建用户可以下单的页面。但在此之前，我们需要设置数据库来处理订单。这意味着为订单和订单商品创建新的模型和表。

Create Order Schema 创建订单模式

We need a new schema and table for orders. Open the schema.prisma file and add the following:
我们需要为订单创建新的模式和表。打开 schema.prisma 文件并添加以下内容：
Here is a rundown of the fields:
以下是字段的详细说明：
  • id: A unique identifier for the order. 订单的唯一标识符。
  • userId: The ID of the user who placed the order. 下单用户的 ID。
  • shippingAddress: The shipping address for the order. 订单的收货地址。
  • paymentMethod: The payment method used for the order. 订单使用的支付方式。
  • paymentResult: The result of the payment. 支付结果。
  • itemsPrice: The price of the items in the order. 订单中商品的价格。
  • shippingPrice: The price of the shipping. 运费价格。
  • taxPrice: The price of the tax for the order. 订单税费。
  • totalPrice: The total price of the order. 订单总价。
  • isPaid: Whether the order has been paid for. 订单是否已支付。
  • paidAt: The date and time the order was paid for. 订单支付日期和时间。
  • isDelivered: Whether the order has been delivered. 订单是否已配送。
  • deliveredAt: The date and time the order was delivered. 订单配送日期和时间。
  • createdAt: The date and time the order was created. 订单创建日期和时间。
  • user: The user who placed the order. This is a one-to-many relationship. We create a foreign key constraint on the userId field and name it order_userId_user_id_fk. 下单用户。这是一对多关系。我们在 userId 字段上创建外键约束并命名为 order_userId_user_id_fk。
  • orderItems: This is an array of order items. We will create the OrderItem model next. 这是订单商品数组。我们接下来将创建 OrderItem 模型。
Since we added a relationship with the user model, we need to add the following to the user model:
由于我们添加了与用户模型的关系，我们需要在用户模型中添加以下内容：
Add the following to the schema.prisma file:
将以下内容添加到 schema.prisma 文件：
Since we added a relationship with the product model, we need to add the following to the product model:
由于我们添加了与产品模型的关系，我们需要在产品模型中添加以下内容：
Here is a rundown of the fields:
以下是字段的详细说明：
  • orderId: The ID of the order the item belongs to. 商品所属订单的 ID。
  • productId: The ID of the product the item belongs to. 商品所属产品的 ID。
  • qty: The quantity of the item. 商品数量。
  • price: The price of the item. 商品价格。
  • name: The name of the item. 商品名称。
  • slug: The slug of the item. 商品 slug。
  • image: The image of the item. 商品图片。
  • order: The order the item belongs to. This is a one-to-many relationship. We create a foreign key constraint on the orderId field and name it orderItems_orderId_order_id_fk. 商品所属的订单。这是一对多关系。我们在 orderId 字段上创建外键约束并命名为 orderItems_orderId_order_id_fk。
  • product: The product the item belongs to. This is a one-to-many relationship. We create a foreign key constraint on the productId field and name it orderItems_productId_product_id_fk. 商品所属的产品。这是一对多关系。我们在 productId 字段上创建外键约束并命名为 orderItems_productId_product_id_fk。
  • @@id([orderId, productId], map: "orderItems_orderId_productId_pk"): This is a composite primary key. We create a composite primary key on the orderId and productId fields. We name it orderItems_orderId_productId_pk. 这是复合主键。我们在 orderId 和 productId 字段上创建复合主键。我们将其命名为 orderItems_orderId_productId_pk。

Migrate & Generate 迁移与生成

Now that our models/schemas are setup, we need to migrate and generate the database.
现在我们的模型/模式已经设置好了，我们需要迁移和生成数据库。
Stop the server if it is running. Also stop Prisma Studio if it is running.
如果服务器正在运行，请停止它。如果 Prisma Studio 正在运行，也请停止它。
Run the following commands:
运行以下命令：
Now run the server and Studio. If you open up Studio you should see the new Order and OrderItem tables.
现在运行服务器和 Studio。如果您打开 Studio，您应该能看到新的 Order 和 OrderItem 表。

6. Order Zod Schemas & Type 订单 Zod 模式与类型

Insert Order Zod Schema 插入订单 Zod 模式

Now let's add the Zod schema for insert order. Open the lib/validators.ts file and add the following code:
现在让我们为插入订单添加 Zod 模式。打开 lib/validators.ts 文件并添加以下代码：
This is for the order that is being created.
这是用于正在创建的订单。
We also need a schema for the order items. Open the lib/validators.ts file and add the following code:
我们还需要为订单商品创建模式。打开 lib/validators.ts 文件并添加以下代码：

Order & OrderItem Types 订单与订单商品类型

Now let's add the types for the order and order item. Open the types/index.ts file and import the insertOrderSchema and insertOrderItemSchema from the lib/validators.ts file:
现在让我们为订单和订单商品添加类型。打开 types/index.ts 文件并从 lib/validators.ts 文件导入 insertOrderSchema 和 insertOrderItemSchema：
Now add the following code:
现在添加以下代码：
We are using the z.infer type to get the type of the schema. We are also adding some additional fields to the order type.
我们使用 z.infer 类型来获取模式的类型。我们还为订单类型添加了一些额外的字段。
Next we will start to create an action to create an order.
接下来我们将开始创建用于创建订单的操作。

7. Place Order Page 下单页面

We now need to create the place order page, which is the last page in our checkout process. This page will display the order summary and allow the user to place the order.
我们现在需要创建下单页面，这是结账流程中的最后一个页面。此页面将显示订单摘要并允许用户提交订单。
Create a file at app/(root)/place-order/page.tsx and add the following code:
在 app/(root)/place-order/page.tsx 创建一个文件，并添加以下代码：
We are adding all the imports and then we are getting the cart and the user from the database. We are also checking if the cart is empty or if the user has not added a shipping address or a payment method. If any of these conditions are true, we are redirecting the user to the respective page.
我们添加了所有必要的导入，然后从数据库获取购物车和用户信息。同时检查购物车是否为空，或者用户是否尚未添加收货地址或支付方式。如果以上任何条件为真，我们将把用户重定向到相应的页面。
In the return, for now, we are just returning the checkout steps and a heading. We also have a couple divs that will wrap some cards.
在返回部分，目前我们只返回结账步骤和一个标题。我们还有几个 div 用来包裹一些卡片组件。

Address Card 地址卡片

Let's add a card with the user address and an edit button to go back to the address page. Add this within the div tags:
让我们添加一个包含用户地址和编辑按钮的卡片，以便返回地址页面。将以下代码添加到 div 标签内：

Payment Method Card 支付方式卡片

Add another card with the payment method and an edit button to go back to the payment method page:
添加另一个包含支付方式和编辑按钮的卡片，以便返回支付方式页面：

Items 商品列表

Now we want to show the items. Add the following under the payment method card:
现在我们想显示商品列表。在支付方式卡片下方添加以下内容：

Prices 价格明细

Now we want to add the prices. There are two closing divs. Add this in between both of them:
现在我们想添加价格明细。有两个闭合的 div 标签。在它们之间添加以下内容：
Here is the final code:
以下是最终代码：

8. Create Order Action 创建订单操作

Next, we will create the action to add a new order to the database. This action will be triggered when the user clicks the "Place Order" button on the checkout page.
接下来，我们将创建一个将新订单添加到数据库的操作。当用户在结账页面点击"Place Order（下单）"按钮时，将触发此操作。
We need to create a new file at lib/actions/order.actions.ts and add the following imports and add use server:
我们需要在 lib/actions/order.actions.ts 创建一个新文件，并添加以下导入和使用 use server：
Now add the following function:
现在添加以下函数：
Let's go step by step and add to the try block:
让我们逐步添加到 try 块中：
We get the session, the cart and the user.
我们获取了会话、购物车和用户信息。
We need to check if the cart is empty or if the user has not set an address or payment method. If any of these conditions are met, we are going to send a fail response with a redirectTo link:
我们需要检查购物车是否为空，或者用户是否尚未设置地址或支付方式。如果满足任何这些条件，我们将发送一个带有 redirectTo 链接的失败响应：
Next, let's create an order object:
接下来，让我们创建一个订单对象：
We create an order object using the insertOrderSchema schema. We use the parse method to validate the data and throw an error if the data is invalid.
我们使用 insertOrderSchema 模式创建一个订单对象。我们使用 parse 方法来验证数据，如果数据无效则抛出错误。
Next, we need to create the order. We are going to use a Prisma transaction to create the order and update the stock of the products in the order. A transaction is a way to ensure that all the operations in a transaction are completed successfully or none of them are completed. If any of the operations fail, the transaction is rolled back and the database is left in the same state as before the transaction started.
接下来，我们需要创建订单。我们将使用 Prisma 事务来创建订单并更新订单中产品的库存。事务是一种确保事务中所有操作都成功完成或都不完成的方法。如果任何操作失败，事务将回滚，数据库将保持事务开始前的状态。
Taking money from an ATM is a good example of a transaction. If you try to withdraw money from an ATM and the transaction fails at any point, the money is not deducted from your account.
从 ATM 取钱是事务的一个很好的例子。如果你尝试从 ATM 取钱，但交易在任何一点失败，钱就不会从你的账户中扣除。
Add the following code under the order object:
在订单对象下添加以下代码：
We create a variable called insertedOrderId that will hold the id of the order. We then call the prisma.$transaction method. This takes a callback function that takes in a parameter of tx. This is what's called a Prisma transactional client and it is scoped to the current transaction meaning every database operation using tx is wrapped in the same transaction.
我们创建一个名为 insertedOrderId 的变量来保存订单的 ID。然后我们调用 prisma.$transaction 方法。这需要一个回调函数，接收一个 tx 参数。这就是所谓的 Prisma 事务客户端，它绑定到当前事务，意味着使用 tx 的每个数据库操作都包装在同一事务中。
Since tx binds these operations together, any query using tx will be rolled back if an error occurs in any part of the transaction block. This rollback wouldn't be possible if if we executed these queries independently.
由于 tx 将这些操作绑定在一起，如果事务块中任何部分发生错误，使用 tx 的任何查询都将被回滚。如果我们独立执行这些查询，就不可能实现这种回滚。
So since we're adding multiple items to the order, if any of the operations fail, the entire transaction will be rolled back. So you won't end up with an order with some items and some items not in the order. We're also clearing the cart after the order is created.
因此，由于我们正在向订单添加多个项目，如果任何操作失败，整个事务都将被回滚。所以你不会最终得到一个只包含部分商品的订单。我们在创建订单后也会清空购物车。
Finally, we need to check for errors and send a success response:
最后，我们需要检查错误并发送成功响应：
Here is the entire code:
以下是完整的代码：

9. Place Order Form 下单表单

Now let's create the form to embed, which is essentially just a button.
现在让我们创建一个嵌入的表单，其实质上只是一个按钮。
Create a new file at app/(root)/place-order/place-order-form.tsx and add the following code:
在 app/(root)/place-order/place-order-form.tsx 创建一个新文件并添加以下代码：
Bring it into the app/(root)/place-order/page.tsx file:
将其引入到 app/(root)/place-order/page.tsx 文件中：
Replace the comment with the following:
将注释替换为以下内容：
You should see the text for now.
现在你应该能看到这段文字了。

Form State and Submission 表单状态与提交

Let's add the form and the place order button. Add the following to the return:
让我们添加表单和下单按钮。将以下内容添加到 return 语句中：

PlaceOrderButton 下单按钮组件

We are going to create a PlaceOrderButton component that will be used to submit the form.
我们将创建一个 PlaceOrderButton 组件，用于提交表单。
Add the following right above the return statement:
在 return 语句之前添加以下内容：
This component will be used to submit the form. It will be disabled if the form is pending and will show a loading spinner if it is.
此组件将用于提交表单。如果表单正在处理中，它将被禁用，并显示加载动画。

handleSubmit Function handleSubmit 函数

Now add the handleSubmit:
现在添加 handleSubmit 函数：
We are simple calling the action and redirecting to the redirectTo in the response.
我们简单地调用 action 并重定向到响应中的 redirectTo。
If you click the place order button, an order should get added to the database.
如果你点击下单按钮，一个订单应该会被添加到数据库中。
Here is the full code:
完整的代码如下：

10. Order Details Page & Action 订单详情页面

Now that we can place an order, we need to work on a page to show the order details.
现在我们已经可以下订单了，需要创建一个页面来显示订单详情。
Let's start with the action to fetch an order by ID. Open the lib/actions/order.actions.ts file and import the convertToPlainObject function:
让我们从获取订单ID的操作开始。打开 lib/actions/order.actions.ts 文件并导入 convertToPlainObject 函数：
Create a new function:
创建一个新函数：
This is very simple. We are just getting the order by the ID and returning the order with the user and the order items.
这非常简单。我们只是通过ID获取订单，并返回包含用户和订单项的订单数据。

Order Details Page 订单详情页面

Create a page at app/(root)/order/[id]/page.tsx and add the following code:
在 app/(root)/order/[id]/page.tsx 创建页面并添加以下代码：
Now when you place an order, you should see the text "Order Details Form".
现在当你下订单时，你应该会看到文本 "Order Details Form"。
We will work on the form, but first we have some utility functions to create. We will do that next.
我们将继续完善表单，但首先需要创建一些工具函数。我们将在下一步完成。

11. Format Utility Functions 格式化工具函数

We are going to create the order details form soon, however ther are some utility functoina that we need to create first.
我们很快就要创建订单详情表单了，但首先需要创建一些工具函数。
Open the lib/utils.js file. There are two functions that we need to create:
打开 lib/utils.js 文件。我们需要创建两个函数：
  • formatId - This will shorten the ID to 6 characters
  • formatDate - Format the date in 3 different ways (Date & Time, Date Only, Time Only)
  • formatId - 将ID缩短为6个字符
  • formatDate - 以3种不同方式格式化日期（日期和时间、仅日期、仅时间）
Here is the first one:
这是第一个函数：
Here is an example of it's usage:
以下是用法示例：
Now let's create the formatDateTime function:
现在让我们创建 formatDateTime 函数：
修改db\prisma.ts，扩展 Prisma 的关于价格的默认行为

Testing 测试

We can get the date and time in different formats. Here is an example:
我们可以获取不同格式的日期和时间。以下是一个示例：
Now we can use these around the app.
现在我们可以在整个应用中使用这些函数了。

12. Order Details Table 订单详情表格

So, now we are going to create the table to embed in the order details page.
现在，我们将创建要嵌入订单详情页面的表格。
Create a file at app/(root)/order/[id]/order-details-table.tsx and add the following code:
在 app/(root)/order/[id]/order-details-table.tsx 创建文件并添加以下代码：
We are just bringing in some components from ShadCN, Image, Link components, our utility functions.
我们只是引入了一些来自 ShadCN 的组件、Image、Link 组件以及我们的工具函数。
The component takes in an order object as a prop. We initialize the toast. We are then displaying the short version of the order id.
该组件接收一个订单对象作为属性。我们初始化 toast，然后显示订单ID的简短版本。
Bring the form into the order details page.
将表单引入订单详情页面。
Open the app/(root)/order/[id]/page.tsx file and add the following import:
打开 app/(root)/order/[id]/page.tsx 文件并添加以下导入：
Then, add the following code to the OrderPage component:
然后，将以下代码添加到 OrderPage 组件中：
We are just passing in the order object to the form. We are also casting the shippingAddress to the ShippingAddress type.
我们只是将订单对象传递给表单。同时我们将 shippingAddress 转换为 ShippingAddress 类型。
After placing an order, you should see the order ID. Let's continue on with the order form component.
下单后，你应该能看到订单ID。让我们继续完善订单表单组件。
Open the app/(root)/order/[id]/order-details-table.tsx file.
打开 app/(root)/order/[id]/order-details-table.tsx 文件。
Let's destructure the order data. Right above the toast variable, add the following code:
让我们解构订单数据。在 toast 变量的正上方，添加以下代码：
We are just destructuring the order data.
我们只是对订单数据进行解构。

Payment Method Card 支付方式卡片

In the return, within the div tags, add the following card:
在 return 语句中，在 div 标签内添加以下卡片：
We are checking if the order is paid. If it is, we are displaying the paid at date. If it is not, we are displaying a badge that says "Not paid".
我们检查订单是否已支付。如果已支付，显示支付日期；如果未支付，显示一个写着 "Not paid" 的徽章。

Shipping Address Card 配送地址卡片

Now add the following card under the last one:
现在在最后一个卡片下方添加以下卡片：
This checks for delivery and will display a badge that says "Not delivered" if it is not delivered and the delivery date if it is delivered.
这会检查配送状态。如果未配送，显示一个写着 "Not delivered" 的徽章；如果已配送，显示配送日期。

Order Items Table 订单商品表格

Add the following card under the last one:
在最后一个卡片下方添加以下卡片：
This will show the order items.
这将显示订单商品。
Finally we want the price summary. Add this div in the middle of the 2 closing div tags:
最后我们需要价格汇总。在两个闭合 div 标签之间添加这个 div：
So now our process is almost complete. We just have to implement the actual purchase functionality. We will do that next.
现在我们的流程几乎完成了。我们只需要实现实际的购买功能。我们将在下一步完成。

📎 参考文章

  • 一些引用
  • 引用文章
 
💡
欢迎您在底部评论区留言，一起交流~
上一篇
第一节　大脑：重新认识你自己
下一篇
Harness Engineering - 搭建Mini Harness
Loading...
Invalid Date