Merge branch 'master' of http://git.fmode.cn:3000/0225273/APPmy

README.md

@@ -170,30 +170,99 @@
 
 ### 创作页面的产品结构
 - 首页
+   - 顶部搜索栏
    - 导航栏
       - 发现
       - 视频
       - 搜索
-   - 功能栏
-      - 轮播图
-      - 案例设计
-      - 一键寻宝
-      - 装修百科
-      - 买好货
-      - 关注
-      - 推荐
-      - 家居
-      - 设计师
-      - 附近
-   - 内容流
-      > 展示以视频为主的装修案例内容。
-
-      - 图片
-      - 标题
-      - 点赞数
-      - 评论数
-      - 用户信息
-      - 标签
+   - 功能模块
+      - 案例设计按钮
+         - logo
+         - 案例设计
+      - 免费设计按钮
+         - logo
+         - 免费设计
+      - 装修施工按钮
+         - logo
+         - 装修施工
+      - 软装搭配按钮
+         - logo
+         - 软装搭配
+      - 户型诊断按钮
+         - logo
+         - 户型诊断
+      - 全屋定制按钮
+         - logo
+         - 全屋定制
+      - 干货百科按钮
+         - logo
+         - 干货百科
+      - 风格测试按钮
+         - logo
+         - 风格测试
+      - 设计我家按钮
+         - logo
+         - 设计我家
+      - 智能预算按钮
+         - logo
+         - 智能预算
+   - 装修锦囊块
+      - 装修锦囊
+      - 装修锦囊卡片
+         - 空间设计块
+            - logo和空间设计
+            - 客厅怎么装card
+               - 图片
+               - 客厅怎么装
+            - 卧室怎么装card
+               - 图片
+               - 卧室怎么装
+         - 装前必看块
+            - logo和装前必看
+            - 装修全流程card
+               - 图片
+               - 装修全流
+            - 全屋定制card
+               - 图片
+               - 全屋定制
+         - 家具家电块
+            - logo和家具家电
+            - 橱柜怎么选card
+               - 图片
+               - 橱柜怎么选
+            - 沙发怎么选card
+               - 图片
+               - 沙发怎么选
+         - 家居软装块
+            - logo和家居软装
+            - 窗帘怎么选card
+               - 图片
+               - 窗帘怎么选
+            - 收纳怎么做card
+               - 图片
+               - 收纳怎么做
+   - 案例块
+      - 功能栏
+         - 一键寻宝
+         - 装修百科
+         - 买好货
+         - 关注
+         - 案例
+         - 家居
+         - 原创
+         - 设计师
+         - 流程
+         - 施工
+         - 建材
+         - 家具家电
+      - 内容流
+         > 展示以视频为主的装修案例内容。
+         - 图片视频
+         - 标题
+         - 点赞数
+         - 评论数
+         - 用户信息
+         - 标签
    - 底部导航栏
       - 首页
       - 装修
@@ -217,7 +286,7 @@
       - 用户头像
       - 用户昵称
       - 用户简介
-- 搜索页
+- 装修页
    - 搜索框
       > 输入关键字搜索
 
@@ -332,6 +401,30 @@
       - 电话
       - 在线预约
       - 查看案例
+- 消息页
+   - 头部区域
+      >顶部显示“消息”标题。
+
+   - 导航区域
+      - 评论和@
+      - 赞与收藏
+      - 新增关注
+      - 系统消息
+   - 内容区域
+      - 最新推荐
+      - 头像
+      - 用户名
+      - 标签
+      - 聊天内容
+      - 免费提问按钮。
+   - 底部区域
+      - 首页
+      - 装修
+      - 消息
+      - 我的
+
+
+
 
 ## 信息结构图梳理
 > 参考：https://www.woshipm.com/pd/5405037.html

src/app/tab1/tab1.page.html

@@ -1,17 +1,81 @@
-<ion-header [translucent]="true">
+<!-- tab1.page.html -->
+<ion-header>
   <ion-toolbar>
     <ion-title>
-      Tab 1
+      首页
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content>
+  <ion-grid>
+
+    <ion-row>
+      <ion-col size="12">
+        <!-- 搜索框 -->
+        <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
+      </ion-col>
+    </ion-row>
+
+    <!-- 导航栏 -->
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-segment value="explore">
+        <ion-segment-button value="explore">
+          发现
+        </ion-segment-button>
+        <ion-segment-button value="video">
+          视频
+        </ion-segment-button>
+        <ion-segment-button value="search">
+          搜索
+        </ion-segment-button>
+      </ion-segment>
     </ion-toolbar>
-  </ion-header>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+    <!-- 功能栏 -->
+    <ion-row>
+      <ion-col size="4">
+        <!-- 轮播图 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 案例设计 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 一键寻宝 -->
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="4">
+        <!-- 装修百科 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 买好货 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 关注 -->
+      </ion-col>
+    </ion-row>
+  
+    <ion-row>
+      <ion-col size="4">
+        <!-- 推荐 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 家居 -->
+      </ion-col>
+      <ion-col size="4">
+        <!-- 设计师 -->
+      </ion-col>
+    </ion-row>
+  
+    <ion-row>
+      <ion-col size="12">
+        <!-- 附近 -->
+      </ion-col>
+    </ion-row>
+
+    
+  
+  </ion-grid>
 </ion-content>

src/app/tab2/tab2.page.html

@@ -1,17 +1,263 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+<ion-header>
+  <ion-toolbar color="primary">
+    <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>
+<ion-content>
+  <!-- 搜索框 -->
+  <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <!-- 导航栏 -->
+  <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-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>
+        </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>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,3 @@
+.details-container {
+    padding: 10px;
+  }

src/app/tab2/tab2.page.ts

@@ -4,9 +4,89 @@ import { Component } from '@angular/core';
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss']
+  
 })
 export class Tab2Page {
+  selectedSegment: string = 'company';
+  companies = [
+    {
+      name: '装修公司A',
+      starRating: 4.7,
+      reviewCount: 150,
+      description: '装修公司A的简介',
+      services: '全方位装修服务',
+      advantages: '专业团队、高品质材料',
+      cases: '装修公司A的案例'
+    },
+    {
+      name: '装修公司B',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司B的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    },
+    {
+      name: '装修公司C',
+      starRating: 4.5,
+      reviewCount: 120,
+      description: '装修公司C的简介',
+      services: '创意设计、个性定制',
+      advantages: '专业设计师、创新理念',
+      cases: '装修公司B的案例'
+    }
+    // 添加更多装修公司信息
+  ];
+  agency = {
+    name: '机构名称',
+    starRating: 4.4,
+    reviewCount: 95,
+    description: '机构简介',
+    services: '机构提供的服务',
+    advantages: '机构的优势',
+    cases: '机构的案例',
+    designers: [
+      { name: '设计师1', avatar: 'assets/designer1.jpg', specialty: '擅长风格1' },
+      { name: '设计师2', avatar: 'assets/designer2.jpg', specialty: '擅长风格2' },
+      // 添加更多设计师信息
+    ],
+    casesList: [
+      { image: 'assets/case1.jpg', description: '案例描述1' },
+      { image: 'assets/case2.jpg', description: '案例描述2' },
+      // 添加更多案例信息
+    ],
+    designPhilosophy: '设计理念内容',
+    serviceProcess: '服务流程内容',
+    reviews: [
+      { avatar: 'assets/user1.jpg', username: '用户1', comment: '评价1', rating: 5 },
+      { avatar: 'assets/user2.jpg', username: '用户2', comment: '评价2', rating: 4 },
+      // 添加更多用户评价
+    ]
+  };
+  designer = {
+    name: '设计师姓名',
+    avatar: 'assets/designer-avatar.jpg',
+    specialty: '设计师专长',
+    style: '设计风格',
+    serviceArea: '服务地区',
+    price: '设计师价格',
+    rating: '用户评价',
+    works: [
+      { image: 'assets/work1.jpg', title: '作品1', description: '作品描述1' },
+      { image: 'assets/work2.jpg', title: '作品2', description: '作品描述2' },
+      // 添加更多设计师作品
+    ],
+    reviews: [
+      { avatar: 'assets/user1.jpg', username: '用户1', comment: '评价1', rating: 5 },
+      { avatar: 'assets/user2.jpg', username: '用户2', comment: '评价2', rating: 4 },
+      // 添加更多用户评价
+    ]
+  };
 
   constructor() {}
 
+  segmentChanged(event: CustomEvent) {
+    this.selectedSegment = event.detail.value;
+  }
 }

src/app/tab3/tab3.page.html

@@ -1,17 +1,75 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      消息
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-icon slot="start" name="chatbubble-ellipses"></ion-icon>
+      <ion-label>评论和回复</ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-icon slot="start" name="thumbs-up"></ion-icon>
+      <ion-label>赞与收藏</ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-icon slot="start" name="person-add"></ion-icon>
+      <ion-label>新增关注</ion-label>
+    </ion-item>
+    
+    <ion-item>
+      <ion-icon slot="start" name="notifications"></ion-icon>
+      <ion-label>系统消息</ion-label>
+    </ion-item>
+  </ion-list>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>最新推荐</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>用户名</ion-label>
+      <ion-label>标签</ion-label>
+      <ion-label>聊天内容</ion-label>
+      <ion-button expand="block">免费提问</ion-button>
+    </ion-card-content>
+  </ion-card>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button routerLink="/tabs/tab1">
+        <ion-icon name="home"></ion-icon>
+        首页
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="start">
+      <ion-button routerLink="/tabs/tab2">
+        <ion-icon name="construct"></ion-icon>
+        装修
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="start">
+      <ion-button routerLink="/tabs/tab3" color="primary">
+        <ion-icon name="chatbubbles"></ion-icon>
+        消息
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="start">
+      <ion-button routerLink="/tabs/tab4">
+        <ion-icon name="person"></ion-icon>
+        我的
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,11 @@
+ion-card {
+  margin: 10px;
+}
+
+ion-card-title {
+  font-weight: bold;
+}
+
+ion-avatar {
+  margin-right: 10px;
+}

src/app/tab3/tab3.page.ts

@@ -9,4 +9,4 @@ export class Tab3Page {
 
   constructor() {}
 
-}
+}