学员端小程序
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.

200 lines
4.1 KiB

  1. <template>
  2. <view class="pageBg ">
  3. <view class="pad">
  4. <!-- 搜索框 -->
  5. <view class="searchBg">
  6. <view class="flex">
  7. <view class="searchIcon">
  8. <image src="@/static/images/index/searchIconHui.png" mode=""></image>
  9. </view>
  10. <view class="inputBox">
  11. <u--input placeholder="搜索驾校、教练…" border="none" clearable v-model="keywords" :color="'#333'"
  12. placeholderClass="placeholderClass"></u--input>
  13. </view>
  14. <view class="searchBtn">搜索</view>
  15. </view>
  16. </view>
  17. <!-- 历史搜索 -->
  18. <view class="" v-if="!keywords">
  19. <view class="historyRecord">
  20. <view class="h2_row">
  21. <view class="h2">历史搜索</view>
  22. <view class="deleteIcon">
  23. <image src="@/static/images/index/deleteIcon.png" mode=""></image>
  24. </view>
  25. </view>
  26. <view class="tag_row">
  27. <view class="tag" v-for="(item,index) in tagArr" :key="index">{{item}}</view>
  28. </view>
  29. </view>
  30. <view class="tabs">
  31. <view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">优选驾校</view>
  32. <view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">优选教练</view>
  33. </view>
  34. <view class="ul">
  35. <view class="li">
  36. <view class="num">1</view>
  37. <view class="con">
  38. <schoolItme v-show="currentTab==1" :showPhone="false"/>
  39. <coachItem v-show="currentTab==2"/>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 真正搜索内容 -->
  45. <view class="" v-else>
  46. <view class="tabs">
  47. <view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">驾校(2)</view>
  48. <view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">教练(30)</view>
  49. </view>
  50. <schoolItme v-show="currentTab==1"/>
  51. <coachItem v-show="currentTab==2"/>
  52. </view>
  53. </view>
  54. </view>
  55. </template>
  56. <script>
  57. import schoolItme from '../comp/schoolItem.vue'
  58. import coachItem from '../shcoolDetail/comp/tab3.vue'
  59. export default {
  60. props: ['placeholder'],
  61. components: { schoolItme, coachItem },
  62. data() {
  63. return {
  64. keywords: '',
  65. tagArr: ['翔力驾校','王一宝', '大乔'],
  66. currentTab: 1,
  67. }
  68. },
  69. methods: {
  70. changeTab(num) {
  71. this.currentTab = num
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. .pad {
  78. padding-top: 10rpx;
  79. }
  80. .searchBg {
  81. background: #fff;
  82. width: 100%;
  83. height: 72rpx;
  84. border-radius: 16rpx;
  85. line-height: 72rpx;
  86. margin-top: 10rpx;
  87. .flex {
  88. height: 100%;
  89. .searchIcon {
  90. width: 40rpx;
  91. height: 40rpx;
  92. margin: 0 28rpx;
  93. }
  94. .inputBox {
  95. flex: 1;
  96. color: #fff;
  97. font-size: 28rpx;
  98. }
  99. }
  100. .searchBtn {
  101. width: 120rpx;
  102. font-size: 28rpx;
  103. color: $themC;
  104. text-align: center;
  105. position: relative;
  106. &::before {
  107. content: '';
  108. width: 2rpx;
  109. height: 24rpx;
  110. position: absolute;
  111. left: 0;
  112. top: 50%;
  113. background: #E8E9EC;
  114. transform: translateY(-50%);
  115. }
  116. }
  117. }
  118. .placeholderClass {
  119. color: #ADADAD !important;
  120. }
  121. .h2_row {
  122. display: flex;
  123. justify-content: space-between;
  124. line-height: 116rpx;
  125. .h2 {
  126. font-size: 28rpx;
  127. font-weight: 600;
  128. }
  129. }
  130. .tag_row {
  131. display: flex;
  132. flex-wrap: wrap;
  133. .tag {
  134. padding: 8rpx 16rpx;
  135. background: #FFFFFF;
  136. border-radius: 28rpx;
  137. min-width: 112rpx;
  138. text-align: center;
  139. color: #686B73;
  140. margin: 0 40rpx 20rpx 0;
  141. }
  142. }
  143. .tabs {
  144. display: flex;
  145. padding: 30rpx 0 50rpx 0;
  146. margin-left: 20rpx;
  147. .tab {
  148. font-size: 28rpx;
  149. color: #333;
  150. margin-right: 68rpx;
  151. &.active {
  152. color: $themC;
  153. position: relative;
  154. font-weight: 600;
  155. &::before {
  156. position: absolute;
  157. content: '';
  158. background: $themC;
  159. bottom: -20rpx;
  160. left: 50%;
  161. transform: translateX(-50%);
  162. width: 112rpx;
  163. height: 4rpx;
  164. }
  165. }
  166. }
  167. }
  168. .li {
  169. display: flex;
  170. align-items: center;
  171. .num {
  172. width: 56rpx;
  173. height: 36rpx;
  174. border-radius: 4rpx;
  175. text-align: center;
  176. background: #ADADAD;
  177. font-size: 28rpx;
  178. color: #fff;
  179. margin-right: 28rpx;
  180. &:nth-child(1) {
  181. background: #FF6B6D;
  182. }
  183. &:nth-child(2) {
  184. background: #F18840;
  185. }
  186. &:nth-child(3) {
  187. background: #FFB83E;
  188. }
  189. }
  190. .con {
  191. flex: 1;
  192. width: 0;
  193. }
  194. }
  195. </style>