a

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

@@ -3,9 +3,14 @@
     <ion-buttons slot="start">
       <ion-button routerLink="/lesson/me/userFollow" fill="clear" color="dark">
         <ion-icon name="chevron-back-outline" size="small"></ion-icon>
-        <ion-note>返回</ion-note>
+        <ion-note>取消</ion-note>
       </ion-button>
     </ion-buttons>
+    <ion-buttons slot="end">
+      
+      <ion-button (click)="saveAdd()" color="dark">完成</ion-button>
+      <ion-icon name="albums-outline"></ion-icon>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
@@ -24,7 +29,8 @@
   <ion-card>
     <ion-list>
       <ion-item>
-        <ion-input  placeholder="姓名*"></ion-input>
+        <ion-input  [(ngModel)]="userAdd.name" placeholder="姓名*"></ion-input>
+        <ion-input [(ngModel)]="userAdd.name"></ion-input>
       </ion-item>
       <ion-item>
         <ion-input  placeholder="生日*"></ion-input>
@@ -50,26 +56,105 @@
       </ion-modal>
      
       
-      <ion-item>
+      <!-- <ion-item>
         <ion-label position="stacked">名字：</ion-label>
         <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-item>
+
+
       <ion-item>
-        <ion-label position="stacked">性别：</ion-label>
+        <ion-label style="font-size: 14px;">性别：</ion-label>
         <ion-select [(ngModel)]="userAdd.tag" cancelText="取消" okText="确定">
           <ion-select-option value="male">男</ion-select-option>
           <ion-select-option value="female">女</ion-select-option>
           <ion-select-option value="unknown">未知</ion-select-option>
         </ion-select>
       </ion-item>
+      
+
       <ion-item>
-        <ion-label position="stacked">手机：</ion-label>
+        <ion-label style="font-size: 14px;">联系方式：</ion-label>
         <ion-input [(ngModel)]="userAdd.desc"></ion-input>
       </ion-item>
+      <ion-item>
+        <ion-input  [(ngModel)]="userAdd.name" placeholder="城市"></ion-input>
+        <ion-input [(ngModel)]="userAdd.name"></ion-input>
+      </ion-item>
     </ion-list>
     
   </ion-card>
 
+<ion-card>
+  <ion-list [inset]="true">
+    <ion-item [button]="true">
+      <ion-icon color="danger" slot="start" name="heart-circle-outline" size="large"></ion-icon>
+      <ion-label>爱好</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
+    </ion-item>
+    <ion-item [button]="true">
+      <ion-icon color="success" slot="start" name="restaurant-outline" size="large"></ion-icon>
+      <ion-label>口味</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
+    </ion-item>
+    <ion-item [button]="true">
+      <ion-icon color="tertiary" slot="start" name="rose-outline" size="large"></ion-icon>
+      <ion-label>习惯</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
+    </ion-item>
+    <ion-item [button]="true">
+      <ion-icon color="warning" slot="start" name="heart-dislike-outline" size="large"></ion-icon>
+      <ion-label>讨厌</ion-label>
+      <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
+    </ion-item>
+  </ion-list>
+</ion-card>
+
+<ion-card>
+  <ion-item>
+    <ion-input  [(ngModel)]="userAdd.name" placeholder="学校"></ion-input>
+    <ion-input [(ngModel)]="userAdd.name"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input  [(ngModel)]="userAdd.name" placeholder="职业"></ion-input>
+    <ion-input [(ngModel)]="userAdd.name"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input  [(ngModel)]="userAdd.name" placeholder="公司"></ion-input>
+    <ion-input [(ngModel)]="userAdd.name"></ion-input>
+  </ion-item>
+</ion-card>
+  <ion-list [inset]="true">
+    <ion-item>
+      <ion-textarea label="备注" labelPlacement="floating" rows="5"></ion-textarea>
+    </ion-item>
+  </ion-list>
   <ion-list [inset]="true">
     <ion-button expand="block" (click)="saveAdd()">保存</ion-button>
   </ion-list>

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

@@ -7,4 +7,4 @@ ion-item {
         color: rgb(95, 93, 90);
         font-size: 0.9rem;
     }
-}
+}