education-front/pages/index/index.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" src="@/static/image/bg-index.png" 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">
        <view>
          <view class="title">{{ configList.page_index_title }}</view>
          <view class="desc">{{ configList.page_index_desc }}</view>
        </view>
        <view class="flex icon">
          <image class="img" :src="configList.config_logo" mode="widthFix"></image>
        </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">
        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></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>
          <image class="card-header-icon" src="@/static/image/icon-triangle-down.png" mode="widthFix"></image>
        </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="flex btn" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisList')">
              <view>查看</view>
              <image class="btn-icon" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
            </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>
          <image class="card-header-icon" src="@/static/image/icon-triangle-down.png" mode="widthFix"></image>
        </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>
  </view>
</template>

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

  export default {
		components: {
      tabber,
    },
    data() {
      return {
				keyword: '',
        bannerList: [],
        list: [],
        list2: [],
      }
    },
    onLoad() {
      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 {
    /deep/ .tabbar-box {
      height: 0;
      padding: 0;
    }
  }

  .header {
    padding-top: calc(var(--status-bar-height) + 40rpx);
    justify-content: space-between;

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

    .desc {
      font-size: 18rpx;
      font-weight: 500;
      color: #808080;
    }

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

  .bg {
    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;
    
    /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;
    }
  }

  .card {
    width: calc(100% - 38rpx * 2);
    box-sizing: border-box;
    padding-bottom: 45rpx;
    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.14), rgba($color: #E2DDFF, $alpha: 0.14));
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);

    &-header {
      display: flex;
      align-items: center;
      column-gap: 23rpx;
      width: 100%;
      padding: 25rpx 30rpx 27rpx 30rpx;
      box-sizing: border-box;

      &-title {
        font-size: 34rpx;
        font-weight: 700;
        color: #4D4D4D;
      }

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

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

    &-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      column-gap: 50rpx;
      padding: 14rpx 28rpx;
      box-sizing: border-box;
      background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.26), rgba($color: #C8C3FD, $alpha: 0.26));
      // background: rgba($color: #E2DDFF, $alpha: 0.26);
      border-radius: 10rpx;
      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #626266, $alpha: 0.15);
    }

    
    .info {

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

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

    &-row {
      justify-content: space-between;
      padding: 14rpx 30rpx 14rpx 42rpx;

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

      .info {
        column-gap: 35rpx;
      }

      .btn {
        column-gap: 12rpx;
        padding: 8rpx 24rpx 8rpx 26rpx;
        font-size: 20rpx;
        font-weight: 400;
        color: #6851A7;
        background: #FFFFFF;
        border-radius: 20rpx;

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

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

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