202226701009/travel-app/src/app/tab3/tab3.page.html

<ion-content class="custom-content" padding>
  <form (ngSubmit)="publishPost()">
    
    <div class="input-container">
      <ion-item lines="none">
        <div class="upload-container">
          <!-- 上传文件盒子 -->
          <div *ngIf="selectedFiles.length === 0" class="upload-box" (click)="fileInput.click()">
            <ion-icon name="add" class="upload-icon"></ion-icon>
            <input type="file" #fileInput (change)="onFilesSelected($event)" accept="image/*,video/*" multiple style="display: none;" />
          </div>

          <!-- 显示已上传的文件 -->
          
    <ion-item *ngIf="selectedFiles.length > 0" lines="none">
      <div *ngFor="let file of selectedFiles" style="position: relative; width: 100%; overflow: hidden; height: 100px; margin-bottom: 10px;">
        <ng-container *ngIf="file.isImage; else videoTemplate">
          <img [src]="file.src" style="width: auto; height: 100%; border-radius: 10px;" >
        </ng-container>
        <ng-template #videoTemplate>
          <video [src]="file.src" style="width: auto; height: 100%; border-radius: 10px;" controls></video>
        </ng-template>
        <ion-button (click)="removeFile(file)" fill="clear" style="position: absolute; top: 5px; right: 5px;">
          <ion-icon name="close"></ion-icon>
        </ion-button>
      </div>
    </ion-item>
  </div>
</ion-item>
</div>

    <div class="input-container">
      <input type="text" id="input-title" [(ngModel)]="postTitle" name="postTitle" required>
      <label for="input-title" class="label">标题</label>
      <div class="underline"></div>
    </div>

    <div class="input-container">
      <textarea id="input-content" [(ngModel)]="postContent" name="postContent" required></textarea>
      <label for="input-content" class="label">正文</label>
      <div class="underline"></div>
    </div>

    <ion-item class="custom-didian">
      <ion-icon name="location"></ion-icon>
      <ion-label>标记地点</ion-label>
      <ion-select interface="popover" [(ngModel)]="location" name="location" slot="end">
        <ion-select-option *ngFor="let city of cities" [value]="city">{{ city }}</ion-select-option>
      </ion-select>
    </ion-item>

    <!-- 公开可见开关 -->
    <div class="input-container">
      <ion-item class="custom-select">
        <ion-icon name="lock-open"></ion-icon>
        <ion-label>可见性</ion-label>
        <ion-select [(ngModel)]="visibility" name="visibility" slot="end">
          <ion-select-option value="none">全部可见</ion-select-option>
          <ion-select-option value="onlyTo">仅给谁看</ion-select-option>
          <ion-select-option value="mutualFriends">仅互关好友可见</ion-select-option>
          <ion-select-option value="onlyMe">仅自己可见</ion-select-option>
        </ion-select>
      </ion-item>
    </div>

    <!-- 高级选项 -->
    <ion-item class="custom-gaoji" lines="none">
      <ion-label>高级选项</ion-label>
      <ion-toggle [(ngModel)]="saveToAlbum" name="saveToAlbum" slot="end">保存到相册</ion-toggle><br /><br />
  </ion-item>

  </form>
</ion-content>


<ion-footer>
  <ion-button type="submit" expand="block" class="custom-button" (click)="publishPost()">
    发布笔记
  </ion-button>
</ion-footer>