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

<ion-header>
  <ion-toolbar color="light">
    <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'">
      <div *ngFor="let company of companies">
      <ion-card class="Company-card">
        <ion-card-header><ion-card-title> {{ company.name }}</ion-card-title>
      </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 class="company-card">
            <ion-card-header>
              公司服务:
            </ion-card-header>
            <ion-card-content>
              <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
            </ion-card-content>
          </ion-card>
          <!-- 公司优势 -->
          <ion-card class="company-card">
            <ion-card-header>
              公司优势:
            </ion-card-header>
            <ion-card-content>
              <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
            </ion-card-content>
          </ion-card>
          <!-- 公司案例 -->
          <ion-card class="company-card">
            <ion-card-header>
              公司案例:
            </ion-card-header>
            <ion-card-content>
              <ion-text [innerHTML]="formatHtmlContent(company.cases)"></ion-text>
            </ion-card-content>
          </ion-card>
          <!-- 底部按钮 -->
          <ion-button expand="full" color="secondary">电话</ion-button>
          <ion-button expand="full" color="secondary">预约</ion-button>
          <ion-button expand="full" color="secondary">咨询</ion-button>
          <ion-button expand="full" color="secondary">查看案例</ion-button>
        </ion-card-content>
      </ion-card>
    </div>
    </div>

    <!-- 设计机构详情页 -->
    <div *ngIf="selectedSegment === 'design'">
    <div *ngFor="let designCompany of designCompanies">
      <ion-card class="Angency-card">
        <ion-card-header>
          <ion-card-title>{{ designCompany.name }}</ion-card-title>
          <ion-card-subtitle>星级评分: {{ designCompany.starRating }} | 评价数量: {{ designCompany.reviewCount }}</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-item lines="none">
            <ion-label>机构简介:</ion-label>
            <ion-text>{{ designCompany.description }}</ion-text>
          </ion-item>
  
          <!-- 机构介绍 -->
          <ion-card class="info-card">
            <ion-card-header>
              机构介绍
            </ion-card-header>
            <ion-card-content>
              <ion-item>
                <ion-label>服务:</ion-label>
                <ion-text>{{ designCompany.services }}</ion-text>
              </ion-item>
              <ion-item>
                <ion-label>优势:</ion-label>
                <ion-text>{{ designCompany.advantages }}</ion-text>
              </ion-item>
              <ion-item>
                <ion-label>案例:</ion-label>
                <ion-text>{{ designCompany.cases }}</ion-text>
              </ion-item>
            </ion-card-content>
          </ion-card>
  
          <!-- 设计师团队 -->
          <ion-card class="team-card">
            <ion-card-header>
              设计师团队
            </ion-card-header>
            <ion-card-content>
              <ion-item *ngFor="let designer of designCompany.designers" lines="none">
                <ion-avatar slot="start">
                  <img [src]="designer.avatar" alt="设计师头像">
                </ion-avatar>
                <ion-label>{{ designer.name }}</ion-label>
                <ion-text>{{ designer.style }}</ion-text>
                <ion-text>{{ designer.serviceArea }}</ion-text>
                <ion-text>{{ designer.price }}</ion-text>
              </ion-item>
            </ion-card-content>
          </ion-card>
  
          <!-- 案例展示 -->
          <ion-card class="case-card">
            <ion-card-header>
              案例展示
            </ion-card-header>
            <ion-card-content>
              <ion-item *ngFor="let case of designCompany.cases" lines="none">
                <img [src]="case.image" alt="案例图片">
                <ion-label>{{ case.description }}</ion-label>
                <ion-text>{{ case.style }}</ion-text>
              </ion-item>
            </ion-card-content>
          </ion-card>
  
          <!-- 设计理念 -->
          <ion-card class="concept-card">
            <ion-card-header>
              设计理念
            </ion-card-header>
            <ion-card-content>
              <ion-text>{{ designCompany.designConcept }}</ion-text>
            </ion-card-content>
          </ion-card>
  
          <!-- 服务流程 -->
          <ion-card class="process-card">
            <ion-card-header>
              服务流程
            </ion-card-header>
            <ion-card-content>
              <ion-text>{{ designCompany.serviceProcess }}</ion-text>
            </ion-card-content>
          </ion-card>
  
          <!-- 用户评价 -->
          <ion-card class="review-card">
            <ion-card-header>
              用户评价
            </ion-card-header>
            <ion-card-content>
              <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
                <img [src]="review.image" alt="用户评价图片">
                <ion-label>{{ review.text }}</ion-label>
                <ion-text>星级评分: {{ review.starRating }}</ion-text>
              </ion-item>
            </ion-card-content>
          </ion-card>
  
          <!-- 底部按钮 -->
          <ion-button expand="full" color="tertiary">电话</ion-button>
          <ion-button expand="full" color="tertiary">预约</ion-button>
          <ion-button expand="full" color="tertiary">咨询</ion-button>
          <ion-button expand="full" color="tertiary">查看案例</ion-button>
  
        </ion-card-content>
      </ion-card>
    </div>
  </div>

    <!-- 设计师详情页 -->
<div *ngIf="selectedSegment === 'designer'">
  <ion-card *ngFor="let designer of designers">
    <!-- 头部 -->
    <ion-card-header>
      <ion-avatar>
        <img [src]="designer.avatar" alt="Designer Avatar">
      </ion-avatar>
      <ion-card-title>{{ designer.username }}</ion-card-title>
      <ion-button fill="outline" slot="end">关注</ion-button>
    </ion-card-header>
    <ion-card-content>
      <p>{{ designer.bio }}</p>
    </ion-card-content>

    <!-- 内容 -->
    <ion-card-content>
      <ion-img [src]="designer.portfolioImage" alt="Designer Portfolio"></ion-img>
      <ion-item>
        <ion-label>作品数量:</ion-label>
        <ion-text>{{ designer.portfolioCount }}</ion-text>
      </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-content>

    <!-- 底部 -->
    <ion-button expand="full" fill="outline">咨询</ion-button>
    <ion-button expand="full" fill="outline">电话</ion-button>
    <ion-button expand="full" fill="outline">在线预约</ion-button>
    <ion-button expand="full" fill="outline">查看案例</ion-button>
  </ion-card>
</div>
</div>
</ion-content>