custom-hot-zone.component.html 2.74 KB
Newer Older
范雪寒's avatar
范雪寒 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
<div class="p-image-children-editor">

  <h5 style="margin-left: 2.5%;"> preview: </h5>

  <div class="preview-box" #wrap>
    <canvas id="canvas" #canvas></canvas>
  </div>

  <div nz-row nzType="flex" nzAlign="middle">
    <div nz-col nzSpan="5" nzOffset="1">

      <h5> add background: </h5>

      <div class="bg-box">
        <app-upload-image-with-preview
          [picUrl]="bgItem?.url"
          (imageUploaded)="onBackgroundUploadSuccess($event)">
        </app-upload-image-with-preview>
      </div>
    </div>

    <div nz-col nzSpan="5" nzOffset="1" class="img-box"
         *ngFor="let it of hotZoneArr; let i = index">

      <div
        style="margin: auto; padding: 5px;  margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
        <span style="margin-left: 40%;"> item-{{i + 1}}
        </span>
        <button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
          X
        </button>

        <nz-divider style="margin-top: 10px;"></nz-divider>


        <div style="margin-top: -20px; margin-bottom: 5px">
          <nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
            <label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
            <label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
            <label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
          </nz-radio-group>
        </div>

        <div *ngIf="it.itemType == 'pic'">
          <app-upload-image-with-preview
            [picUrl]="it?.pic_url"
            (imageUploaded)="onItemImgUploadSuccess($event, it)">
          </app-upload-image-with-preview>
        </div>

        <div *ngIf="it.itemType == 'text'">
          <input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
        </div>

        <div style="width: 100%; margin-top: 5px;">
          <app-audio-recorder
            [audioUrl]="it.audio_url"
            (audioUploaded)="onItemAudioUploadSuccess($event, it)"
          ></app-audio-recorder>
        </div>

      </div>

    </div>


    <div nz-col nzSpan="5" nzOffset="1">

      <div class="bg-box">
        <button nz-button nzType="dashed" (click)="addBtnClick()"
                class="add-btn">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          <!--Add Image-->
          Add hot zone
        </button>
      </div>

    </div>
  </div>


  <nz-divider></nz-divider>

  <div class="save-box">

    <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
            (click)="saveClick()" >
      <i nz-icon nzType="save"></i>
      Save
    </button>

  </div>


</div>


<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>