feat(订单): 添加业务类型参数并实现认证订单支付流程

在创建订单API中添加business_type参数区分买车和认证订单在商品详情页和认证页中分别传入对应的业务类型完善支付组件的支付成功和失败处理逻辑

feat(订单): 添加业务类型参数并实现认证订单支付流程
在创建订单API中添加business_type参数区分买车和认证订单在商品详情页和认证页中分别传入对应的业务类型完善支付组件的支付成功和失败处理逻辑
hookehuyr
Commit 12af89b94536da4045715e6547cccb29d9684379 12af89b9 1 parent 44c96b82
Showing 4 changed files with 117 additions and 42 deletions
src/api/orders.js
src/components/payCard.vue
src/pages/productDetail/index.vue
src/pages/setAuthCar/index.vue
--- a/src/api/orders.js
View file @12af89b
+++ b/src/api/orders.js
View file @12af89b
 /*
  * @Date: 2025-07-03 17:21:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-28 11:51:11
+ * @LastEditTime: 2025-07-31 15:50:33
  * @FilePath: /jgdl/src/api/orders.js
  * @Description: 文件描述
  */
@@ -39,6 +39,7 @@ export const getOrderDetailAPI = (params) => fn(fetch.get(Api.GET_ORDER_DETAIL, 
  * @description: 创建订单
  * @param vehicle_id 车辆ID
  * @param total_amount 总价
+ * @param business_type 业务类型（sell=买车订单, verification=认证订单）
  * @returns data{ id }
  */
 export const createOrderAPI = (params) => fn(fetch.post(Api.CREATE_ORDER, params));
--- a/src/components/payCard.vue
View file @12af89b
+++ b/src/components/payCard.vue
View file @12af89b
 <!--
  * @Date: 2023-12-20 14:11:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 18:20:38
+ * @LastEditTime: 2025-07-31 15:30:59
  * @FilePath: /jgdl/src/components/payCard.vue
  * @Description: 文件描述
 -->
@@ -135,6 +135,20 @@ const goToPay = async () => {
                 url: '/pages/myOrders/index',
               });
             }
+            if (current_page === 'pages/setAuthCar/index') { // 发布认证页打开
+              // 发出支付成功事件，通知父组件更新订单状态
+              emit('paySuccess', { orderId: id.value });
+            }
+          }
+        },
+        fail: () => {
+          let current_page = getCurrentPageUrl();
+          if (current_page === 'pages/setAuthCar/index') { // 发布认证页打开
+            Taro.showModal({
+              title: '温馨提示',
+              content: '需要付费才能认证',
+              showCancel: false,
+            });
           }
         }
       });
--- a/src/pages/productDetail/index.vue
View file @12af89b
+++ b/src/pages/productDetail/index.vue
View file @12af89b
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-30 14:48:32
+ * @LastEditTime: 2025-07-31 15:29:14
  * @FilePath: /jgdl/src/pages/productDetail/index.vue
  * @Description: 商品详情页
 -->
@@ -485,6 +485,7 @@ const handlePurchase = async () => {
 const onPay = async ({ id, remain_time, price }) => {
     try {
         const { code, data } = await createOrderAPI({
+            business_type: 'sell',
             vehicle_id: id,
             total_amount: price
         })
--- a/src/pages/setAuthCar/index.vue
View file @12af89b
+++ b/src/pages/setAuthCar/index.vue
View file @12af89b
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-17 14:31:55
+ * @LastEditTime: 2025-08-01 14:19:54
  * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
  * @Description: 申请认证
 -->
@@ -90,8 +90,10 @@
                     <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel" required
                         :rules="[{ required: true, message: '请选择品牌型号' }]">
                         <view class="form-item-content" @click="showBrandModelPicker">
-                            <text class="form-value" :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }">
+                            <text class="form-value"
-                                {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }}
+                                :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }">
+                                {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号'
+                                }}
                             </text>
                             <Right class="arrow-icon" />
                         </view>
@@ -99,7 +101,8 @@
                     <!-- 续航里程 -->
                     <nut-form-item label="续航里程" prop="range_km">
-                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right" @input="validateRangeInput">
+                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right"
+                            @input="validateRangeInput">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -108,7 +111,8 @@
                     <!-- 最高时速 -->
                     <nut-form-item label="最高时速" prop="max_speed_kmh">
-                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right" @input="validateMaxSpeedInput">
+                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right"
+                            @input="validateMaxSpeedInput">
                             <template #right>
                                 <text class="unit">km/h</text>
                             </template>
@@ -135,6 +139,9 @@
         <!-- 品牌型号选择器 -->
         <BrandModelPicker ref="brandModelPickerRef" :brand-options="brandOptions" @confirm="onBrandModelConfirm"
             @cancel="onBrandModelCancel" />
+
+        <!-- 支付组件 -->
+        <payCard :visible="show_pay" :data="payData" @close="onPayClose" @paySuccess="onPaySuccess" />
     </view>
 </template>
@@ -145,10 +152,12 @@ import Taro from '@tarojs/taro'
 import './index.less'
 import BASE_URL from '@/utils/config';
 import BrandModelPicker from '@/components/BrandModelPicker.vue'
+import payCard from '@/components/payCard.vue'
 // 导入接口
 import { getBrandsModelsAPI } from '@/api/other';
 import { addVehicleAPI, editVehicleAPI, getVehicleDetailAPI } from '@/api/car';
+import { createOrderAPI } from '@/api/orders'
 // 获取页面参数
 const instance = Taro.getCurrentInstance()
@@ -195,7 +204,78 @@ const brandModelPickerRef = ref(null)
 // 品牌型号选项数据
 const brandOptions = ref([])
+/**
+ * 支付模块
+ */
+const show_pay = ref(false)
+const payData = ref({
+    id: '',
+    price: 0,
+    remain_time: 0
+})
+/**
+ * 发送订单支付信息到支付组件
+ * @param {Object} payInfo - 支付信息
+ * @param {string} payInfo.id - 订单ID
+ * @param {number} payInfo.remain_time - 剩余时间
+ * @param {number} payInfo.price - 价格
+ */
+const onPay = async ({ id, remain_time, price }) => {
+    try {
+        const { code, data } = await createOrderAPI({
+            business_type: 'verification',
+            vehicle_id: id,
+            total_amount: price
+        })
+        if (code) {
+            show_pay.value = true
+            payData.value.id = data.id
+            payData.value.price = price
+            payData.value.remain_time = remain_time
+        }
+    } catch (error) {
+        console.error('创建订单失败:', error)
+    }
+}
+
+/**
+ * 关闭支付弹框
+ */
+const onPayClose = () => {
+    show_pay.value = false
+}
+
+/**
+ * 处理支付成功事件
+ * @param {Object} data - 支付成功数据
+ * @param {string} data.orderId - 订单ID
+ */
+const onPaySuccess = ({ orderId }) => {
+    if (isEditMode.value) {
+        Taro.showToast({
+            title: '保存成功',
+            icon: 'success',
+            duration: 2000,
+            complete: () => {
+                // 保存成功后返回上一页
+                Taro.navigateBack()
+            }
+        })
+    } else {
+        Taro.showModal({
+            title: '温馨提示',
+            content: '认证提交成功，我们会尽快审核',
+            showCancel: false,
+            confirmText: '知道了',
+            success: function (res) {
+                if (res.confirm) {
+                    Taro.navigateBack()
+                }
+            }
+        })
+    }
+}
 /**
  * 触发图片上传
@@ -469,47 +549,26 @@ const onSubmit = async () => {
         if (isEditMode.value) {
             // 编辑车辆，且认证时，op=verification，表示申请认证
             const { code } = await editVehicleAPI({ id: carId.value, ...formData, op: 'verification' })
-            if (!code) {
+            if (code) {
-                throw new Error('更新失败')
+                onPay({
+                    id: data.id,
+                    remain_time: data.remain_time || 1800, // 30分钟
+                    price: data.verification_price
+                })
             }
         } else {
             // 新增车辆，且认证时，op=verification，表示只申请认证
-            const { code } = await addVehicleAPI({ ...formData, op: 'verification' })
+            const { code, data } = await addVehicleAPI({ ...formData, op: 'verification' })
-            if (!code) {
+            if (code) {
-                throw new Error('提交失败')
+                onPay({
+                    id: data.id,
+                    remain_time: data.remain_time || 1800, // 30分钟
+                    price: data.verification_price
+                })
             }
         }
         Taro.hideLoading()
-        // 提交成功提示
-        if (isEditMode.value) {
-            Taro.showToast({
-                title: '保存成功',
-                icon: 'success',
-                duration: 2000,
-                complete: () => {
-                    // 保存成功后返回上一页
-                    Taro.navigateBack()
-                }
-            })
-        } else {
-            Taro.showModal({
-                title: '温馨提示',
-                content: '认证提交成功，我们会尽快审核',
-                showCancel: false,
-                confirmText: '知道了',
-                success: function (res) {
-                    if (res.confirm) {
-                        Taro.navigateBack()
-                    }
-                }
-            })
-        }
-
-        // 返回上一页
-        // setTimeout(() => {
-        //     Taro.navigateBack()
-        // }, 1500)
     } catch (error) {
         console.error('提交失败:', error)
         Taro.hideLoading()