56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
|
<el-table-column label="Order_No" min-width="200">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.order_no | orderNoFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Price" width="195" align="center">
|
|
<template slot-scope="scope">
|
|
¥{{ scope.row.price | toThousandFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Status" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag :type="scope.row.status | statusFilter">
|
|
{{ scope.row.status }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
import { fetchList } from '@/api/transaction'
|
|
|
|
export default {
|
|
filters: {
|
|
statusFilter(status) {
|
|
const statusMap = {
|
|
success: 'success',
|
|
pending: 'danger'
|
|
}
|
|
return statusMap[status]
|
|
},
|
|
orderNoFilter(str) {
|
|
return str.substring(0, 30)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
list: null
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
fetchList().then(response => {
|
|
this.list = response.data.items.slice(0, 8)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|