第 4 阶段：订单、交接与账务--1

frontend/src/views/public/ListingDetailView.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { ElMessage } from 'element-plus'
 import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import { fetchListing, type Listing } from '@/api/listings'
+import { createOrder } from '@/api/orders'
 
 const route = useRoute()
+const router = useRouter()
 const loading = ref(false)
+const ordering = ref(false)
+const rentHours = ref(1)
 const listing = ref<Listing | null>(null)
 
 onMounted(async () => {
@@ -16,6 +21,28 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+async function handleCreateOrder() {
+  if (!listing.value) return
+  ordering.value = true
+  try {
+    const order = await createOrder(listing.value.id, rentHours.value)
+    ElMessage.success('订单已创建，账号已锁定')
+    await router.push(`/orders/${order.id}`)
+  } catch (error) {
+    ElMessage.error(readError(error, '下单失败'))
+  } finally {
+    ordering.value = false
+  }
+}
+
+function readError(error: unknown, fallback: string) {
+  if (typeof error === 'object' && error && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: string } } }).response
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
 </script>
 
 <template>
@@ -44,5 +71,17 @@ onMounted(async () => {
         <strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
       </div>
     </div>
+
+    <div v-if="listing" class="order-panel">
+      <el-form label-position="top">
+        <el-form-item label="租用时长">
+          <el-input-number v-model="rentHours" :min="listing.min_rent_hours" :max="listing.max_rent_hours" />
+        </el-form-item>
+        <p>
+          预计租金：¥{{ (listing.price_hourly * rentHours).toFixed(2) }}，押金：¥{{ listing.deposit_amount }}
+        </p>
+        <el-button type="primary" :loading="ordering" @click="handleCreateOrder">立即下单并锁定账号</el-button>
+      </el-form>
+    </div>
   </section>
 </template>