吉光研途前端代码仓库
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.

217 lines
5.3 KiB

6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
6 days ago
  1. <template>
  2. <view class="page__view">
  3. <view class="bg"></view>
  4. <view class="main">
  5. <!-- 搜索栏 -->
  6. <view class="search">
  7. <uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
  8. <template #prefix>
  9. <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
  10. </template>
  11. </uv-search>
  12. </view>
  13. <!-- 轮播图 -->
  14. <view class="swiper">
  15. <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="239rpx"></uv-swiper>
  16. </view>
  17. <view class="flex filter">
  18. <view class="filter-item">
  19. <suspendDropdown v-model="queryParams.categoryServiceId" label="服务分类筛选" :options="serviceOptions" @change="onFilterChange"></suspendDropdown>
  20. </view>
  21. <view class="filter-item">
  22. <suspendDropdown v-model="queryParams.categoryMajorId" label="专业筛选" :options="majorOptions" @change="onFilterChange"></suspendDropdown>
  23. </view>
  24. <view class="filter-item">
  25. <suspendDropdown v-model="queryParams.categoryPeriodId" label="阶段筛选" :options="periodOptions" @change="onFilterChange"></suspendDropdown>
  26. </view>
  27. </view>
  28. <view class="list">
  29. <view class="list-item" v-for="item in list" :key="item.id" @click="jumpToDetail(item.thesisId)">
  30. <image class="img" :src="item.image" mode="aspectFill"></image>
  31. </view>
  32. </view>
  33. </view>
  34. <tabber select="case" />
  35. </view>
  36. </template>
  37. <script>
  38. import mixinsList from '@/mixins/list.js'
  39. import tabber from '@/components/base/tabbar.vue'
  40. import suspendDropdown from '@/components/base/suspendDropdown.vue'
  41. export default {
  42. mixins: [mixinsList],
  43. components: {
  44. tabber,
  45. suspendDropdown,
  46. },
  47. data() {
  48. return {
  49. keyword: '',
  50. bannerList: [],
  51. serviceOptions: [],
  52. majorOptions: [],
  53. periodOptions: [],
  54. list: [],
  55. queryParams: {
  56. pageNo: 1,
  57. pageSize: 10,
  58. title: null,
  59. categoryServiceId: null,
  60. categoryMajorId: null,
  61. categoryPeriodId: null,
  62. },
  63. mixinsListApi: 'queryAriticleList',
  64. }
  65. },
  66. onLoad() {
  67. this.fetchBanner()
  68. this.fetchOptions()
  69. this.getData()
  70. },
  71. methods: {
  72. // todo: delete
  73. getData() {
  74. this.list = [
  75. { id: '001', image: '/static/image/temp-1.png' },
  76. { id: '001', image: '/static/image/temp-2.png' },
  77. { id: '001', image: '/static/image/temp-3.png' },
  78. ]
  79. this.total = this.list.length
  80. },
  81. search() {
  82. this.queryParams.pageNo = 1
  83. this.queryParams.pageSize = 10
  84. this.queryParams.title = this.keyword
  85. this.getData()
  86. },
  87. onFilterChange() {
  88. this.queryParams.pageNo = 1
  89. this.queryParams.pageSize = 10
  90. this.getData()
  91. },
  92. // 获取轮播图
  93. async fetchBanner() {
  94. try {
  95. this.bannerList = (await this.$fetch('queryBannerList', { type: '1' }))?.records // type:0-首页 1-案例 2-服务 3-其他
  96. } catch (err) {
  97. }
  98. },
  99. async fetchOptions() {
  100. this.$fetch('queryCategoryServiceList').then(res => {
  101. this.serviceOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
  102. }).catch(err => {
  103. })
  104. this.$fetch('queryCategoryMajorList').then(res => {
  105. this.majorOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
  106. }).catch(err => {
  107. })
  108. this.$fetch('queryCategoryPeriodList').then(res => {
  109. this.periodOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
  110. }).catch(err => {
  111. })
  112. },
  113. jumpToDetail(articleId) {
  114. uni.navigateTo({
  115. url: `/pages_order/case/index?articleId=${articleId}`
  116. })
  117. },
  118. }
  119. }
  120. </script>
  121. <style scoped lang="scss">
  122. .bg {
  123. width: 100%;
  124. height: 438rpx;
  125. background-image: linear-gradient(#4883F9, #4883F9, #4883F9, #FCFDFF);
  126. }
  127. .main {
  128. position: absolute;
  129. top: 0;
  130. left: 0;
  131. width: 100%;
  132. padding: 192rpx 0 182rpx 0;
  133. }
  134. .search {
  135. margin: 0 18rpx;
  136. width: calc(100% - 20rpx * 2);
  137. background-color: #FFFFFF;
  138. border-radius: 37rpx;
  139. padding: 13rpx 0 13rpx 18rpx;
  140. box-sizing: border-box;
  141. display: flex;
  142. align-items: center;
  143. /deep/ .uv-search__action {
  144. color: $uni-color;
  145. padding: 10rpx 18rpx;
  146. }
  147. &-icon {
  148. width: 26rpx;
  149. height: auto;
  150. }
  151. }
  152. .swiper {
  153. margin: 29rpx 18rpx 0 18rpx;
  154. border-radius: 25rpx 25rpx 0 0;
  155. overflow: hidden;
  156. /deep/ .uv-swiper-indicator__wrapper__dot {
  157. width: 15rpx;
  158. height: 15rpx;
  159. }
  160. /deep/ .uv-swiper-indicator__wrapper__dot--active {
  161. width: 15rpx;
  162. }
  163. }
  164. .filter {
  165. column-gap: 33rpx;
  166. padding: 0 23rpx;
  167. background: #FFFFFF;
  168. &-item {
  169. flex: 1;
  170. }
  171. }
  172. .list {
  173. padding: 34rpx 37rpx;
  174. &-item {
  175. width: 100%;
  176. height: 284rpx;
  177. border-radius: 15rpx;
  178. overflow: hidden;
  179. & + & {
  180. margin-top: 25rpx;
  181. }
  182. .img {
  183. width: 100%;
  184. height: 100%;
  185. }
  186. }
  187. }
  188. </style>