app-angular/src/modules/user/page-add/page-add.component.html

@@ -61,34 +61,16 @@
         <ion-input [(ngModel)]="userAdd.name"></ion-input>
       </ion-item> -->
       <ion-item>
-        <ion-label id="open-custom-dialog" style="font-size: 14px;">选择关系</ion-label>
-
-        <!-- <ion-icon slot="end" id="open-custom-dialog" name="chevron-forward-outline" size="small"></ion-icon> -->
-        <ion-modal id="example-modal" #modal trigger="open-custom-dialog">
-          <ng-template>
-            <div class="wrapper">
-              <h1>Dialog header</h1>
-      
-              <ion-list lines="none">
-                <ion-item button="true" detail="false" (click)="modal.dismiss()">
-                  <ion-icon name="person-circle"></ion-icon>
-                  <ion-label>家人</ion-label>
-                </ion-item>
-                <ion-item button="true" detail="false" (click)="modal.dismiss()">
-                  <ion-icon name="person-circle"></ion-icon>
-                  <ion-label>好朋友</ion-label>
-                </ion-item>
-                <ion-item button="true" detail="false" (click)="modal.dismiss()">
-                  <ion-icon name="person-circle"></ion-icon>
-                  <ion-label>同事</ion-label>
-                </ion-item>
-              </ion-list>
-            </div>
-          </ng-template>
-        </ion-modal>
+        <ion-select label="与ta的关系" [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="选择">
+          <ion-select-option value="brown">至亲家人</ion-select-option>
+          <ion-select-option value="brown">亲戚</ion-select-option>
+          <ion-select-option value="blonde">挚友</ion-select-option>
+          <ion-select-option value="red">新朋友</ion-select-option>
+          <ion-select-option value="red">同事</ion-select-option>
+          <ion-select-option value="red">同学</ion-select-option>
+        </ion-select>
       </ion-item>
-
-
+      
       <ion-item>
         <ion-label style="font-size: 14px;">性别：</ion-label>
         <ion-select [(ngModel)]="userAdd.tag" cancelText="取消" okText="确定">
@@ -149,6 +131,124 @@
     <ion-input  [(ngModel)]="userAdd.name" placeholder="公司"></ion-input>
     <ion-input [(ngModel)]="userAdd.name"></ion-input>
   </ion-item>
+  <ion-item>
+    <ion-icon slot="start" color="tertiary" name="flash-outline" ></ion-icon>
+    <ion-label color="tertiary">添加技能&能力</ion-label>
+    <ion-icon slot="end" id="open-modal3" name="chevron-forward-outline" size="small"></ion-icon>
+    <ion-item>
+      
+      <ion-modal #modal trigger="open-modal3" [canDismiss]="canDismiss" [presentingElement]="presentingElement">
+        <ng-template>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>请选择</ion-title>
+              <ion-buttons slot="end">
+                <ion-button (click)="modal.dismiss()">完成</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <p class="ion-padding-horizontal">技能&能力标签🤖</p>
+            <div class="ion-text-center">
+              <ion-checkbox id="terms" (ionChange)="onTermsChanged($event)" [checked]="canDismiss">
+                领导力贼棒👍
+              </ion-checkbox><br><br>
+              <ion-checkbox >
+               写作干将⌨️
+              </ion-checkbox><br><br>
+              <ion-checkbox >
+                数据分析天才👨‍💻
+              </ion-checkbox><br><br>
+              <ion-checkbox >
+              谈判王🤼‍♂️
+              </ion-checkbox><br><br>
+              <ion-checkbox>
+                销售界大佬🙌
+              </ion-checkbox><br><br>
+              <ion-checkbox >
+                法律“顾问”🤵‍♂️
+              </ion-checkbox><br><br>
+              <ion-checkbox >
+               摄影大牛🖼️
+              </ion-checkbox><br>
+              <ion-checkbox > 钓鱼一把手🐟</ion-checkbox><br><br>
+              <ion-checkbox>爱剪辑和编辑视频💻</ion-checkbox><br><br>
+              <ion-checkbox>烹饪小能手🍖</ion-checkbox><br><br>
+              <ion-checkbox>游泳健将🏊‍♂️</ion-checkbox><br><br>
+              <ion-checkbox>野外生存家🧗‍♀️</ion-checkbox><br><br>
+              </div>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
+    </ion-item>
+  </ion-item>
+</ion-card>
+
+<ion-card>
+  <ion-item>
+    <ion-input  [(ngModel)]="userAdd.name" placeholder="MBTI"></ion-input>
+    <ion-input [(ngModel)]="userAdd.name"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label id="open-custom-dialog2" style="font-size: 14px;">来源</ion-label>
+
+    <!-- <ion-icon slot="end" id="open-custom-dialog" name="chevron-forward-outline" size="small"></ion-icon> -->
+    <ion-modal id="example-modal" #modal trigger="open-custom-dialog2">
+      <ng-template>
+        <div class="wrapper" class="ion-text-center">
+          <ion-title>你和ta如何认识的</ion-title>
+  
+          <ion-list lines="none">
+            <ion-item button="true" detail="false" (click)="modal.dismiss()">
+              <ion-icon name="pizza-outline"></ion-icon>
+              <ion-label>聚餐认识</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" (click)="modal.dismiss()">
+              <ion-icon name="logo-wechat"></ion-icon>
+              <ion-label>熟人介绍 </ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" (click)="modal.dismiss()">
+              <ion-icon name="sunny-outline"></ion-icon>
+              <ion-label>与好友一同出游认识</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" (click)="modal.dismiss()">
+              <ion-icon name="mail-unread-outline"></ion-icon>
+              <ion-label>工作认识</ion-label>
+            </ion-item>
+            <ion-item button="true" detail="false" (click)="modal.dismiss()">
+              <ion-icon name="bonfire-outline"></ion-icon>
+              <ion-label>一见钟情</ion-label>
+            </ion-item>
+            
+          </ion-list>
+        </div>
+      </ng-template>
+    </ion-modal>
+  </ion-item>
+  <ion-item>
+    <ion-input  placeholder="相遇时间*"></ion-input>
+    <ion-icon slot="end" id="open-modal2" name="chevron-forward-outline" size="small"></ion-icon>
+    <ion-modal #modal trigger="open-modal2">
+      <ng-template>
+        <ion-content>
+          <ion-toolbar>
+            <ion-title>重置</ion-title>
+            <ion-buttons slot="end">
+              <ion-button color="black" (click)="modal.dismiss()">完成</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+          <ion-datetime-button datetime="datetime" style="width: 100%;"></ion-datetime-button>
+          <ion-modal [keepContentsMounted]="true">
+            <ng-template>
+              <ion-datetime id="datetime"></ion-datetime>
+            </ng-template>
+          </ion-modal>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </ion-item>
+  
 </ion-card>
   <ion-list [inset]="true">
     <ion-item>

app-angular/src/modules/user/page-add/page-add.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import * as Parse from "parse";
+import { CheckboxCustomEvent } from '@ionic/angular';
 
 @Component({
   selector: 'app-page-add',
@@ -15,11 +16,17 @@ export class PageAddComponent {
     img: ''
   };
   selectedImage: string | ArrayBuffer | null = null;
+  canDismiss = false;
+  presentingElement: Element | null = null;
 
   constructor(
     private router: Router
   ) {}
 
+  ngOnInit() {
+    this.presentingElement = document.querySelector('.ion-page');
+  }
+
   async saveAdd() {
     const HrmContact = Parse.Object.extend('HrmContact');
     const newContact = new HrmContact();
@@ -51,4 +58,13 @@ export class PageAddComponent {
       reader.readAsDataURL(file);
     }
   }
+
+  onTermsChanged(event: Event) {
+    const ev = event as CheckboxCustomEvent;
+    this.canDismiss = ev.detail.checked;
+  }
+  customPopoverOptions = {
+   
+    message: '请从以下关系选择',
+  };
 }