12.23(2)

travel-app/src/app/tab2/tab2.page.scss

@@ -9,6 +9,11 @@
   ion-content.custom-content {
     --background: #F5EBE0; // 替换#your-color-code为你想要的颜色
   }
+  
+  .custom-button {
+    --background: #d0a87d; // 替换#your-color-code为你想要的颜色
+  }
+
 
 .input {
   width: 100%;

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

@@ -3,7 +3,7 @@
   <form (ngSubmit)="publishPost()" #postForm="ngForm">
     
     <div class="input-container">
-      <ion-item>
+      <ion-item lines="none">
         <div class="upload-container">
           <!-- 上传文件盒子 -->
           <div *ngIf="selectedFiles.length === 0" class="upload-box" (click)="fileInput.click()">
@@ -12,22 +12,23 @@
           </div>
 
           <!-- 显示已上传的文件 -->
-          <div *ngIf="selectedFiles.length > 0">
-            <div *ngFor="let file of selectedFiles" class="file-preview">
-              <ng-container *ngIf="file.isImage; else videoTemplate">
-                <img [src]="file.src" class="file-image" />
-              </ng-container>
-              <ng-template #videoTemplate>
-                <video [src]="file.src" class="file-image" controls></video>
-              </ng-template>
-              <ion-button (click)="removeFile(file)" fill="clear" class="remove-button">
-                <ion-icon name="trash"></ion-icon>
-              </ion-button>
-            </div>
-          </div>
-        </div>
-      </ion-item>
-    </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="title" required>
@@ -40,6 +41,32 @@
       <label for="input-content" class="label">正文</label>
       <div class="underline"></div>
     </div>
+
+    <ion-item>
+      <ion-label position="stacked">标记地点</ion-label>
+      <ion-select interface="popover" [(ngModel)]="location" name="location">
+      </ion-select>
+    </ion-item>
+
+    <!-- 公开可见开关 -->
+    <div class="input-container">
+      <ion-item class="custom-select">
+        <ion-label>可见性</ion-label>
+        <ion-select [(ngModel)]="visibility" name="publicVisibility">
+          <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>
+      <ion-label>高级选项</ion-label>
+      <ion-checkbox [(ngModel)]="saveToAlbum" name="saveToAlbum">保存到相册</ion-checkbox>
+    </ion-item>
+
   </form>
 </ion-content>
 

travel-app/src/app/tab3/tab3.page.scss

@@ -2,6 +2,10 @@ ion-content.custom-content {
   --background: #F5EBE0; // 替换#your-color-code为你想要的颜色
 }
 
+.custom-button {
+  --background: #d0a87d; // 替换#your-color-code为你想要的颜色
+}
+
 /* 输入容器 */
 .input-container {
   position: relative;
@@ -89,8 +93,8 @@ ion-content.custom-content {
 
 /* 加号图标样式 */
 .upload-icon {
-  font-size: 40px; /* 加号图标的大小 */
-  color: #007bff; /* 加号图标的颜色 */
+  font-size: 50px; /* 加号图标的大小 */
+  color: #26292b; /* 加号图标的颜色 */
 }
 
 /* 文件预览容器 */
@@ -116,17 +120,13 @@ ion-content.custom-content {
   border-radius: 10px; /* 圆角 */
 }
 
-/* 删除按钮样式 */
-.remove-button {
-  position: absolute; /* 绝对定位 */
-  top: 5px; /* 距离顶部 */
-  right: 5px; /* 距离右侧 */
-  z-index: 3; /* 设置较高的z-index值以确保按钮在图片上方 */
+.custom-select {
+  font-size: 14px; /* 设置字体大小 */
+  color: rgba(74, 72, 72, 0.7); /* 设置字体颜色为淡色 */
 }
 
 /* 修正ion-item的样式，使其居左 */
 ion-item {
   --background: #F5EBE0;
   margin: 10px 0;
-  text-align: left; /* 使内容左对齐 */
 }

travel-app/src/app/tab3/tab3.page.ts

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { addIcons } from 'ionicons';
-import { add } from 'ionicons/icons';
+import { add,close} from 'ionicons/icons';
+
 
 @Component({
   selector: 'app-tab3',
@@ -20,15 +21,20 @@ export class Tab3Page {
   postTitle: string = '';
   postContent: string = '';
   selectedFiles: { src: string | ArrayBuffer | null, isImage: boolean }[] = []; // 用于存储多个文件信息
+  location: string = ''; // 新增属性，用于存储地点
+  isPublic: boolean = true; // 新增属性，用于存储公开可见状态
+  saveToAlbum: boolean = false; // 新增属性，用于存储是否保存到相册
+  visibility: string = 'none'; // 初始化可见性变量，默认值可以根据需求设定
 
   constructor() {
-    addIcons({ add });
+    addIcons({ add,close });
   }
 
+
   onFilesSelected(event: Event) {
     // 清空已选文件数组
     this.selectedFiles = [];
-    
+
     const files = (event.target as HTMLInputElement).files;
     if (files) {
       for (let i = 0; i < files.length; i++) {
@@ -55,11 +61,19 @@ export class Tab3Page {
         title: this.postTitle,
         content: this.postContent,
         files: this.selectedFiles,
+        location: this.location, // 新增属性
+        isPublic: this.isPublic, // 新增属性
+        saveToAlbum: this.saveToAlbum, // 新增属性
+        visibility: this.visibility, // 将可见性信息包含在发布的数据中
       });
       // 清空表单
       this.postTitle = '';
       this.postContent = '';
       this.selectedFiles = [];
+      this.location = ''; // 清空地点
+      this.isPublic = true; // 重置公开可见状态
+      this.saveToAlbum = false; // 重置保存到相册状态
+      this.visibility = 'none'; // 重置可见性
     } else {
       console.log('标题和正文不能为空');
     }