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-label>星级评分:</ion-label>
            <ion-text>{{ company.starRating }}</ion-text>
            <ion-label>评价数量:</ion-label>
            <ion-text>{{ company.reviewCount }}</ion-text>
          <!-- 公司简介 -->
          <ion-card class="company-card">
            <ion-card-header>
              公司简介:
            </ion-card-header>
            <ion-card-content>
              <ion-text [innerHTML]="formatHtmlContent(company.description)"></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.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" fill="clear">电话</ion-button>
          <ion-button expand="full" fill="clear">预约</ion-button>
          <ion-button expand="full" fill="clear">咨询</ion-button>
          <ion-button expand="full" fill="clear">查看案例</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-card class="ant-card">
            <ion-card-header class="ant-card">
              机构简介:
            </ion-card-header>
            <ion-card-content>
                <ion-text [innerHTML]="formatHtmlContent(designCompany.description )"></ion-text>
            </ion-card-content>
          </ion-card>
          <!-- 机构介绍 -->
          <ion-card class="ant-card">
            <ion-card-header class="ant-card">
              机构服务:
            </ion-card-header>
            <ion-card-content>
                <ion-text [innerHTML]="formatHtmlContent(designCompany.services )"></ion-text>
            </ion-card-content>
          </ion-card>
  
          <!-- 机构介绍 -->
          <ion-card class="ant-card">
            <ion-card-header class="ant-card">
              机构优势:
            </ion-card-header>
            <ion-card-content>
                <ion-text [innerHTML]="formatHtmlContent(designCompany.advantages )"></ion-text>
            </ion-card-content>
          </ion-card>
          <!-- 设计师团队 -->
          <ion-card class="ant-card">
            <ion-card-header class="ant-card">
              设计师团队:
            </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-label>{{ designer.style }}</ion-label>
                <ion-label>{{ designer.serviceArea }}</ion-label>
                <ion-label>{{ designer.price }}</ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
  
          <!-- 案例展示 -->
<ion-card class="ant-card">
  <ion-card-header class="ant-card">
    案例展示:
  </ion-card-header>
  <ion-card-content>
    <ion-item *ngFor="let case of designCompany.cases" lines="none">
      <div class="case-container">
        <img [src]="case.image" alt="案例图片" class="case-image">
        <div class="case-details">
          <ion-label>{{ case.description }}</ion-label>
          <ion-text>设计风格：{{ case.style }}</ion-text>
        </div>
      </div>
    </ion-item>
  </ion-card-content>
</ion-card>
  
          <!-- 设计理念 -->
          <ion-card class="ant-card">
            <ion-card-header class="ant-card">
              设计理念:
            </ion-card-header>
            <ion-card-content>
              <ion-text>{{ designCompany.designConcept }}</ion-text>
            </ion-card-content>
          </ion-card>
  
          <!-- 服务流程 -->
          <ion-card class="ant-card">
            <ion-card-header class="ant-card">
              服务流程:
            </ion-card-header>
            <ion-card-content>
              <ion-text [innerHTML]="formatHtmlContent(designCompany.serviceProcess)"></ion-text>
            </ion-card-content>
          </ion-card>
  
          <!-- 用户评价 -->
<ion-card class="ant-card">
  <ion-card-header class="ant-card">
    用户评价:
  </ion-card-header>
  <ion-card-content>
    <ion-item *ngFor="let review of designCompany.userReviews" lines="none">
      <div class="review-container">
        <img [src]="review.image" alt="用户评价图片">
        <div class="review-details">
          <ion-text>星级评分: {{ review.starRating }}</ion-text>
          <ion-label>{{ review.text }}</ion-label>
        </div>
      </div>
    </ion-item>
  </ion-card-content>
</ion-card>
  
          <!-- 底部按钮 -->
          <ion-button expand="full" fill="clear">电话</ion-button>
          <ion-button expand="full" fill="clear">预约</ion-button>
          <ion-button expand="full" fill="clear">咨询</ion-button>
          <ion-button expand="full" fill="clear">查看案例</ion-button>
  
        </ion-card-content>
      </ion-card>
    </div>
  </div>

  <div *ngIf="selectedSegment === 'designer'">
    <ion-card *ngFor="let designer of designers" class="Designer-card">
      <!-- 头部 -->
      <ion-card-header class="header">
        <div class="avatar-container">
          <ion-avatar class="avatar">
            <img [src]="designer.avatar" alt="Designer Avatar">
          </ion-avatar>
        </div>
        <div class="name-container">
          <ion-card-title class="title">{{ designer.username }}</ion-card-title>
          <ion-button fill="clear" slot="end" class="custom-button" (click)="toggleFollow()">
            {{ isFollowing ? '已关注' : '关注' }}
          </ion-button>
        </div>
      </ion-card-header>
      <ion-card-content>
        <p>{{ designer.bio }}</p>
      </ion-card-content>
  
      <!-- 内容 -->
      <ion-card-content class="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="clear">咨询</ion-button>
      <ion-button expand="full" fill="clear">电话</ion-button>
      <ion-button expand="full" fill="clear">在线预约</ion-button>
      <ion-button expand="full" fill="clear">查看案例</ion-button>
    </ion-card>
  </div>
</div>
</ion-content>