Eve-Project/app-angular/src/modules/home/page-mine/page-mine.component.html

<nz-layout>
  <nz-header>账户</nz-header>
  <nz-content>
    <div class="card-container">
      <nz-tabset nzType="card" [nzSelectedIndex]="selectedTabIndex">
        <nz-tab [nzTitle]="'账号'">
          <div nz-row [nzGutter]="16">
            <ion-title>可用余额:{{userServ.currentUser.availableBalance || '未填写'}} <a href="">充值</a></ion-title>
            <ion-title>账号:{{userServ.currentUser.account || '未填写'}}</ion-title>
            <ion-title>手机号:{{userServ.currentUser.phoneNumber || '未填写'}}<a href="">修改</a></ion-title>
          </div>
        </nz-tab>
        <nz-tab [nzTitle]="'安全'">
          <div nz-row nzJustify="space-evenly">
            <button nz-button [nzType]="'primary'" (click)="actionChange('changePassword')"><span>修改密码</span></button>
            <nz-modal [(nzVisible)]="actionTypeMap['changePassword']" nzTitle="小心谨慎,保密至上"
                      (nzOnCancel)="inActionChange('changePassword')"
                      (nzOnOk)="handleChange('changePassword')">
              <ng-container *nzModalContent>
                <form [formGroup]="validateForm">
                  <div class="form-group">
                    <label for="oldPassword">旧密码</label>
                    <!--                    密码输入-->
                    <nz-input-group [nzSuffix]="suffixTemplate">
                      <input
                        [type]="passwordVisible ? 'text' : 'password'" id="oldPassword" formControlName="oldPassword"
                        nz-input
                        placeholder="input password"/>
                    </nz-input-group>
                    <ng-template #suffixTemplate>
                      <span
                        nz-icon
                        [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                        (click)="passwordVisible = !passwordVisible"
                      ></span>
                    </ng-template>
                    <div *ngIf="validateForm.controls['oldPassword'].errors?.['required']" class="error-message">
                      需要填写密码
                    </div>
                    <div *ngIf="validateForm.controls['oldPassword'].errors?.['pattern']" class="error-message">
                      密码必须包含字符和数字位数在6-10位之间
                    </div>
                    <label for="newPassword">新密码</label>
                    <nz-input-group [nzSuffix]="suffixTemplate">
                      <input
                        [type]="passwordVisible ? 'text' : 'password'" id="newPassword" formControlName="newPassword"
                        nz-input
                        placeholder="input password"/>
                    </nz-input-group>
                    <ng-template #suffixTemplate>
                      <span
                        nz-icon
                        [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                        (click)="passwordVisible = !passwordVisible"
                      ></span>
                    </ng-template>
                    <div *ngIf="validateForm.controls['newPassword'].errors?.['required']" class="error-message">
                      需要填写密码
                    </div>
                    <div *ngIf="validateForm.controls['newPassword'].errors?.['pattern']" class="error-message">
                      密码必须包含字符和数字位数在6-10位之间
                    </div>
                  </div>
                </form>

              </ng-container>
            </nz-modal>
            <button nz-button [nzType]="'primary'" (click)="actionChange('forgetPassword')"><span>忘记密码</span></button>
            <nz-modal [(nzVisible)]="actionTypeMap['forgetPassword']" nzTitle="哟~又忘记了啊"
                      (nzOnCancel)="inActionChange('forgetPassword')"
                      (nzOnOk)="handleForget()">
              <ng-container *nzModalContent>
                <div class="example-input">
                  请输入邮箱:<input nz-input placeholder="请输入邮箱" nzSize="default"/>
                  <!--                  验证信息-->
                </div>
              </ng-container>
            </nz-modal>
            <button nz-button [nzType]="'primary'" (click)="actionChange('removePassword')"><span>删除账户</span></button>
            <nz-modal [(nzVisible)]="actionTypeMap['removePassword']" nzTitle="请问您真的要删除吗????"
                      (nzOnCancel)="inActionChange('removePassword')"
                      (nzOnOk)="handleRemove('removePassword')">
              <ng-container *nzModalContent>
                <div class="example-input">
                  <!--                  请输入密码:<input nz-input placeholder="请输入密码" nzSize="default"/>-->
                  <form [formGroup]="validateForm">
                    <div class="form-group">
                      <label for="oldPassword">旧密码</label>
                      <!--                    密码输入-->
                      <nz-input-group [nzSuffix]="suffixTemplate">
                        <input
                          [type]="passwordVisible ? 'text' : 'password'" id="removePassword"
                          formControlName="removePassword"
                          nz-input
                          placeholder="请输入密码"/>
                      </nz-input-group>
                      <ng-template #suffixTemplate>
                      <span
                        nz-icon
                        [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                        (click)="passwordVisible = !passwordVisible"
                      ></span>
                      </ng-template>
                      <div *ngIf="validateForm.controls['oldPassword'].errors?.['required']" class="error-message">
                        需要填写密码
                      </div>
                      <div *ngIf="validateForm.controls['oldPassword'].errors?.['pattern']" class="error-message">
                        密码必须包含字符和数字位数在6-10位之间
                      </div>
                    </div>
                  </form>
                </div>
              </ng-container>
            </nz-modal>
          </div>
        </nz-tab>
        <nz-tab [nzTitle]="'设置'">

          <div *ngIf="isFirstRegister===1">
            <nz-steps [nzCurrent]="current">
              <nz-step nzTitle="完善信息"></nz-step>
              <nz-step nzTitle="性格测试"></nz-step>
              <nz-step nzTitle=""></nz-step>
            </nz-steps>

            <div class="steps-content" *ngIf="current === 0">
              <!-- 完善信息 -->
              <form [formGroup]="myForm" (ngSubmit)="submitForm()" class="form-container">
                <div class="form-row">
                  <label for="phone">电话:</label>
                  <input type="text" id="phone" formControlName="phone"/>
                  <div *ngIf="myForm.get('phone')?.invalid && myForm.get('phone')?.touched">
                    <div *ngIf="myForm.get('phone')?.errors?.['required']">Phone number is required.</div>
                    <div *ngIf="myForm.get('phone')?.errors?.['pattern']">Invalid phone number.</div>
                  </div>
                </div>
                <div class="form-row">
                  <label for="name">姓名:</label>
                  <input type="text" id="name" formControlName="name"/>
                  <div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched">
                    <div *ngIf="myForm.get('name')?.errors?.['required']">Phone number is required.</div>
                  </div>
                </div>
                <!--                学历-->
                <div class="form-row">
                  <label>阶段:</label>
                  <div>
                    <label>
                      <input type="radio" formControlName="employmentStatus" value="employed"/>
                      在职
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="employmentStatus" value="jobSeeker"/>
                      学生
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="employmentStatus" value="internship"/>
                      求职
                    </label>
                  </div>
                  <div *ngIf="myForm.get('employmentStatus')?.invalid && myForm.get('employmentStatus')?.touched">
                    Employment status is required.
                  </div>
                </div>
                <!--                性别-->
                <div class="form-row">
                  <label>性别:</label>
                  <div>
                    <label>
                      <input type="radio" formControlName="gender" value="男"/>
                      男
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="gender" value="女"/>
                      女
                    </label>
                  </div>
                  <div *ngIf="myForm.get('employmentStatus')?.invalid && myForm.get('employmentStatus')?.touched">
                    Employment status is required.
                  </div>
                </div>
                <!--                    本科-->
                <div class="form-row">
                  <label>学历:</label>
                  <div>
                    <label>
                      <input type="radio" formControlName="educationLevel" value="associateDegree"/>
                      大专
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="educationLevel" value="bachelorDegree"/>
                      本科
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="educationLevel" value="masterDegree"/>
                      研究生
                    </label>
                  </div>
                  <div>
                    <label>
                      <input type="radio" formControlName="educationLevel" value="phd"/>
                      博士生
                    </label>
                  </div>
                  <div *ngIf="myForm.get('educationLevel')?.invalid && myForm.get('educationLevel')?.touched">
                    Education level is required.
                  </div>
                </div>
              </form>
            </div>

            <!--            性格测试-->
            <div class="steps-content" *ngIf="current===1">
              <div class="chat-container">
                <div class="chat-window">
                  <div class="chat-label">聊天记录</div>
                  <div class="chat-messages" #chatMessages>
                    <div *ngFor="let message of messages" class="message"
                         [ngClass]="{'left': !message.isReceived, 'right': message.isReceived}">
                      <div class="avatar" [ngClass]="{'left': !message.isReceived, 'right': message.isReceived}">
                        <img [src]="message.avatar" alt="Avatar"/>
                      </div>
                      <div class="content">{{ message.content }}</div>
                    </div>
                  </div>
                </div>
                <div class="input-container">
                  <div class="input-message" *ngFor="let message of inputMessages">
                    <div class="avatar">
                      <img [src]="message.avatar" alt="Avatar"/>
                    </div>
                    <div class="content">{{ message.content }}</div>
                  </div>
                  <input type="text" [(ngModel)]="inputText" placeholder="请输入消息" (keyup.enter)="sendMessage()"/>
                  <button (click)="sendMessage()">发送</button>
                </div>
              </div>

            </div>

            <div class="steps-content" *ngIf="current===2">3</div>
            <div class="steps-action">
              <button nz-button nzType="default" (click)="pre()" *ngIf="current > 0">
                <span>Previous</span>
              </button>
              <button nz-button nzType="default" (click)="next()" *ngIf="current < 2"
                      [disabled]="current === 0 && myForm.invalid">
                <span>Next</span>
              </button>
              <button nz-button nzType="primary" (click)="done()" *ngIf="current === 2">
                <span>Done</span>
              </button>
            </div>
          </div>
          <div *ngIf="isFirstRegister!==1">

          </div>

        </nz-tab>
      </nz-tabset>

      <!--      <div class="container" style="background: #ECECEC;padding:30px">-->
      <!--        <div nz-row [nzGutter]="8">-->
      <!--          <div nz-col [nzSpan]="8">-->
      <!--            <nz-card nzTitle="Card title">-->
      <!--              1111111111-->
      <!--            </nz-card>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->

    </div>

  </nz-content>
  <nz-footer>
    <ion-list [inset]="true">
      <ion-button *ngIf="!userServ.currentUser?.account" expand="block" routerLink="/user/login">登录</ion-button>
      <ion-button *ngIf="userServ.currentUser?.account" fill="clear" expand="block" (click)="logout()">登出</ion-button>
    </ion-list>
  </nz-footer>
</nz-layout>