java-bookstore/ui/src/pages/order/index.vue
2025-02-13 23:33:45 +08:00

87 lines
2.2 KiB
Vue

<!--用户详情-->
<template>
<el-tabs v-model="state.activeName" @tab-click="handleClick">
<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
<el-table :data="state.getList">
<!-- 列表结开始-->
<el-table-column prop="id" label="编号" align="center" />
<el-table-column prop="title" label="电影名称" align="center" />
<el-table-column prop="year" label="上映时间" align="center" />
<el-table-column prop="largePic" label="图片" align="center" >
<template #default="{ row }">
<!-- 点击图片后显示弹框预览 -->
<el-image
:src="row.largePic"
fit="cover"
:preview-src-list="row.largePic.split(',')"
:preview-teleported="true"
/>
</template>
</el-table-column>
<el-table-column prop="country" label="国家" align="center" />
<el-table-column prop="movieType" label="电影类型" align="center" />
<el-table-column prop="director" label="导演" align="center" />
<el-table-column prop="actor" label="主演" align="center" />
<el-table-column prop="ratingValue" label="评分" align="center" />
<el-table-column prop="ratingCount" label="评分人数" align="center" />
<!--列表结束-->
<el-table-column label="操作" align="center" >
<template #default="scope">
<el-button @click="del(scope.row.id)" type="danger" size="small">取消</el-button>
</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'
const state = reactive({
activeName:1,
getOrderStatus:[
{name:"全部",status:1},
],
getList:[]
})
/**
* 获取列表数据
*/
function init() {
frontRequest.get("/api/item/list").then(res =>{
state.getList = res.data
})
}
const del = (id:number) => {
frontRequest.post("/api/behavior/delete",{itemId:id,type:1}).then(res =>{
ElMessage.success("收藏成功")
init()
})
init()
}
onMounted(()=>{
init()
})
</script>
<style scoped>
</style>
<route lang="json">
{
"meta": {
"layout": "frontUserInfo"
}
}
</route>