新增album page

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

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

src/app/album/album.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 { AlbumPageRoutingModule } from './album-routing.module';
+
+import { AlbumPage } from './album.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AlbumPageRoutingModule
+  ],
+  declarations: [AlbumPage]
+})
+export class AlbumPageModule {}

src/app/album/album.page.html

@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>相册</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-grid>
+    <ion-row *ngFor="let row of imageRows">
+      <ion-col *ngFor="let image of row">
+        <ion-card>
+          <img [src]="image.url" alt="Image">
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <ion-button expand="full" (click)="toggleLayout()">切换布局</ion-button>
+</ion-content>

src/app/album/album.page.scss

@@ -0,0 +1,8 @@
+ion-card {
+    margin: 5px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }

src/app/album/album.page.spec.ts

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

src/app/album/album.page.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-album',
+  templateUrl: './album.page.html',
+  styleUrls: ['./album.page.scss'],
+})
+export class AlbumPage implements OnInit {
+
+  
+  ngOnInit() {
+  }
+  imageRows: { url: string }[][];
+
+  constructor() {
+    this.imageRows = [
+      [{ url: 'image1.jpg' }, { url: 'image2.jpg' }, { url: 'image3.jpg' }],
+      [{ url: 'image4.jpg' }, { url: 'image5.jpg' }, { url: 'image6.jpg' }],
+      [{ url: 'image7.jpg' }, { url: 'image8.jpg' }, { url: 'image9.jpg' }],
+      [{ url: 'image10.jpg' }, { url: 'image11.jpg' }, { url: 'image12.jpg' }],
+      [{ url: 'image13.jpg' }, { url: 'image14.jpg' }, { url: 'image15.jpg' }]
+    ];
+  }
+
+  toggleLayout() {
+    this.imageRows = this.imageRows[0].map((col, i) => this.imageRows.map(row => row[i]));
+  }
+}

src/app/app-routing.module.ts

@@ -1,29 +1,33 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'new-page',
-    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
-  },
-  {
-    path: 'login',
-    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
-  },
-  {
-    path: 'register',
-    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'new-page',
+    loadChildren: () => import('./new-page/new-page.module').then( m => m.NewPagePageModule)
+  },
+  {
+    path: 'login',
+    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
+  },
+  {
+    path: 'register',
+    loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
+  },
  {
+    path: 'album',
+    loadChildren: () => import('./album/album.module').then( m => m.AlbumPageModule)
   }
-  
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+
+  
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/new-page/new-page.page.html

@@ -1,74 +1,3 @@
-<!-- <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>new-page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">new-page</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content> -->
-
-<!-- <ion-header>
-  <ion-toolbar>
-    <ion-title>编辑个人资料</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="edit-profile">
-  <div class="avatar-container">
-    <ion-avatar>
-      <img src="/assets/img/avatar.jpg" alt="Avatar">
-    </ion-avatar>
-  </div>
-
-  <ion-item>
-    <ion-label position="floating">用户名</ion-label>
-    <ion-input type="text" placeholder="请输入用户名"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">邮箱</ion-label>
-    <ion-input type="email" placeholder="请输入邮箱"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">电话</ion-label>
-    <ion-input type="tel" placeholder="请输入电话号码"></ion-input>
-  </ion-item>
-</ion-content> -->
-
-<!-- <ion-header>
-  <ion-toolbar>
-    <ion-title>编辑个人资料</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="edit-profile">
-  <div class="avatar-container">
-    <ion-avatar>
-      <img src="/assets/img/man.jpg" alt="Avatar">
-    </ion-avatar>
-  </div>
-
-  <ion-item>
-    <ion-label position="floating">用户名</ion-label>
-    <ion-input type="text" placeholder="请输入用户名"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">邮箱</ion-label>
-    <ion-input type="email" placeholder="请输入邮箱"></ion-input>
-  </ion-item>
-
-  <ion-item>
-    <ion-label position="floating">电话</ion-label>
-    <ion-input type="tel" placeholder="请输入电话号码"></ion-input>
-  </ion-item>
-</ion-content> -->
 
 <ion-header>
   <ion-toolbar>
@@ -98,5 +27,5 @@
     <ion-input type="tel" placeholder="请输入电话号码"></ion-input>
   </ion-item>
 
-  <ion-button expand="block" color="primary" class="save-button">保存</ion-button>
+  <ion-button expand="block"  class="save-button">保存</ion-button>
 </ion-content>

src/app/new-page/new-page.page.scss

@@ -30,6 +30,8 @@
 //     }
 //   }
 
+
+
 .edit-profile {
   display: flex;
   flex-direction: column;
@@ -64,5 +66,11 @@
 
   .save-button {
     margin-top: 20px;
+    background-color: #ffffff;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
   }
+  
 }

src/app/tab1/tab1.page.html

@@ -56,40 +56,7 @@
   
    
    
-<!-- 卡片1 -->
-<!-- <ion-card>
-  <ion-card-header>
-    常用工具
-  </ion-card-header>
-  <ion-card-content style="padding: 2%;">
-    <ion-row>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="backupAlbum()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="images" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">相册备份</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="backupContacts()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="people" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">通讯录备份</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="primary" (click)="restoreFiles()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="document" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文件恢复</div>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-card-content>
-</ion-card> -->
+
 <div class="tool_title" >
   常用工具
 </div>
@@ -122,93 +89,7 @@
   </ion-row>
 </ion-grid>
 
-<!-- <div class="tool" style="color: #333;">
-  <div class="item">
-    <ion-icon name="images" class="large-icon"></ion-icon>
-    <div class="item_text">相册备份</div>
-  </div>
-  <div class="item">
-    <ion-icon name="people" class="large-icon"></ion-icon>
-    <div class="item_text">通讯录备份</div>
-  </div>
-  <div class="item">
-    <ion-icon name="document" class="large-icon"></ion-icon>
-    <div class="item_text">文件恢复</div>
-  </div>
-  <div class="item">
-    <ion-icon name="trash" class="large-icon"></ion-icon>
-    <div class="item_text">文件清理</div>
-  </div>
-  <div class="item">
-    <ion-icon name="scan" class="large-icon"></ion-icon>
-    <div class="item_text">文档扫码</div>
-  </div>
-  <div class="item">
-    <ion-icon name="text" class="large-icon"></ion-icon>
-    <div class="item_text">文字识别</div>
-  </div>
-</div> -->
-
-<!-- 卡片2 -->
-<!-- <ion-card>
-  <ion-card-header>
-    热门工具
-  </ion-card-header>
-  <ion-card-content>
-    <ion-row>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="cleanFiles()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="trash" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文件清理</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="scanDocuments()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="scan" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文档扫码</div>
-        </ion-button>
-      </ion-col>
-      <ion-col size="4">
-        <ion-button expand="block" color="secondary" (click)="recognizeText()" class="vertical-button">
-          <div class="icon-container">
-            <ion-icon name="text" class="large-icon"></ion-icon>
-          </div>
-          <div class="text-container">文字识别</div>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-card-content>
-</ion-card> -->
 
-  <!-- 新增卡片 -->
-  <!-- <ion-card>
-    <ion-card-header>
-      图片展示
-    </ion-card-header>
-    <ion-card-content>
-      <ion-grid>
-        <ion-row>
-          <ion-col size="6">
-            <img src="assets/img/p1.png" style="width: 100%;"/>
-          </ion-col>
-          <ion-col size="6">
-            <ion-row>
-              <ion-col size="12">
-                <img src="assets/img/p2.png" style="width: 100%;"/>
-              </ion-col>
-              <ion-col size="12">
-                <img src="assets/img/p3.png" style="width: 100%;"/>
-              </ion-col>
-            </ion-row>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </ion-card-content>
-  </ion-card> -->
 
   <!-- 右下角上传按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/app/tab3/tab3.page.html

@@ -16,11 +16,12 @@
         </div>
         <div class="details">
           <!-- 用户名 -->
-          <div>用户名：{{currentUser?.get('username')}}</div>
+          <div style="font-size: x-large">用户名：{{currentUser?.get('username')}}</div>
           <!-- 联系方式 -->
           <div>联系方式：{{currentUser?.get('mobile')}}</div>
           <!-- 用户ID -->
-          <div>用户ID：{{currentUser?.id}}</div>
+          <!-- <div>用户ID：{{currentUser?.id}}</div> -->
+
           <!-- <div class="button-container">
             <ion-button color="primary" size="small" style="width: 120px" (click)="becomeGoldMember()">
               <ion-icon name="trophy"></ion-icon>
@@ -138,7 +139,7 @@
         <div class="item_icon">
           <ion-icon name="wallet"></ion-icon>
         </div>
-        <div class="item_title">账号充值</div>
+        <div class="item_title">我的客服</div>
       </div>
       <div class="item_go">
         <ion-icon name="chevron-forward-sharp"></ion-icon>
@@ -150,7 +151,19 @@
         <div class="item_icon">
           <ion-icon name="card"></ion-icon>
         </div>
-        <div class="item_title">机构合作</div>
+        <div class="item_title">我的收藏</div>
+      </div>
+      <div class="item_go">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+    </div>
+
+    <div class="item item_center" (click)="goAlbum()">
+      <div class="item_detail">
+        <div class="item_icon">
+          <ion-icon name="card"></ion-icon>
+        </div>
+        <div class="item_title">我的相册</div>
       </div>
       <div class="item_go">
         <ion-icon name="chevron-forward-sharp"></ion-icon>
@@ -162,7 +175,7 @@
         <div class="item_icon">
           <ion-icon name="card"></ion-icon>
         </div>
-        <div class="item_title">卡密兑换</div>
+        <div class="item_title">我的证件</div>
       </div>
       <div class="item_go">
         <ion-icon name="chevron-forward-sharp"></ion-icon>
@@ -170,6 +183,38 @@
     </div>
   </div>
 
+</ion-content>
+
+<!-- 底部信息 -->
+<!-- footer -->
+<!-- <footer class="footer-container">
+	<div style=" display: flex;
+		justify-content: space-around;
+		align-items: center;
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 0 15px;">
+
+		<div class="footer-box">
+			<img src="assets/img/slide1.png" alt="Logo 1" style="height: 10vh;width: auto;">
+			<p>联系我们</p>
+		</div>
+
+		<div class="footer-box"> -->
+			<!-- <img src="logo2.png" alt="Logo 2"  style="height: 10vh;width: auto;"> -->
+			<!-- <p>问题反馈&建议</p>
+			<p>邮箱地址: 123.com</p>
+		</div>
+
+		<div class="footer-box"> -->
+			<!-- <img src="logo3.png" alt="Logo 3"  style="height: 10vh;width: auto;"> -->
+			<!-- <p>更多信息</p>
+		</div>
+
+		<div class="footer-box">
+			<img src="assets/img/slide1.png" alt="QR Code" style="height: 10vh;width: auto;">
+			<p>扫一扫</p>
+		</div>
+	</div>
+</footer> -->
 
-
-</ion-content>

src/app/tab3/tab3.page.scss

@@ -157,11 +157,11 @@
 
   
       .item {
-        color: #fff;
+        color: #333;
         display: flex;
         justify-content: space-between;
         padding: 3% 5%;
-        background-color: #d9b875;
+        background-color: #fdf9e6;
         // border-radius: 15px 15px 0 0;
         font-size: 16px;
   
@@ -198,6 +198,44 @@
         margin-top: 0.2%;
       }
   
-      
     }
-    
+    
+// 底部代码
+
+// .footer {
+//   width: 100%;
+//   background-color: #f2f2f2;
+//   border-top: 1px solid #ddd;
+//   padding: 20px 0;
+//   box-sizing: border-box;
+// }
+
+// .footer-container {
+//   display: flex;
+//   justify-content: space-around;
+//   align-items: center;
+//   max-width: 1200px;
+//   margin: 0 auto;
+//   padding: 0 15px;
+// }
+
+// .footer-box {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+//   flex: 1;
+//   padding: 0 10px;
+// }
+
+// .footer-box img {
+//   max-width: 100%;
+//   height: auto;
+// }
+
+// .footer-box p {
+//   margin: 5px 0;
+//   color: #333;
+//   text-align: center;
+// } 
+

src/app/tab3/tab3.page.ts

@@ -24,6 +24,7 @@ export class Tab3Page {
     this.router.navigate(['/login']);
   }
 
+  //获取用户信息
   currentUser:any
   getUser(){
     this.currentUser = Parse.User.current()
@@ -31,6 +32,10 @@ export class Tab3Page {
     
   }
 
+  //前往相册
+  goAlbum(){
+    this.router.navigate(['/album']);
+  }