feat: new book/:id detial data load

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

src/Server/REST.js

@@ -0,0 +1,31 @@
+// PET GET获取全部书
+fetch("http://web2023.fmode.cn:9999/parse/classes/NovelInformation?", {
+    "headers": {
+      "accept": "*/*",
+      "accept-language": "zh-CN,zh;q=0.9",
+      "if-none-match": "W/\"2e3-dHq6CcHzoqRR4Z/UtNzdW1Xe1oA\"",
+      "x-parse-application-id": "dev"
+    },
+    "referrer": "http://127.0.0.1:4040/",
+    "referrerPolicy": "strict-origin-when-cross-origin",
+    "body": null,
+    "method": "GET",
+    "mode": "cors",
+    "credentials": "omit"
+  });
+
+//   // PET GET获取全部书
+  fetch("http://web2023.fmode.cn:9999/parse/classes/NovelInformation", {
+    "headers": {
+      "accept": "*/*",
+      "accept-language": "zh-CN,zh;q=0.9",
+      "content-type": "text/plain;charset=UTF-8",
+      "x-parse-application-id": "dev"
+    },
+    "referrer": "http://127.0.0.1:4040/",
+    "referrerPolicy": "strict-origin-when-cross-origin",
+    "body": "{\"bookname\":\"人间烟火\",\"bootype\":\"生活\"}",
+    "method": "POST",
+    "mode": "cors",
+    "credentials": "omit"
+  });

src/app/app-routing.module.ts

@@ -5,6 +5,10 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'book-detail',
+    loadChildren: () => import('./book-detail/book-detail.module').then( m => m.BookDetailPageModule)
   }
 ];
 @NgModule({

src/app/book-detail/book-detail-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BookDetailPage } from './book-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BookDetailPageRoutingModule {}

src/app/book-detail/book-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookDetailPageRoutingModule } from './book-detail-routing.module';
+
+import { BookDetailPage } from './book-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BookDetailPageRoutingModule
+  ],
+  declarations: [BookDetailPage]
+})
+export class BookDetailPageModule {}

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

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>book-detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">book-detail</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/book-detail/book-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookDetailPage } from './book-detail.page';
+
+describe('BookDetailPage', () => {
+  let component: BookDetailPage;
+  let fixture: ComponentFixture<BookDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-book-detail',
+  templateUrl: './book-detail.page.html',
+  styleUrls: ['./book-detail.page.scss'],
+})
+export class BookDetailPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/tab1/tab1.page.html

@@ -1,17 +1,168 @@
-<ion-header [translucent]="true">
+<!-- 首页布局 -->
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-title>小说（Novel）</ion-title>
   </ion-toolbar>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>签到功能</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
+  
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content >
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
-</ion-content>
+  <ion-toolbar  >
+    <ion-buttons slot="start">
+      <ion-button>
+        Novel
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="search"></ion-icon>
+      </ion-button>
+      <ion-button >
+        阅读历史
+      </ion-button>
+      <ion-button>
+        更多
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <!-- 金刚区 -->
+  <ion-grid >
+    <ion-row>
+      <ion-col size="6">
+        <ion-card  >
+          <ion-card-header  >
+            今日已读___小时__分钟
+          </ion-card-header>
+        </ion-card>
+      </ion-col>
+
+
+<!-- 时钟组件 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>当前时间</ion-card-title>
+  </ion-card-header>
+  
+  <ion-card-content>
+    <div class="clock">
+      {{ currentTime | date: 'hh:mm:ss a' }}
+    </div>
+  </ion-card-content>
+</ion-card>
+<!-- 时钟 -->
+    </ion-row>
+  </ion-grid>
+
+      <!-- 签到组件 -->
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>签到功能</ion-card-title>
+        </ion-card-header>
+      
+      <ion-card-content >
+        <ion-item size = "6">
+          <ion-label>今日签到状态：</ion-label>
+          <ion-badge slot="end" [color]="isSignedIn ? 'success' : 'danger'">{{ isSignedIn ? '已签到' : '未签到' }}</ion-badge>
+        </ion-item>
+        
+        <ion-button expand="block" color="primary" (click)="signIn()" [disabled]="isSignedIn">签到</ion-button>
+      </ion-card-content>
+      </ion-card>
+
+
+
+  <!-- 问卷调查 -->
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>小说问卷调查</ion-card-title>
+  </ion-card-header>
+  
+  <ion-card-content>
+    <ion-list>
+      <ion-item>
+        <ion-label position="stacked">您喜欢的小说类型：</ion-label>
+        <ion-select placeholder="请选择">
+          <ion-select-option value="fantasy">奇幻</ion-select-option>
+          <ion-select-option value="romance">言情</ion-select-option>
+          <ion-select-option value="mystery">悬疑</ion-select-option>
+          <ion-select-option value="sci-fi">科幻</ion-select-option>
+        </ion-select>
+      </ion-item>
+      
+      <ion-item>
+        <ion-label position="stacked">您每周阅读小说的频率：</ion-label>
+        <ion-radio-group value="daily">
+          <ion-item>
+            <ion-label>每天</ion-label>
+            <ion-radio slot="start" value="daily"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>每周几次</ion-label>
+            <ion-radio slot="start" value="weekly"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>偶尔</ion-label>
+            <ion-radio slot="start" value="occasionally"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-item>
+      
+      <ion-item>
+        <ion-label position="stacked">您最喜欢的小说作者：</ion-label>
+        <ion-input type="text" placeholder="请输入"></ion-input>
+      </ion-item>
+      
+      <ion-item>
+        <ion-label position="stacked">您希望小说中包含的元素：</ion-label>
+        <ion-textarea placeholder="请输入"></ion-textarea>
+      </ion-item>
+    </ion-list>
+    
+    <ion-button expand="block" color="primary">提交</ion-button>
+  </ion-card-content>
+</ion-card>
+<!-- 个人表单填写 -->
+<!-- 个人推荐 -->
+<ion-grid>
+  <ion-row>
+    <ion-col >
+      <ion-card>
+        <ion-card-header>
+          个人推荐
+        </ion-card-header>
+        <ion-card-content>
+          <!-- 弹性布局的六行一列金刚区按钮 -->
+          <ion-row>
+            <ion-col size="6" *ngFor="let item of customItems">
+              <ion-button expand="block">{{ item.title }}</ion-button>
+            </ion-col>
+          </ion-row>
+          <!-- 图文及评分标准、浏览量 -->
+          <ion-row>
+            <ion-col size="6">
+              <ion-img src="assets/img/人间烟火.jpg" ></ion-img>
+            </ion-col>
+            <ion-col size="6">
+              <ion-card>
+                <ion-card-header>
+                  图书名称:人间烟火
+                </ion-card-header>
+                <ion-card-content>
+                  <ion-label>评分：5.0</ion-label><br>
+                  <ion-label>浏览量：1000</ion-label>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+          </ion-row>
+        </ion-card-content>
+      </ion-card>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+<!-- 个人推荐 -->
+</ion-content>

src/app/tab1/tab1.page.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 
+
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
@@ -7,6 +8,38 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
-  constructor() {}
+  
+  isSignedIn: boolean = false;
+
+  signIn() {
+    if (!this.isSignedIn) {
+      this.isSignedIn = true;
+    } else {
+      alert('您今天已经签到过了！');
+    }
+  }
+
+//时钟
+  currentTime: Date = new Date();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    setInterval(() => {
+      this.currentTime = new Date();
+    }, 1000);
+  }
+
+
+  customItems:Array<any> = [
+    {title:"游戏"},
+    {title:"历史"},
+    {title:"仙侠"},
+    {title:"武侠"},
+    {title:"科幻"},
+    {title:"悬疑"},
+  ]
+
+
 
 }

src/app/tab2/tab2.page.html

@@ -14,7 +14,7 @@
           <ion-card>
             <ion-card-header>
               
-              <a href="https://ai.fmode.cn/">短片关于传统美德小说创作5</a>
+              <a href="https://ai.fmode.cn/">短片关于传统美德小说创作</a>
             </ion-card-header>
             <ion-card-content>
               <!-- 视频播放器 -->
@@ -22,18 +22,7 @@
           </ion-card>
         </ion-col>
       </ion-row>
-      <ion-row>
-        <ion-col size="12">
-          <ion-card>
-            <ion-card-header>
-              小说配图
-            </ion-card-header>
-            <ion-card-content>
-              <!-- 图片展示区域 -->
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
+      
     </ion-grid>
   </div>
 
@@ -45,7 +34,7 @@
         <!-- 小说的LOGO -->
       </ion-col>
       <ion-col size="6">
-        <ion-segment>
+        <ion-segment [(ngModel)]='currentTab'>
           <ion-segment-button value="recommend">
             推荐
           </ion-segment-button>
@@ -92,16 +81,16 @@
 
   <!-- 书籍名称 -->
 <ion-row>
-  <ion-col size="6">
-    <ion-card (click)="onClick()">
+  <ion-col size="6" *ngIf="currentTab=='male' || currentTab=='recommend'">
+    <ion-card routerLink="/book-detail">
       <ion-img src="assets/img/侠客江湖.jpg" style="height: 200; width: 400; "></ion-img>
       <ion-card-header>
         <ion-card-title>侠客江湖</ion-card-title>
       </ion-card-header>
     </ion-card>
   </ion-col>
-  <ion-col size="6">
-    <ion-card>
+  <ion-col size="6"  *ngIf="currentTab=='male' || currentTab=='recommend'">
+    <ion-card  routerLink="/book-detail">
       <ion-img src="assets/img/灵魂.jpg" style="height: 200; width: 400; "></ion-img>
       <ion-card-header>
         <ion-card-title>每个孤独的灵魂都值得被看见</ion-card-title>
@@ -112,8 +101,8 @@
 
 <!-- 大家都爱看社区 -->
 <ion-row>
-  <ion-col size="12">
-    <ion-card>
+  <ion-col size="12"  *ngIf="currentTab=='female' || currentTab=='recommend'">
+    <ion-card routerLink="/book-detail">
       <ion-img src="assets/img/城南旧事.jpg" style="height: 200px; width: 400px;"></ion-img>
       <ion-card-header>
         <ion-card-title>书籍名称</ion-card-title>
@@ -160,17 +149,17 @@
 <ion-row>
   <ion-col size="6">
     <ion-card>
-      <ion-img src="assert/img/星际未来" style="height: 200; width: 400; "></ion-img>
+      <ion-img src="assets/img/云中浅阳.jpg" style = "height:200px;width:400px" ></ion-img>
       <ion-card-header>
-        <ion-card-title>星际未来</ion-card-title>
+        <ion-card-title>云中浅阳</ion-card-title>
       </ion-card-header>
     </ion-card>
   </ion-col>
   <ion-col size="6">
     <ion-card>
-      <ion-img src="src/assets/img/城南旧事.webp"></ion-img>
+      <ion-img src="assets/img/一只猫的前世今生.jpg" style = "height:200px;width:400px"></ion-img>
       <ion-card-header>
-        <ion-card-title>城南旧事</ion-card-title>
+        <ion-card-title>一只猫的前世今生</ion-card-title>
       </ion-card-header>
     </ion-card>
   </ion-col>
@@ -180,14 +169,14 @@
 <ion-row>
   <ion-col size="12">
     <ion-card>
-      <ion-img src="assets/community1.jpg"></ion-img>
+      <ion-img src="assets/img/你好夏天.jpg"></ion-img>
       <ion-card-header>
-        <ion-card-title>书籍名称</ion-card-title>
-        <ion-card-subtitle>发布人</ion-card-subtitle>
+        <ion-card-title>书籍名称:你好夏天</ion-card-title>
+        <ion-card-subtitle>发布人：小哈</ion-card-subtitle>
       </ion-card-header>
       <ion-card-content>
-        <ion-label>商品价格</ion-label>
-        <ion-label>新旧程度</ion-label>
+        <ion-label>商品价格：666</ion-label>
+        <ion-label>新旧程度：新</ion-label>
       </ion-card-content>
     </ion-card>
   </ion-col>

src/app/tab2/tab2.page.ts

@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 })
 export class Tab2Page {
 
+  currentTab:string = "recommend"
   constructor() {}
   onClick(){
     alert("666")

src/app/tab3/tab3.page.html

@@ -1,17 +1,78 @@
-<ion-header [translucent]="true">
+<!-- 我的布局 -->
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    
+    <ion-buttons slot="start">
+      <ion-button>
+        用户名称
+      </ion-button>
+      <ion-avatar>
+        <ion-img src="assets/img/头像.jpg"></ion-img>
+      </ion-avatar>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon name="settings"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon name="moon"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
+
 </ion-header>
+<ion-content>
+  <!-- 金刚区 - 一行九列金刚区按钮 -->
+  <ion-title>我的会员</ion-title>
+  <ion-row>
+    <ion-col size="2" *ngFor="let item of myItems">
+      <ion-button expand="block">{{ item.title }}</ion-button>
+    </ion-col>
+  </ion-row>
+
+
+
+
+
+
+<!-- 金刚区 - 二行三列 -->
+<ion-row>
+  <ion-col size="4">
+    <ion-label>我的钱包</ion-label>
+    <ion-card>
+      <ion-card-content>
+        
+        <ion-label>金币余额: 100</ion-label>
+      </ion-card-content>
+    </ion-card>
+  </ion-col>
+  <ion-col size="4">
+    <ion-card>
+      <ion-card-content>
+        <ion-label>今日收益</ion-label>
+        <ion-label>0</ion-label>
+       
+      </ion-card-content>
+      
+    </ion-card>
+  </ion-col>
+  <ion-button expand="block" >去赚钱</ion-button>
+</ion-row>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<!-- 金刚区 - 十行一列金刚区按钮 -->
+<ion-row>
+  <ion-col size="12">
+    <ion-button expand="block">作者中心</ion-button>
+    <ion-button expand="block">阅读喜好</ion-button>
+    <ion-button expand="block">奖品中心</ion-button>
+    <ion-button expand="block">我的评论</ion-button>
+    <ion-button expand="block">我的收藏</ion-button>
+    <ion-button expand="block">已购书籍</ion-button>
+    <ion-button expand="block">绑兑换码</ion-button>
+    <ion-button expand="block">客服咨询</ion-button>
+    <ion-button expand="block">功能建议</ion-button>
+    <ion-button expand="block">蚂蚁能量</ion-button>
+  </ion-col>
+</ion-row>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+</ion-content>

src/app/tab3/tab3.page.ts

@@ -8,5 +8,12 @@ import { Component } from '@angular/core';
 export class Tab3Page {
 
   constructor() {}
-
+  myItems:Array<any> = [
+    {title:"看书面广告"},
+    {title:"听书免广告"},
+    {title:"万本会员书"},
+    {title:"阅读背景"},
+    {title:"故事免费读"},
+    {title:"离线下载"},]
+  
 }

src/app/tabs/tabs.page.html

@@ -2,18 +2,17 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-    
+      <ion-icon aria-hidden="true" name="home-outline"></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-icon aria-hidden="true" name="book-outline"></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-icon aria-hidden="true" name="accessibility-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>