custom-hot-zone.component.html 2.47 KB
<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>