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.

166 lines
3.9 KiB

4 months ago
2 weeks ago
2 weeks ago
2 weeks ago
4 months ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
3 months ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
2 weeks ago
  1. <template>
  2. <view class="content">
  3. <up-navbar title="选择类型" @rightClick="rightClick" :autoBack="true"></up-navbar>
  4. <view class="tit">请选择需要学习的题库类型</view>
  5. <view class="ul">
  6. <view class="li" v-for="(item,index) in tabData" :key="index" @click="chooseCar(item)" :class="{active: item.id==currentCar.id}">
  7. <view class="checkBox" v-if="item.id==currentCar.id">
  8. <image src="@/static/images/dg.png" mode=""></image>
  9. </view>
  10. <view class="icon">
  11. <image :src="item.cover" mode=""></image>
  12. </view>
  13. <view class="name">{{item.title}}</view>
  14. <view class="carType" v-for="(item2,index2) in item.descriptionArr" :key="index2">{{ item2 }}</view>
  15. </view>
  16. </view>
  17. <view class="btnBox">
  18. <oneBtn text="确 定" @oneBtnClick="oneBtnClick"></oneBtn>
  19. </view>
  20. </view>
  21. </template>
  22. <script setup>
  23. import carStore from '@/store/modules/car.js'
  24. let usecarStore = carStore()
  25. import {
  26. ref,
  27. reactive
  28. } from 'vue';
  29. import { loginApi, questbanktypeApi, } from '@/config/api.js'
  30. import {
  31. onLoad,
  32. onReady
  33. } from "@dcloudio/uni-app"
  34. const rightClick = () => {
  35. console.log('rightClick');
  36. };
  37. const tabData = ref([
  38. {name: '小车', type: 'C1/C2/C3', style: 'width: 114rpx;height: 61rpx;', icon: new URL('@/static/images/car4.png', import.meta.url).href, id: '1'},
  39. {name: '货车', type: 'A2/B2', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car2.png', import.meta.url).href, id: '1'},
  40. {name: '客车', type: 'A1/B1/A3', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car1.png', import.meta.url).href, id: '1'},
  41. {name: '摩托车', type: 'D/E/F', style: 'width: 102rpx;height: 73rpx;', icon: new URL('@/static/images/car3.png', import.meta.url).href, id: '1'},
  42. ])
  43. const currentCar = ref('')
  44. function chooseCar(item) {
  45. currentCar.value = item
  46. usecarStore.setCar('carType', item.carType)
  47. usecarStore.setCar('carTypeName', item.title)
  48. }
  49. function oneBtnClick() {
  50. uni.navigateTo({
  51. url: '/pages/exercises/theoryStudy/theoryStudy'
  52. })
  53. }
  54. onLoad(async (option)=>{
  55. let phone = option.phone?option.phone:'18267103167'
  56. await loginFn(phone)
  57. questbanktypeFn()
  58. })
  59. // 请求登录
  60. async function loginFn(phone) {
  61. const res = await loginApi({
  62. "type": 1,
  63. "username": phone,
  64. })
  65. console.log(res)
  66. uni.setStorageSync('loginInfo', res.data);
  67. }
  68. // 车型请求
  69. async function questbanktypeFn() {
  70. const {data: res} = await questbanktypeApi()
  71. let arr = res.map(item=>{
  72. item.descriptionArr = item.description.split(':')
  73. return item
  74. })
  75. tabData.value = arr
  76. currentCar.value = res[0]
  77. }
  78. </script>
  79. <style lang="scss" scoped>
  80. image {
  81. display: block;
  82. width: 100%;
  83. height: 100%;
  84. }
  85. .btnBox {
  86. position: fixed;
  87. bottom: 70rpx;
  88. left: 0;
  89. padding: 20px;
  90. width: 100%;
  91. }
  92. .content {
  93. width: 100%;
  94. padding-top: 100rpx;
  95. up-navbar {
  96. }
  97. .tit {
  98. padding: 40rpx 20rpx;
  99. font-size: 36rpx;
  100. color: #333;
  101. font-weight: 700;
  102. }
  103. .ul {
  104. display: flex;
  105. flex-wrap: wrap;
  106. padding: 0 20px;
  107. justify-content: space-between;
  108. .li {
  109. width: 190rpx;
  110. // height: 190rpx;
  111. padding: 20rpx 0;
  112. border-radius: 10rpx;
  113. position: relative;
  114. display: flex;align-items: center;margin: 30rpx 0rpx 0 0 ;flex-direction: column;
  115. &.active {
  116. background: #EDF8FF;
  117. }
  118. .checkBox {
  119. position: absolute;
  120. top: 0;
  121. right: 0;
  122. width: 36rpx;
  123. height: 36rpx;
  124. background: #4DBEFF;
  125. border-radius: 0px 10rpx 0px 10rpx;
  126. display: flex;
  127. align-items: center;
  128. justify-content: center;
  129. image {
  130. display: block;
  131. width: 32rpx;
  132. height: 23rpx;
  133. }
  134. }
  135. .icon {
  136. width: 106rpx;
  137. height: 68rpx;
  138. }
  139. .name {
  140. font-size: 28rpx;
  141. margin: 4rpx 0;
  142. }
  143. .carType {
  144. font-size: 24rpx;
  145. color: #ccc;
  146. padding: 4rpx;
  147. }
  148. }
  149. }
  150. }
  151. </style>