01

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+      "ionic.ionic"
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/standalone"]
+}

src/app/app-routing.module.ts

@@ -19,7 +19,7 @@ const routes: Routes = [
     loadChildren: () => import('./borrow/borrow.module').then( m => m.BorrowPageModule)
   },
   {
-    path: 'request',
+    path: 'request/:id',
     loadChildren: () => import('./request/request.module').then( m => m.RequestPageModule)
   }
 ];

src/app/details-book/details-book.page.html

@@ -1,6 +1,9 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title (click)="back()">detailsBook</ion-title>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>detailsBook</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -83,7 +86,7 @@
       
     <ion-card *ngFor="let item of items">
       <ion-card-header>
-        <ion-card-title style="font-size: x-small;">馆藏地：{{item.title}}</ion-card-title>
+        <ion-card-title style="font-size: x-small;">馆藏地：{{item.get("title")}}</ion-card-title>
       </ion-card-header>
 
       <ion-card-content>
@@ -91,19 +94,19 @@
           <ion-row>
             <ion-col size="6">
               <ion-text style="font-size: x-small;">
-                索书号：{{item.callNumber}}<br>
-                书刊状态：{{item.bookStatus}}<br>
-                入藏日期：{{item.depositDate}}<br>
-                年卷期：{{item.annualRollPeriod}}
+                索书号：{{item.get('callNumber')}}<br>
+                书刊状态：{{item.get('bookStatus')}}<br>
+                入藏日期：{{item.get('depositDate')}}<br>
+                年卷期：{{item.get('annualRollPeriod')}}
               </ion-text>
             </ion-col>
   
             <ion-col size="6">
               <ion-text style="font-size: x-small;">
-                条码号：{{item.barCodeNumber}}<br>
-                借阅属性：{{item.borrowingProperties}}<br>
-                排架号：{{item.shelvingNumber}}<br>
-                捐赠人：{{item.donor}}
+                条码号：{{item.get('barCodeNumber')}}<br>
+                借阅属性：{{item.get('borrowingProperties')}}<br>
+                排架号：{{item.get('shelvingNumber')}}<br>
+                捐赠人：{{item.get('donor')}}
               </ion-text>
             </ion-col>
           </ion-row>
@@ -149,7 +152,7 @@
           </ion-card>
         </ion-col>
         <ion-col size="2">
-          <ion-button class="white-button" >请求</ion-button>
+          <ion-button class="white-button" (click)="onClickRequest($event)">请求</ion-button>
           <ion-button class="white-button" >取消</ion-button>
         </ion-col>
       </ion-row>

src/app/details-book/details-book.page.scss

@@ -48,4 +48,8 @@ ion-content {
     color: white; /* 设置按钮文字颜色为白色 */
   }
 
+  ion-back-button::part(text) {
+    display: none;
+  }
+
 

src/app/details-book/details-book.page.ts

@@ -23,19 +23,6 @@ interface BookInfo {
   callNumber: string;
   yearVolumeIssue: string;
 }
-
-interface ItemInfo  {
-  title:string;
-  callNumber:string;
-  barCodeNumber:string;
-  bookStatus:string;
-  borrowingProperties:string;
-  depositDate:string;
-  shelvingNumber:string;
-  annualRollPeriod:string;
-  donor:string;
-}
-
 // 引用Parse JS SDK
 
 Parse.initialize("dev"); // 设置applicationId
@@ -47,9 +34,9 @@ Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
   styleUrls: ['./details-book.page.scss']
 })
 export class DetailsBookPage implements OnInit {
-  bookList:Array<Parse.Object> = []
-  bookInfo:Parse.Object|undefined
-  items:ItemInfo[] = [];
+  bookList:any[] = [];
+  bookInfo:any;
+  items:any[] = [];
   book:BookInfo={
     src: '',
     title: '',
@@ -86,27 +73,27 @@ export class DetailsBookPage implements OnInit {
   
 
   constructor(
+    private router: Router,
     private route:ActivatedRoute,
     private navCtrl:NavController,
     private alertController:AlertController
   ) {}
 
   ngOnInit() {
-    this.loadPetById()
-    this.loadAWBook()
-    this.generateItems();
+    this.loadBookById()
+    // this.generateItems();
     this.makeStarList();
   }
 
-  async loadPetById(){
+  async loadBookById(){
     // let id = location.pathname.split("/").pop();
     let id = this.route.snapshot.params["id"]
     
     if(id){
       let query = new Parse.Query("AWBook");
       this.bookInfo = await query.get(id);
-      // this.value = this.bookInfo.get("value");
       this.initBookInfo(this.bookInfo);
+      this.loadItemByBookTitle(this.bookInfo);
     }
   }
 
@@ -131,30 +118,34 @@ export class DetailsBookPage implements OnInit {
     this.book.yearVolumeIssue = bookInfo.get("yearVolumeIssue");
   }
 
-  async loadAWBook(){
-    let query = new Parse.Query("AWBook");
-    let list = await query.find();
-    this.bookList = list
-  }
+  async loadItemByBookTitle(bookInfo:Parse.Object){
+    let query = new Parse.Query("AWItem");
+    query.equalTo("bookTitle", bookInfo.get("title")); 
 
-  private generateItems() {
-    const count = this.items.length + 1;
-    for (let i = 0; i < 5; i++) {
-      let item:ItemInfo = {
-        title:"111",
-        callNumber:"",
-        barCodeNumber:"",
-        bookStatus:"",
-        borrowingProperties:"",
-        depositDate:"",
-        shelvingNumber:"",
-        annualRollPeriod:"",
-        donor:""
-      }
-      this.items.push(item);
-    }
+    let bookInfoList = await query.find();
+    this.items = bookInfoList;
   }
 
+
+
+  // private generateItems() {
+  //   const count = this.items.length + 1;
+  //   for (let i = 0; i < 5; i++) {
+  //     let item:ItemInfo = {
+  //       title:"111",
+  //       callNumber:"",
+  //       barCodeNumber:"",
+  //       bookStatus:"",
+  //       borrowingProperties:"",
+  //       depositDate:"",
+  //       shelvingNumber:"",
+  //       annualRollPeriod:"",
+  //       donor:""
+  //     }
+  //     this.items.push(item);
+  //   }
+  // }
+
   onStarClick(index:number){
     let score = index + 1
 
@@ -179,8 +170,10 @@ export class DetailsBookPage implements OnInit {
     this.starCheckList = starList
   }
 
-  back(){
-    this.navCtrl.back()
+
+  onClickRequest(event:MouseEvent){
+    let id = this.route.snapshot.params["id"]
+    this.router.navigate(['request/'+id]);
   }
 
   // onIonInfinite(ev: any) {

src/app/request/request.page.html

@@ -10,12 +10,11 @@
 <ion-content class="ion-padding">
   
   <div class="book-info">
-    <img src="assets/音乐会曲.jpg" alt="Book Image">
+    <img src="{{bookInfo?.get('src')}}" alt="Book Image">
     <div class="book-details">
-      <h2>书名</h2>
-      <p class="author">作者</p>
-      <p class="publisher">出版社</p>
-      <p>其他图书信息</p>
+      <h2>{{bookInfo?.get("title")}}</h2>
+      <p class="author">{{bookInfo?.get("authors")}}</p>
+      <p class="publisher">{{bookInfo?.get("publisher")}}</p>
     </div>
   </div>
 
@@ -26,17 +25,17 @@
     </ion-item>
     <ion-item>
       <ion-label>收件人</ion-label>
-      <ion-input type="text" placeholder="请输入收件人" slot="end" style="text-align: right;"></ion-input>
+      <ion-input type="text" placeholder="请输入收件人" slot="end" style="text-align: right;" [(ngModel)]="orderInfo.consignee"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label>地址</ion-label>
-      <ion-input type="text" placeholder="请输入取书地" slot="end" style="text-align: right;"></ion-input>
+      <ion-input type="text" placeholder="请输入取书地" slot="end" style="text-align: right;" [(ngModel)]="orderInfo.address"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label>手机号码</ion-label>
-      <ion-input type="tel" placeholder="请输入手机号码" slot="end" style="text-align: right;"></ion-input>
+      <ion-input type="tel" placeholder="请输入手机号码" slot="end" style="text-align: right;"  [(ngModel)]="orderInfo.phone"></ion-input>
     </ion-item>
 
     <ion-item lines="none">
@@ -52,7 +51,7 @@
   </div>
   </ion-card>
   
-  <ion-button id="present-alert" expand="block" color="success">提交订单</ion-button>
+  <ion-button id="present-alert" expand="block" color="success" (click) = "save()">提交订单</ion-button>
   <ion-alert
     trigger="present-alert"
     header="确认订单！"

src/app/request/request.page.scss

@@ -38,6 +38,7 @@
   ion-button {
     margin-top: 20px;
   }
+  
   ion-back-button::part(text) {
     display: none;
   }

src/app/request/request.page.ts

@@ -1,15 +1,80 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { ToastController } from '@ionic/angular';
+import { TrackingService } from '../services/tracking.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NavController, ToastController } from '@ionic/angular';
+import Parse from "parse";
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
 
 @Component({
   selector: 'app-request',
   templateUrl: './request.page.html',
-  styleUrls: ['./request.page.scss'],
+  styleUrls: ['./request.page.scss']
 })
 export class RequestPage implements OnInit {
-  constructor(private toastController: ToastController,private router:Router) {}
+  orderInfo: any = {
+    consignee: '',
+    address: '',
+    phone: '',
+    title: '',
+    remark: '',
+    authors: ""
+  };
+  
+  bookInfo:any;
+  constructor(
+    private navController: NavController,
+    private toastController: ToastController,
+    private router: Router,
+    private route:ActivatedRoute,
+    private trackingService: TrackingService
+  ) {}
   ngOnInit() {
+    this.loadBookById();
+  }
+
+  save() {
+    // 创建 Parse 表对象
+    const Order = Parse.Object.extend('AWOrder');
+    let deliveryTime = new Date();
+    let status = '准备中';
+    let trackingNumber: string = this.trackingService.generateTrackingNumber();
+    let orderNumber = trackingNumber;
+    
+    // 创建
+    const newOrder = new Order();
+    newOrder.set('consignee', this.orderInfo.consignee);
+    newOrder.set('address', this.orderInfo.address);
+    newOrder.set('phone', this.orderInfo.phone);
+    newOrder.set('title', this.orderInfo.title);
+    newOrder.set('remark', this.orderInfo.remark);
+    newOrder.set('authors', this.orderInfo.authors);
+    newOrder.set('deliveryTime', deliveryTime);
+    newOrder.set('status', status);
+    newOrder.set('orderNumber', orderNumber);
+
+    // 保存新的 Book 对象到 Parse 表中
+    newOrder.save().then((savedOrder: Parse.Object) => {
+      console.log('New order added successfully:', savedOrder);
+    }).catch((error: Error) => {
+      console.error('Error adding new order:', error);
+    });
+  }
+
+  
+
+  async loadBookById(){
+    // let id = location.pathname.split("/").pop();
+    let id = this.route.snapshot.params["id"]
+    
+    if(id){
+      let query = new Parse.Query("AWBook");
+      this.bookInfo = await query.get(id);
+    }
+
+    this.orderInfo.title = this.bookInfo.get("title");
+    this.orderInfo.authors = this.bookInfo.get("authors");
+    
   }
 
   public alertButtons = [
@@ -24,7 +89,7 @@ export class RequestPage implements OnInit {
       text: '确定',
       role: 'confirm',
       handler: () => {
-        this.router.navigate(['/tabs/tab2']);
+        this.router.navigate(['/tabs/tab3']);
       },
     },
   ];
@@ -55,5 +120,6 @@ export class RequestPage implements OnInit {
       event.target.value = trimmedValue;
       currentLength = maxLength;
     }
+    this.orderInfo.remark = event.target.value;
   }
 }

src/app/services/tracking.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TrackingService {
+
+  constructor() { }
+
+  generateTrackingNumber(): string {
+    let now = new Date();
+    let year = now.getFullYear();
+    let month = now.getMonth() + 1;
+    let day = now.getDate();
+    
+    let trackingNumber = this.generateRandomNumber(1000, 9999).toString();
+    trackingNumber = year.toString() + month.toString() + day.toString() + trackingNumber;
+    return trackingNumber;
+  }
+
+  private generateRandomNumber(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+}

src/app/tab1/tab1.page.html

@@ -8,51 +8,52 @@
   <!-- 顶部搜索框 -->
   <ion-searchbar></ion-searchbar>
 
-  <div class="button-container">
-    <div class="button" (click)="onClickUser($event)">
-      <ion-icon name="person"></ion-icon>
-      <span>个人信息</span>
-    </div>
-    <div class="button" (click)="onClickBorrow($event)">
-      <ion-icon name="book"></ion-icon>
-      <span>我的借阅</span>
-    </div>
-    <div class="button">
-      <ion-icon name="podium"></ion-icon>
-      <span>排行榜</span>
-    </div>
-    <div class="button">
-      <ion-icon name="add-circle"></ion-icon>
-      <span>新书通报</span>
-    </div>
-    <div class="button">
-      <ion-icon name="cloud-download"></ion-icon>
-      <span>资源荐购</span>
-    </div>
-  </div>
-  
-  <div class="button-container">
-    <div class="button">
-      <ion-icon name="list"></ion-icon>
-      <span>书单</span>
-    </div>
-    <div class="button">
-      <ion-icon name="albums"></ion-icon>
-      <span>专题</span>
-    </div>
-    <div class="button" (click)="onClick($event)">
-      <ion-icon name="chatbox-ellipses"></ion-icon>
-      <span>我的请求</span>
-    </div>
-    <div class="button">
-      <ion-icon name="folder"></ion-icon>
-      <span>分类浏览</span>
+  <ion-card>
+    <div class="button-container">
+      <div class="button" (click)="onClickUser($event)">
+        <ion-icon name="person"></ion-icon>
+        <span>个人信息</span>
+      </div>
+      <div class="button" (click)="onClickBorrow($event)">
+        <ion-icon name="book"></ion-icon>
+        <span>我的借阅</span>
+      </div>
+      <div class="button">
+        <ion-icon name="podium"></ion-icon>
+        <span>排行榜</span>
+      </div>
+      <div class="button">
+        <ion-icon name="add-circle"></ion-icon>
+        <span>新书通报</span>
+      </div>
+      <div class="button">
+        <ion-icon name="cloud-download"></ion-icon>
+        <span>资源荐购</span>
+      </div>
     </div>
-    <div class="button">
-      <ion-icon name="library"></ion-icon>
-      <span>数据库导航</span>
+    <div class="button-container">
+      <div class="button">
+        <ion-icon name="list"></ion-icon>
+        <span>书单</span>
+      </div>
+      <div class="button">
+        <ion-icon name="albums"></ion-icon>
+        <span>专题</span>
+      </div>
+      <div class="button" (click)="onClickTab3($event)">
+        <ion-icon name="chatbox-ellipses"></ion-icon>
+        <span>我的请求</span>
+      </div>
+      <div class="button">
+        <ion-icon name="folder"></ion-icon>
+        <span>分类浏览</span>
+      </div>
+      <div class="button">
+        <ion-icon name="library"></ion-icon>
+        <span>数据库导航</span>
+      </div>
     </div>
-  </div>
+  </ion-card>
 
   <!-- 底部热读推荐 -->
   <ion-card>
@@ -62,20 +63,19 @@
     <ion-card-content>
       <!-- 图书列表 -->
       <ion-list>
-        <ion-item *ngFor="let book of books">
-          <ion-thumbnail slot="start">
-            <img [src]="book.imageUrl">
+        <ion-item *ngFor="let book of books; let i = index">
+          <ion-thumbnail slot="start" (click) = "onClickBook($event, i)" *ngIf="i < 3">
+            <img src="{{book.get('src')}}">
           </ion-thumbnail>
-          <ion-label>
-            <h2>{{book.title}}</h2>
-            <p>{{book.author}}</p>
-            <p>{{book.publisher}}</p>
-            <p>{{book.isbn}}</p>
-            <!-- 其他图书信息 -->
+          <ion-label (click) = "onClickBook($event, i)" *ngIf="i < 3">
+            <h2>{{book.get('title')}}</h2>
+            <p>{{book.get('author')}}</p>
+            <p>{{book.get('publisher')}}</p>
+            <p>{{book.get('isbn')}}</p>            
           </ion-label>
         </ion-item>
       </ion-list>
-      <ion-button expand="full">更多</ion-button>
+      <ion-button style="color: white;" (click)="onClickTab2($event)">更多</ion-button>
     </ion-card-content>
   </ion-card>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -1,23 +1,44 @@
 .button-container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  
-  .button {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
-    padding: 10px;
-    color: #edb98b;
-  }
-  
-  ion-icon {
-    font-size: 30px;
-  }
-  
-  span {
-    margin-top: 5px;
-    text-align: center;
-    font-size: 14px;
-  }
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 10px;
+  color: #ed7c1a;
+}
+
+ion-icon {
+  font-size: 30px;
+}
+
+span {
+  margin-top: 5px;
+  text-align: center;
+  font-size: 14px;
+}
+
+ion-button {
+  --background: #93e9be;
+  --background-hover: #9ce0be;
+  --background-activated: #88f4be;
+  --background-focused: #88f4be;
+
+  --color: rgb(225, 250, 217);
+
+  --border-radius: 0;
+  --border-color: #f9f5f5;
+  --border-style: solid;
+  --border-width: 1px;
+
+  --box-shadow: 0 2px 6px 0 rgb(207, 242, 195);
+
+  --ripple-color: deeppink;
+
+  --padding-top: 10px;
+  --padding-bottom: 10px;
+}

src/app/tab1/tab1.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { BookService } from '../services/book.service';
 
 @Component({
   selector: 'app-tab1',
@@ -7,42 +8,44 @@ import { Router } from '@angular/router';
   styleUrls: ['tab1.page.scss']
 })
 export class Tab1Page {
+  books: any[] = [];
+  searchQuery: string = '';
+  selectedType: string = '';
+  bookTypes: string[] = [];
+  sortByBorrowTimes: boolean = false;
+  constructor(
+    private router: Router,
+    private bookService: BookService
+  ) {}
+  ngOnInit() {
+    this.fetchBooks();
+  }
+
+  async fetchBooks() {
+    const queryParams = {
+      title: this.searchQuery,
+      type: this.selectedType,
+      sortByBorrowTimes: this.sortByBorrowTimes
+    };
+    this.books = await this.bookService.getBooks(queryParams);
+  }
 
-  constructor(private router: Router) {}
-  books: any[] = [
-    {
-      title: '中国近代名家名作宝库',
-      author: '周松平主编',
-      isbn: '7-204-05471-7',
-      publisher: '内蒙古人民出版社',
-      imageUrl: 'assets/picture/中国近代名家名作宝库.jpg',
-      // 其他图书信息
-    },
-    {
-      title: '在家过把“克隆”隐',
-      author: '陈颖著',
-      isbn: '7-5048-3253-7',
-      publisher: '农村读物出版社',
-      imageUrl: 'assets/picture/在家过把“克隆”隐.jpg',
-      // 其他图书信息
-    },
-    {
-      title: '音乐会曲',
-      author: '欣德米特',
-      isbn: '7-5404-3220-9',
-      publisher: '湖南文艺出版社',
-      imageUrl: 'assets/picture/音乐会曲.jpg',
-    }
-    // 其他示例图书数据
-  ];
-  onClick(event:MouseEvent){
-    this.router.navigate(['request']);//  /tabs/tab3
+  onClickTab3(event:MouseEvent){
+    this.router.navigate(['/tabs/tab3']);//  /tabs/tab3
   }
   onClickUser(event:MouseEvent){
-    this.router.navigate(['/tabs/tab3']);
+    this.router.navigate(['/tabs/mine']);
+  }
+  onClickTab2(event:MouseEvent){
+    this.router.navigate(['/tabs/tab2']);
   }
   onClickBorrow(event:MouseEvent){
     this.router.navigate(['borrow']);
   }
+  onClickBook(event: MouseEvent, i: number): void {
+    let book = this.books[i];
+    let path = "details-book/" + book.id;
+    this.router.navigate([path]);
+  }
 
 }

src/app/tab2/tab2.page.html

@@ -13,7 +13,7 @@
     </ion-segment-button>
   </ion-segment>
 
-  <ion-button  (click)="toggleSort()">Sort by BorrowTimes</ion-button>
+  <ion-button class="custom-small-button" color="light" (click)="toggleSort()">按借阅时间排序</ion-button>
 
   <ion-list>
     <ion-card *ngFor="let book of books; let i = index">
@@ -46,5 +46,4 @@
       </ion-card-content>
     </ion-card>
   </ion-list>
- </ion-content>
- 
+ </ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,4 @@
+.custom-small-button {
+    font-size: 12px;
+    padding: 5px;
+  }

src/app/tab3/tab3.page.html

@@ -1,72 +1,48 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>个人信息</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button>
+        <ion-icon color="medium" slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>消息</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-  <!-- 用户信息部分 -->
-  <ion-card>
+  <ion-card *ngFor="let message of messages.slice().reverse()">
+    <ion-card-header>
+      {{ message.deliveryTime | date: 'yyyy年M月d日 HH:mm' }}
+    </ion-card-header>
     <ion-card-content>
-      <ion-item lines="none">
-        <div class="touxiang">
-          <ion-avatar slot="start">
-            <img src="assets/picture/touxiang.png">
-          </ion-avatar>
-        </div>
-        <ion-label>
-          <h2>用户名</h2>
-          <p>手机号</p>
-        </ion-label>
-      </ion-item>
+      <ion-card-subtitle>
+        书名：{{ message.title }}<br>作者:{{ message.author }}<br>订单编号:{{ message.id }}
+      </ion-card-subtitle>
+      <ion-footer>
+        <ion-row>
+          <ion-col>
+            <ion-badge color="primary">{{ message.status }}</ion-badge>
+          </ion-col>
+          <ion-col *ngIf="message.status === '已送至指定地点'">
+            <ion-button style="margin-left: 75px;" shape="round" fill="outline" size="small" (click)="confirmDelivery(message)">确认</ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-footer>
     </ion-card-content>
   </ion-card>
-
-  <ion-card>
-    
-    <ion-card-content>
-      <ion-list lines="none">
-        <ion-item>
-          <ion-icon name="book-outline" slot="start"></ion-icon>
-          <ion-label>我的借阅</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="chatbox-ellipses-outline" slot="start"></ion-icon>
-          <ion-label>我的请求</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="list" slot="start"></ion-icon>
-          <ion-label>我的书单</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="document-text-outline" slot="start"></ion-icon>
-          <ion-label>我的积分</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="location-outline" slot="start"></ion-icon>
-          <ion-label>我的地址</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="id-card-outline" slot="start"></ion-icon>
-          <ion-label>我的电子证</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="thumbs-up-outline" slot="start"></ion-icon>
-          <ion-label>资源荐购</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-        <ion-item>
-          <ion-icon name="add-outline" slot="start"></ion-icon>
-          <ion-label>资源捐赠</ion-label>
-          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
-        </ion-item>
-      </ion-list>
-    </ion-card-content>
-  </ion-card>
-</ion-content>
+</ion-content>
+<ion-fab slot="fixed" vertical="bottom" horizontal="end">
+  <ion-fab-button>
+    <ion-icon name="chevron-up-circle"></ion-icon>
+  </ion-fab-button>
+  <ion-fab-list side="top">
+    <ion-fab-button>
+      <ion-icon name="trash-outline"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="help"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+</ion-fab>

src/app/tab3/tab3.page.scss

@@ -1,17 +1,8 @@
-.touxiang {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100px;
-    height: 100px;
-  }
-  .touxiang img {
-    transform: scale(1.5);
-  }
-  ion-label h2, ion-label p {
-    margin-left: 30px;
-  }
-  ion-label h2 {
-    margin-bottom: 10px; 
-    font-size: 24px; 
-  }
+ion-fab-button {
+  --background: #b7f399;
+  --background-activated: #87d361;
+  --background-hover: #a3e681;
+  --border-radius: 30px;
+  --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --color: black;
+}

src/app/tab3/tab3.page.ts

@@ -1,12 +1,56 @@
 import { Component } from '@angular/core';
-
+// 引用Parse JS SDK
+import Parse from "parse";
+Parse.initialize("dev"); // 设置applicationId
+Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  orderInfo:any;
+  messages: BookMessage[] = [];
+  constructor() {
+  }
+
+  ngOnInit() {
+    this.loadAllOrder();
+  }
 
-  constructor() {}
+  confirmDelivery(message: BookMessage): void {
+    message.status = '已签收';
+  }
+  
+  async loadAllOrder(){  
+        
+      let query = new Parse.Query("AWOrder");
+      query.find().then((results) => {
+        results.forEach((result) => {
+          let messagesInfo:BookMessage = {
+            title: 'Book A', 
+            author: 'Author A', 
+            id:"202407091001", 
+            status: '派送中', 
+            deliveryTime: new Date('2024-07-09T07:20:00')
+          };
+          messagesInfo.title = result.get("title");
+          messagesInfo.author = result.get("authors");
+          messagesInfo.id = result.get("orderNumber");      
+          messagesInfo.status = result.get("status");
+          messagesInfo.deliveryTime = result.get("deliveryTime");
+          this.messages.push(messagesInfo);
+      });
+      });
+    
+  }
+
+}
 
+interface BookMessage {
+  title: string;
+  author: string;
+  id:string;
+  status: '派送中' | '订单处理中' | '已签收' | '已送至指定地点';
+  deliveryTime: Date;
 }

src/app/tabs/tabs.page.html

@@ -2,18 +2,18 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon aria-hidden="true" name="home"></ion-icon>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon aria-hidden="true" name="podium"></ion-icon>
+      <ion-label>排行榜</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon aria-hidden="true" name="chatbox-ellipses"></ion-icon>
+      <ion-label>消息</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="mine" href="/tabs/mine">
@@ -23,4 +23,4 @@
     
   </ion-tab-bar>
 
-</ion-tabs>
+</ion-tabs>

src/app/tracking-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TrackingServiceService } from './tracking-service.service';
+
+describe('TrackingServiceService', () => {
+  let service: TrackingServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TrackingServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/tracking-service.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TrackingServiceService {
+
+  constructor() { }
+}

src/modules/user/edit-info/edit-info.page.html

@@ -13,7 +13,7 @@
 
   <ion-card>
     <ion-card-header>
-      <ion-card-title>{{currentUser?.get('username')}} - {{currentUser?.id}}</ion-card-title>
+      <ion-card-title>{{currentUser?.get('username')}}</ion-card-title>
     </ion-card-header>
     <ion-card-content>
       <ion-list>
@@ -42,6 +42,10 @@
     </ion-card-content>
   </ion-card>
 
-  <ion-button expand="block" (click)="save()">保存</ion-button>
-  <ion-button expand="block" (click)="cancel()">取消</ion-button>
-</ion-content>
+  <div style="display: flex; justify-content: center;">
+    <ion-button expand="full" shape="round" style="width: 200px;" (click)="save()">保存</ion-button>
+  </div>
+  <div style="display: flex; justify-content: center;">
+    <ion-button expand="full" shape="round" style="width: 200px;" (click)="cancel()">取消</ion-button>
+  </div>
+</ion-content>

src/modules/user/edit-info/edit-info.page.ts

@@ -29,7 +29,7 @@ export class EditInfoPage implements OnInit {
         }
       }
     }
-    console.log(this.userInfo)
+
   }
 
   save() {

src/modules/user/login/login.page.html

@@ -7,8 +7,8 @@
 <ion-content [fullscreen]="true">
 
   <ion-card>
-    <ion-card-header>
-      <ion-card-title>登录/注册</ion-card-title>
+    <ion-card-header style="margin-left: 30px;">
+      <ion-card-title>Hi!欢迎登录</ion-card-title>
     </ion-card-header>
   
     <ion-card-content>
@@ -23,11 +23,21 @@
       </ion-list>
      
     </ion-card-content>
-  
-    <ion-button (click)="login()" fill="clear">登录</ion-button>
-    <ion-button (click)="register()" fill="clear">注册</ion-button>
+    
+    <!-- <div style="display: flex; align-items: center; justify-content: center;"> -->
+      <div style="margin-left: 50px;">
+      <ion-checkbox labelPlacement="end">
+        点击阅读并同意 <a href="#" (click)="$event.stopPropagation()">《隐私协议》</a>
+      </ion-checkbox>
+    </div>
+    <div style="display: flex; justify-content: center;">
+      <ion-button (click)="login()" fill="clear" style="margin-right: 10px;">登录</ion-button>
+      <ion-button (click)="register()" fill="clear">注册</ion-button>
+    </div>
   </ion-card>
 
   <!-- 新增路由返回逻辑，执行back函数 -->
-  <ion-button expand="block" (click)="back()">返回</ion-button>
-</ion-content>
+  <div style="display: flex; justify-content: center;">
+    <ion-button expand="full" shape="round" style="width: 200px;" (click)="back()">返回</ion-button>
+  </div>
+</ion-content>

src/modules/user/mine/mine.page.html

@@ -1,24 +1,98 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>我的</ion-title>
+    <ion-title>个人信息</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
 
   <ion-card>
-    <img alt="" src="https://ionicframework.com/docs/img/demos/card-media.png" />
     <ion-card-header>
-      <ion-card-title>{{user?.get("username") || '未登录'}}</ion-card-title>
-      <ion-card-subtitle *ngIf="!user?.id">请您登陆后继续使用</ion-card-subtitle>
-      <ion-card-subtitle *ngIf="user?.id">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
+      <ion-item lines="none">
+        <ion-grid>
+          <ion-row>
+            <ion-col size="5">
+              <div class="touxiang">
+                <ion-avatar slot="start">
+                  <img src="assets/picture/touxiang.png">
+                </ion-avatar>
+              </div>
+            </ion-col>
+            <ion-col size="7">
+              <ion-label>
+                <ion-text>用户名：{{user?.get("username") || '未登录'}}<br></ion-text>
+                <ion-text *ngIf="!user?.id">请您登陆后继续使用</ion-text>
+                <ion-text *ngIf="user?.id">
+                  手机号：{{user?.get("mobile")}}<br>
+                  姓名：{{user?.get("name")}}<br>
+                  性别：{{user?.get("gender")}}
+                </ion-text>                
+              </ion-label>
+              <ion-grid>
+                <ion-row>
+                  <ion-col size="6">
+                    <ion-button *ngIf="!user?.id" fill="outline" routerLink="/user/login"  class="white-button" >编辑</ion-button>
+                    <ion-button *ngIf="user?.id" fill="outline" routerLink="/user/edit/info" class="white-button">编辑</ion-button>
+                  </ion-col>
+                  <ion-col size="6">
+                    <ion-button *ngIf="!user?.id" fill="outline" routerLink="/user/login" class="white-button">登录</ion-button>
+                    <ion-button *ngIf="user?.id" fill="outline" (click)="logout()" class="white-button">登出</ion-button>
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-col>
+          </ion-row>
+        </ion-grid>        
+      </ion-item>
     </ion-card-header>
- 
-    <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->
-    <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login">登录</ion-button>
-    <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info">编辑资料</ion-button>
-    <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
   </ion-card>
 
+  <ion-card>
+    
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item>
+          <ion-icon name="book-outline" slot="start"></ion-icon>
+          <ion-label>我的借阅</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="chatbox-ellipses-outline" slot="start"></ion-icon>
+          <ion-label>我的请求</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="list" slot="start"></ion-icon>
+          <ion-label>我的书单</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="document-text-outline" slot="start"></ion-icon>
+          <ion-label>我的积分</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="location-outline" slot="start"></ion-icon>
+          <ion-label>我的地址</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="id-card-outline" slot="start"></ion-icon>
+          <ion-label>我的电子证</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="thumbs-up-outline" slot="start"></ion-icon>
+          <ion-label>资源荐购</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+        <ion-item>
+          <ion-icon name="add-outline" slot="start"></ion-icon>
+          <ion-label>资源捐赠</ion-label>
+          <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
 
-</ion-content>
+</ion-content>

src/modules/user/mine/mine.page.scss

@@ -0,0 +1,66 @@
+.touxiang {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+}
+.touxiang img {
+  transform: scale(1.5);
+}
+ion-label h2, ion-label p {
+  margin-left: 30px;
+}
+ion-label h2 {
+  margin-bottom: 10px; 
+  font-size: 24px; 
+}
+ion-content {
+  --ion-background-color: #f5f5f5; /* 设置背景颜色 */
+}
+
+ion-card {
+  background-color: #ffffff; /* 设置卡片背景颜色 */
+  border-radius: 10px; /* 设置卡片圆角 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  margin: 10px; /* 设置卡片之间的间距 */
+  transition: transform 0.3s; /* 添加过渡效果 */
+}
+
+ion-card:hover {
+  transform: translateY(-5px); /* 鼠标悬停时卡片向上移动 */
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影效果 */
+  background-color: #f8f8f8; /* 鼠标悬停时改变背景颜色 */
+}
+
+ion-card-title {
+  font-size: 1.2em; /* 设置标题字体大小 */
+  color: #333333; /* 设置标题颜色 */
+}
+
+ion-card-content {
+  font-size: 0.9em; /* 设置内容字体大小 */
+  color: #555555; /* 设置内容颜色 */
+}
+
+ion-button {
+  font-size: 0.9em; /* 设置按钮字体大小 */
+  color: #d18111; /* 设置按钮文字颜色 */
+  
+  border-radius: 5px; /* 设置按钮圆角 */
+}
+
+ion-text {
+  font-size: 0.9em; /* 设置文本字体大小 */
+  color: hsl(0, 0%, 20%); /* 设置文本颜色 */
+}
+
+.red-button {
+  color: red; /* 设置按钮文字颜色为白色 */
+}
+
+.white-button {
+  // background-color: #007bff; /* 自定义颜色 */
+  color: rgb(5, 5, 5); /* 设置按钮文字颜色为白色 */
+  width: max-content;
+}