edu-textbook/projects/textbook/src/modules/login/account-info/account-info.component.html

<div class="region">
  <div class="nav">
    <div>
      <svg
        width="24"
        height="27"
        viewBox="0 0 18 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M18 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4C2 4.53043 2.21071 5.03914 2.58579 5.41421C2.96086 5.78929 3.46957 6 4 6H18V19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H4C2.93913 20 1.92172 19.5786 1.17157 18.8284C0.421427 18.0783 0 17.0609 0 16V4C0 2.93913 0.421427 1.92172 1.17157 1.17157C1.92172 0.421427 2.93913 0 4 0H17C17.2652 0 17.5196 0.105357 17.7071 0.292893C17.8946 0.48043 18 0.734783 18 1V2Z"
          fill="url(#paint0_linear_5_11023)"
        />
        <defs>
          <linearGradient
            id="paint0_linear_5_11023"
            x1="9"
            y1="-2.21282e-07"
            x2="25.5"
            y2="40"
            gradientUnits="userSpaceOnUse"
          >
            <stop stop-color="#E04860" />
            <stop offset="1" stop-color="#E99306" />
          </linearGradient>
        </defs>
      </svg>
    </div>
    完善账号信息
    <div class="tips">
      欢迎使用教材遴选系统 ，为了激活账号使用权限，请先完善您的资料信息。
    </div>
  </div>
  <div class="form">
    <form
      nz-form
      [formGroup]="validateForm"
      class="account-form"
      (ngSubmit)="submitForm()"
    >
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >姓名</nz-form-label
        >
        <nz-input-group>
          <input
            nz-input
            type="text"
            formControlName="name"
            placeholder="请填写姓名"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >手机号</nz-form-label
        >
        <nz-input-group>
          <input
            nz-input
            type="text"
            [disabled]="true"
            [ngModel]="mobile"
            [ngModelOptions]="{standalone: true}"
            placeholder="请填写手机号"
          />
        </nz-input-group> </nz-form-item
      ><nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >电子邮箱</nz-form-label
        >
        <nz-input-group>
          <input
            nz-input
            type="email"
            formControlName="email"
            placeholder="请填写电子邮箱"
          />
        </nz-input-group> </nz-form-item
      ><nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true">办公电话</nz-form-label>
        <nz-input-group>
          <input
            nz-input
            type="text"
            [(ngModel)]="nonRequired.workPhone"
            [ngModelOptions]="{standalone: true}"
            placeholder="请填写办公电话"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >省份</nz-form-label
        >
        <nz-input-group>
          <!-- <input
            nz-input
            type="text"
            formControlName="province"
            placeholder="请填写用户名"
          /> -->
          <nz-select
            style="width: 100%"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择省份"
            formControlName="province"
          >
            @for(item of provinces; track item;let index = $index){
            <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
              item
            }}</nz-option>
            }
          </nz-select>
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >单位类型</nz-form-label
        >
        <nz-input-group>
          <!-- <input
            nz-input
            type="text"
            formControlName="unitType"
            placeholder="请填写用户名"
          /> -->
          <nz-select
            style="width: 100%"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择单位类型"
            formControlName="unitType"
          >
            @for(item of unitTypes; track item;let index = $index){
            <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
              item
            }}</nz-option>
            }
          </nz-select>
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >单位名称</nz-form-label
        >
        <nz-input-group>
          <input
            nz-input
            type="text"
            formControlName="unit"
            placeholder="请填写单位名称"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true">所在部门</nz-form-label>
        <nz-input-group>
          <input
            nz-input
            type="text"
            [(ngModel)]="nonRequired.branch"
            [ngModelOptions]="{standalone: true}"
            placeholder="请填写所在部门"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true">职务</nz-form-label>
        <nz-input-group>
          <input
            nz-input
            type="text"
            [(ngModel)]="nonRequired.job"
            [ngModelOptions]="{standalone: true}"
            placeholder="请填写职务"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >身份证号</nz-form-label
        >
        <nz-input-group>
          <input
            nz-input
            type="text"
            formControlName="idcard"
            placeholder="请填写身份证号"
          />
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >用户类型</nz-form-label
        >
        <nz-input-group>
          <!-- <input
            nz-input
            type="text"
            formControlName="identity"
            placeholder="请选择用户类型"
          /> -->
          <nz-select
            style="width: 100%"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择单位类型"
            formControlName="identity"
          >
            @for(item of identitys; track item;let index = $index){
            <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
              item
            }}</nz-option>
            }
          </nz-select>
        </nz-input-group>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label class="label" [nzNoColon]="true" nzRequired
          >单位联系人认证文件</nz-form-label
        >
        <nz-input-group>
          <!-- <input
            nz-input
            type="text"
            formControlName="file"
            placeholder="请填写用户名"
          /> -->
          <nz-upload
            formControlName="file"
            nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            [nzHeaders]="{ authorization: 'authorization-text' }"
            (nzChange)="handleChange($event)"
          >
            <div style="color: #3e49b3">
              <span nz-icon nzType="upload"></span>上传认证文件
            </div>
          </nz-upload>
          <div class="text" style="margin: 10px 0; color: #231c1f99">
            请下载单位联系人认证<a href="">文件模板</a
            >，填写盖章后上传。支持上传 PDF、JPG、JPEG、PNG
            格式，单个文件大小不超过 2M
          </div>
        </nz-input-group>
      </nz-form-item>
    </form>

    <button
      id="basic"
      class="form-button"
      type="button"
      mat-button
      (click)="submitForm()"
    >
      保存
    </button>
    <div class="menu">
      <a nz-dropdown [nzDropdownMenu]="menu">
        <span style="color: #231c1f99">English</span>
        <span
          nz-icon
          nzType="down"
          style="color: #756b6d; margin-left: 4px"
        ></span>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li nz-menu-item>English</li>
          <li nz-menu-item>中文简体</li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>
</div>