结果页面

src/pages/home/learning/review-result/review-result.html

+<!--测试结果-->
+<ion-header>
+  <ion-navbar>
+    <ion-title>学习测试</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-container">
+    <div class="learn-item">
+      <div class="learn-title">{{title}}</div>
+      <ng-container *ngIf="result?.markStatus == 0">
+        <div class="item-container text-center">
+          <img class="margin-top-80" style="width: 4rem" src="./assets/imgs/learn/green_right.png" alt="">
+          <p class="margin-top-10">已交卷，请耐心等待测试结果</p>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="result?.markStatus == 1">
+        <div class="item-container text-center">
+          <div class="item-title"><span>{{result?.score}}</span>分</div>
+          <div class="icon-star">
+            <ion-icon *ngFor="let item of starList" ngClass="{{item.class}}" name="star"></ion-icon>
+          </div>
+          <div class="item-content1">
+            <p class="color-999">测试用时</p>
+            <p>{{result.answerTime | formatTime}}</p>
+          </div>
+          <div class="item-content2">
+            <p>满分{{result?.fullmarks}}分</p>
+            <p>共计{{result?.fullCount}}题，答对{{result?.correctCount}}题</p>
+            <p class="color-red" *ngIf="result?.fullmarks *0.6 > result?.score">很遗憾，未能通过测试</p>
+          </div>
+          <div>
+            <button class="submit-btn submit" (click)="reviewTest()">测试回顾</button>
+            <button class="submit-btn submit" (click)="resetTest()">重新测试</button>
+            <p class="margin-top-20 color-999">备注：重新测试不改变测试结果。</p>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</ion-content>
\ No newline at end of file

src/pages/home/learning/review-result/review-result.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ReviewResultPage } from './review-result';
+import {PipesModule} from "../../../../pipes/pipes.module";
+
+@NgModule({
+  declarations: [
+    ReviewResultPage,
+  ],
+  imports: [
+      PipesModule,
+    IonicPageModule.forChild(ReviewResultPage),
+  ],
+})
+export class ReviewResultPageModule {}

src/pages/home/learning/review-result/review-result.scss

+page-review-result {
+  p{
+    margin: .5rem;
+  }
+  .main-container {
+    height: 100%;
+    background-image: url(../../../../assets/imgs/learn/learning_background.png);
+    background-repeat: no-repeat;
+    background-color: #e6e8ed;
+    padding: 1.5rem;
+  }
+  .swiper-slide, .slide-zoom {
+    text-align: left;
+  }
+  .swiper-slide {
+    justify-content: normal;
+    align-items: normal;
+  }
+  .learn-item {
+    height: 100%;
+  }
+  .learn-title {
+    background-color: rgba(18, 28, 52, 0.34);
+    font-size: 1.8rem;
+    color: #ffffff;
+    text-align: center;
+    padding: 1rem;
+    border-top-left-radius: .8rem;
+    border-top-right-radius: .8rem;
+  }
+  .item-container {
+    background-color: #fff;
+    height: calc(100% - 7rem);
+    border-bottom-left-radius: .8rem;
+    border-bottom-right-radius: .8rem;
+    font-size: 1.5rem;
+  }
+  .item-title {
+    padding: 1rem;
+    font-size: 2rem;
+    span{
+      font-size: 3rem;
+    }
+  }
+  .item-content1 {
+    padding: 1rem;
+  }
+  .item-content2 {
+    padding: 1rem;
+    background-color: #f8f8f8;
+    border-top: 1px solid #dddddd;
+    border-bottom: 1px solid #dddddd;
+    color: #333333;
+  }
+  .footer-subject {
+    padding: 0 1rem;
+    position: absolute;
+    left: 0;
+    bottom: 3rem;
+    height: 5rem;
+    width: 100%;
+    background-color: #e6e8ed;
+    display: flex;
+    div {
+      line-height: 5rem;
+    }
+    .prev {
+      flex: 3;
+    }
+    .next {
+      flex: 3;
+      text-align: right;
+    }
+    .index {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .footer-submit {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3rem;
+    width: 100%;
+    border-top: .1rem solid #34b4fc;
+    display: flex;
+    div {
+      line-height: 3rem;
+    }
+    .time {
+      text-align: center;
+      flex: 4;
+    }
+    .submit {
+      background-color: #34b4fc;
+      color: #ffffff;
+      text-align: center;
+      flex: 1;
+    }
+  }
+  .icon-star{
+    font-size: 4.8rem;
+    ion-icon{
+      margin-right: 1rem;
+    }
+    .star-yellow {
+      color: #faba54;
+    }
+    .star-gray {
+      color: grey;
+    }
+  }
+  .submit-btn{
+    width: 35%;
+    background-color: #34b4fc;
+    margin: 10% 5%;
+  }
+}

src/pages/home/learning/review-result/review-result.ts

+import {Component, ViewChild} from '@angular/core';
+import {IonicPage, Navbar, NavController, NavParams, Slides, ToastController} from 'ionic-angular';
+import {message} from "../../../../app/main";
+import {LearnService} from "../learn.service";
+import {AppService} from "../../../../service/appHttpService";
+
+@IonicPage()
+@Component({
+  selector: 'page-review-result',
+  templateUrl: 'review-result.html',
+})
+export class ReviewResultPage {
+  @ViewChild(Navbar) navbar:Navbar;
+
+    testId;
+    title;
+    result;
+
+    starList = [
+        {class: 'star-yellow'},
+        {class: 'star-yellow'},
+        {class: 'star-yellow'},
+    ];
+
+    constructor(public navCtrl: NavController, public navParams: NavParams,
+                public learnSer:LearnService) {
+    }
+
+    ionViewDidLoad() {
+        this.result = this.navParams.get('result');
+        this.title = this.navParams.get('title');
+
+        this.navbar.backButtonClick = (event)=>{
+            let index = this.navCtrl.length() -2;
+            this.navCtrl.remove(2,index)
+        }
+    }
+
+    //测试回顾
+    reviewTest() {
+        this.navCtrl.push("ReviewLearnPage",{
+            recordId:this.result.recordId,
+            score:this.result.score
+        })
+    }
+
+    //重新测试
+    resetTest() {
+        this.navCtrl.push('LearningDoPage',{
+            testId: this.testId,
+            title:this.title,
+            type:'reset'
+        });
+    }
+}