index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div class="container">
  3. <el-card class="box-card">
  4. <el-table
  5. :data="tableData"
  6. v-loading="listLoading"
  7. highlight-current-row
  8. fit
  9. class="table-list"
  10. :cell-style="{ padding: '6px 0' }"
  11. >
  12. <el-table-column prop="id" label="ID" width="100"></el-table-column>
  13. <el-table-column
  14. prop="title"
  15. label="title"
  16. width="120"
  17. show-overflow-tooltip
  18. ></el-table-column>
  19. <el-table-column
  20. prop="amount"
  21. label="amount"
  22. width="100"
  23. ></el-table-column>
  24. <el-table-column
  25. prop="description"
  26. label="description"
  27. show-overflow-tooltip
  28. ></el-table-column>
  29. <el-table-column
  30. prop="category"
  31. label="category"
  32. width="100"
  33. show-overflow-tooltip
  34. ></el-table-column>
  35. <el-table-column
  36. prop="coffee"
  37. label="coffee"
  38. width="100"
  39. show-overflow-tooltip
  40. ></el-table-column>
  41. <el-table-column
  42. prop="discount"
  43. label="discount"
  44. width="100"
  45. ></el-table-column>
  46. <el-table-column
  47. prop="startdate"
  48. label="startdate"
  49. width="120"
  50. ></el-table-column>
  51. <el-table-column
  52. prop="duedate"
  53. label="duedate"
  54. width="120"
  55. ></el-table-column>
  56. <el-table-column
  57. prop="phone"
  58. label="phone"
  59. width="120"
  60. show-overflow-tooltip
  61. ></el-table-column>
  62. <el-table-column prop="used" label="used" width="100"></el-table-column>
  63. <el-table-column
  64. prop="useropenid"
  65. label="useropenid"
  66. show-overflow-tooltip
  67. ></el-table-column>
  68. </el-table>
  69. <div class="pd-30">
  70. <el-pagination
  71. v-show="total > 0"
  72. background
  73. layout="prev, pager, next"
  74. :total="total"
  75. @current-change="handleCurrentChange"
  76. :current-page.sync="listQuery.page"
  77. :page-size="listQuery.limit"
  78. ></el-pagination>
  79. </div>
  80. </el-card>
  81. </div>
  82. </template>
  83. <script>
  84. import { getTicketList } from "@/api/order";
  85. export default {
  86. name: "ticket",
  87. data() {
  88. return {
  89. total: 0,
  90. listLoading: true,
  91. listQuery: {
  92. page: 1,
  93. limit: 100
  94. },
  95. tableData: []
  96. };
  97. },
  98. created() {
  99. this.getList();
  100. },
  101. methods: {
  102. getList() {
  103. this.listLoading = true;
  104. getTicketList({
  105. page: this.listQuery.page
  106. }).then(res => {
  107. this.tableData = res.tickets;
  108. this.total = res.total;
  109. this.listLoading = false;
  110. });
  111. },
  112. handleCurrentChange(val) {
  113. this.listQuery.page = val;
  114. this.getList();
  115. }
  116. }
  117. };
  118. </script>
  119. <style lang="scss" scoped>
  120. .box-card {
  121. overflow: hidden;
  122. }
  123. .container {
  124. padding: 20px;
  125. }
  126. .pd-30 {
  127. padding: 30px 0;
  128. }
  129. .filter-container {
  130. overflow: hidden;
  131. padding: 10px 0;
  132. }
  133. .table-list {
  134. font-size: 12px;
  135. }
  136. </style>