add

src/app/tab2/tab2.page.html

@@ -1,58 +1,134 @@
-<!-- tab2.page.html -->
 <ion-header>
-  <ion-toolbar>
-    <ion-title>装修</ion-title>
+  <ion-toolbar color="primary">
+    <ion-title>装修页</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="12">
-        <!-- 搜索框 -->
-        <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12">
-        <!-- 导航栏 -->
-        <ion-segment>
-          <ion-segment-button value="company">
-            装修公司
-          </ion-segment-button>
-          <ion-segment-button value="design">
-            设计机构
-          </ion-segment-button>
-          <ion-segment-button value="designer">
-            独立设计师
-          </ion-segment-button>
-        </ion-segment>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12">
-        <!-- 筛选条件 -->
-        <ion-checkbox slot="start" value="quality">安心优选</ion-checkbox>
-        <ion-checkbox slot="start" value="special">现货特价</ion-checkbox>
-        <ion-checkbox slot="start" value="price">100-299元/㎡</ion-checkbox>
-        <ion-checkbox slot="start" value="style1">北欧风格</ion-checkbox>
-        <ion-checkbox slot="start" value="style2">中式风格</ion-checkbox>
-        <ion-checkbox slot="start" value="style3">美式风格</ion-checkbox>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col size="12">
-        <!-- 结果展示 -->
-        <ion-card *ngFor="let result of results">
-          <ion-card-header>
-            <ion-card-title>{{ result.name }}</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <p>价格: {{ result.price }}</p>
-            <p>用户评价: {{ result.rating }}</p>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <!-- 搜索框 -->
+  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
+
+  <!-- 导航栏 -->
+  <ion-segment (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="company">
+      <ion-icon name="business"></ion-icon>
+      装修公司
+    </ion-segment-button>
+    <ion-segment-button value="design">
+      <ion-icon name="brush"></ion-icon>
+      设计机构
+    </ion-segment-button>
+    <ion-segment-button value="designer">
+      <ion-icon name="person"></ion-icon>
+      独立设计师
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- 区域用来展示详情页 -->
+  <div class="details-container">
+    <!-- 装修公司详情页 -->
+    <div *ngIf="selectedSegment === 'company'">
+      <!-- 装修公司详情页 -->
+      <ion-card>
+        <ion-card-header>
+          公司名称
+        </ion-card-header>
+        <ion-card-content>
+          <ion-item>
+            <ion-label>星级评分:</ion-label>
+            <ion-text>{{ company.starRating }}</ion-text>
+          </ion-item>
+          <ion-item>
+            <ion-label>评价数量:</ion-label>
+            <ion-text>{{ company.reviewCount }}</ion-text>
+          </ion-item>
+          <ion-item>
+            <ion-label>公司简介:</ion-label>
+            <ion-text>{{ company.description }}</ion-text>
+          </ion-item>
+          <!-- 公司介绍 -->
+          <ion-card>
+            <ion-card-header>
+              公司介绍
+            </ion-card-header>
+            <ion-card-content>
+              <ion-list>
+                <ion-item>
+                  <ion-label>公司服务:</ion-label>
+                  <ion-text>{{ company.services }}</ion-text>
+                </ion-item>
+                <ion-item>
+                  <ion-label>优势:</ion-label>
+                  <ion-text>{{ company.advantages }}</ion-text>
+                </ion-item>
+                <ion-item>
+                  <ion-label>案例:</ion-label>
+                  <ion-text>{{ company.cases }}</ion-text>
+                </ion-item>
+              </ion-list>
+            </ion-card-content>
+          </ion-card>
+          <!-- 服务项目 -->
+          <ion-card>
+            <ion-card-header>
+              服务项目
+            </ion-card-header>
+            <ion-card-content>
+              <ion-list>
+                <ion-item>全屋定制</ion-item>
+                <ion-item>局部改造</ion-item>
+                <ion-item>硬装</ion-item>
+                <ion-item>软装</ion-item>
+              </ion-list>
+            </ion-card-content>
+          </ion-card>
+          <!-- 案例展示 -->
+          <ion-card>
+            <ion-card-header>
+              案例展示
+            </ion-card-header>
+            <ion-card-content>
+              <!-- 展示公司完成的装修案例 -->
+            </ion-card-content>
+          </ion-card>
+          <!-- 团队介绍 -->
+          <ion-card>
+            <ion-card-header>
+              团队介绍
+            </ion-card-header>
+            <ion-card-content>
+              <!-- 展示公司设计师和施工团队的信息 -->
+            </ion-card-content>
+          </ion-card>
+          <!-- 用户评价 -->
+          <ion-card>
+            <ion-card-header>
+              用户评价
+            </ion-card-header>
+            <ion-card-content>
+              <!-- 展示用户对公司的评价 -->
+            </ion-card-content>
+          </ion-card>
+          <!-- 底部按钮 -->
+          <ion-button expand="full">电话</ion-button>
+          <ion-button expand="full">预约</ion-button>
+          <ion-button expand="full">咨询</ion-button>
+          <ion-button expand="full">查看案例</ion-button>
+        </ion-card-content>
+      </ion-card>
+    </div>
+    <div *ngIf="selectedSegment === 'company'">
+      <!-- 公司详情页内容 -->
+    </div>
+
+    <!-- 设计机构详情页 -->
+    <div *ngIf="selectedSegment === 'design'">
+      <!-- 机构详情页内容 -->
+    </div>
+
+    <!-- 设计师详情页 -->
+    <div *ngIf="selectedSegment === 'designer'">
+      <!-- 设计师详情页内容 -->
+    </div>
+  </div>
 </ion-content>

src/app/tab2/tab2.page.scss

@@ -1,12 +1,3 @@
-/* tab2.page.scss */
-ion-searchbar {
-    margin: 10px;
-  }
-  
-  ion-checkbox {
-    margin: 5px;
-  }
-  
-  ion-card {
-    margin: 10px;
+.details-container {
+    padding: 10px;
   }

src/app/tab2/tab2.page.ts

@@ -1,46 +1,26 @@
-// tab2.page.ts
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss'],
+  styleUrls: ['tab2.page.scss']
+  
 })
 export class Tab2Page {
-  segment: string = 'company';
-  results: any[] = [
-    { name: '装修公司A', price: '200元/㎡', rating: 4.5 },
-    { name: '设计机构B', price: '150元/㎡', rating: 4.2 },
-    { name: '设计师C', price: '180元/㎡', rating: 4.8 },
-    // 其他搜索结果数据
-  ];
-  filteredResults: any[] = [];
+  selectedSegment: string = 'company';
+  company = {
+    name: '公司名称',
+    starRating: 4.5,
+    reviewCount: 100,
+    description: '公司简介',
+    services: '公司服务内容',
+    advantages: '公司优势内容',
+    cases: '公司案例内容'
+  };
 
-  constructor() {
-    this.filteredResults = this.results;
-  }
-
-  filterResults() {
-    this.filteredResults = this.results.filter(result => {
-      // 添加筛选条件的逻辑判断
-      return true; // 示例中未添加具体筛选条件，需要根据实际需求补充
-    });
-  }
-
-  viewCompanyDetail(company: any) {
-    // 跳转到装修公司详情页
-    console.log(`查看${company.name}的详细信息`);
-  }
+  constructor() {}
 
-  segmentChanged(event: any) {
-    this.segment = event.detail.value;
-    // 根据不同的 segment 值过滤结果
-    if (this.segment === 'company') {
-      this.filteredResults = this.results.filter(result => result.name.includes('公司'));
-    } else if (this.segment === 'design') {
-      this.filteredResults = this.results.filter(result => result.name.includes('设计机构'));
-    } else if (this.segment === 'designer') {
-      this.filteredResults = this.results.filter(result => result.name.includes('设计师'));
-    }
+  segmentChanged(event: CustomEvent) {
+    this.selectedSegment = event.detail.value;
   }
-}
+}