新增遗产继承人信息界面

src/app/album/album.page.ts

@@ -10,11 +10,12 @@ export class AlbumPage implements OnInit {
   
   ngOnInit() {
   }
+
   imageRows: { url: string }[][];
 
   constructor() {
     this.imageRows = [
-      [{ url: 'image1.jpg' }, { url: 'image2.jpg' }, { url: 'image3.jpg' }],
+      [{ url: '/assets/img/man.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' }],

src/app/app-routing.module.ts

@@ -20,6 +20,10 @@ const routes: Routes = [
   },
  {
     path: 'album',
     loadChildren: () => import('./album/album.module').then( m => m.AlbumPageModule)
+  },
+  {
+    path: 'contact',
+    loadChildren: () => import('./contact/contact.module').then( m => m.ContactPageModule)
   }
 
   

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

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

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

src/app/contact/contact.page.html

@@ -0,0 +1,73 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      个人信息
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        <ion-avatar style="width: 80px; height: 80px; margin-left: 39%;">
+          <img src="/assets/img/man.jpg" alt="头像">
+        </ion-avatar>
+      </ion-card-title>
+    </ion-card-header>
+  </ion-card>
+
+  <ion-card style="margin: 20px;">
+    <ion-list style="margin: 15px;">
+      <ion-item button (click)="editProfile('name')">
+        <ion-label>姓名</ion-label>
+        <ion-note slot="end">{{ profile.name }}</ion-note>
+      </ion-item>
+      <ion-item button (click)="editProfile('birthday')">
+        <ion-label>生日</ion-label>
+        <ion-note slot="end">{{ profile.birthday | date }}</ion-note>
+      </ion-item>
+      <ion-item button (click)="presentBirthdayModal()">
+        <ion-label>生日</ion-label>
+        <ion-text slot="end">{{ profile.birthday | date:'shortDate' }}</ion-text>
+      </ion-item>
+      <ion-item button (click)="editProfile('relationship')">
+        <ion-label>与TA的关系</ion-label>
+        <ion-note slot="end">{{ profile.relationship }}</ion-note>
+      </ion-item>
+      <ion-item>
+        <ion-label>性别</ion-label>
+        <ion-select [(ngModel)]="profile.gender" interface="popover">
+          <ion-select-option value="male">男性</ion-select-option>
+          <ion-select-option value="female">女性</ion-select-option>
+          <ion-select-option value="none">无性别者</ion-select-option>
+        </ion-select>
+      </ion-item>
+      <ion-item button (click)="editProfile('contact')">
+        <ion-label>联系方式</ion-label>
+        <ion-note slot="end">{{ profile.contact }}</ion-note>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+
+  <ion-card style="margin: 20px;">
+    <ion-list>
+      <ion-item button (click)="editProfile('hobbies')">
+        <ion-label>爱好</ion-label>
+        <ion-note slot="end">{{ profile.hobbies }}</ion-note>
+      </ion-item>
+      <ion-item button (click)="editProfile('taste')">
+        <ion-label>口味</ion-label>
+        <ion-note slot="end">{{ profile.taste }}</ion-note>
+      </ion-item>
+      <ion-item button (click)="editProfile('habits')">
+        <ion-label>习惯</ion-label>
+        <ion-note slot="end">{{ profile.habits }}</ion-note>
+      </ion-item>
+      <ion-item button (click)="editProfile('dislikes')">
+        <ion-label>讨厌</ion-label>
+        <ion-note slot="end">{{ profile.dislikes }}</ion-note>
+      </ion-item>
+    </ion-list>
+  </ion-card>
+</ion-content>

src/app/contact/contact.page.scss

@@ -0,0 +1,24 @@
+ion-card {
+  max-width: 500px;
+  margin: 16px auto;
+  padding: 16px;
+}
+
+ion-item {
+  --background: var(--ion-item-background, transparent);
+  --border-color: var(--ion-border-color, #ddd);
+  border-bottom: 1px solid var(--border-color);
+}
+
+ion-select {
+  max-width: 100px;
+}
+
+ion-icon[slot="end"] {
+  color: var(--ion-color-step-600, #666);
+}
+
+ion-text[slot="end"] {
+  font-size: 14px;
+  color: var(--ion-text-color, #000);
+}

src/app/contact/contact.page.spec.ts

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

src/app/contact/contact.page.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.page.html',
+  styleUrls: ['./contact.page.scss'],
+})
+export class ContactPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  profile = {
+    name: '张三',
+    birthday: new Date(),
+    relationship: '朋友',
+    gender: 'male',
+    contact: '1234567890',
+    hobbies: '阅读, 旅游',
+    taste: '辣',
+    habits: '早睡早起',
+    dislikes: '嘈杂'
+  };
+
+  editProfile(field: string) {
+    console.log(`Editing ${field}`);
+    // 这里可以添加逻辑来弹出一个模态框或表单来编辑属性
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -89,16 +89,14 @@
   </ion-row>
 </ion-grid>
 
-<<<<<<< HEAD
 
-=======
 <!-- 卡片三 -->
 <ion-card style="width: 95%; margin: 5px auto;">
   <img src="/assets/img/huiyuan.png" alt="Card 3">
 </ion-card>
 
 <div class="tool_title">
- 服务订阅
+ 内容订阅
 </div>
 
 <ion-card style="width: 95%; margin: 5px auto;">
@@ -125,7 +123,7 @@
     </ion-grid>
   </ion-card-content>
 </ion-card>
->>>>>>> 9fc80d911babc0cd066a96ce55fcbf27739e418e
+
 
   <!-- 右下角上传按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/app/tab2/tab2.page.html

@@ -1,89 +1,3 @@
-<!-- 
-<ion-header>
-  <ion-toolbar>
-    <ion-title>遗产继承人</ion-title>
-    <ion-buttons slot="end">
-
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="inheritors">
-  <div style="margin-top: 15px;">
-    <ion-toolbar>
-      <ion-searchbar slot="start"></ion-searchbar>
-      <ion-buttons slot="end">
-        <ion-button (click)="openMessages()">
-          <ion-icon name="mail"></ion-icon>
-        </ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </div>
-
-
-<ion-content class="inheritors">
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
-      <ion-card-title>小江</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-label>继承人电话</ion-label>
-          <ion-text color="dark">13767975832</ion-text>
-        </ion-item>
-        <ion-item>
-          <ion-label>继承人邮箱</ion-label>
-          <ion-text color="dark">1969965415</ion-text>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
-      <ion-card-title>小江</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-label>继承人电话</ion-label>
-          <ion-text color="dark">13767975832</ion-text>
-        </ion-item>
-        <ion-item>
-          <ion-label>继承人邮箱</ion-label>
-          <ion-text color="dark">1969965415</ion-text>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
-      <ion-card-title>小江</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-list>
-        <ion-item>
-          <ion-label>继承人电话</ion-label>
-          <ion-text color="dark">13767975832</ion-text>
-        </ion-item>
-        <ion-item>
-          <ion-label>继承人邮箱</ion-label>
-          <ion-text color="dark">1969965415</ion-text>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-
-
-  <ion-button expand="block" color="primary">添加新继承人</ion-button>
-</ion-content> -->
 <ion-header>
   <ion-toolbar>
     <ion-title>遗产继承人</ion-title>
@@ -104,7 +18,7 @@
 
   <ion-card *ngFor="let contact of filterContacts()">
     <ion-card-header>
-      <ion-card-subtitle>继承人姓名</ion-card-subtitle>
+      <ion-card-subtitle (click)="goContact()">继承人姓名</ion-card-subtitle>
       <ion-card-title>{{ contact.name }}</ion-card-title>
     </ion-card-header>
     <ion-card-content>
@@ -122,5 +36,5 @@
   </ion-card>
 
   <!-- 添加新继承人按钮 -->
-  <ion-button expand="block" color="primary">添加新继承人</ion-button>
+  <ion-button expand="block" color="medium" (click)="add()">添加新继承人</ion-button>
 </ion-content>

src/app/tab2/tab2.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-
+import { AlertController } from '@ionic/angular';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
@@ -15,7 +16,7 @@ export class Tab2Page {
   ];
   searchText: string = '';
 
-  constructor() {}
+  constructor(private alertController: AlertController,private router: Router) {}
 
   filterContacts() {
     return this.contacts.filter(contact => contact.name.toLowerCase().includes(this.searchText.toLowerCase()));
@@ -26,4 +27,51 @@ export class Tab2Page {
     // 在这里编写打开消息页面的逻辑
     console.log('打开消息页面');
   }
+
+  //添加联系人
+  async add(){
+  const alert = await this.alertController.create({
+    header: '添加新继承人',
+    inputs: [
+      {
+        name: 'name',
+        type: 'text',
+        placeholder: '姓名'
+      },
+      {
+        name: 'phone',
+        type: 'tel',
+        placeholder: '电话'
+      },
+      {
+        name: 'email',
+        type: 'email',
+        placeholder: '邮箱'
+      }
+    ],
+    buttons: [
+      {
+        text: '取消',
+        role: 'cancel'
+      },
+      {
+        text: '确定',
+        handler: (data) => {
+          const newContact = {
+            name: data.name,
+            phone: data.phone,
+            email: data.email
+          };
+          this.contacts.push(newContact);
+        }
+      }
+    ]
+  });
+  await alert.present();
+}
+//切换界面
+goContact(){
+  console.log(11)
+  this.router.navigate(['/contact']);
+}
 }

src/app/tab3/tab3.page.html

@@ -95,13 +95,14 @@
     </div>
   </div>
 
+<!-- 列表 -->
   <div class="first_box">
     <div class="item item_top">
       <div class="item_detail">
         <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>
@@ -113,57 +114,58 @@
         <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_buttom">
+    <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 class="item_title">我的相册</div>
       </div>
       <div class="item_go">
         <ion-icon name="chevron-forward-sharp"></ion-icon>
       </div>
     </div>
-  </div>
 
-  <div class="first_box">
-    <div class="item item_top">
+    <div class="item item_buttom">
       <div class="item_detail">
         <div class="item_icon">
-          <ion-icon name="wallet"></ion-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>
 
-    <div class="item item_center">
+
+  <div class="first_box">
+    <div class="item item_top">
       <div class="item_detail">
         <div class="item_icon">
-          <ion-icon name="card"></ion-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>
       </div>
     </div>
 
-    <div class="item item_center" (click)="goAlbum()">
+    <div class="item item_center">
       <div class="item_detail">
         <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>
@@ -175,7 +177,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>
@@ -183,38 +185,8 @@
     </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> -->
 

src/app/tab3/tab3.page.scss

@@ -151,7 +151,7 @@
     margin-top: 20px; /* 设置上边距为20像素 */
   }
 
-  
+  //下方列表
     .first_box {
       padding: 0% 4%;
 
@@ -200,42 +200,3 @@
   
     }
     
-// 底部代码
-
-// .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;
-// } 
-