|
@@ -1,5 +1,5 @@
|
|
|
<ion-header>
|
|
|
- <ion-toolbar color="primary">
|
|
|
+ <ion-toolbar color="light">
|
|
|
<ion-title>装修</ion-title>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
@@ -30,9 +30,8 @@
|
|
|
<div *ngIf="selectedSegment === 'company'">
|
|
|
<!-- 装修公司详情页 -->
|
|
|
<ion-card *ngFor="let company of companies">
|
|
|
- <ion-card-header>
|
|
|
- 公司名称: {{ company.name }}
|
|
|
- </ion-card-header>
|
|
|
+ <ion-card-header><ion-card-title> {{ company.name }}</ion-card-title>
|
|
|
+ </ion-card-header>
|
|
|
<ion-card-content>
|
|
|
<ion-item>
|
|
|
<ion-label>星级评分:</ion-label>
|
|
@@ -67,197 +66,175 @@
|
|
|
</ion-item>
|
|
|
</ion-list>
|
|
|
<!-- 底部按钮 -->
|
|
|
- <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-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>
|
|
|
</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 *ngFor="let designCompany of designCompanies">
|
|
|
+ <ion-card class="company-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'">
|
|
|
- <!-- 设计师详情页内容 -->
|
|
|
- <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>
|
|
|
+ <!-- 设计师详情页 -->
|
|
|
+ <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>
|