feat(订单): 添加订单相关接口并集成到购物车和结算页面

添加了订单相关的API接口，包括获取订单列表、订单详情、提交订单和取消订单。在购物车上下文中集成了提交订单的API调用，替换了原有的模拟逻辑。同时，更新了结算页面的表单字段，以匹配订单API的请求参数。

feat(订单): 添加订单相关接口并集成到购物车和结算页面
添加了订单相关的API接口，包括获取订单列表、订单详情、提交订单和取消订单。在购物车上下文中集成了提交订单的API调用，替换了原有的模拟逻辑。同时，更新了结算页面的表单字段，以匹配订单API的请求参数。
hookehuyr
Commit cf764a0c7687e75ffcad4548c9722f0fc6d0c224 cf764a0c 1 parent 713f2184
Showing 3 changed files with 85 additions and 33 deletions
src/api/order.js
src/contexts/cart.js
src/views/checkout/CheckoutPage.vue
--- a/src/api/order.js 0 → 100644
View file @cf764a0
+++ b/src/api/order.js 0 → 100644
View file @cf764a0
+/*
+ * @Date: 2025-04-16 16:21:37
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-04-16 16:41:16
+ * @FilePath: /mlaj/src/api/order.js
+ * @Description: 订单相关接口
+ */
+import { fn, fetch } from './fn'
+
+const Api = {
+  ORDER_LIST: '/srv/?a=order_list',
+  ORDER_INFO: '/srv/?a=order_info',
+  ORDER_ADD: '/srv/?a=order_add',
+  ORDER_CANCEL: '/srv/?a=order_cancel',
+}
+
+/**
+ * @description: 获取订单列表
+ * @param: page 页码
+ * @param: limit 每页数量
+ * @param: status 订单状态 NOT_PAY=待支付，PAY=已支付，CANCEL=已取消，APPLY_REFUND=申请退款，REFUND=已退款，REFUND_ERROR=退款失败
+ * @return: data: { }
+ */
+export const getOrderListAPI = (params) => fn(fetch.get(Api.ORDER_LIST, params))
+
+/**
+ * @description: 获取订单详情
+ * @param: i 订单ID
+ * @return: data: { }
+ */
+export const getOrderInfoAPI = (params) => fn(fetch.get(Api.ORDER_INFO, params))
+
+/**
+ * @description: 提交订单
+ * @param: pay_type 支付方式 Alipay=支付宝，WeChat=微信
+ * @param: total_price 订单总金额
+ * @param: receive_name 姓名
+ * @param: receive_phone 手机
+ * @param: receive_email 邮箱
+ * @param: receive_address 地址
+ * @param: note 备注
+ * @param: details 订单明细
+ * @return: data: { id: 订单ID, status: 订单状态 NOT_PAY=待支付，PAY=已支付  }
+ */
+export const addOrderAPI = (params) => fn(fetch.post(Api.ORDER_ADD, params))
+
+/**
+ * @description: 取消订单
+ * @param: i 订单ID
+ * @return: data: { }
+ */
+export const cancelOrderAPI = (params) => fn(fetch.post(Api.ORDER_CANCEL, params))
--- a/src/contexts/cart.js
View file @cf764a0
+++ b/src/contexts/cart.js
View file @cf764a0
 import { ref, provide, inject, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
+// 导入接口
+import { addOrderAPI } from "@/api/order";
+
 const CartSymbol = Symbol()
 // 购物车模式配置
@@ -109,35 +112,32 @@ export function provideCart(mode = CartMode.MULTIPLE) {
   function handleCheckout(userData) {
     // 构建订单数据
     const orderData = {
-      items: cartItems.value.map(item => ({
+      details: cartItems.value.map(item => ({
-        id: item.id,
+        good_id: item.id,
         type: item.type,
-        quantity: item.quantity,
+        number: item.quantity,
         price: item.price,
         title: item.title
       })),
-      totalAmount: getTotalPrice(),
+      total_price: getTotalPrice(),
-      userData: userData,
+      ...userData,
       orderDate: new Date().toISOString()
     }
-    // TODO: 替换为实际的API调用
+    return addOrderAPI(orderData).then(response => {
-    return new Promise((resolve) => {
+      if (response.code === 1) {
-      // 模拟API调用
-      setTimeout(() => {
-        // 在实际应用中，这里应该调用后端API
-        console.warn('提交订单数据:', orderData)
-
         // 订单提交成功后清空购物车
         clearCart()
-
+        return {
-        // 返回订单ID
-        resolve({
           success: true,
-          orderId: 'ORD-' + Date.now(),
+          orderId: response.data.id,
           orderData: orderData
-        })
+        }
-      }, 1500)
+      }
+      return {
+        success: false,
+        message: response.msg || '订单提交失败'
+      }
     })
   }
--- a/src/views/checkout/CheckoutPage.vue
View file @cf764a0
+++ b/src/views/checkout/CheckoutPage.vue
View file @cf764a0
@@ -105,7 +105,7 @@
               <div>
                 <label class="block text-sm text-gray-600 mb-1">姓名 <span class="text-red-500">*</span></label>
                 <input
-                  v-model="formData.name"
+                  v-model="formData.receive_name"
                   type="text"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                   placeholder="请输入您的姓名"
@@ -116,7 +116,7 @@
               <div>
                 <label class="block text-sm text-gray-600 mb-1">手机号码 <span class="text-red-500">*</span></label>
                 <input
-                  v-model="formData.phone"
+                  v-model="formData.receive_phone"
                   type="tel"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                   placeholder="请输入您的手机号码"
@@ -127,7 +127,7 @@
               <div>
                 <label class="block text-sm text-gray-600 mb-1">电子邮箱</label>
                 <input
-                  v-model="formData.email"
+                  v-model="formData.receive_email"
                   type="email"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                   placeholder="请输入您的邮箱（选填）"
@@ -137,7 +137,7 @@
               <div>
                 <label class="block text-sm text-gray-600 mb-1">联系地址 <span class="text-red-500">*</span></label>
                 <input
-                  v-model="formData.address"
+                  v-model="formData.receive_address"
                   type="text"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm"
                   placeholder="请输入您的详细地址"
@@ -161,9 +161,9 @@
             <div class="space-y-2">
               <label class="flex items-center p-3 border border-gray-200 rounded-lg bg-white/50">
                 <input
-                  v-model="formData.paymentMethod"
+                  v-model="formData.pay_type"
                   type="radio"
-                  value="wechat"
+                  value="WeChat"
                   class="mr-3"
                 />
                 <span class="flex-1">微信支付</span>
@@ -283,12 +283,12 @@ const { items: cartItems, mode, getTotalPrice, handleCheckout, clearCart, remove
 // Form state
 const formData = ref({
-  name: '',
+  receive_name: '',
-  phone: '',
+  receive_phone: '',
-  email: '',
+  receive_email: '',
-  address: '',
+  receive_address: '',
   notes: '',
-  paymentMethod: 'wechat'
+  pay_type: 'WeChat'
 })
 // Loading and success states
@@ -315,16 +315,16 @@ const handleImageError = (e) => {
 const handleSubmit = async (e) => {
   try {
     // 表单验证
-    if (!formData.value.name?.trim()) {
+    if (!formData.value.receive_name?.trim()) {
       throw new Error('请输入姓名')
     }
-    if (!formData.value.phone?.trim()) {
+    if (!formData.value.receive_phone?.trim()) {
       throw new Error('请输入手机号码')
     }
-    if (!formData.value.address?.trim()) {
+    if (!formData.value.receive_address?.trim()) {
       throw new Error('请输入联系地址')
     }
-    if (!formData.value.paymentMethod) {
+    if (!formData.value.pay_type) {
       throw new Error('请选择支付方式')
     }