new28

travel-app/src/app/feedback/feedback.component.html

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>问题建议</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <form #feedbackForm="ngForm" novalidate>
+    <ion-card>
+    <ion-list lines="none">
+      <ion-item>
+        <ion-label stacked>所属分类(必填)</ion-label>
+        <ion-select [(ngModel)]="selectedCategory" name="selectedCategory" interface="popover" required>
+          <ion-select-option *ngFor="let category of categories" [value]="category">{{ category }}</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-textarea placeholder="请详细描述您的问题" [(ngModel)]="feedbackText" name="FeedbackText" maxlength="400" required></ion-textarea>
+      </ion-item>
+
+
+      <div padding-horizontal>
+        <span>{{ feedbackText.length }}/400</span>
+      </div>
+
+      <ion-item>
+        <ion-icon ios="ios-images-outline" md="md-images-outline" item-start></ion-icon>
+        <input type="file" (change)="onFileChange($event)" multiple accept="image/*">
+      </ion-item>
+    </ion-list>
+  </ion-card>
+ 
+      <ion-button expand="block" class="custom-button" (click)="submitFeedback()">
+        提交反馈
+      </ion-button>
+  </form>
+
+</ion-content>
+

travel-app/src/app/feedback/feedback.component.scss

@@ -0,0 +1,21 @@
+ion-toolbar{
+    --background: #D6CCC2; // 设置页眉背景颜色为紫色
+    --color: white; // 设置页眉文字颜色为白色
+}
+ion-title{
+    font-size: 1.5rem; // 可以根据需要调整字体大小
+}
+ion-textarea {
+    min-height: 150px; // 设置最小高度
+    font-size: 16px; // 设置字体大小
+  }
+.padding-horizontal{
+    float: right; // 右对齐
+    margin-top: 8px; // 提供一些顶部间距
+}
+.custom-button {
+    --background: #d0a87d; // 替换#your-color-code为你想要的颜色
+  }
+ion-content {
+    --background:#F5EBE0;
+  }

travel-app/src/app/feedback/feedback.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { FeedbackComponent } from './feedback.component';
+
+describe('FeedbackComponent', () => {
+  let component: FeedbackComponent;
+  let fixture: ComponentFixture<FeedbackComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FeedbackComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeedbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

travel-app/src/app/feedback/feedback.component.ts

@@ -0,0 +1,72 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonButton, IonBackButton, IonAlert, IonMenuToggle, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonIcon, IonInput, IonCard } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { FormBuilder } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { CloudObject } from 'src/lib/ncloud';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app - feedback',
+  templateUrl: './feedback.component.html',
+  styleUrls: ['./feedback.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonContent, IonToolbar, IonTitle, ExploreContainerComponent,
+    IonButton, IonBackButton, IonMenuToggle, IonSelect, IonSelectOption, IonLabel,
+    IonTextarea, IonIcon, IonInput, IonCard,
+    IonList, IonItem, IonAlert,
+    FormsModule,
+    ReactiveFormsModule, CommonModule
+  ]
+})
+export class FeedbackComponent implements OnInit {
+  selectedCategory = '';
+  feedbackText = '';
+  categories = ['功能问题', '经济纠纷问题', '用户体验', '其他'];
+  fileObject: File | null = null;
+  userPointer: string | null = null;
+
+  constructor(private fb: FormBuilder, private alertController: AlertController) { }
+
+  onFileChange(event: Event) {
+    // 实现文件选择逻辑，并更新fileObject
+  }
+
+  submitFeedback() {
+    this.showSuccessAlert();
+  }
+
+  private showSuccessAlert() {
+    this.alertController.create({
+      header: '提交成功！',
+      buttons: [{
+        text: '确定',
+        handler: () => {
+          this.uploadDataToDatabase();
+        }
+      }]
+    }).then(alert => alert.present());
+  }
+
+  private uploadDataToDatabase() {
+    const feedback = new CloudObject('TravelFeedback');
+    feedback.set({
+      classfy: this.selectedCategory,
+      problem: this.feedbackText,
+      file: this.fileObject,
+      username: this.userPointer
+    });
+
+    feedback.save().then(() => {
+      console.log('Feedback submitted successfully');
+      // 处理保存成功后的逻辑
+    }).catch(error => {
+      console.error('Error submitting feedback:', error);
+      // 处理保存失败后的逻辑
+    });
+  }
+
+  ngOnInit() { }
+}

travel-app/src/app/tab4/tab4.page.html

@@ -129,10 +129,10 @@
 
         <ion-col size="3" size-md="4" size-lg="2">
           <ion-icon name="notifications" size="large" start></ion-icon>
-          <p>我的创作</p>
+          <p>我的消息</p>
         </ion-col>
 
-        <ion-col size="3" size-md="4" size-lg="2">
+        <ion-col (click)="gotoFeedback()" size="3" size-md="4" size-lg="2">
           <ion-icon name="document" size="large"></ion-icon>
           <p>问题建议</p>
         </ion-col>

travel-app/src/app/tab4/tab4.page.ts

@@ -88,4 +88,9 @@ export class Tab4Page {
   goLogin() {
     this.router.navigate(['/tabs/login']);
   }
+  Router: any;
+
+  gotoFeedback() {
+    this.router.navigate(['/tabs/Feedback']);
+  }
 }

travel-app/src/app/tabs/tabs.page.html

@@ -6,13 +6,13 @@
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="reader"></ion-icon>
-      <ion-label>行程</ion-label>
+      <ion-icon aria-hidden="true" name="chatbubbles"></ion-icon>
+      <ion-label>小助手</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="chatbubbles"></ion-icon>
-      <ion-label>小助手</ion-label>
+      <ion-icon aria-hidden="true" name="aperture"></ion-icon>
+      <ion-label>社区</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab4" href="/tabs/tab4">

travel-app/src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { home, reader, chatbubbles,person} from 'ionicons/icons';
+import { home, chatbubbles,aperture,person} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,6 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ home, reader, chatbubbles,person});
+    addIcons({ home, chatbubbles,aperture,person});
   }
 }

travel-app/src/app/tabs/tabs.routes.ts

@@ -33,6 +33,11 @@ export const routes: Routes = [
             (m) => m.ExploreContainerComponent
           ),
       },
+      {
+        path: 'Feedback',
+        loadComponent: () =>
+          import('../feedback/feedback.component').then((m) => m.FeedbackComponent),
+      },
       {
         path: 'recommend',
         loadComponent: () =>