modify again

myapp/angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": "27beb054-a3be-4858-b545-c9f8c87c4e07"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

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

@@ -5,6 +5,10 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'modal-success',
+    loadChildren: () => import('./modal-success/modal-success.module').then( m => m.ModalSuccessPageModule)
   }
 ];
 @NgModule({

myapp/src/app/modal-success/modal-success-routing.module.ts

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

myapp/src/app/modal-success/modal-success.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ModalSuccessPageRoutingModule } from './modal-success-routing.module';
+
+import { ModalSuccessPage } from './modal-success.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ModalSuccessPageRoutingModule
+  ],
+  declarations: [ModalSuccessPage]
+  
+})
+export class ModalSuccessPageModule {}

myapp/src/app/modal-success/modal-success.page.html

@@ -0,0 +1,33 @@
+<!-- modal-success.page.html -->
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons end>
+      <ion-button (click)="dismiss()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
+  <div style="display:flex ;justify-content:center;width: 40%;margin:0 auto;">
+
+    <div class="ion-text-center">
+      <ion-icon name="checkmark-circle" size="large"></ion-icon>
+      <h2>提交成功！</h2>
+      <p>我们已经收到您的信息，将会尽快与您联系。</p>
+      <p>感谢您选择我们的服务。</p>
+    </div>
+  </div>
+  
+
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons end>
+      <ion-button (click)="dismiss()" expand="full" color="secondary">
+        关闭
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

myapp/src/app/modal-success/modal-success.page.scss

@@ -0,0 +1,16 @@
+/* modal-success.page.scss */
+.my-custom-class {
+    --background: #fff;
+    --color: #000;
+  }
+  
+  ion-content {
+    
+    text-align: center;
+    padding: 20px;
+  }
+  
+  ion-icon {
+    color: #4dbd74;
+    margin-bottom: 20px;
+  }

myapp/src/app/modal-success/modal-success.page.spec.ts

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

myapp/src/app/modal-success/modal-success.page.ts

@@ -0,0 +1,20 @@
+// modal-success.page.ts
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-modal-success',
+  templateUrl: './modal-success.page.html',
+  styleUrls: ['./modal-success.page.scss'],
+})
+export class ModalSuccessPage implements OnInit {
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngOnInit() {}
+
+  dismiss() {
+    this.modalCtrl.dismiss();
+  }
+
+}

myapp/src/app/tab2/tab2.page.html

@@ -61,7 +61,10 @@
       </ion-list>
     </ion-card>  
 
-    <ion-button type="submit" expand="block" color="primary">提交</ion-button>
+    <ion-button type="submit" expand="block" color="primary">
+      <ion-icon name="cloud-upload-outline"></ion-icon>
+      提交
+    </ion-button>
 
   </form>
 

myapp/src/app/tab3/tab3-routing.module.ts

@@ -6,6 +6,10 @@ const routes: Routes = [
   {
     path: '',
     component: Tab3Page,
+  },
+  {
+    path: 'modal-success',
+    loadChildren: () => import('../modal-success/modal-success.module').then( m => m.ModalSuccessPageModule)
   }
 ];
 

myapp/src/app/tab3/tab3.module.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { Tab3Page } from './tab3.page';
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
 
-import { Tab3PageRoutingModule } from './tab3-routing.module';
+import { Tab3PageRoutingModule } from './tab3-routing.module'; 
 
 @NgModule({
   imports: [
@@ -15,6 +15,7 @@ import { Tab3PageRoutingModule } from './tab3-routing.module';
     ExploreContainerComponentModule,
     Tab3PageRoutingModule
   ],
-  declarations: [Tab3Page]
+  declarations: [Tab3Page],//添加新的modal-success
+  
 })
 export class Tab3PageModule {}

myapp/src/app/tab3/tab3.page.html

@@ -30,7 +30,7 @@
         </ion-item>
         
       </ion-list>
-      <ion-button expand="block" color="secondary" (click)="confirmInfo()">确认</ion-button>
+      <ion-button expand="block" color="secondary" (click)="showAlert()">确认</ion-button>
       <ion-button expand="block" color="medium" fill="outline" (click)="modifyInfo()">修改</ion-button>
     </ion-card-content>
   </ion-card>
@@ -51,9 +51,10 @@
       </ion-segment>
       <div [ngSwitch]="transportType">
         <div *ngSwitchCase="'recommend'">
-          <ion-button expand="block" (click)="AIadaptation()">智能适配</ion-button>
+          <ion-button expand="block" (click)="AIadaptation()"><ion-icon name="git-network-outline"></ion-icon>智能适配</ion-button>
           <!--<p>推荐使用快递A，采用空运运输，预计到达时间2天。</p>...-->
           <ion-card-title>最佳运输方式：</ion-card-title>
+          <p>{{ aiTransportAdvice }}</p>
         </div>
         <div *ngSwitchCase="'custom'">
           <ion-item>
@@ -78,46 +79,12 @@
           </ion-item>
         </div>
       </div>
-      <ion-button expand="block" (click)="confirmTransport()">点击确认</ion-button>
+      <ion-button expand="block"  (click)="confirmTransport()"><ion-icon name="push-outline"></ion-icon>点击确认</ion-button>
     </ion-card-content>
 
    
   </ion-card>
 
-  <ion-card> 
-   <div *ngIf="submittedData">
-    <h3>获取提交的数据：</h3>
-    <p>物品信息: {{ submittedData.itemInfo }}</p>
-    <p>物品分类: {{ submittedData.itemCategory }}</p>
-    <p>发送地址: {{ submittedData.sendAddress }}</p>
-    <p>收货地址: {{ submittedData.receiveAddress }}</p>
-    <!-- 其他需要显示的数据字段 -->
-   </div>
-  </ion-card>
 
-  <ion-header>
-    <ion-toolbar>
-      <ion-title>
-        AIGC 消息发送
-      </ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content>
-    <ion-item>
-      <ion-input placeholder="输入消息" [(ngModel)]="userInput"></ion-input>
-    </ion-item>
-  
-    <ion-button expand="block" (click)="sendMessage()">发送</ion-button>
-  
-    <ion-card *ngFor="let message of messageList">
-      <ion-card-header>
-        {{message?.role}}
-      </ion-card-header>
-      <ion-card-content>
-        {{ message?.content }}
-      </ion-card-content>
-    </ion-card>
-  </ion-content>
- 
+
 </ion-content>

myapp/src/app/tab3/tab3.page.scss

@@ -13,4 +13,18 @@ ion-content {
   
   ion-select {
     max-width: 200px;
+  }
+  .custom-alert {
+    --background: #ffffff; // 背景颜色
+    --color: #000000; // 文字颜色
+  
+    ion-icon {
+      color: #4dbd74; // 图标颜色
+      font-size: 24px; // 图标大小
+    }
+  
+    .alert-button {
+      --background: #4dbd74; // 按钮背景颜色
+      --color: #ffffff; // 按钮文字颜色
+    }
   }

myapp/src/app/tab3/tab3.page.ts

@@ -6,7 +6,9 @@ import { HttpClient } from '@angular/common/http';
 import { TestChatCompletion, TestChatMessage } from './class-test-chat-completion';
 import { TestRxjsChatCompletion } from './class-rxjs-chat-completion';
 
-
+import { ModalController } from '@ionic/angular';
+import { ModalSuccessPage } from '../modal-success/modal-success.page';
+import { AlertController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
@@ -24,10 +26,13 @@ export class Tab3Page implements OnInit {
   messageList:Array<TestChatMessage> = []
   userInput:string = ""
 
+  aiTransportAdvice: string = ''; // 用于存储AI的建议
 
   constructor(
     private route: ActivatedRoute,
-    private http: HttpClient // 注入HttpClient服务
+    private http: HttpClient, // 注入HttpClient服务
+    public modalCtrl: ModalController,
+    private alertController: AlertController // 注入 AlertController
     ) {}
 
   ngOnInit() {
@@ -45,6 +50,25 @@ export class Tab3Page implements OnInit {
     // 确认信息的逻辑
   }
 
+  async showAlert() {
+    const alert = await this.alertController.create({
+      header: '确认信息',
+      message: '确认信息成功',
+      mode: 'ios', // 可以根据需要选择 'md', 'ios'
+      backdropDismiss: false, // 禁止点击背景关闭警告框
+      buttons: [
+        {
+          text: '关闭',
+          handler: () => {
+            // 点击确定后的操作
+          }
+        }
+      ],
+      cssClass: 'custom-alert' // 自定义 CSS 类
+    });
+    await alert.present();
+  }
+
   modifyInfo() {
     console.log('信息将被修改');
     // 修改信息的逻辑
@@ -75,6 +99,7 @@ export class Tab3Page implements OnInit {
             console.log(`Content: ${content}`);
             console.log(`Cumulative Content: ${cumulativeContent}`);
             if (done) {
+              this.aiTransportAdvice = cumulativeContent; // 更新aiTransportAdvice属性
                 console.log('Stream completed');
             }
         },
@@ -84,10 +109,20 @@ export class Tab3Page implements OnInit {
     
   }
   
-
+//点击确认跳转
   confirmTransport() {
     console.log('运输方式已确认');
-    // 确认运输方式的逻辑
+
+    // 显示提交成功模态
+    this.presentSuccessModal();
+  
+  }
+  async presentSuccessModal() {
+    const modal = await this.modalCtrl.create({
+      component: ModalSuccessPage,
+      cssClass: 'my-custom-class'
+    });
+    return await modal.present();
   }
 
   sendMessage(){