【Vue H5项目实战】从0到1的肯德基点餐系统—— 提交订单设计(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + MongoDB)

<template>
  <div class="order-submit">
    <!-- 订单提交表单 -->
    <form @submit.prevent="submitOrder">
      <!-- 其他表单内容 -->
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交订单' }}
      </button>
    </form>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const isSubmitting = ref(false);
 
    // 模拟订单提交函数
    async function submitOrder() {
      isSubmitting.value = true;
 
      try {
        // 这里应该是与后端API的交互逻辑
        // 例如使用axios发送请求
        // const response = await axios.post('/api/orders', orderData);
        // 假设response.data是后端返回的数据
        const response = { data: { success: true, orderId: '12345' } };
 
        if (response.data.success) {
          // 订单提交成功的处理逻辑
          console.log('订单提交成功，订单号：', response.data.orderId);
          // 清空购物车、显示成功提示等
        } else {
          // 处理失败的情况
          console.error('订单提交失败：', response.data.error);
        }
      } catch (error) {
        // 处理异常情况
        console.error('订单提交发生错误：', error);
      } finally {
        isSubmitting.value = false;
      }
    }
 
    return {
      isSubmitting,
      submitOrder,
    };
  },
});
</script>
 
<style scoped>
.order-submit form {
  /* 表单样式 */
}
 
.order-submit button[type="submit"] {
  /* 按钮样式 */
}
</style>

这个代码实例展示了如何在Vue 3.2和TypeScript中实现一个订单提交功能。它使用了Vite作为构建工具，并提供了一个简单的模拟订单提交函数。在实际应用中，需要替换模拟的API调用和响应处理逻辑，以与后端API正确交互。