| <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> |