education-front/pages/index/case.vue

<template>
  <view class="page__view">
    <view class="bg"></view>

    <view class="main">

      <view class="header">
        <view class="title">
          {{ configList.config_name }}
        </view>
        <view class="desc">
          <view class="desc-line"></view>
          {{ configList.config_name_en }}
        </view>
      </view>

			<!-- 搜索栏 -->
			<view class="search">
				<uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
          <template #prefix>
            <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
          </template>
        </uv-search>
			</view>

			<!-- 轮播图 -->
			<view class="swiper">
				<uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" :height="swiperHeight"></uv-swiper>
			</view>

      <view class="flex filter">
        <view class="filter-item">
          <suspendDropdown v-model="queryParams.categoryServiceId" label="服务分类筛选" :options="serviceOptions" @change="onFilterChange"></suspendDropdown>
        </view>
        <view class="filter-item">
          <suspendDropdown v-model="queryParams.categoryMajorId" label="专业筛选" :options="majorOptions" @change="onFilterChange"></suspendDropdown>
        </view>
        <view class="filter-item">
          <suspendDropdown v-model="queryParams.categoryPeriodId" label="阶段筛选" :options="periodOptions" @change="onFilterChange"></suspendDropdown>
        </view>
      </view>

      <view class="list">
        <template v-if="total">
          <view class="list-item" v-for="item in list" :key="item.id" @click="jumpToDetail(item.id)">
            <image class="img" :src="item.image" mode="aspectFill"></image>
          </view>
          </template>
        <template v-else>
          <view class="flex empty">
            <image class="empty-icon" src="@/static/image/icon-empty.png" mode="widthFix"></image>
          </view>
        </template>
      </view>
    </view>

		<tabber select="case" />
  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
	import suspendDropdown from '@/components/base/suspendDropdown.vue'

  export default {
		mixins: [mixinsList],
		components: {
      tabber,
      suspendDropdown,
    },
    data() {
      return {
				keyword: '',
        bannerList: [],
        serviceOptions: [],
        majorOptions: [],
        periodOptions: [],
        list: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
          title: '',
          categoryServiceId: '',
          categoryMajorId: '',
          categoryPeriodId: '',
				},
        mixinsListApi: 'queryAriticleList',
        swiperHeight: '239rpx',
      }
    },
    onLoad() {
      
      const windowWidth = uni.getSystemInfoSync().windowWidth
      this.swiperHeight = `${(windowWidth - 18) * 239 / 714}px`

      this.fetchBanner()
      this.fetchOptions()
      this.getData()
    },
    methods: {
			search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.queryParams.title = this.keyword
        this.getData()
			},
      onFilterChange() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.getData()
      },
			// 获取轮播图
			async fetchBanner() {
				try {
					this.bannerList = (await this.$fetch('queryBannerList', { type: '1' }))?.records // type：0-首页 1-案例 2-服务 3-其他
				} catch (err) {

				}
			},
			async fetchOptions() {
        this.$fetch('queryCategoryServiceList').then(res => {
          this.serviceOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
        }).catch(err => {

        }) 
        this.$fetch('queryCategoryMajorList').then(res => {
          this.majorOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
        }).catch(err => {
          
        }) 
        this.$fetch('queryCategoryPeriodList').then(res => {
          this.periodOptions = res?.records?.map(item => ({ label: item.title, value: item.id })) || []
        }).catch(err => {
          
        }) 
			},
      jumpToDetail(articleId) {
        uni.navigateTo({
					url: `/pages_order/case/index?articleId=${articleId}`
				})
      },
    }
  }
</script>

<style scoped lang="scss">
  .bg {
    width: 100%;
    // height: 438rpx;
    height: 488rpx;
    background-image: linear-gradient(#4883F9, #4883F9, #4883F9, #FCFDFF);
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    // padding: 192rpx 0 182rpx 0;
    padding: 100rpx 0 182rpx 0;
  }
  
  .header {
    margin-left: 44rpx;

    .title {
      position: relative;
      letter-spacing: 6rpx;
      font-size: 46rpx;
      font-weight: 700;
      color: #FFFFFF;
    }

    .desc {
      position: relative;
      font-size: 30rpx;
      // font-weight: 700;
      color: #FFFFFF;
      margin: 4rpx 0 22rpx 0;
      display: inline-block;
      
      &-line {
        margin-bottom: 6rpx;
        width: 100%;
        height: 11rpx;
        background: linear-gradient(to right, #ffffff, #4883f9);
      }
    }
  }

	.search {
    margin: 0 18rpx;
    width: calc(100% - 20rpx * 2);
		background-color: #FFFFFF;
		border-radius: 37rpx;
		padding: 13rpx 0 13rpx 18rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;

		/deep/ .uv-search__action {
			color: $uni-color;
			padding: 10rpx 18rpx;
		}

    &-icon {
      width: 26rpx;
      height: auto;
    }
	}

  .swiper {
    margin: 29rpx 18rpx 0 18rpx;
    border-radius: 25rpx 25rpx 0 0;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 15rpx;
      height: 15rpx;
    }

    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      width: 15rpx;
    }
  }

  .filter {
    column-gap: 33rpx;
    padding: 0 23rpx;
    background: #FFFFFF;

    &-item {
      flex: 1;
    }

  }

  .list {
    padding: 34rpx 0;

    &-item {
      $width: calc(100vw - 37rpx * 2);

      margin: 0 37rpx;
      width: $width;
      // height: 284rpx;
      height: calc(#{$width} * 284 / 677);
      border-radius: 15rpx;
      overflow: hidden;

      & + & {
        margin-top: 25rpx;
      }

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .empty {
    margin-top: 65rpx;
  }

</style>