需求大厅-详情-1

src/views/AAAFont/demandHall/detail/detail.data.ts

+export const formSchema = [
+  {
+    field: 'name',
+    label: '需求名称',
+  },
+  {
+    field: 'type',
+    label: '类型',
+  },
+  {
+    field: 'person',
+    label: '联系人',
+  },
+  {
+    field: 'phone',
+    label: '联系电话',
+  },
+  {
+    field: 'company',
+    label: '公司',
+  },
+  {
+    field: 'des',
+    label: '需求描述',
+  },
+  {
+    field: 'amount',
+    label: '预计金额',
+  },
+];

src/views/AAAFont/demandHall/detail/index.vue

 <template>
   <div class="d-detail">
+    <div class="d-title"> 需求详情 </div>
     <div class="d-card1">
       <div class="w-2/3 d-left">
         <div>
@@ -8,8 +9,8 @@
         <div class="d-des">
           <div class="d-hd">
             <div class="d-row">
-              <div class="title"> 药房数据 </div>
-              <div class="tab"> 健康监测 </div>
+              <div class="title"> {{ data.title }} </div>
+              <div class="tab"> {{ data.tab }} </div>
             </div>
             <div class="d-row" style="font-size: 14px">
               <div> 发布时间： </div>
@@ -21,19 +22,19 @@
                 <div> 1578 </div>
               </div>
             </div>
-            <div> 用户在药店购买药品数据记录 </div>
+            <div> {{ data.des }} </div>
           </div>
           <div class="d-ft">
             <div class="ft-left">
-              <div class="money">面议</div>
-              <div class="status">匹配中</div>
+              <div class="money">{{ data.money }}</div>
+              <div class="status">{{ data.status }}</div>
             </div>
             <div class="ft-right">
-              <el-button type="primary">
+              <el-button type="primary" @click="handleOpenConnect">
                 <Icon style="margin-right: 6px" icon="ant-design:customer-service-outlined" />
                 立即沟通
               </el-button>
-              <el-button> 发布类似需求 </el-button>
+              <el-button @click="similar = true"> 发布类似需求 </el-button>
             </div>
           </div>
         </div>
@@ -54,31 +55,179 @@
           <div class="list-item">
             <div style="color: #bdc3c8"> 场景分类 </div>
             <el-divider direction="vertical" />
-            <div style="color: #4e80f8"> 健康监测 </div>
+            <div style="color: #4e80f8"> {{ data.tab }} </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="d-card1 d-card2">
+      <div class="cd-header">
+        <div class="h-left">
+          <div class="title"> 需求服务流程 </div>
+          <div class="tab"> 简单&nbsp;&nbsp;·&nbsp;&nbsp;高效&nbsp;&nbsp;·&nbsp;&nbsp;安全 </div>
+        </div>
+        <div class="h-right">
+          <el-button type="text" style="padding: 0; height: 14px">查看详细流程></el-button>
+        </div>
+      </div>
+      <div class="h-img">
+        <img src="@/assets/images/flushTask.png" alt="" />
+      </div>
+    </div>
+    <!-- 立即沟通 -->
+    <el-dialog
+      title="立即沟通"
+      v-model="connectVisible"
+      width="70%"
+      :before-close="handleCloseConnect"
+    >
+      <div class="modal-detail">
+        <Row :gutter="[16, 30]">
+          <Col :span="12" v-for="info in formSchema" :key="info">
+            <div class="col-item">
+              <div class="item-label">{{ info.label }}：</div>
+              <div class="item-des">{{ data[info.field] ? data[info.field] : '-' }}</div>
+            </div>
+          </Col>
+        </Row>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="connectVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <!-- 发布类似需求 -->
+    <el-dialog
+      title="发布类似需求"
+      v-model="similar"
+      width="70%"
+      :before-close="handleCloseConnect"
+    >
+      <div class="modal-detail">
+        <el-form :model="form" label-width="auto">
+          <Row>
+            <Col :span="12">
+              <el-form-item label="需求名称">
+                <el-input class="form-item" v-model="form.name" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="类型">
+                <el-input class="form-item" v-model="form.type" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="联系人">
+                <el-input class="form-item" v-model="form.person" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="联系电话">
+                <el-input class="form-item" v-model="form.phone" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="公司">
+                <el-input class="form-item" v-model="form.company" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="需求描述">
+                <el-input class="form-item" v-model="form.des" />
+              </el-form-item>
+            </Col>
+            <Col :span="12">
+              <el-form-item label="预计金额">
+                <el-input class="form-item" v-model="form.amount" />
+              </el-form-item>
+            </Col>
+          </Row>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="handleUpdate()">发布</el-button>
+          <el-button @click="similar = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
-
 <script>
   import Icon from '@/components/Icon/Icon.vue';
+  import { Row, Col } from 'ant-design-vue';
 
   export default {
-    components: { Icon },
+    components: { Icon, Row, Col },
     data() {
-      return {};
+      return {
+        form: {},
+        data: this.$route.query,
+        connectVisible: false,
+        similar: false,
+        formSchema: [
+          {
+            field: 'title',
+            label: '需求名称',
+          },
+          {
+            field: 'tab',
+            label: '类型',
+          },
+          {
+            field: 'person',
+            label: '联系人',
+          },
+          {
+            field: 'phone',
+            label: '联系电话',
+          },
+          {
+            field: 'company',
+            label: '公司',
+          },
+          {
+            field: 'des',
+            label: '需求描述',
+          },
+          {
+            field: 'money',
+            label: '预计金额',
+          },
+        ],
+      };
+    },
+    methods: {
+      handleCloseConnect() {
+        this.connectVisible = false;
+      },
+      handleSubmitC() {},
+      handleOpenConnect() {
+        this.connectVisible = true;
+      },
+      handleUpdate() {
+        this.$message.success('发布成功！');
+        this.similar = false;
+      },
     },
   };
 </script>
 
 <style scoped>
   .d-detail {
-    padding-top: 60px;
+    padding-top: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 20px;
+  }
+  .d-title {
+    float: left;
+    color: #081546;
+    font-size: 30px;
+    width: 70%;
+    margin-bottom: 20px;
   }
   .d-card1 {
     display: flex;
@@ -147,7 +296,8 @@
       }
       .dr-list {
         display: flex;
-        gap: 15px;
+        flex-direction: column;
+        gap: 18px;
         padding: 25px 5px;
         .list-item {
           display: flex;
@@ -157,4 +307,43 @@
       }
     }
   }
+  .d-card2 {
+    flex-direction: column;
+    gap: 40px;
+    margin-bottom: 40px;
+    .cd-header {
+      display: flex;
+      justify-content: space-between;
+      flex: 1;
+      .h-left {
+        display: flex;
+        gap: 20px;
+        .title {
+          font-size: 18px;
+        }
+        .tab {
+          font-size: 14px;
+          padding: 4px 8px;
+          background-color: #eff1f6;
+          color: #777e91;
+        }
+      }
+    }
+    .h-img > img {
+      width: 100%;
+    }
+  }
+  .col-item {
+    display: flex;
+    gap: 10px;
+    .item-label {
+      width: 100px;
+    }
+  }
+  .modal-detail {
+    padding: 40px 80px;
+  }
+  .form-item {
+    width: 90%;
+  }
 </style>

src/views/AAAFont/demandHall/index.vue

@@ -82,6 +82,12 @@
               <div class="c-footer">
                 <div class="cf-money"> {{ i.money }} </div>
                 <div class="cf-status"> {{ i.status }} </div>
+                <div class="cf-eye">
+                  <div>
+                    <Icon icon="ant-design:eye-outlined" />
+                  </div>
+                  <div> {{ i.eye }} </div>
+                </div>
               </div>
             </div>
           </div>
@@ -365,6 +371,9 @@
             des: '提供针对金融行业的各类数据分析和报告，帮助金融机构制定投资决策',
             money: '￥8234',
             status: '匹配中',
+            eye: '1982',
+            person: '张伟',
+            phone: '13986410247',
           },
           {
             title: '电商用户行为研究',
@@ -372,6 +381,10 @@
             des: '收集并分析电商平台用户的浏览、购买及偏好数据，优化营销策略',
             money: '￥11876',
             status: '匹配中',
+            eye: '1185',
+            person: '李娜',
+            phone: '13658790256',
+            company: 'xxx公司',
           },
           {
             title: '城市交通流量监测',
@@ -379,6 +392,10 @@
             des: '城市各主要道路的交通流量监控数据，用于交通调度优化',
             money: '￥15642',
             status: '匹配中',
+            eye: '1443',
+            person: '王磊',
+            phone: '13728937456',
+            company: 'xxx公司',
           },
           {
             title: '医院药品库存管理',
@@ -386,6 +403,10 @@
             des: '医院药品库存及使用情况的数据管理系统，确保药品供应充足',
             money: '面议',
             status: '匹配中',
+            eye: '1021',
+            person: '刘洋',
+            phone: '13576219823',
+            company: 'xxx公司',
           },
           {
             title: '工业生产线效率优化',
@@ -393,6 +414,10 @@
             des: '监控工业生产线各环节的数据，优化生产效率与成本',
             money: '￥20753',
             status: '匹配中',
+            eye: '1354',
+            person: '陈静',
+            phone: '13894321879',
+            company: 'xxx公司',
           },
           {
             title: '物流配送时效分析',
@@ -400,6 +425,10 @@
             des: '收集并分析物流配送时效数据，提升配送效率和客户满意度',
             money: '￥7623',
             status: '匹配中',
+            eye: '1065',
+            person: '杨琳',
+            phone: '13458297016',
+            company: 'xxx公司',
           },
           {
             title: '地理信息系统数据管理',
@@ -407,6 +436,10 @@
             des: '提供关于城市建设与发展相关的地理信息数据及分析报告',
             money: '￥13254',
             status: '匹配中',
+            eye: '1564',
+            person: '赵强',
+            phone: '13916548932',
+            company: 'xxx公司',
           },
           {
             title: '网站访问量与用户行为分析',
@@ -414,6 +447,10 @@
             des: '分析网站用户行为与访问量，提供数据支持以优化用户体验',
             money: '￥18822',
             status: '匹配中',
+            eye: '1205',
+            person: '黄婷',
+            phone: '13674829301',
+            company: 'xxx公司',
           },
           {
             title: '企业客户满意度调查',
@@ -421,6 +458,10 @@
             des: '针对企业客户进行的满意度调查和数据分析报告',
             money: '￥6234',
             status: '匹配中',
+            eye: '1397',
+            person: '周杰',
+            phone: '13537648952',
+            company: 'xxx公司',
           },
           {
             title: '城市环保数据监测',
@@ -428,6 +469,10 @@
             des: '收集各城市环保相关数据，包括空气质量、水质等指标',
             money: '￥12568',
             status: '匹配中',
+            eye: '1063',
+            person: '吴昊',
+            phone: '13759128340',
+            company: 'xxx公司',
           },
           {
             title: '金融市场动态分析',
@@ -435,6 +480,10 @@
             des: '提供实时金融市场动态数据，帮助投资者捕捉市场机会',
             money: '￥21127',
             status: '匹配中',
+            eye: '1621',
+            person: '徐丹',
+            phone: '13942018356',
+            company: 'xxx公司',
           },
           {
             title: '电商平台用户画像',
@@ -442,6 +491,10 @@
             des: '对电商平台用户进行画像分析，帮助品牌商制定精准营销策略',
             money: '￥15472',
             status: '匹配中',
+            eye: '1910',
+            person: '孙婷',
+            phone: '13615947280',
+            company: 'xxx公司',
           },
           {
             title: '智慧城市交通数据',
@@ -449,6 +502,10 @@
             des: '各大城市智慧交通管理系统的实时交通数据，包括道路状况、车流量等',
             money: '面议',
             status: '匹配中',
+            eye: '1290',
+            person: '马雷',
+            phone: '13892014567',
+            company: 'xxx公司',
           },
           {
             title: '医院患者数据分析',
@@ -456,6 +513,10 @@
             des: '对医院患者的诊疗数据进行分析，优化医疗资源配置',
             money: '￥11234',
             status: '匹配中',
+            eye: '1549',
+            person: '胡晓',
+            phone: '13470326109',
+            company: 'xxx公司',
           },
           {
             title: '生产线设备运行监控',
@@ -463,6 +524,10 @@
             des: '实时监控生产线设备的运行状态与故障预警，保障生产效率',
             money: '￥8573',
             status: '匹配中',
+            eye: '1785',
+            person: '郭琳',
+            phone: '13726351489',
+            company: 'xxx公司',
           },
           {
             title: '物流仓储数据整合',
@@ -470,6 +535,10 @@
             des: '收集并整合物流仓储的数据，优化仓储管理与配送效率',
             money: '￥14253',
             status: '匹配中',
+            eye: '1533',
+            person: '高峰',
+            phone: '13687215039',
+            company: 'xxx公司',
           },
           {
             title: '卫星遥感数据应用',
@@ -477,6 +546,10 @@
             des: '使用卫星遥感技术收集各类环境数据，应用于农业、城市建设等领域',
             money: '￥22876',
             status: '匹配中',
+            eye: '1158',
+            person: '何雪',
+            phone: '13594762013',
+            company: 'xxx公司',
           },
           {
             title: '电商平台交易分析',
@@ -484,6 +557,10 @@
             des: '分析电商平台上的交易数据，帮助商家优化销售策略',
             money: '￥6142',
             status: '匹配中',
+            eye: '1089',
+            person: '林俊',
+            phone: '13728509641',
+            company: 'xxx公司',
           },
           {
             title: '企业人力资源数据分析',
@@ -491,6 +568,10 @@
             des: '针对企业人力资源管理中的数据进行深入分析与报告',
             money: '面议',
             status: '匹配中',
+            eye: '1450',
+            person: '罗丹',
+            phone: '13931258704',
+            company: 'xxx公司',
           },
           {
             title: '城市安全监控数据',
@@ -498,6 +579,10 @@
             des: '城市公共安全监控数据，包括监控摄像头、紧急事件处理等',
             money: '￥13245',
             status: '匹配中',
+            eye: '1823',
+            person: '邓凯',
+            phone: '13465179380',
+            company: 'xxx公司',
           },
         ],
       };
@@ -840,6 +925,14 @@
           align-items: center;
           color: #999999;
         }
+        .cf-eye {
+          display: flex;
+          gap: 10px;
+          color: #999999;
+          align-items: center;
+          font-size: 14px;
+          padding-left: 10%;
+        }
       }
     }
   }