education-front/pages/index/case.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
    </view>

    <view class="main">

      <view class="flex section header" :style="style">
        <view>
          <view class="title">{{ configList.page_case_title }}</view>
          <view class="desc">{{ configList.page_case_desc }}</view>
        </view>
      </view>

      <!-- 搜索栏 -->
      <view class="section search">
        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
          <template #prefix>
            <view class="flex search-icon">
              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
            </view>
          </template>
        </uv-search>
      </view>

      <!-- 轮播图 -->
      <view class="section swiper">
        <image class="img" :src="configList.page_case_image" mode="widthFix"></image>
        <!-- <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></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>

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

<script>
  import utils from '@/utils/utils'
	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',
        style: '',
      }
    },
    onLoad() {
      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`

      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">
  .page__view {
    /deep/ .tabbar-box {
      height: 0;
      padding: 0;
    }
  }

  .header {
    padding-top: calc(var(--status-bar-height) + 120rpx);
    justify-content: space-between;
    align-items: flex-start;

    .title {
      font-size: 44rpx;
      font-weight: 700;
      color: #6851A7;
    }

    .desc {
      font-size: 22rpx;
      font-weight: 600;
      color: #808080;
    }

    .icon {
      margin-top: 16rpx;
      width: 62rpx;
      height: 62rpx;
      border: 2rpx solid #A3A2C5;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      
      .img {
        width: 50rpx;
        height: auto;
      }
    }
  }

  .bg {
    position: relative;
    width: 100vw;
    height: auto;

    .img {
      width: 100%;
      height: auto;
    }

    &-logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 342rpx;
      height: auto;
      opacity: 0.3;
    }
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    padding-bottom: 182rpx;
    box-sizing: border-box;
  }

  .section {
    margin: 0 38rpx 24rpx 38rpx;
  }
  
	.search {
    width: calc(100% - 38rpx * 2);
    height: 48rpx;
		background-color: #FFFFFF;
		border-radius: 37rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;
    overflow: hidden;
    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);

		/deep/ .uv-search__content {
      padding: 0;
      border: none;
    }

    /deep/ .uv-search__content__input {
      margin-left: 18rpx;
    }

    &-icon {
      padding: 18rpx 10rpx 18rpx 18rpx;
      background: rgba($color: #E8DBF3, $alpha: 0.8);

      .img {
        width: 30rpx;
        height: auto;
      }
    }
	}

  .swiper {
    // border-radius: 10rpx;
    // overflow: hidden;

    .img {
      width: 100%;
      height: auto;
    }
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 25rpx;
      height: 5rpx;
      border-radius: 4rpx;
      margin: 0 4rpx;
    }

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

  .filter {
    justify-content: space-between;
    margin: 0 38rpx 18rpx 38rpx;
    padding: 0 20rpx;
    background: #FAF9FD;
    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #2A2A2B, $alpha: 0.12);
    border-radius: 4rpx;

    &-item {
      // flex: 1;
    }

  }

  .list {
    padding-bottom: 38rpx;

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

      margin: 0 38rpx;
      width: $width;
      // height: 284rpx;
      height: calc(#{$width} * 282 / 672);
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #000000, $alpha: 0.15);

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

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

</style>