init

frontend/src/components/OrderForm.vue

@@ -0,0 +1,77 @@
+<template>
+  <form @submit.prevent="submitOrder" class="space-y-4">
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Имя *</label>
+      <input v-model="form.client_name" required class="input-field" placeholder="Иван Петров" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Телефон *</label>
+      <input v-model="form.client_phone" required class="input-field" placeholder="+79001234567" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Email</label>
+      <input v-model="form.client_email" type="email" class="input-field" placeholder="ivan@example.com" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Компания</label>
+      <input v-model="form.client_company" class="input-field" placeholder="ООО Технопарк" />
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Способ получения</label>
+      <select v-model="form.delivery_method" class="input-field">
+        <option value="pickup">Самовывоз</option>
+        <option value="delivery">Доставка</option>
+      </select>
+    </div>
+    <div>
+      <label class="mb-1.5 block text-sm font-medium text-gray-700">Комментарий</label>
+      <textarea v-model="form.comment" rows="3" class="input-field" placeholder="Дополнительные пожелания"></textarea>
+    </div>
+
+    <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+
+    <button type="submit" :disabled="loading" class="btn-primary w-full">
+      <svg v-if="loading" class="mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+      {{ loading ? 'Оформляем...' : 'Оформить заказ' }}
+    </button>
+  </form>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import api from '../api/client'
+
+const props = defineProps({ calculationId: String })
+const emit = defineEmits(['success'])
+
+const form = reactive({
+  client_name: '',
+  client_phone: '',
+  client_email: '',
+  client_company: '',
+  delivery_method: 'pickup',
+  comment: '',
+})
+
+const loading = ref(false)
+const error = ref('')
+
+async function submitOrder() {
+  loading.value = true
+  error.value = ''
+  try {
+    const { data } = await api.post('/orders', {
+      calculation_id: props.calculationId,
+      ...form,
+    })
+    emit('success', data)
+  } catch (e) {
+    error.value = e.response?.data?.detail || 'Ошибка оформления заказа'
+  } finally {
+    loading.value = false
+  }
+}
+</script>