education-front/pages/index/index.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="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>

    </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: {
      transformData(records) {
        
        let groups = []

        records.forEach(record => {
          if (record.hasChild == 1) {
            const { id, title, createTime } = record
            const index = groups.findIndex(group => group.id === id)
            if (index === -1) {
              groups.push({ id, title, createTime, children: [] })
            } else {
              groups[index].title = title
              groups[index].createTime = createTime
            }
          } else {
            const { pid, id, title, image, createTime } = record
            const index = groups.findIndex(group => group.id === pid)
            const item = { id, title, image, createTime }
            if (index === -1) {
              groups.push({ id: pid, children: [item] })
            } else {
              groups[index].children.push(item)
            }
          }
        })

        groups.forEach(group => {
          let { children } = group
          children.sort((a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime())
          group.children = children
        })

        groups.sort((a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime())

        return groups
      },
      async fetchCategoryThesisList() {
        try {
          let records = (await this.$fetch('queryCategoryThesisList', { pageNo: 1, pageSize: 1000 }))?.records
        
          this.list = this.transformData(records)
          
        } catch (err) {

        }
      },
      async fetchCategoryThesisTwoList() {
        try {
          let records = (await this.$fetch('queryCategoryThesisTwoList', { pageNo: 1, pageSize: 1000 }))?.records
        
          this.list2 = this.transformData(records)
          
        } catch (err) {

        }
      },
      getData() {
        this.fetchCategoryThesisList()
        this.fetchCategoryThesisTwoList()
      },
			search() {
        uni.navigateTo({
					url: '/pages_order/thesis/search?search=' + this.keyword
				})
				this.keyword = ''
			},
			// 获取轮播图
			async fetchBanner() {
				try {
					this.bannerList = (await this.$fetch('queryBannerList', { type: '0' }))?.records // type：0-首页 1-案例 2-服务 3-其他
				} catch (err) {

				}
			},
      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">
  .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);
      }
    }
  }

  .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>