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

src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ const routes: Routes = [
   {
     path: 'login',
     loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'feedback',
+    loadChildren: () => import('./feedback/feedback.module').then( m => m.FeedbackPageModule)
   }
 
 ];

src/app/feedback/feedback-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FeedbackPage } from './feedback.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FeedbackPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FeedbackPageRoutingModule {}

src/app/feedback/feedback.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { FeedbackPageRoutingModule } from './feedback-routing.module';
+
+import { FeedbackPage } from './feedback.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FeedbackPageRoutingModule
+  ],
+  declarations: [FeedbackPage]
+})
+export class FeedbackPageModule {}

src/app/feedback/feedback.page.html

@@ -0,0 +1,25 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
+    </ion-buttons>
+    <ion-title style="font-size:30px">反馈</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list lines="none">
+  <ion-item *ngFor="let message of chatMessages" [class.sender]="message.sender === 'customer'">
+    <ion-avatar slot="start">
+      <ion-img [src]="'Assets/img/' + message.avatar"></ion-img>
+    </ion-avatar>
+    <ion-label>{{ message.text }}</ion-label>
+  </ion-item>
+</ion-list>
+
+
+  <ion-footer>
+    <ion-input placeholder="输入消息..." [(ngModel)]="newMessage"></ion-input>
+    <ion-button expand="block" (click)="sendMessage()">发送</ion-button>
+  </ion-footer>
+</ion-content>

src/app/feedback/feedback.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FeedbackPage } from './feedback.page';
+
+describe('FeedbackPage', () => {
+  let component: FeedbackPage;
+  let fixture: ComponentFixture<FeedbackPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeedbackPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/feedback/feedback.page.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-feedback',
+  templateUrl: './feedback.page.html',
+  styleUrls: ['./feedback.page.scss'],
+})
+export class FeedbackPage implements OnInit {
+
+  chatMessages: { text: string, sender: string, avatar: string }[] = [];
+  newMessage: string = '';
+
+  constructor() {}
+
+  ngOnInit() {
+    // 模拟一些聊天消息
+    this.chatMessages = [
+      { text: '你好，请问有什么可以帮助您的吗？', sender: 'customer', avatar: 'customer-avatar.jpg' },
+      { text: '您好，我想咨询一下关于产品的信息。', sender: 'support', avatar: 'support-avatar.png' }
+    ];
+  }
+
+  sendMessage() {
+    if (this.newMessage.trim() !== '') {
+      this.chatMessages.push({ text: this.newMessage, sender: 'customer', avatar: 'customer-avatar.jpg' });
+      // 在这里可以添加客服回复的逻辑
+      this.newMessage = '';
+    }
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -14,7 +14,7 @@
 
   <!-- 导航栏 -->
   <ion-toolbar>
-    <ion-segment value="explore">
+    <ion-segment>
       <ion-segment-button value="explore">
         发现
       </ion-segment-button>
@@ -26,7 +26,7 @@
 
   <!-- 功能模块 -->
   <ion-segment scrollable>
-    <ion-segment-button value="example">
+    <ion-segment-button value="case">
       <ion-icon name="albums"></ion-icon>
       案例设计
     </ion-segment-button>
@@ -34,35 +34,35 @@
       <ion-icon name="brush"></ion-icon>
       免费设计
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="decoration">
       <ion-icon name="construct"></ion-icon>
       装修施工
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="soft">
       <ion-icon name="bed"></ion-icon>
       软装搭配
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="diagnosis">
       <ion-icon name="medkit"></ion-icon>
       户型诊断
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="customization">
       <ion-icon name="bonfire"></ion-icon>
       全屋定制
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="encyclopedia">
       <ion-icon name="library"></ion-icon>
       干货百科
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="style">
       <ion-icon name="heart-circle"></ion-icon>
       风格测试
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="home">
       <ion-icon name="home"></ion-icon>
       设计我家
     </ion-segment-button>
-    <ion-segment-button value="designer">
+    <ion-segment-button value="budget">
       <ion-icon name="calculator"></ion-icon>
       智能预算
     </ion-segment-button>
@@ -127,7 +127,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 装修全流程card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-423645f54387fd0ea9be83687b58cc35_720w.jpg?source=172ae18b"></ion-img>
                         <ion-card-header>
@@ -136,7 +136,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 全屋定制card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://img.zcool.cn/community/0115365dda0240a8012053c0a2c04c.jpg@1280w_1l_2o_100sh.jpg"></ion-img>
                         <ion-card-header>
@@ -163,7 +163,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 橱柜怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-160f6e66e25daba826ecbef5ec4eef91_720w.jpg?source=172ae18b"></ion-img>
                         <ion-card-header>
@@ -172,7 +172,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 沙发怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://www.qszs.com/uploads/allimg/180322/6-1P322104631.jpg"></ion-img>
                         <ion-card-header>
@@ -199,7 +199,7 @@
                 <ion-grid>
                   <ion-row>
                     <!-- 窗帘怎么选card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="http://www.wzy99.com/UploadFiles/FCK/2017-10/6364376207453191332635836.jpg"></ion-img>
                         <ion-card-header>
@@ -208,7 +208,7 @@
                       </ion-card>
                     </ion-col>
                     <!-- 收纳怎么做card -->
-                    <ion-col>
+                    <ion-col size="12">
                       <ion-card>
                         <ion-img src="https://pic1.zhimg.com/v2-430eceee402f2cdf87312f13d8238d3c_r.jpg"></ion-img>
                         <ion-card-header>
@@ -228,4 +228,23 @@
       
     </ion-card-content>
   </ion-card>
+  <!-- 内容流 -->
+  <ion-list>
+    <ion-item *ngFor="let item of contentList">
+      <ion-thumbnail>
+        <img [src]="item.image">
+      </ion-thumbnail>
+      <ion-label>
+        <h2>{{item.title}}</h2>
+        <p>{{item.user}} - {{item.likes}} Likes</p>
+        <p>{{item.comments}} Comments</p>
+        <p>{{item.tags}}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+  
 </ion-content>
+
+
+
+

src/app/tab1/tab1.page.scss

@@ -1,4 +1,30 @@
 ion-card {
-    margin: 10px;
-    left: 5px;
-  }
+  margin: 10px;
+  padding: 15px;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+ion-card-header {
+  ion-card-title {
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+}
+
+ion-thumbnail {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+
+h2 {
+  font-size: 1.2em;
+  margin-bottom: 5px;
+}
+
+p {
+  font-size: 0.9em;
+  color: #777;
+  margin-bottom: 3px;
+}

src/app/tab1/tab1.page.ts

@@ -8,16 +8,21 @@ import { Component } from '@angular/core';
 export class Tab1Page {
   selectedSegment: string = 'company';
 
+  activeTab:string = 'explore';
+  changeTab(event:any){
+    this.activeTab = event.detail.value
+  }
 
   constructor() {}
 
-  segmentChanged(event: CustomEvent) {
-    this.selectedSegment = event.detail.value;
-  }
+  // segmentChanged(event: CustomEvent) {
+  //   this.selectedSegment = event.detail.value;
+  // }
 
+  // 在此处定义和初始化数据
   contentList = [
-    { image: 'assets/images/image1.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
-    { image: 'assets/images/image2.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
+    { image: 'assets/images/example1.jpghttps://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题1', user: '用户A', likes: 10, comments: 5, tags: '标签1, 标签2' },
+    { image: 'https://img.zcool.cn/community/01df555d65edcea8012187f4e41c2f.jpg@2o.jpg', title: '示例标题2', user: '用户B', likes: 20, comments: 8, tags: '标签3, 标签4' },
     // 添加更多示例数据
   ];
   

src/app/tab2/tab2.page.html

@@ -54,15 +54,15 @@
               <ion-list>
                 <ion-item>
                   <ion-label>公司服务:</ion-label>
-                  <ion-text>{{ company.services }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
                 </ion-item>
                 <ion-item>
                   <ion-label>公司优势:</ion-label>
-                  <ion-text>{{ company.advantages }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
                 </ion-item>
                 <ion-item>
                   <ion-label>公司案例:</ion-label>
-                  <ion-text>{{ company.cases }}</ion-text>
+                  <ion-text [innerHTML]="formatHtmlContent(company.cases)"></ion-text>
                 </ion-item>
               </ion-list>
             <!-- 底部按钮 -->

src/app/tab2/tab2.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-tab2',
@@ -12,10 +13,10 @@ export class Tab2Page {
       name: '和美空间设计',
       starRating: 4.7,
       reviewCount: 150,
-      description: '装修公司A的简介',
-      services: '全方位装修服务',
-      advantages: '专业团队、高品质材料',
-      cases: '装修公司A的案例'
+      description: '华美装饰设计有限公司是一家专业的室内装修设计公司，致力于为客户提供高品质的装修和设计服务。公司拥有一支经验丰富、富有创意的设计团队，以客户需求为中心，打造独特、舒适的居家环境。',
+      services: '室内装修设计\n定制家具设计\n空间规划布局\n装饰材料供应',
+      advantages: '专业团队：拥有经验丰富的设计师和施工团队，保证项目质量\n创意设计：注重细节，根据客户需求量身定制设计方案\n优质材料：选用优质装饰材料，确保装修质量和耐久性\n贴心服务：全程跟踪服务，提供周到的售后服务，保障客户满意度。',
+      cases: '客厅装修案例：现代简约风格，打造温馨舒适的家居空间。\n卧室装修案例：北欧风格，简约清新，注重自然光线的利用。\n餐厅装修案例：中式风格，传统与现代相结合，展现东方韵味。'
     },
     {
       name: '灵感装修工程',
@@ -339,8 +340,12 @@ export class Tab2Page {
   ];
   selectedDesignerSegment: string = 'designer';
 
-  constructor() {}
+  constructor(private sanitizer: DomSanitizer) {}
 
+  formatHtmlContent(content: string): SafeHtml {
+    const formattedContent = content.replace(/\n/g, '<br>');
+    return this.sanitizer.bypassSecurityTrustHtml(formattedContent);
+  }
   segmentChanged(event: CustomEvent) {
     this.selectedSegment = event.detail.value;
   }

src/app/tab4/tab4.page.html

@@ -4,7 +4,7 @@
     <ion-buttons slot="end">
       <ion-button (click)="openFeedbackPage()">
         <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
-        <ion-label>反馈</ion-label>
+        <p (click)="openFeedbackPage()" style="margin-left:10px;margin-top:15px;font-size:20px">反馈</p>
       </ion-button>
       
       <ion-button (click)="openSettingsPage()">
@@ -18,7 +18,7 @@
 
 <ion-content>
     <ion-card-content>
-      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.5)">
+      <ion-avatar style="margin-left:15px;margin-top:15px; transform:scale(1.8)">
         <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="User Avatar">
       </ion-avatar>
       <ion-card-content>

src/app/tab4/tab4.page.scss

@@ -24,14 +24,19 @@ ion-segment-button {
   font-size: 15px; /* 设置按钮字体大小为20px，让按钮整体看起来更大 */
   padding: 5px 20px; /* 设置按钮内边距，增加按钮的大小 */
 }
+
 ion-segment {
-  --padding-start: 0; /* 设置起始内边距为0，让按钮靠左对齐 */
-  --padding-end: 0; /* 设置结束内边距为0，让按钮靠右对齐 */
-  overflow-x: auto; /* 水平滚动 */
   scrollbar-width: none; /* 隐藏滚动条（适用于部分浏览器） */
-  
+  -ms-overflow-style: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
+  &::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条（适用于 Chrome 和 Safari） */
+  }
+  &::-ms-overflow-style {
+    display: none; /* 隐藏滚动条（适用于 IE 和 Edge） */
+  }
 }
 
+
 p {
   font-size: 20px; /* 设置文字大小为20px */
 }

src/app/tab4/tab4.page.ts

@@ -61,6 +61,7 @@ export class Tab4Page implements OnInit {
 
   openFeedbackPage() {
     // 打开反馈页面
+    this.navCtrl.navigateForward('/feedback');
   }