education-front/pages/index/index.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
    </view>

    <!-- 搜索栏 -->
    <view class="section 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="section swiper">
      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" :height="swiperHeight"></uv-swiper>
    </view>

    <view class="section card" v-for="group in list" :key="group.id">
      <view class="card-header">
        <view class="card-header-title">{{ group.title }}</view>
        <!-- <view class="card-header-tag">JGYT</view> -->
      </view>

      <view class="card-content">
        <view class="card-item card-row" v-for="item in group.children" :key="item.id">
          <view class="flex info">
            <image class="info-icon" :src="item.image" mode="widthFix"></image>
            <view class="info-label">{{ item.title }}</view>
          </view>
          <button class="btn" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisList')">查看</button>
        </view>
      </view>

    </view>

    <view class="section card" v-for="group in list2" :key="group.id">
      <view class="card-header">
        <view class="card-header-title">{{ group.title }}</view>
        <!-- <view class="card-header-tag">JGYT</view> -->
      </view>

      <view class="card-content">
        <view class="card-box">
          <view class="card-item info" v-for="item in group.children" :key="item.id" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisTwoList')">
            <image class="info-icon" :src="item.image" mode="widthFix"></image>
            <view class="info-label">{{ item.title }}</view>
          </view>
        </view>
      </view>

    </view>

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

<script>
	import tabber from '@/components/base/tabbar.vue'

  export default {
		components: {
      tabber,
    },
    data() {
      return {
				keyword: '',
        bannerList: [],
        list: [],
        list2: [],
        swiperHeight: '239rpx',
      }
    },
    onLoad() {

      const windowWidth = uni.getSystemInfoSync().windowWidth
      this.swiperHeight = `${(windowWidth - 18) * 239 / 714}px`
      
      this.fetchBanner()
      this.getData()
    },
    methods: {
			// 获取轮播图
			async fetchBanner() {
				try {
					this.bannerList = (await this.$fetch('queryBannerList', { type: '0' }))?.records // type：0-首页 1-案例 2-服务 3-其他
				} catch (err) {

				}
			},
      async fetchCategory(api) {
        try {
          let parents = (await this.$fetch(api, { pageNo: 1, pageSize: 1000 }))?.records?.filter(item => item.hasChild == '1')

          let results = await Promise.allSettled(parents.map(parent => { return this.$fetch(api, { pid: parent.id, pageNo: 1, pageSize: 1000 }) }))

          results.forEach((result, index) => {
            parents[index].children = result?.value?.records || []
          })

          return parents

        } catch (err) {
          return []
        }
      },
      async getData() {
        this.list = await this.fetchCategory('queryCategoryThesisList')
        this.list2 = await this.fetchCategory('queryCategoryThesisTwoList')
      },
			search() {
        uni.navigateTo({
					url: '/pages_order/thesis/search?search=' + this.keyword
				})
				this.keyword = ''
			},
      jumpToCategory(categoryOne, categoryTwo, title, api) {
        uni.navigateTo({
					url: `/pages_order/thesis/search?categoryOne=${categoryOne}&categoryTwo=${categoryTwo}&title=${title}&api=${api}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    padding-bottom: 182rpx;
  }

  .bg {
    width: 100%;
    height: 264rpx;

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

  .section {
    margin: 0 18rpx 0 18rpx;
  }

	.search {
    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-top: 29rpx;
    margin-bottom: 26rpx;
    border-radius: 25rpx;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 15rpx;
      height: 15rpx;
    }

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

  .card {
    margin-bottom: 35rpx;
    width: calc(100% - 20rpx * 2);
    box-sizing: border-box;
    padding-bottom: 45rpx;
    background-image: linear-gradient(164deg,#cfecfe 88rpx, #fcfdfe 176rpx);
    border: 3rpx solid #FFFFFF;
    border-radius: 25rpx;
    box-shadow: 0px 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

    &-header {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 46rpx 0 17rpx 33rpx;
      overflow: hidden;

      &-title {
        font-size: 42rpx;
        font-weight: 800;
        color: #000000;
      }

      &-tag {
        position: absolute;
        top: -40rpx;
        right: 12rpx;
        font-size: 156rpx;
        font-weight: 800;
        color: rgba(255,255,255,0.3);
      }
    }

    &-content {
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      column-gap: 50rpx;
      padding: 26rpx 28rpx;
      box-sizing: border-box;
      background: #f3f6fd;
      border-radius: 28rpx;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
    }

    
    .info {

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

      &-label {
        font-size: 32rpx;
        font-weight: 400;
        color: #000000;
      }
    }

    &-row {
      justify-content: space-between;
      padding: 15rpx 35rpx;

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

      .info {
        column-gap: 33rpx;
      }

      .btn {
        padding: 7rpx 30rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #4883F9;
        background: #FFFFFF;
        border-radius: 27rpx;
      }
    }

    &-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 34rpx;
      row-gap: 26rpx;

      .info {
        column-gap: 50rpx;
      }
    }
  }
</style>