add

src/app/tab2/tab2.page.html

@@ -1,17 +1,58 @@
-<ion-header [translucent]="true">
+<!-- tab2.page.html -->
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title>装修</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+<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-content>

src/app/tab2/tab2.page.scss

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

src/app/tab2/tab2.page.ts

@@ -1,12 +1,46 @@
+// 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[] = [];
 
-  constructor() {}
+  constructor() {
+    this.filteredResults = this.results;
+  }
 
-}
+  filterResults() {
+    this.filteredResults = this.results.filter(result => {
+      // 添加筛选条件的逻辑判断
+      return true; // 示例中未添加具体筛选条件，需要根据实际需求补充
+    });
+  }
+
+  viewCompanyDetail(company: any) {
+    // 跳转到装修公司详情页
+    console.log(`查看${company.name}的详细信息`);
+  }
+
+  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('设计师'));
+    }
+  }
+}