final

src/app/app-routing.module.ts

@@ -67,6 +67,7 @@ const routes: Routes = [
       },
     ]
   },
+  
 ];
 @NgModule({
   imports: [

src/app/tab4/items.service.ts → src/app/tab2/items.service .ts

@@ -38,9 +38,9 @@ export class ItemsService {
     if (queryParams.duration) {
       query.equalTo('duration', queryParams.duration);
     }//持续时长 Number
-    if (queryParams.startDate) {
-      query.equalTo('startDate', queryParams.startDate);
-    }//开始时间 Date
+    // if (queryParams.startDate) {
+    //   query.equalTo('startDate', queryParams.startDate);
+    // }//开始时间 Date
     if (queryParams.status) {
       query.equalTo('status', queryParams.status);
     }//丢失或拾取 string
@@ -49,7 +49,7 @@ export class ItemsService {
     }//参与对象 string
     if (queryParams.time) {
       query.equalTo('time', queryParams.time);
-    }//时间 Date
+    }//时间 string
     if (queryParams.name) {
       query.equalTo('name', queryParams.name);
     }//名称 string
@@ -73,4 +73,31 @@ export class ItemsService {
     // query.equalTo('repliesId', queryParams.repliesId);
     return await query.find();
   }
+
+  async saveItem(data: any): Promise<Parse.Object> {
+    const item = new this.Items();
+    item.set('title', data.title);
+    item.set('category', data.category);
+    item.set('publisher', data.publisher);
+    item.set('headImage', data.headImage);
+    item.set('image', data.image);
+    item.set('content', data.content);
+    item.set('amount', data.amount);
+    item.set('location', data.location);
+    item.set('duration', data.duration);
+    item.set('startDate', data.startDate);
+    item.set('status', data.status);
+    item.set('target', data.target);
+    item.set('time', data.time);
+    item.set('name', data.name);
+    item.set('repliesId', data.repliesId);
+
+    try {
+      const savedItem = await item.save();
+      return savedItem;
+    } catch (error) {
+      console.error('保存数据失败:', error);
+      throw error;
+    }
+  }
 }

src/app/tab2/tab2.page.html

@@ -1,155 +1,36 @@
-
-<ion-header>
+<ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>发布信息</ion-title>
+    <!-- <ion-title>首页</ion-title> -->
+    <ion-searchbar [(ngModel)]="searchTitle" (ionChange)="searchItems()"></ion-searchbar>
+    <ion-buttons slot="end">
+      <ion-button (click)="sortItemsByAmount()">按金额排序</ion-button>
+      <ion-button routerLink="./tab4" >发布</ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
-
-  <ion-item>
-    <ion-label>选择活动类型</ion-label>
-    <ion-select [(ngModel)]="selectedType" (ionChange)="onChangeActivityType()">
-      <ion-select-option value="help">求助</ion-select-option>
-      <ion-select-option value="product">二手物品</ion-select-option>
-      <ion-select-option value="event">活动</ion-select-option>
-      <ion-select-option value="lostFound">失物招领</ion-select-option>
-    </ion-select>
-  </ion-item>
-
-  <!-- 求助表单 -->
-  <ng-container *ngIf="selectedType === 'help'">
-    <ion-item>
-      <ion-label position="floating">标题</ion-label>
-      <ion-input [(ngModel)]="help.title" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">内容</ion-label>
-      <ion-textarea [(ngModel)]="help.content" required></ion-textarea>
-    </ion-item>
-  </ng-container>
-
-  <!-- 二手物品表单 -->
-  <ng-container *ngIf="selectedType === 'product'">
-    <ion-item>
-      <ion-label position="floating">产品名称</ion-label>
-      <ion-input [(ngModel)]="product.name" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">金额</ion-label>
-      <ion-input type="number" [(ngModel)]="product.amount" required></ion-input>
-    </ion-item>
-    
-    <ion-item>
-      <ion-label position="floating">地点</ion-label>
-      <ion-input [(ngModel)]="product.location" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">图片上传</ion-label>
-      <ion-input type="file" (change)="onProductImageSelected($event)" accept="image/*"></ion-input>
-    </ion-item>
-  </ng-container>
-  
-
-  <!-- 失物招领表单 -->
-  <ng-container *ngIf="selectedType === 'lostFound'">
-    <ion-item>
-      <ion-label position="floating">物品名称</ion-label>
-      <ion-input [(ngModel)]="lostFound.itemName" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label>丢失/拾取</ion-label>
-      <ion-select [(ngModel)]="lostFound.status" required>
-        <ion-select-option value="lost">丢失</ion-select-option>
-        <ion-select-option value="found">拾取</ion-select-option>
-      </ion-select>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">地点</ion-label>
-      <ion-input [(ngModel)]="lostFound.location" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">大致时间</ion-label>
-      <ion-input type="datetime-local" [(ngModel)]="lostFound.time" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">备注</ion-label>
-      <ion-textarea [(ngModel)]="lostFound.remarks"></ion-textarea>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">图片上传</ion-label>
-      <ion-input type="file" (change)="onLostFoundImageSelected($event)" accept="image/*"></ion-input>
-    </ion-item>
-  </ng-container>
-
-  <!-- 活动表单 -->
-  <ng-container *ngIf="selectedType === 'event'">
-    <ion-item>
-      <ion-label position="floating">活动名称</ion-label>
-      <ion-input [(ngModel)]="event.name" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">可参与对象</ion-label>
-      <ion-input [(ngModel)]="event.participants" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">开始时间</ion-label>
-      <ion-input type="datetime-local" [(ngModel)]="event.startTime" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">持续时长</ion-label>
-      <ion-input type="number" [(ngModel)]="event.duration" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">地点</ion-label>
-      <ion-input [(ngModel)]="event.location" required></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="floating">备注</ion-label>
-      <ion-textarea [(ngModel)]="event.remarks"></ion-textarea>
-    </ion-item>
-  </ng-container>
-
-  <ion-button expand="block" (click)="submitForm()">发布</ion-button>
-
-  <!-- 提交后显示的信息 -->
-  <ion-card *ngIf="submitted">
-    <ion-card-header>
-      已发布信息
+<ion-content>
+  <ion-segment [(ngModel)]="selectedCategory" (ionChange)="filterItemsByCategory(selectedCategory)">
+    <ion-segment-button value="求助" (ionSelect)="filterItemsByCategory('求助')">求助</ion-segment-button>
+    <ion-segment-button value="二手交易" (ionSelect)="filterItemsByCategory('二手交易')">二手交易</ion-segment-button>
+    <ion-segment-button value="失物招领" (ionSelect)="filterItemsByCategory('失物招领')">失物招领</ion-segment-button>
+    <ion-segment-button value="活动" (ionSelect)="filterItemsByCategory('活动')">活动</ion-segment-button>
+  </ion-segment>
+
+  <ion-card *ngFor="let item of itemsList" [routerLink]="getDetailPageLink(item)">
+    <ion-card-header *ngIf="item.get('category') === selectedCategory || !selectedCategory">
+      <ion-card-title>{{ item.title }}</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <p><strong>类型:</strong> {{ selectedType }}</p>
-      <!-- 根据类型显示不同的表单项内容 -->
-      <ng-container *ngIf="selectedType === 'help'">
-        <p><strong>标题:</strong> {{ help.title }}</p>
-        <p><strong>内容:</strong> {{ help.content }}</p>
-      </ng-container>
-      <ng-container *ngIf="selectedType === 'product'">
-        <p><strong>产品名称:</strong> {{ product.name }}</p>
-        <p><strong>金额:</strong> {{ product.amount }}</p>
-        <p><strong>时间:</strong> {{ product.time }}</p>
-        <p><strong>地点:</strong> {{ product.location }}</p>
-        <p><strong>图片:</strong> <img [src]="productImageUrl" width="200"></p>
-      </ng-container>
-      <ng-container *ngIf="selectedType === 'lostFound'">
-        <p><strong>物品名称:</strong> {{ lostFound.itemName }}</p>
-        <p><strong>状态:</strong> {{ lostFound.status }}</p>
-        <p><strong>地点:</strong> {{ lostFound.location }}</p>
-        <p><strong>大致时间:</strong> {{ lostFound.time }}</p>
-        <p><strong>备注:</strong> {{ lostFound.remarks }}</p>
-        <p><strong>图片:</strong> <img [src]="lostFoundImageUrl" width="200"></p>
-      </ng-container>
-      <ng-container *ngIf="selectedType === 'event'">
-        <p><strong>活动名称:</strong> {{ event.name }}</p>
-        <p><strong>可参与对象:</strong> {{ event.participants }}</p>
-        <p><strong>开始时间:</strong> {{ event.startTime }}</p>
-        <p><strong>持续时长:</strong> {{ event.duration }}</p>
-        <p><strong>地点:</strong> {{ event.location }}</p>
-        <p><strong>备注:</strong> {{ event.remarks }}</p>
-      </ng-container>
+      <div class="item-container">
+        <ion-avatar class="avatar-container">
+          <ion-img [src]="item.get('headImage')" alt="头像"></ion-img>
+        </ion-avatar>
+        <div class="info-container">
+          <p class="publisher">{{item.get("publisher")}}</p>
+          <h2 class="title">{{item.get("title")}}</h2>
+          <p *ngIf="(selectedCategory === '二手交易' || item.get('category') === '二手交易') && item.get('amount')" class="amount">￥{{item.get("amount")}}</p>
+        </div>
+      </div>
     </ion-card-content>
-  </ion-card>
-
-</ion-content>
-
-
+  </ion-card>

src/app/tab2/tab2.page.scss

@@ -1,254 +1,22 @@
-
-.selected-image {
-  max-width: 100%;
-  height: auto;
+.item-container {
+  display: flex;
+  align-items: center;
 }
-/* 主题颜色 */
-:root {
-    --primary-color: #28a745; /* 清新绿色 */
-  }
-  
-  /* 全局样式 */
-  body {
-    font-family: Arial, sans-serif;
-    background-color: #ffffff; /* 背景色 */
-    margin: 0;
-    padding: 0;
-  }
-  
-  .container {
-    max-width: 800px;
-    height: 900px;
-    // margin: 20px auto;
-    padding: 20px;
-    background-color: #fbfdf8;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  }
-  
-  .form-section {
-    display: none;
-    padding: 20px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #f9f9f9;
-    margin-bottom: 20px;
-    min-height: 500px; /* 统一表单的最小高度 */
-  }
 
-  p {
-    color: var(--primary-color);
-    // margin-bottom: 10px;
-    // background-color: rgb(250, 252, 238);
-    margin: 0;
-    padding:0;
-    height: 40px;
-    padding-top: 10px;
-    padding-left: 20px;
-    font-size:18px;
-    font-weight: bold;
-  }
-  
-  .input-group {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-  .price-label {
-    margin-right: 5px;
-  }
-  .price-input {
-    flex: 1;
-  }
-  .price-number {
-    color: red;
-    font-weight: bold;
-  }
-  
-  form {
-    display: grid;
-    gap: 15px;
-  }
-  
-  .card {
-    // padding-top:-100px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    // padding: 15px;
-    border-radius: 15px;
-    background-color: #fff;
-    height: 520px;
-    // width: 60px;
-  }
-  .card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin: 10px;
-    padding: 10px;
+.avatar-container {
+  margin-left: 10px;
 }
 
-.card img {
-    max-width: 100%;
-    height: auto;
+.info-container {
+  margin-left: 10px;
 }
 
-.price-label {
-    color: red;
+.amount {
+  color: red;
+  margin-right:20px
 }
 
-  #imgcard{
-    width: 150px;
-  }
-
-  .custom-file-upload {
-    display: block;
-    margin-top: 10px;
-    font-size: 16px;
-    color: #333;
-    width: 100px; /* 设置宽度为90px */
-    height: 100px; /* 设置高度为90px */
-    text-align: center;
-  }
-  
-  .file-upload-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    border: 2px dashed #ccc; /* 灰色边框 */
-    border-radius: 4px;
-    background-color: #f2f2f2; /* 灰色背景 */
-  }
-  
-  .upload-text {
-    display: inline-block;
-    padding: 10px 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
-
-
-  #publishCard{
-    height: 400px;
-  }
-
-  #activityCard{
-    height: 190px;
-  }
-/* 隐藏原生的文件选择按钮 */
-#file-upload {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-}
-
-
-  #last{
-    height: 100px;
-  }
-
-  #prise{
-    padding-top: 2px;
-  }
-  .card-header {
-    background-color: var(--primary-color);
-    color: #fff;
-    padding: 10px 15px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-  
-  .card-content {
-    padding: 15px;
-    // height: 400px;
-  }
-  
-  label {
-    font-weight: bold;
-  }
-  
-  input[type="text"],
-  input[type="number"],
-  select,
-  textarea {
-    width: 100%;
-    padding: 8px;
-    margin-top: 5px;
-    margin-bottom: 15px;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    box-sizing: border-box;
-  }
-  
-  textarea {
-    resize: vertical; /* 垂直方向可拉伸 */
-  }
-  
-  button[type="submit"] {
-    background-color: var(--primary-color);
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 3px;
-    cursor: pointer;
-  }
-  
-  button[type="submit"]:hover {
-    background-color: #218838; /* 深一点的绿色 */
-  }
-  
-  .input-group {
-    display: flex;
-    align-items: center;
-  }
-  
-  .input-group-addon {
-    background-color: #ddd;
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-right: none;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  
-  .input-group-addon:last-child {
-    border-right: 1px solid #ccc;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  
-  .preview {
-    margin-top: 10px;
-  }
-  
-  .preview img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 5px;
-  }
-  
-  .tags {
-    margin-top: 10px;
-  }
-  
-  .tag {
-    display: inline-block;
-    background-color: #17a2b8; /* 蓝色 */
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 3px;
-    margin-right: 5px;
-  }
-  
-  .tag.secondary {
-    background-color: #ffc107; /* 橙色 */
-  }
-  
+ion-card h2 {
+  color: #000000; /* 设置字体颜色为黑色 */
+  font-size: 1.2em; /* 设置字体大小为1.2em */
+}

src/app/tab2/tab2.page.ts

@@ -1,83 +1,59 @@
-import { Component } from '@angular/core';
-import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { NavController } from '@ionic/angular';
+import { Component, OnInit } from '@angular/core';
+import { ItemsService } from './items.service ';
+
+// 引用Parse JS SDK
+import Parse from "parse";
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
 
 @Component({
   selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
-  
+  templateUrl: './tab2.page.html',
+  styleUrls: ['./tab2.page.scss'],
 })
-export class Tab2Page {
-  selectedType: string;
-  help: any = { title: '', content: '' };
-  product: any = { name: '', amount: null, time: '', location: '' };
-  event: any = { name: '', participants: '', startTime: '', duration: '', location: '', remarks: '' };
-  lostFound: any = { itemName: '', status: '', location: '', time: '', remarks: '' };
-  submitted: boolean = false;
-  submittedData: any = null;
-  productImage: File|undefined;
-  lostFoundImage: File|undefined;
-  productImageUrl: string|undefined;
-  lostFoundImageUrl: string|undefined;
+export class Tab2Page implements OnInit {
 
-  setProductImageUrl(url: string) {
-    this.productImageUrl = url;
-  }
+  itemsList: any[] = [];
+  searchTitle: string = '';
+  selectedCategory: string = '';
 
-  // Example method to set lostFound image URL
-  setLostFoundImageUrl(url: string) {
-    this.lostFoundImageUrl = url;
+  constructor(private itemsService: ItemsService) { }
+
+  ngOnInit() {
+    this.getItems();
   }
-  // Function to handle product image selection
-  onProductImageSelected(event: any) {
-    this.productImage = event.target.files[0];
+
+  async getItems() {
+    this.itemsList = await this.itemsService.getItems({});
   }
 
-  // Function to handle lostFound image selection
-  onLostFoundImageSelected(event: any) {
-    this.lostFoundImage = event.target.files[0];
+  async searchItems() {
+    this.itemsList = await this.itemsService.getItems({ title: this.searchTitle });
   }
-  constructor() {
-    this.selectedType = 'help'; // 默认选择求助类型
+
+  async filterItemsByCategory(category: string) {
+    this.selectedCategory = category;
+    this.itemsList = await this.itemsService.getItems({ category });
   }
 
-  onChangeActivityType() {
-    // Reset form data when type changes
-    this.clearFormData();
-    this.submitted = false;
-    this.submittedData = null;
+  // 添加sortItemsByAmount()方法来实现金额排序功能
+  sortItemsByAmount() {
+    this.itemsList.sort((a, b) => (a.get('amount') || 0) - (b.get('amount') || 0));
   }
-  
-  submitForm() {
-    // Save submitted data and display it
-    this.submitted = true;
-    switch (this.selectedType) {
-      case 'help':
-        this.submittedData = { ...this.help };
-        break;
-      case 'product':
-        this.submittedData = { ...this.product };
-        break;
-      case 'event':
-        this.submittedData = { ...this.event };
-        break;
-      case 'lostFound':
-        this.submittedData = { ...this.lostFound };
-        break;
-      default:
-        this.submittedData = null;
+
+  getDetailPageLink(item: any) {
+    let category = item.get('category');
+    let route = '';
+    if (category === '求助') {
+      route = '/resort';
+    } else if (category === '二手交易') {
+      route = '/trade';
+    } else if (category === '失物招领') {
+      route = '/lostfound';
+    } else if (category === '活动') {
+      route = '/activity';
     }
-    this.clearFormData();
+    return [route, { id: item.id, category: category }];
   }
 
-  clearFormData() {
-    // Reset all form data
-    this.help = { title: '', content: '' };
-    this.product = { name: '', amount: null, time: '', location: '' };
-    this.event = { name: '', participants: '', startTime: '', duration: '', location: '', remarks: '' };
-    this.lostFound = { itemName: '', status: '', location: '', time: '', remarks: '' };
-  }
-  
 }

src/app/tab4/tab4.page.html

@@ -1,35 +1,100 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <!-- <ion-title>首页</ion-title> -->
-    <ion-searchbar [(ngModel)]="searchTitle" (ionChange)="searchItems()"></ion-searchbar>
-    <ion-buttons slot="end">
-      <ion-button routerLink="../tab2" >发布</ion-button>
-    </ion-buttons>
+    <ion-title>发布信息</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-segment [(ngModel)]="selectedCategory" (ionChange)="filterItemsByCategory(selectedCategory)">
-    <ion-segment-button value="求助" (ionSelect)="filterItemsByCategory('求助')">求助</ion-segment-button>
-    <ion-segment-button value="二手交易" (ionSelect)="filterItemsByCategory('二手交易')">二手交易</ion-segment-button>
-    <ion-segment-button value="失物招领" (ionSelect)="filterItemsByCategory('失物招领')">失物招领</ion-segment-button>
-    <ion-segment-button value="活动" (ionSelect)="filterItemsByCategory('活动')">活动</ion-segment-button>
-  </ion-segment>
+  <ion-item>
+    <ion-label>选择活动类型</ion-label>
+    <ion-select [(ngModel)]="selectedType">
+      <ion-select-option value="求助">求助</ion-select-option>
+      <ion-select-option value="二手交易">二手交易</ion-select-option>
+      <ion-select-option value="失物招领">失物招领</ion-select-option>
+      <ion-select-option value="活动">活动</ion-select-option>
+    </ion-select>
+  </ion-item>
 
-  <ion-card *ngFor="let item of itemsList" [routerLink]="getDetailPageLink(item)">
-    <ion-card-header *ngIf="item.get('category') === selectedCategory || !selectedCategory">
-      <ion-card-title>{{ item.title }}</ion-card-title>
+  <ion-item *ngIf="selectedType === '求助'">
+    <ion-label position="floating">标题</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.title"></ion-input>
+    <ion-label position="floating">内容</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.content"></ion-input>
+  </ion-item>
+
+  <ion-item *ngIf="selectedType === '二手交易'">
+    <ion-label position="floating">标题</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.title"></ion-input>
+    <ion-label position="floating">金额</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.amount"></ion-input>
+    <ion-label position="floating">产品</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.name"></ion-input>
+    <ion-label position="floating">地点</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.location"></ion-input>
+    <ion-label position="floating">内容</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.content"></ion-input>
+    <ion-label position="floating">选择图片</ion-label>
+    <input type="file" (change)="onFileChange($event)">
+  </ion-item>
+
+  <ion-item *ngIf="selectedType === '失物招领'">
+    <ion-label position="floating">标题</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.title"></ion-input>
+    <ion-label position="floating">物品</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.name"></ion-input>
+    <ion-label position="floating">状态</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.status"></ion-input>
+    <ion-label position="floating">时间</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.time"></ion-input>
+    <ion-label position="floating">地点</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.location"></ion-input>
+    <ion-label position="floating">内容</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.content"></ion-input>
+    <ion-label position="floating">选择图片</ion-label>
+    <input type="file" (change)="onFileChange($event)">
+  </ion-item>
+
+  <ion-item *ngIf="selectedType === '活动'">
+    <ion-label position="floating">标题</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.title"></ion-input>
+    <ion-label position="floating">活动名</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.name"></ion-input>
+    <ion-label position="floating">可参与对象</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.target"></ion-input>
+    <ion-label position="floating">开始时间</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.time"></ion-input>
+    <ion-label position="floating">时长</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.duration"></ion-input>
+    <ion-label position="floating">地点</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.location"></ion-input>
+    <ion-label position="floating">内容</ion-label>
+    <ion-input type="text" [(ngModel)]="formData.content"></ion-input>
+  </ion-item>
+
+  <ion-button expand="block" (click)="submitForm()">保存</ion-button>
+
+  <!-- 显示保存后的数据 -->
+  <ion-card *ngIf="savedItems.length > 0">
+    <ion-card-header>
+      已保存的数据
     </ion-card-header>
     <ion-card-content>
-      <div class="item-container">
-        <ion-avatar class="avatar-container">
-          <ion-img [src]="item.get('headImage')" alt="头像"></ion-img>
-        </ion-avatar>
-        <div class="info-container">
-          <p class="publisher">{{item.get("publisher")}}</p>
-          <h2 class="title">{{item.get("title")}}</h2>
-          <p *ngIf="(selectedCategory === '二手交易' || item.get('category') === '二手交易') && item.get('amount')" class="amount">￥{{item.get("amount")}}</p>
-        </div>
-      </div>
+      <ion-list>
+        <ion-item *ngFor="let item of savedItems">
+          <ion-label>{{ item?.get('title') }}</ion-label>
+          <ion-label>{{ item?.get('category') }}</ion-label>
+          <ion-label>{{ item?.get('headImage') }}</ion-label>
+          <ion-label>{{ item?.get('image') }}</ion-label>
+          <ion-label>{{ item?.get('content') }}</ion-label>
+          <ion-label>{{ item?.get('amount') }}</ion-label>
+          <ion-label>{{ item?.get('location') }}</ion-label>
+          <ion-label>{{ item?.get('duration') }}</ion-label>
+          <ion-label>{{ item?.get('status') }}</ion-label>
+          <ion-label>{{ item?.get('target') }}</ion-label>
+          <ion-label>{{ item?.get('time') }}</ion-label>
+          <ion-label>{{ item?.get('name') }}</ion-label>
+          <ion-label>{{ item?.get('repliesId') }}</ion-label>
+        </ion-item>
+      </ion-list>
     </ion-card-content>
   </ion-card>

src/app/tab4/tab4.page.scss

@@ -1,22 +1,22 @@
-.item-container {
-    display: flex;
-    align-items: center;
-}
+// .item-container {
+//     display: flex;
+//     align-items: center;
+// }
   
-.avatar-container {
-    margin-left: 10px;
-}
+// .avatar-container {
+//     margin-left: 10px;
+// }
   
-.info-container {
-    margin-left: 10px;
-}
+// .info-container {
+//     margin-left: 10px;
+// }
 
-.amount {
-    color: red;
-    margin-right:20px
-}
+// .amount {
+//     color: red;
+//     margin-right:20px
+// }
 
-ion-card h2 {
-    color: #000000; /* 设置字体颜色为黑色 */
-    font-size: 1.2em; /* 设置字体大小为1.2em */
-}
+// ion-card h2 {
+//     color: #000000; /* 设置字体颜色为黑色 */
+//     font-size: 1.2em; /* 设置字体大小为1.2em */
+// }

src/app/tab4/tab4.page.ts

@@ -1,54 +1,71 @@
-import { Component, OnInit } from '@angular/core';
-import { ItemsService } from './items.service';
-
-// 引用Parse JS SDK
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular'; // 导入NavController
+import { ItemsService } from '../tab2/items.service ';
 import Parse from "parse";
-Parse.initialize("dev"); // 设置applicationId
-Parse.serverURL = "https://web2023.fmode.cn/parse"; // 设置serverURL
+import { AlertController } from '@ionic/angular'; // 导入AlertController
 
 @Component({
   selector: 'app-tab4',
-  templateUrl: './tab4.page.html',
-  styleUrls: ['./tab4.page.scss'],
+  templateUrl: 'tab4.page.html',
+  styleUrls: ['tab4.page.scss']
 })
-export class Tab4Page implements OnInit {
-
-  itemsList: any[] = [];
-  searchTitle: string = '';
-  selectedCategory: string = '';
+export class Tab4Page {
+  formData: any = {}; // 用于存储表单数据
+  selectedType: string = ''; // 选择的类型
+  savedItems: Parse.Object[] = []; // 保存后的数据
 
-  constructor(private itemsService: ItemsService) { }
+  constructor(private itemsService: ItemsService, private navCtrl: NavController, private alertController: AlertController) {}
 
-  ngOnInit() {
-    this.getItems();
-  }
+  async submitForm() {
+    if (!this.selectedType || !this.formData.title) {
+      const alert = await this.alertController.create({
+        header: '错误',
+        message: '请选择类型并填写标题后再保存数据',
+        buttons: ['确定']
+      });
+      await alert.present();
+      return; // 阻止保存数据
+    }
+    switch (this.selectedType) {
+      case '求助':
+        this.formData.category = '求助';
+        break;
+      case '二手交易':
+        this.formData.category = '二手交易';
+        break;
+      case '失物招领':
+        this.formData.category = '失物招领';
+        break;
+      case '活动':
+        this.formData.category = '活动';
+        break;
+      default:
+        break;
+    }
 
-  async getItems() {
-    this.itemsList = await this.itemsService.getItems({});
+    this.formData.amount = parseFloat(this.formData.amount); // 将 amount 字段的值转换为 Number 类型
+    this.itemsService.saveItem(this.formData).then((savedItem) => {
+      console.log('保存成功:', savedItem);
+      // 导航到首页并传递保存的数据
+      this.navCtrl.navigateRoot('/tabs/tab4', { state: { savedItems: [savedItem] } });
+    }).catch((error) => {
+      console.error('保存失败:', error);
+    });
   }
 
-  async searchItems() {
-    this.itemsList = await this.itemsService.getItems({ title: this.searchTitle });
-  }
+  onFileChange(event: Event) {
+    const fileInput = (event.target as HTMLInputElement);
+    const file = fileInput?.files?.[0];
 
-  async filterItemsByCategory(category: string) {
-    this.selectedCategory = category;
-    this.itemsList = await this.itemsService.getItems({ category });
-  }
+    if (file) {
+        const parseFile = new Parse.File('image.jpg', file);
 
-  getDetailPageLink(item: any) {
-    let category = item.get('category');
-    let route = '';
-    if (category === '求助') {
-      route = '/resort';
-    } else if (category === '二手交易') {
-      route = '/trade';
-    } else if (category === '失物招领') {
-      route = '/lostfound';
-    } else if (category === '活动') {
-      route = '/activity';
+        parseFile.save().then((savedFile) => {
+            this.formData.image = savedFile.url();
+        }).catch((error) => {
+            console.error('Error saving file: ', error);
+        });
     }
-    return [route, { id: item.id, category: category }];
   }
-
-}
+  
+}

src/app/tabs/tabs-routing.module.ts

@@ -12,21 +12,22 @@ const routes: Routes = [
         loadChildren: () => import('../contact/session/session.module').then(m => m.SessionPageModule)
       },
       {
-        path: 'tab2',
-        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
+        path: 'tab4',
+        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
       },
       {
         path: 'tab3',
         loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
       },
       {
-        path: 'tab4',
-        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
+        path: 'tab2',
+        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
       },
       {
         path: 'tab5',
         loadChildren: () => import('../contact/contact-list/contact-list.module').then(m => m.ContactListPageModule)
       },
+      
       {
         path: '',
         redirectTo: '/tabs/tab1',

src/app/tabs/tabs.page.html

@@ -2,7 +2,7 @@
 
   <ion-tab-bar slot="bottom">
 
-    <ion-tab-button tab="tab4" href="/tabs/tab4">
+    <ion-tab-button tab="tab2" href="/tabs/tab2">
       <ion-icon aria-hidden="true" name="square"></ion-icon>
       <ion-label>首页</ion-label>
     </ion-tab-button>
@@ -12,7 +12,7 @@
       <ion-label>消息</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
+    <ion-tab-button tab="tab4" href="/tabs/tab4">
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
       <ion-label>发布</ion-label>
     </ion-tab-button>