index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <yf-more-list url="/api/user/exam/my-paging" :params="queryParams" ref="moreList">
  3. <template v-slot:item="{ data }">
  4. <uni-list-item>
  5. <view slot="body">
  6. <view class="list-body">
  7. <view class="list-flex">
  8. <view style="flex-grow: 1;">
  9. <view style="font-weight: 700;">{{data.title}}</view>
  10. <view style="color: #666;">最高分:{{data.maxScore}}</view>
  11. <view style="color: #888; font-size: 10px;">最近考试:{{data.updateTime}}</view>
  12. </view>
  13. <view>
  14. <view v-if="data.passed" class="pass">通过</view>
  15. <view v-else class="fail">不通过</view>
  16. </view>
  17. </view>
  18. <view class="list-flex">
  19. <view style="width: 49%; ">
  20. <button type="warn" @click="navtoBook(data.examId)">错题训练</button>
  21. </view>
  22. <view style="width: 49%;">
  23. <button type="primary" @click="navtoPaper(data.examId)">考试记录</button>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </uni-list-item>
  29. </template>
  30. </yf-more-list>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. queryParams: {
  37. }
  38. }
  39. },
  40. onReachBottom() {
  41. // 加载数据
  42. this.$refs.moreList.loadData()
  43. },
  44. onShow() {
  45. if(this.$refs.moreList){
  46. this.$refs.moreList.initData()
  47. }
  48. },
  49. onBackPress(e) {
  50. //正常返回页面
  51. uni.switchTab({
  52. url: "/pages/user/index"
  53. })
  54. return true;
  55. },
  56. methods: {
  57. // 考试详情页
  58. navtoBook(id) {
  59. uni.navigateTo({
  60. url: '/pages/paper/book?id=' + id
  61. });
  62. },
  63. navtoPaper(id) {
  64. uni.navigateTo({
  65. url: '/pages/paper/list?id=' + id
  66. });
  67. }
  68. }
  69. }
  70. </script>
  71. <style scoped>
  72. .list-body {
  73. width: calc(100vw - 32px);
  74. }
  75. .list-flex {
  76. display: flex;
  77. align-items: center;
  78. margin-bottom: 10px;
  79. justify-content: space-between;
  80. }
  81. .pass {
  82. color: #007AFF !important;
  83. margin-right: 5px;
  84. }
  85. .fail {
  86. color: #ff0000 !important;
  87. margin-right: 5px;
  88. }
  89. </style>