ali_ai_learn_web/src/pages/SearchPlatform.vue

<template>
  <div class="search-platform container-height">
    <div v-if="!isChildRoute">
      <Breadcrumb />
      <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
        <!-- 搜索与创建区域 -->
        <div class="search-create-bar">
          <div class="search-input-container flex_1">
            <input
              type="text"
              :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
              class="search-input"
              v-model="searchFom.workflowTitle"
            />
            <button class="search-btn bg_color_primary gradient" @click.stop.prevent="getList('init')">
              <img :src="searchIcon" alt="" class="icon-search">
              {{$t('common.shousuo')}}
            </button>
          </div>
          <button class="create-btn bg_color_primary gradient" @click.stop.prevent="goWorkflowAdd">
            <img :src="addIcon" alt="" class="icon-add">
            {{$t('common.chuangjiangongzuoliu')}}
          </button>
          <div class="flex-center-between border_radius_10 pad20" style="background: #EAF0FF;height: 56px;">
            <img :src="n8Icon" alt="" style="width: 30px; height: 30px;" class="mr10">
            <div class="font_size18 color_theme">前往{{activePlatform}}</div>
            <el-icon :size="24" color="#2D71FF"><CaretRight /></el-icon>
          </div>
        </div>
        <div class="typeList flex-between typeborder">
          <div class="gray font_size14 typeName">类型：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId2 === ''}"
            @click="searchFom.categoryId2 = ''; searchFom.categoryId3 = '';getList('init');categoryListTree2=[]"
            :key="-1">
              全部
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in categoryListTree" :key="item.categoryId"
             :class="{'active':searchFom.categoryId2 === item.categoryId}"
             @click="searchFom.categoryId2 = item.categoryId;searchFom.categoryId3 = '';categoryListTree2=[]; getList('init');getCategoryListTreeFn2();">
              {{item.categoryName}}
            </div>
          </div>
        </div>
        <div class="typeList flex-between">
          <div class="gray font_size14 typeName">二级分类：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.categoryId3 === ''}"
            @click="searchFom.categoryId3 = ''; getList('init');"
            :key="-1">
              全部
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in categoryListTree2" :key="item.categoryId"
             :class="{'active':searchFom.categoryId3 === item.categoryId}"
             @click="searchFom.categoryId3 = item.categoryId; getList('init');">
              {{item.categoryName}}
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="course-list mt20">
        <div class="course-grid">
          <CourseCard v-for="item in list" :key="item.publishId" :info="item"/>
        </div>
      </div>
      <!-- 分页 -->
      <!-- 替换原有的分页代码 -->
      <Pagination 
        :total="searchFom.total"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
    </div>
    <router-view />
  </div>
</template>

<script setup>
  import searchIcon from '@/assets/imgs/search.png'
  import addIcon from '@/assets/imgs/add.png'
  import n8Icon from '@/assets/imgs/8n8.png'

  import CourseCard from '@/components/course-card.vue'
  import Pagination from '@/components/Pagination.vue'

  import { getCategoryListTree } from '@/api/category.js'
  import { getPublishList } from '@/api/publish.js'


  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter();
  const route = useRoute();
  import { ref, computed, reactive, onMounted } from 'vue'
  //获取参数
  const query = route.query
  const categoryId = ref(query.categoryId || '');
  const activePlatform = ref(query.activePlatform || '');
  //获取当前路由路径
  // const currentPath = ref(router.currentRoute.value.path)
  const isChildRoute = computed(() => {
    return route.matched.length > 1
  });
  // 一级分类列表
  const categoryListTree = ref([]);
  // 二级分类列表
  const categoryListTree2 = ref([]);
  // 活动平台

  // 添加分页相关数据
  const list = ref([]);
  const listTotal = ref(0);
  const searchFom = reactive({
    categoryId1: categoryId.value,
    categoryId2: '',
    categoryId3: '',
    workflowTitle: '',
    pageNum: 1,
    pageSize: 10,
  })

  onMounted(() => {
    getList();
    getCategoryListTreeFn();
  })

   // 查询寻找工作流列表
  const getList = async (type) => {
    if(type === 'init'){
      searchFom.pageNum = 1
    }
    const res = await getPublishList(searchFom)
    if(res.code === 200){
      list.value = res.rows || [];
      listTotal.value = res.total || 0;
    }
  }
  const handlePageChange = (page) => {
    searchFom.pageNum = page
    // 这里可以添加获取数据的逻辑
    console.log('当前页:', page)
    getList();
  }

  const goWorkflowAdd = () => {
    //增加参数名称
    router.push({
      path: `/search-platform/workflow-add`,
      query: {
        activePlatform: activePlatform.value,
      }
    })
  };

  const getCategoryListTreeFn = () => {
    getCategoryListTree({categoryId: categoryId.value}).then(res => {
      console.log(res)
      categoryListTree.value = res.rows || [];
    })
  };
  const getCategoryListTreeFn2 = () => {
    getCategoryListTree({categoryId: searchFom.categoryId2}).then(res => {
      console.log(res)
      categoryListTree2.value = res.rows || [];
    })
  };

  
</script>

<style scoped lang="scss">
  // 2. 混合器：按钮通用样式
@mixin btn-style() {
  padding: 0 16px;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap:8px;
  font-size: 18px;
  
  &:hover {
    opacity: 0.9;
  }
}
.search-platform {
 
  // 搜索创建栏嵌套
  .search-create-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;

    .search-input {
      flex: 1;
      height: 60px;
      padding: 0 12px;
      outline: none;
      font-size: 18px;
      border-radius:7px;
      border: none;
      width: 100%;
      //占位符的颜色
      ::placeholder {
        color: #999;
      }
    }

    .search-btn {
      height: 50px;
      @include btn-style();
    }

    .create-btn {
      height: 56px;
      @include btn-style();
    }
    .search-input-container{
      position: relative;
      border-radius: 8px;
      border:2px solid $primary-color;
      .search-btn{
        position: absolute;
        top: 6px;
        right: 6px;
      }
    }
  }
  .typeList{
    padding: 20px 0;
    &.typeborder{
      border-bottom: 1px dashed #DCDFE6;
    }
    .typeName{
      margin-top: 6px;
      width: 80px;
    }
    .typeItem{
      margin: 0 8px;
      cursor: pointer;
      padding: 4px 8px;
      &.active{
        background: rgba(45,113,255,0.1);
        border-radius: 4px 4px 4px 4px;
        
        color: $primary-color;
        font-weight: 600;
      }
    }
  }
}
</style>