46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import { fetchOrders, type Order } from '@/api/orders'
|
|
|
|
const loading = ref(false)
|
|
const orders = ref<Order[]>([])
|
|
|
|
onMounted(loadOrders)
|
|
|
|
async function loadOrders() {
|
|
loading.value = true
|
|
try {
|
|
orders.value = await fetchOrders()
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page">
|
|
<div class="page-header">
|
|
<p class="eyebrow">Orders</p>
|
|
<h1>我的订单</h1>
|
|
<p>跟踪待交接、租赁中、待归还、申诉中和已完成订单。</p>
|
|
</div>
|
|
|
|
<el-table v-loading="loading" class="table-panel" :data="orders">
|
|
<el-table-column prop="order_no" label="订单号" min-width="210" />
|
|
<el-table-column prop="title" label="账号" min-width="180" />
|
|
<el-table-column prop="rent_hours" label="租期" width="90" />
|
|
<el-table-column prop="rent_amount" label="租金" width="100" />
|
|
<el-table-column prop="deposit_amount" label="押金" width="100" />
|
|
<el-table-column prop="status" label="状态" width="140" />
|
|
<el-table-column label="操作" width="100">
|
|
<template #default="{ row }">
|
|
<RouterLink :to="`/orders/${row.id}`">
|
|
<el-button size="small">详情</el-button>
|
|
</RouterLink>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</section>
|
|
</template>
|