feat(workflowTrade): 添加工作流交易详情页面及路由配置

- 在 `workflowTrade.vue` 中新增跳转至详情页的逻辑，并传递参数
- 配置嵌套路由，支持访问 `/workflow-trade/workflow-trade-detail`
- 引入 `cursor-pointer` 样式，用于标识可点击元素
- 调整部分布局间距样式，如添加 `mt10` 类名
- 注释掉部分未使用的标签展示代码
- 更新按钮区域描述文字内容，增强语义表达

src/pages/workflowTrade/workflowTrade.vue

@@ -2,9 +2,9 @@
   <div class="search-platform container-height">
     <div v-if="!isChildRoute">
       <Breadcrumb />
-      <div class="padding12 bg_color_fff border_radius_16">
+      <div class="padding12 bg_color_fff border_radius_16 mt10">
         <!-- 搜索与创建区域 -->
-        <div class="search-create-bar">
+        <div class="search-create-bar"> 
           <div class="search-input-container flex_1">
             <input
               type="text"
@@ -43,39 +43,43 @@
       <!-- 列表 -->
       <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 class="padding16 bg_color_fff border_radius_16 mb20" 
+       
+        v-for="item in 4" :key="item">
+          <div  @click="goworkflowTradeDetail(item)" class="cursor-pointer">
+            <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="gap5">
-              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
-              <span class="font_size14">2024-10-16</span>
+            <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="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 class="font_size16 gray mt10">此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。</div>
           </div>
-          <div class="font_size16 gray mt10">此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。</div>
           <div class="mt20">
             <div class="flex-between">
               <div class="gap10">
@@ -146,13 +150,13 @@
   }
 
 
-  const goWorkflowDetail = () => {
+  const goworkflowTradeDetail = (item={}) => {
     //增加参数名称
     router.push({
-      path: `/search-platform/workflow-detail`,
+      path: `/workflow-trade/workflow-trade-detail`,
       query: {
         id:2,
-        metaTitle: 'WorkflowDetail'
+        metaTitle: item.name || '详情'
       }
     })
   };

src/pages/workflowTrade/workflowTradeDetail.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="workflowTradeDetail container-height">
+    <Breadcrumb />
+    <div class="flex-between mt10">
+      <div class="padding16 bg_color_fff border_radius_16 mb20  flex_1 mr20">
+        <div class="cursor-pointer">
+          <div class="flex-between">
+            <div class="gap10">
+              <el-button type="primary">报名中</el-button>
+              <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
+            </div>
+          </div>
+          <div class="font_size24 color_price bold mt10">￥2000.00-3000.00</div>
+          <div class="gap20 mt10">
+            <div class="gap5">
+              <img :src="biaoqianIcon" 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>
+        </div>
+      </div>
+      <div class="workflowTradeDetail_right">
+        <div class="padding16 bg_color_fff border_radius_16">
+          <div class="flex-column-center">
+            <el-avatar :size="80" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+            <div class="font_size16 bold mt10">张三</div>
+          </div>
+          <div class="totalInfo mt20 flex-center-between">
+            <div class="flex-column-center flex_1 border_right">
+              <div class="font_size24 bold">24</div>
+              <div class="font_size14 mt10">发布需求数</div>
+            </div>
+            <div class="flex-column-center flex_1">
+              <div class="font_size24 bold">24</div>
+              <div class="font_size14 mt10">发布需求数</div>
+            </div>
+          </div>
+        </div>
+        <div class="padding16 bg_color_fff border_radius_16 mt20">
+          <div class="gap10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">已报名人数</div>
+          </div>
+          <div class="flex-center-between mt10">
+            <div class="gap10">
+              <img :src="yuangong" alt="员工" style="width: 20px; height: 20px;">
+              <span class="font_size16">已报名人数</span>
+            </div>
+            <div class="font_size16 bold">15人</div>
+          </div>
+          <div class="flex-center-between mt10">
+            <div class="gap10">
+              <img :src="riliIcon" alt="员工" style="width: 20px; height: 20px;">
+              <span class="font_size16">剩余时间</span>
+            </div>
+            <div class="font_size16 bold color_price">2天3小时</div>
+          </div>
+          <el-button type="primary" size="large" style="width: 100%;" class="mt20">
+            <img :src="zaixianbaomingIcon" alt="" class="mr10" style="width: 30px; height: 30px;">
+            <span class="font_size18">{{$t('common.zaixianbaoming')}}</span>
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import riliIcon from '@/assets/imgs/rili.png'
+  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
+  import yuangong from '@/assets/imgs/yuangong.png'
+  import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
+
+  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
+  });
+
+</script>
+
+<style scoped lang="scss">
+  .workflowTradeDetail{
+    .workflowTradeDetail_right{
+      width: 410px;
+      .totalInfo{
+        background: #F5F7FA;
+        border-radius: 8px 8px 8px 8px;
+        padding: 13px;
+        .border_right{
+          border-right: 1px solid #D8D8D8;
+        }
+      }
+    }
+  }
+
+</style>

src/router/index.js

@@ -57,7 +57,15 @@ const routes = [
     path: '/workflow-trade',
     name: 'WorkflowTradeHome',
     component: () => import('@/pages/workflowTrade/workflowTrade.vue'),
-    meta: { title: 'common.gongzuoliu_trade' }
+    meta: { title: 'common.gongzuoliu_trade' },
+    children: [
+      {
+        path: 'workflow-trade-detail',
+        name: 'WorkflowTradeDetail',
+        component: () => import('@/pages/workflowTrade/workflowTradeDetail.vue'),
+        meta: { title: '' }
+      }
+    ]
   },
   {
     path: '/course/:id',

src/styles/index.scss

@@ -321,6 +321,9 @@ wx-image{
 	border: 1px solid #ccc!important;
 	color: #ccc!important;
 }
+.cursor-pointer{
+	cursor: pointer;
+}
 .nowrap{
 	white-space: nowrap;
 }