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.module.ts

@@ -9,7 +9,7 @@ import { Tab1PageRoutingModule } from './tab1-routing.module';
 
 @NgModule({
   imports: [
-    IonicModule,
+    IonicModule, 
     CommonModule,
     FormsModule,
     // ExploreContainerComponentModule,

src/app/tab2/tab2.page.html

@@ -45,33 +45,38 @@
             <ion-label>公司简介:</ion-label>
             <ion-text>{{ company.description }}</ion-text>
           </ion-item>
-          <!-- 公司介绍 -->
-          <ion-card>
+          <!-- 公司服务 -->
+          <ion-card class="concept-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="concept-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="concept-card">
             <ion-card-header>
-              公司介绍
+              公司案例:
             </ion-card-header>
             <ion-card-content>
-              <ion-list>
-                <ion-item>
-                  <ion-label>公司服务:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.services)"></ion-text>
-                </ion-item>
-                <ion-item>
-                  <ion-label>公司优势:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.advantages)"></ion-text>
-                </ion-item>
-                <ion-item>
-                  <ion-label>公司案例:</ion-label>
-                  <ion-text [innerHTML]="formatHtmlContent(company.cases)"></ion-text>
-                </ion-item>
-              </ion-list>
-            <!-- 底部按钮 -->
+              <ion-text>{{ 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>
         </ion-card-content>
       </ion-card>
     </div>
@@ -189,52 +194,51 @@
   </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>
+<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>

src/app/tab2/tab2.page.ts

@@ -84,6 +84,13 @@ export class Tab2Page {
         // 添加更多案例
       ],
       designers: [
+        {
+          avatar: 'designer1.jpg',
+          name: '设计师A',
+          style: '现代风格',
+          serviceArea: '城市A',
+          price: '1'
+        },
         {
           avatar: 'designer1.jpg',
           name: '设计师A',
@@ -283,9 +290,9 @@ export class Tab2Page {
   designers = [
     {
       username: '李宛如',
-      avatar: 'assets/designer1.jpg',
+      avatar: 'Assets\img\designer1.jpg',
       bio: '李宛如是一位充满创意和激情的室内设计师，擅长将空间转化为舒适且具有个性的居住环境。她注重细节，追求完美，致力于为客户打造独一无二的家居体验。',
-      portfolioImage: 'assets/portfolio1.jpg',
+      portfolioImage: 'Assets\img\designer1.jpg',
       portfolioCount: 50,
       style: '现代简约、北欧风格',
       serviceArea: '北京',

src/app/tab3/tab3.page.html

@@ -6,6 +6,7 @@
       <ion-button slot="end"  (click)="openSettingsPage()">
         <ion-icon name="settings-outline"></ion-icon>
       </ion-button>
+      
   </ion-toolbar>
 </ion-header>
 
@@ -16,7 +17,7 @@
     </ion-card-header>
     <ion-card-content>
       <ion-avatar slot="start">
-        <ion-img src="Assets/avatar.jpg"></ion-img>
+        <ion-img src="https://wx4.sinaimg.cn/mw690/006GBbhsgy1hqa92rfo7tj30qo0qo76t.jpg"></ion-img>
       </ion-avatar>
       <ion-label>用户名</ion-label>
       <ion-label>标签</ion-label>
@@ -45,16 +46,114 @@
     </ion-segment-button>
    </ion-segment>
    <div *ngIf="activeTab === 'explore'" >
-    1
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="https://ww2.sinaimg.cn/mw690/007QvzfIly1hraz8xoasnj30u00u0wh6.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名</h2>
+        <p>这是一条评论内容</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="https://img2.baidu.com/it/u=2453029165,1962533557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>回复者用户名</h2>
+        <p>这是一条回复内容</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-input placeholder="添加评论"></ion-input>
+      <ion-button slot="end" (click)="sendComment()">
+        <ion-icon name="send"></ion-icon>
+      </ion-button>
+    </ion-item>
    </div>
    <div *ngIf="activeTab === 'video'">
-    2
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名1</h2>
+        <p>这是一条内容1</p>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button (click)="likePost(1)">
+          <ion-icon name="heart" [color]="isPostLiked(1) ? 'danger' : 'medium'"></ion-icon>
+        </ion-button>
+        <ion-button (click)="toggleFavorite(1)">
+          <ion-icon name="star" [color]="isPostFavorite(1) ? 'warning' : 'medium'"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名2</h2>
+        <p>这是一条内容2</p>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button (click)="likePost(2)">
+          <ion-icon name="heart" [color]="isPostLiked(2) ? 'danger' : 'medium'"></ion-icon>
+        </ion-button>
+        <ion-button (click)="toggleFavorite(2)">
+          <ion-icon name="star" [color]="isPostFavorite(2) ? 'warning' : 'medium'"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>  
    </div>
    <div *ngIf="activeTab === 'search'">
-    3
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名1</h2>
+        <p>这是一条内容1</p>
+      </ion-label>
+      <ion-button slot="end" (click)="toggleFollow(1)" color="primary" [fill]="isUserFollowed(1) ? 'solid' : 'outline'">
+        {{ isUserFollowed(1) ? '已关注' : '关注' }}
+      </ion-button>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>用户名2</h2>
+        <p>这是一条内容2</p>
+      </ion-label>
+      <ion-button slot="end" (click)="toggleFollow(2)" color="primary" [fill]="isUserFollowed(2) ? 'solid' : 'outline'">
+        {{ isUserFollowed(2) ? '已关注' : '关注' }}
+      </ion-button>
+    </ion-item>
    </div>
    <div *ngIf="activeTab === 'system'">
-    4
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar1.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>系统消息标题1</h2>
+        <p>这是一条系统消息内容1</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <ion-img src="assets/avatar2.jpg"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h2>系统消息标题2</h2>
+        <p>这是一条系统消息内容2</p>
+      </ion-label>
+    </ion-item>
    </div>
   </div>
 

src/app/tab3/tab3.page.scss

@@ -10,3 +10,4 @@ ion-card-title {
 ion-avatar {
   margin-right: 10px;
 }
+

src/app/tab3/tab3.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { ToastController } from '@ionic/angular';
 
 
 @Component({
@@ -9,21 +10,66 @@ import { Router } from '@angular/router';
 })
 export class Tab3Page {
 
-  constructor(private router: Router) {}
+  constructor(private toastController: ToastController) {}
 
   activeTab:string = 'explore';
+  likedPosts: number[] = [];
+  favoritePosts: number[] = [];
+  followedUsers: number[] = [];
   changeTab(event:any){
     this.activeTab = event.detail.value
+    
   }
-  openFeedbackPage() {
-    // 打开反馈页面
-  }
-  
-
   openSettingsPage() {
     // 打开设置页面
   }
-  navigateToPage(page: string) {
-    this.router.navigate([`/tabs/${page}`]);
+  // navigateToPage(page: string) {
+  //   this.router.navigate([`/tabs/${page}`]);
+  // }
+  sendComment() {
+    // 模拟发送评论的操作
+    this.presentToast('评论已发送');
+    
+  }
+  async presentToast(message: string) {
+    const toast = await this.toastController.create({
+      message: message,
+      duration: 2000
+    });
+    toast.present();
+  }
+  likePost(postId: number) {
+    if (this.isPostLiked(postId)) {
+      this.likedPosts = this.likedPosts.filter(id => id !== postId);
+    } else {
+      this.likedPosts.push(postId);
+    }
+  }
+
+  isPostLiked(postId: number): boolean {
+    return this.likedPosts.includes(postId);
+  }
+
+  toggleFavorite(postId: number) {
+    if (this.isPostFavorite(postId)) {
+      this.favoritePosts = this.favoritePosts.filter(id => id !== postId);
+    } else {
+      this.favoritePosts.push(postId);
+    }
+  }
+
+  isPostFavorite(postId: number): boolean {
+    return this.favoritePosts.includes(postId);
+  }
+  toggleFollow(userId: number) {
+    if (this.isUserFollowed(userId)) {
+      this.followedUsers = this.followedUsers.filter(id => id !== userId);
+    } else {
+      this.followedUsers.push(userId);
+    }
+  }
+
+  isUserFollowed(userId: number): boolean {
+    return this.followedUsers.includes(userId);
   }
 }

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');
   }