APPmy/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>装修</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 搜索框 -->
  <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 *ngFor="let company of companies">
        <ion-card-header>
          公司名称: {{ company.name }}
        </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-content>
      </ion-card>
    </div>
    <div *ngIf="selectedSegment === 'company'">
      <!-- 公司详情页内容 -->
    </div>

    <!-- 设计机构详情页 -->
    <div *ngIf="selectedSegment === 'design'">
      <!-- 机构详情页内容 -->
      <div *ngIf="selectedSegment === 'design'">
        <!-- 设计机构详情页 -->
        <ion-card>
          <ion-card-header>
            机构名称: {{ agency.name }}
          </ion-card-header>
          <ion-card-content>
            <ion-item>
              <ion-label>星级评分:</ion-label>
              <ion-text>{{ agency.starRating }}</ion-text>
            </ion-item>
            <ion-item>
              <ion-label>评价数量:</ion-label>
              <ion-text>{{ agency.reviewCount }}</ion-text>
            </ion-item>
            <ion-item>
              <ion-label>机构简介:</ion-label>
              <ion-text>{{ agency.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>{{ agency.services }}</ion-text>
                  </ion-item>
                  <ion-item>
                    <ion-label>优势:</ion-label>
                    <ion-text>{{ agency.advantages }}</ion-text>
                  </ion-item>
                  <ion-item>
                    <ion-label>案例:</ion-label>
                    <ion-text>{{ agency.cases }}</ion-text>
                  </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-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>

    <!-- 设计师详情页 -->
    <div *ngIf="selectedSegment === 'designer'">
      <!-- 设计师详情页内容 -->
      <div *ngIf="selectedSegment === 'designer'">
        <!-- 设计师详情页 -->
        <ion-card>
          <ion-card-header>
            设计师信息
          </ion-card-header>
          <ion-card-content>
            <ion-item>
              <ion-avatar slot="start">
                <ion-img src="{{ designer.avatar }}"></ion-img>
              </ion-avatar>
              <ion-label>
                <h2>{{ designer.name }}</h2>
                <p>{{ designer.specialty }}</p>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-label>擅长风格:</ion-label>
              <ion-text>{{ designer.style }}</ion-text>
            </ion-item>
            <ion-item>
              <ion-label>服务地区:</ion-label>
              <ion-text>{{ designer.serviceArea }}</ion-text>
            </ion-item>
            <ion-item>
              <ion-label>价格:</ion-label>
              <ion-text>{{ designer.price }}</ion-text>
            </ion-item>
            <ion-item>
              <ion-label>用户评价:</ion-label>
              <ion-text>{{ designer.rating }}</ion-text>
            </ion-item>
            <!-- 设计师作品展示 -->
            <ion-card>
              <ion-card-header>
                设计师作品
              </ion-card-header>
              <ion-card-content>
                <ion-grid>
                  <ion-row>
                    <ion-col size="6" *ngFor="let work of designer.works">
                      <ion-img src="{{ work.image }}"></ion-img>
                      <p>{{ work.description }}</p>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </ion-card-content>
            </ion-card>
            <!-- 用户评价 -->
            <ion-card>
              <ion-card-header>
                用户评价
              </ion-card-header>
              <ion-card-content>
                <ion-list>
                  <ion-item *ngFor="let review of designer.reviews">
                    <ion-avatar slot="start">
                      <ion-img src="{{ review.avatar }}"></ion-img>
                    </ion-avatar>
                    <ion-label>
                      <h2>{{ review.username }}</h2>
                      <p>{{ review.comment }}</p>
                    </ion-label>
                    <ion-icon slot="end" name="star" [color]="review.rating >= 4 ? 'warning' : 'medium'"></ion-icon>
                  </ion-item>
                </ion-list>
              </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>
  </div>
</ion-content>