学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

156 lines
3.8 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="pageBgImg">
  3. <topNavbar title="我的预约"></topNavbar>
  4. <view class="pad">
  5. <view class="searcBox">
  6. <searchRow placeholder="搜索考场名称、车牌号"/>
  7. </view>
  8. <view class="tabs">
  9. <view class="tab" v-for="(item,index) in tabList" :key="index" :class="{active: currentTab==item.id}" @click="changeTab(item)">{{ item.text }}</view>
  10. </view>
  11. <view class="navs">
  12. <view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: currentNav===item.id}" @click="changeNav(item)">{{ item.text }}</view>
  13. </view>
  14. <view class="recordTotal">{{total}}条记录</view>
  15. <view class="tabCon" v-show="currentTab==1">
  16. <view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail')">
  17. <imitate></imitate>
  18. </view>
  19. </view>
  20. <view class="tabCon" v-if="currentTab==2">
  21. <view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail')">
  22. <opera></opera>
  23. </view>
  24. </view>
  25. <view class="tabCon" v-if="currentTab==3">
  26. <view class="card" v-for="(item,index) in examList" :key="index" @click="$goPage('/pages/mineEntry/myAppointment/detail/detail?type=3&id='+item.id)">
  27. <examin :item="item"></examin>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import imitate from './comp/imitate'
  35. import opera from './comp/opera'
  36. import examin from './comp/examin'
  37. import { examSimulationRecord } from '@/config/api.js'
  38. export default {
  39. components: { imitate, opera, examin},
  40. data() {
  41. return {
  42. tabList: [
  43. {text: '模拟器',id: 1},
  44. {text: '实操训练',id: 2},
  45. {text: '考场模拟',id: 3},
  46. ],
  47. navList: [
  48. {text: '全部', id: -1},
  49. {text: '已签到', id: 1},
  50. {text: '待完成', id: 0},
  51. {text: '已取消', id: 9},
  52. {text: '已过期', id: 3},
  53. ],
  54. // 0:未签到,1:已签到,2:已签退,3:旷课,9:已取消
  55. currentTab: 3,
  56. currentNav: 0,
  57. examParams: { "pageNo": 1, "pageSize": 10, "keyWord": "", "status": '',},
  58. examList: [],
  59. total: 20
  60. }
  61. },
  62. onLoad(options) {
  63. if(options.currentTab) this.currentTab = options.currentTab
  64. this.examSimulationRecordFn()
  65. },
  66. methods: {
  67. changeTab(item) {
  68. this.currentTab = item.id
  69. },
  70. changeNav(item) {
  71. this.currentNav = item.id
  72. this.examList = []
  73. this.examParams.pageNo = 1
  74. if(item.id==-1) {
  75. this.examParams.status = ''
  76. }else {
  77. this.examParams.status = this.currentNav
  78. }
  79. this.examSimulationRecordFn()
  80. },
  81. // 考场预约
  82. async examSimulationRecordFn() {
  83. const {data: res} = await examSimulationRecord(this.examParams)
  84. this.examParams.pageNo ++
  85. this.examList.push(...res.list)
  86. this.total = res.total
  87. }
  88. }
  89. }
  90. </script>
  91. <style lang="scss" scoped>
  92. .searcBox {
  93. margin: 0 0 20rpx 0;
  94. }
  95. .card {
  96. padding: 0 24rpx;
  97. margin-bottom: 20rpx;
  98. }
  99. .tabs {
  100. display: flex;
  101. width: 100%;
  102. height: 72rpx;
  103. background: #FFFFFF;
  104. border-radius: 16rpx;
  105. margin-top: 20rpx;
  106. .tab {
  107. flex: 1;
  108. text-align: center;
  109. line-height: 72rpx;
  110. color: #ADADAD;
  111. &.active {
  112. background: rgba(25,137,250,0.1);
  113. border-radius: 16rpx;
  114. border: 2rpx solid #1989FA;
  115. color: $themC;
  116. font-weight: 600;
  117. }
  118. }
  119. }
  120. .navs {
  121. display: flex;
  122. justify-content: space-between;
  123. color: #fff;
  124. font-size: 28rpx;
  125. padding: 24rpx 0 40rpx 0;
  126. color: $themC;
  127. .nav {
  128. &.active {
  129. font-weight: 500;
  130. position: relative;
  131. &::before {
  132. position: absolute;
  133. left: 50%;
  134. transform: translateX(-50%);
  135. bottom: -20rpx;
  136. content: '';
  137. width: 56rpx;
  138. height: 6rpx;
  139. background: $themC;
  140. border-radius: 3rpx;
  141. }
  142. }
  143. }
  144. }
  145. .recordTotal {
  146. font-size: 24rpx;
  147. padding: 0rpx 0 28rpx 0;
  148. text-align: right;
  149. }
  150. </style>