index.vue 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <div class="subPage">
  3. <div class="system-table-search">
  4. <div class="flex-h">
  5. <div class="flex-item flex-h"></div>
  6. </div>
  7. <div class="moreFilter"></div>
  8. </div>
  9. <div class="system-table-box">
  10. <el-table
  11. :data="currentList"
  12. stripe
  13. style="width: 100%">
  14. <el-table-column
  15. prop="CaseName"
  16. label="案场">
  17. </el-table-column>
  18. <el-table-column
  19. prop="ActivitName"
  20. label="活动名称">
  21. </el-table-column>
  22. <el-table-column
  23. prop="Name"
  24. label="姓名">
  25. </el-table-column>
  26. <el-table-column
  27. prop="CustomerName"
  28. label="微信昵称">
  29. </el-table-column>
  30. <el-table-column
  31. prop="Phone"
  32. label="手机号">
  33. </el-table-column>
  34. <el-table-column
  35. prop="PrizeName"
  36. label="获取奖品">
  37. </el-table-column>
  38. <el-table-column
  39. label="获取时间">
  40. <template slot-scope="scope">
  41. <label>{{toolClass.dateFormat(scope.row.CreateDate)}}</label>
  42. </template>
  43. </el-table-column>
  44. <el-table-column
  45. label="核销时间">
  46. <template slot-scope="scope">
  47. <label>{{toolClass.dateFormat(scope.row.WriteoffDate)}}</label>
  48. </template>
  49. </el-table-column>
  50. <el-table-column
  51. label="状态">
  52. <template slot-scope="scope">
  53. <label>{{scope.row.Status === 0 ? '未核销' : '已核销'}}</label>
  54. </template>
  55. </el-table-column>
  56. </el-table>
  57. </div>
  58. <el-pagination
  59. @current-change="handleCurrentChange"
  60. :current-page.sync="postData.page"
  61. :page-size="postData.pagesize"
  62. layout="prev, pager, next, jumper"
  63. :total="total">
  64. </el-pagination>
  65. </div>
  66. </template>
  67. <script>
  68. import { createNamespacedHelpers } from 'vuex'
  69. const { mapState: mapLuckState, mapActions: mapLuckActions } = createNamespacedHelpers('luckDraw')
  70. export default {
  71. name: '',
  72. data () {
  73. return {
  74. total: 0,
  75. postData: { // 表格搜索条件
  76. page: 1, // 当前页码
  77. pagesize: 10, // 请求数据量
  78. },
  79. currentList: []
  80. }
  81. },
  82. mounted () {
  83. this.$nextTick(function () {
  84. this.getList()
  85. })
  86. },
  87. computed: {
  88. ...mapLuckState({
  89. list: x => x.luckDrawList
  90. }),
  91. },
  92. methods: {
  93. ...mapLuckActions(['getLuckDrawList']),
  94. search () { // 搜索
  95. this.postData.page = 1
  96. this.currentList = []
  97. this.getList()
  98. },
  99. getCaseName (caseid) {
  100. return (this.cases.filter(x => x.CaseId === caseid)[0] || {}).CaseName
  101. },
  102. getList () { // 获取列表
  103. this.getLuckDrawList({ ...this.postData }).then((res) => {
  104. this.currentList = this.list.list
  105. this.postData.page = this.list.page
  106. this.total = this.list.pagenum
  107. })
  108. },
  109. handleCurrentChange (val) { // 跳转到分页
  110. this.getList()
  111. }
  112. }
  113. }
  114. </script>
  115. <!-- Add "scoped" attribute to limit CSS to this component only -->
  116. <style lang="scss" scoped>
  117. </style>