ali_ai_learn_web/src/pages/workflowTrade/workflowTrade.vue

<template>
  <div class="search-platform container-height">
    <div v-if="!isChildRoute">
      <Breadcrumb />
      <div class="padding12 bg_color_fff border_radius_16">
        <!-- 搜索与创建区域 -->
        <div class="search-create-bar">
          <div class="search-input-container flex_1">
            <input
              type="text"
              :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
              class="search-input"
            />
            <button class="search-btn bg_color_primary">
              <img :src="searchIcon" alt="" class="icon-search">
              {{$t('common.shousuo')}}
            </button>
          </div>
          <button class="create-btn bg_color_primary" @click.stop.prevent="goWorkflowAdd">
            <img :src="addIcon" alt="" class="icon-add">
            {{$t('common.fabuxuqiu')}}
          </button>
        </div>
        <div class="typeList flex-between typeborder">
          <div class="gray font_size14 typeName">平台：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</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 active" v-for="item in 5" :key="item">全部</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 active" v-for="item in 5" :key="item">全部</div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="course-list mt20">
        <div class="font_size20 bold mb10">共 <span class="color_theme">5</span> 条需求</div>
        <div class="padding16 bg_color_fff border_radius_16 mb20" v-for="item in 4" :key="item">
          <div class="flex-between">
            <div class="gap10">
              <el-button type="primary">免费</el-button>
              <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
            </div>
            <div class="font_size24 color_price bold">￥2000.00-3000.00</div>
          </div>
          <div class="gap20 mt10">
            <el-button type="primary" size="large" plain>一级分类名称</el-button>
            <el-button type="primary" size="large" plain>二级分类名称</el-button>
            <div class="gap5">
              <img :src="yuangong" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">张三</span>
            </div>
            <div class="gap5">
              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">2024-10-16</span>
            </div>
            <!-- <div class="gap5">
              <img :src="shiyongIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">2,456使用</span>
            </div> -->
            <!-- <div class="gap5">
              <img :src="yunIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">n8n平台</span>
            </div> -->
            <!-- <div class="gap5">
              <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">二级分类名称-三级分类名称</span>
            </div> -->
          </div>
          <div class="font_size16 gray mt10">此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。</div>
          <div class="mt20">
            <div class="flex-between">
              <div class="gap10">
                <el-avatar :size="32" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                <div class="font_size16 bold">张三</div>
                <div class="font_size14 gray mt2">2024-10-16</div>
              </div>
              <el-button type="primary" size="large">
                <img :src="zaixianbaomingIcon" alt="" class="mr10" style="width: 16px; height: 16px;">
                <span class="font_size14">{{$t('common.zaixianbaoming')}}</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <!-- 替换原有的分页代码 -->
      <Pagination 
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.currentPage"
        @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 yuangong from '@/assets/imgs/yuangong.png'
  import riliIcon from '@/assets/imgs/rili.png'
  import shiyongIcon from '@/assets/imgs/shiyong.png'
  import yunIcon from '@/assets/imgs/yun.png'
  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
  import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'

  import Pagination from '@/components/Pagination.vue'


  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  console.log(router,route)
  import { ref, computed, reactive } from 'vue'
  import { useAppStore } from '@/pinia/appStore'
  const appStore = useAppStore()

  //获取参数
  const query = route.query
  const activePlatform = ref(query.activePlatform || '')
  //获取当前路由路径
  // const currentPath = ref(router.currentRoute.value.path)
  const isChildRoute = computed(() => {
    return route.matched.length > 1
  })
  // 添加分页相关数据
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 100
  })
  const handlePageChange = (page) => {
    pagination.currentPage = page
    // 这里可以添加获取数据的逻辑
    console.log('当前页:', page)
  }


  const goWorkflowDetail = () => {
    //增加参数名称
    router.push({
      path: `/search-platform/workflow-detail`,
      query: {
        id:2,
        metaTitle: 'WorkflowDetail'
      }
    })
  };
  const goWorkflowAdd = () => {
    //增加参数名称
    router.push({
      path: `/search-platform/workflow-add`,
      query: {
        activePlatform: activePlatform.value,
      }
    })
  };
</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;
      &.active{
        background: rgba(45,113,255,0.1);
        border-radius: 4px 4px 4px 4px;
        padding: 4px 8px;
        color: $primary-color;
        font-weight: 600;
      }
    }
  }
}
</style>