education-front/pages/index/index.vue

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

    <view class="main">

			<!-- 搜索栏 -->
			<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="239rpx"></uv-swiper>
			</view>

      <view class="section card" v-for="(group, gIdx) 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">
          <template v-if="gIdx === 0">
            <view class="card-item card-row" v-for="item in group.children" :key="item.id">
              <view class="flex info">
                <!-- todo -->
                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
                <view class="info-label">{{ item.title }}</view>
              </view>
              <button class="btn" @click="jumpToCategory(group.id, item.id, item.title)">查看</button>
            </view>
          </template>
          <template v-else>
            <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)">
                <!-- todo -->
                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
                <view class="info-label">{{ item.title }}</view>
              </view>
            </view>
          </template>
        </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: [],
      }
    },
    onLoad() {
      this.fetchBanner()
      this.getData()
    },
    methods: {
      async getData() {
        try {
          let records = (await this.$fetch('queryCategoryThesisList', { pageNo: 1, pageSize: 1000 }))?.records

          let groups = []

          records.forEach(record => {
            if (record.hasChild == 1) {
              // todo: icon
              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 {
              // todo: icon
              const { pid, id, title, createTime } = record
              const index = groups.findIndex(group => group.id === pid)
              const item = { id, title, 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())

          this.list = groups
        } catch (err) {

        }
      },
			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) {
        uni.navigateTo({
					url: `/pages_order/thesis/search?categoryOne=${categoryOne}&categoryTwo=${categoryTwo}&title=${title}`
				})
      },
    },
  }
</script>

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

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 192rpx 0 182rpx 0;
  }

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