hookehuyr

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

添加了订单相关的API接口,包括获取订单列表、订单详情、提交订单和取消订单。在购物车上下文中集成了提交订单的API调用,替换了原有的模拟逻辑。同时,更新了结算页面的表单字段,以匹配订单API的请求参数。
/*
* @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))
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 => ({
id: item.id,
details: cartItems.value.map(item => ({
good_id: item.id,
type: item.type,
quantity: item.quantity,
number: item.quantity,
price: item.price,
title: item.title
})),
totalAmount: getTotalPrice(),
userData: userData,
total_price: getTotalPrice(),
...userData,
orderDate: new Date().toISOString()
}
// TODO: 替换为实际的API调用
return new Promise((resolve) => {
// 模拟API调用
setTimeout(() => {
// 在实际应用中,这里应该调用后端API
console.warn('提交订单数据:', orderData)
return addOrderAPI(orderData).then(response => {
if (response.code === 1) {
// 订单提交成功后清空购物车
clearCart()
// 返回订单ID
resolve({
return {
success: true,
orderId: 'ORD-' + Date.now(),
orderId: response.data.id,
orderData: orderData
})
}, 1500)
}
}
return {
success: false,
message: response.msg || '订单提交失败'
}
})
}
......
......@@ -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: '',
phone: '',
email: '',
address: '',
receive_name: '',
receive_phone: '',
receive_email: '',
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('请选择支付方式')
}
......