java-master/ui/src/pages/admin/order.vue
2025-06-12 15:05:42 +08:00

95 lines
2.2 KiB
Vue

<!--用户详情-->
<template>
<el-tabs v-model="state.page.status" @tab-click="handleClick">
<el-tab-pane v-for="status in state.getStatus" :label="status.name" :name="status.status">
<el-table
:data="state.getList"
style="width: 100%"
class="order-table"
>
<el-table-column prop="item.name" label="换入方房源名称" align="center"/>
<el-table-column label="换入方房源图片" >
<template #default="{ row }">
<img :src="row.item.image" class="product-image">
</template>
</el-table-column>
<el-table-column prop="item.name" label="换出方房源名称" align="center"/>
<el-table-column label="换出方房源图片" >
<template #default="{ row }">
<img :src="row.itemA.image" class="product-image">
</template>
</el-table-column>
<el-table-column prop="itemA.price" label="状态" align="center">
<template #default="{ row }">
{{ row.status }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
</template>
</el-table-column>
<template v-slot:empty>
<el-empty description="数据去外太空了~" />
</template>
</el-table>
</el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { TabsPaneContext } from 'element-plus'
const state = reactive({
getStatus: [
{name: "全部", status:null},
{name: "待审核", status: "待审核"},
{name: "已同意", status: "已同意"},
{name: "已拒绝 ", status: "已拒绝 "}
],
getList:[],
orderForm:{
score: 0
},
page:{
page:1,
limit:10,
order:'desc',
status:null,
}
})
/**
* 获取列表数据
*/
function getList() {
adminRequest.get("/sys/order/page",{ params: state.page}).then(res =>{
state.getList = res.data.list;
})
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
const selectedStatus = state.getStatus[tab.index].status;
state.page.status = selectedStatus;
getList()
}
onMounted(()=>{
getList()
})
</script>
<style scoped>
.product-image {
width: 100px;
height: 100px;
}
</style>
<route lang="json">
{
"meta": {
"layout": "admin"
}
}
</route>