Skip to content

W
wisdom-ces
Commit 9cb0a8b3 authored by wangqinghua's avatar wangqinghua
Browse files
Options

上拉 下拉

parent f18605d3
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 120 deletions
src/pages/home/learning/learning-do/learning-do.html
View file @ 9cb0a8b3
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<ion-content> <ion-content>
<div class="main-container"> <div class="main-container">
<ion-slides> <ion-slides>
<ion-slide *ngFor="let item of list;"> <ion-slide *ngFor="let item of list;let i = index;">
<div class="learn-item"> <div class="learn-item">
<div class="learn-title">学习测试标题学习测试标题学习测试标题</div> <div class="learn-title">学习测试标题学习测试标题学习测试标题</div>
<div class="item-container"> <div class="item-container">
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
<!--判断题目类型--> <!--判断题目类型-->
<p> <p>
<span class="color-red" *ngIf="item.isAns == 1">*</span>{{index}}、 <span class="color-red" *ngIf="item.isAns == 1">*</span>{{index}}、
<span *ngIf="item.questionType == 1">(判断)</span> <span *ngIf="item.questionType == 1">(单选)</span>
<span *ngIf="item.questionType == 2">(单选)</span> <span *ngIf="item.questionType == 2">(多选)</span>
<span *ngIf="item.questionType == 3">(多选)</span> <span *ngIf="item.questionType == 3">(填空)</span>
<span *ngIf="item.questionType == 4">(填空)</span> <span *ngIf="item.questionType == 4">(判断)</span>
<span *ngIf="item.questionType == 5">(问答)</span> <span *ngIf="item.questionType == 5">(问答)</span>
{{item.questionContent}} {{item.questionContent}}
</p> </p>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<ng-container *ngFor=" let option2 of item.options;let quesIndex = index;"> <ng-container *ngFor=" let option2 of item.options;let quesIndex = index;">
<p> <p>
<label> <label>
<input type="checkbox" (change)="mutiSelect(i,quesIndex)" value="{{quesIndex}}" name="{{item.questionId}}"> <input type="checkbox" (change)="mutiSelect(i,option2.option)" value="{{quesIndex}}" name="{{item.questionId}}">
<span class="input-duox selectIndex">{{quesIndex +1 | charCode}}</span>&nbsp;&nbsp; <span class="input-duox selectIndex">{{quesIndex +1 | charCode}}</span>&nbsp;&nbsp;
{{option2.comment}} {{option2.comment}}
</label> </label>
......
src/pages/home/learning/learning-do/learning-do.ts
View file @ 9cb0a8b3
...@@ -15,7 +15,7 @@ export class LearningDoPage { ...@@ -15,7 +15,7 @@ export class LearningDoPage {
@ViewChild(Slides) slides: Slides; @ViewChild(Slides) slides: Slides;
@ViewChild(Navbar) navbar: Navbar @ViewChild(Navbar) navbar: Navbar
clock; // clock; //倒计时的定时器
list = []; list = [];
timeText = '00:00:00'; timeText = '00:00:00';
totalTime; totalTime;
...@@ -24,7 +24,7 @@ export class LearningDoPage { ...@@ -24,7 +24,7 @@ export class LearningDoPage {
public toastCtrl: ToastController, public appService: AppService, public datePipe: DatePipe) { public toastCtrl: ToastController, public appService: AppService, public datePipe: DatePipe) {
} }
ionViewDidLoad() { ionViewDidEnter() {
const testId = this.navParams.get('testId'); const testId = this.navParams.get('testId');
const data = { const data = {
testId: testId testId: testId
...@@ -32,6 +32,7 @@ export class LearningDoPage { ...@@ -32,6 +32,7 @@ export class LearningDoPage {
this.learnSer.startTest(data).subscribe( this.learnSer.startTest(data).subscribe(
(res) => { (res) => {
this.list = res.data.detailVos; this.list = res.data.detailVos;
this.list.forEach(e=>e.answerdesc = '');
this.totalTime = res.data.timeLimit; this.totalTime = res.data.timeLimit;
this.countTime(); this.countTime();
} }
...@@ -43,6 +44,13 @@ export class LearningDoPage { ...@@ -43,6 +44,13 @@ export class LearningDoPage {
} }
} }
//清楚定时器
ionViewDidLeave(){
this.index = 1;
this.slides.slideTo(0);
window.clearInterval(this.clock);
}
//倒计时 //倒计时
countTime() { countTime() {
let totalTime = this.totalTime; let totalTime = this.totalTime;
...@@ -63,11 +71,6 @@ export class LearningDoPage { ...@@ -63,11 +71,6 @@ export class LearningDoPage {
}, 1000) }, 1000)
} }
//清楚定时器
ionViewDidLeave(){
window.clearInterval(this.clock);
}
//上一题 //上一题
prev() { prev() {
if (this.index == 1) { if (this.index == 1) {
...@@ -93,8 +96,9 @@ export class LearningDoPage { ...@@ -93,8 +96,9 @@ export class LearningDoPage {
} }
//多选 //多选
mutiSelect(i, quesIndex) { mutiSelect(i, option) {
this.list[i].answerdesc += option;
console.log(this.list);
} }
//强制交卷 //强制交卷
...@@ -106,6 +110,7 @@ export class LearningDoPage { ...@@ -106,6 +110,7 @@ export class LearningDoPage {
//交卷 //交卷
submit() { submit() {
console.log(this.list);
this.appService.alert("确定提交问卷", () => { this.appService.alert("确定提交问卷", () => {
this.navCtrl.push("LearningResultPage") this.navCtrl.push("LearningResultPage")
}) })
......
src/pages/home/learning/learning-list/learning-list.html
View file @ 9cb0a8b3
...@@ -2,113 +2,122 @@ ...@@ -2,113 +2,122 @@
<ion-navbar> <ion-navbar>
<ion-title>测试列表</ion-title> <ion-title>测试列表</ion-title>
</ion-navbar> </ion-navbar>
<div class="tabs-parent">
<div *ngFor="let item of tabsList;let i = index" (click)="change(i)" class="tabs-children" >{{item.name}}</div>
<span #tips id="tips"></span>
</div>
</ion-header> </ion-header>
<ion-content class="bgc-e7e8ed"> <ion-content class="bgc-e7e8ed">
<div class="tabs-parent"> <ion-refresher (ionRefresh)="doRefresh($event)">
<div *ngFor="let item of tabsList;let i = index" (click)="change(i)" class="tabs-children" >{{item.name}}</div> <ion-refresher-content pullingText="下拉刷新"
<span #tips id="tips"></span> pullingIcon="arrow-dropdown"
</div> refreshingSpinner="bubbles">
<ion-slides (ionSlideDidChange)="slideChanged()"> </ion-refresher-content>
<ng-container *ngIf="link"> </ion-refresher>
<ion-slide> <ng-container *ngIf="link">
<ion-list> <ng-container *ngIf="index == 0">
<ng-container *ngFor="let item of list" > <ion-list>
<ion-item class="item-list margin-bottom-10" > <ng-container *ngFor="let item of list" >
<div class="item" (click)="goToResult(item)">
<div class="item-header padding-15-0">
<div class="item-header-style">
<span class="item-title">{{item.title}}</span>
<span *ngIf="item.testResult == 0" float-right class="gray">未完成</span>
<span *ngIf="item.testResult == 1" float-right class="red">测试未通过</span>
<span *ngIf="item.testResult == 2" float-right class="green">测试通过</span>
<span *ngIf="item.testResult == 3" float-right class="yellow">等待评分</span>
</div>
</div>
<div class="content-button padding-15-0">
<span>参与人员:</span>
<span *ngIf="item.testObject">{{item.testObject}}</span>
<span *ngIf="item.testResult != 0" float-right class="look">查看</span>
<span *ngIf="item.testResult == 0" float-right class="join">测试</span>
</div>
</div>
</ion-item>
</ng-container>
<ng-container *ngIf="list.length == 0">
<ion-list text-center style="margin-top: 10rem" >
<img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
<p text-center>
暂无测试
</p>
</ion-list>
</ng-container>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ng-container *ngIf="noList.length > 0">
<ng-container *ngFor="let item of noList" >
<ion-item class="item-list margin-bottom-10" > <ion-item class="item-list margin-bottom-10" >
<div class="item" (click)="goToResult(item)"> <div class="item" (click)="goToResult(item)">
<div class="item-header padding-15-0"> <div class="item-header padding-15-0">
<div class="item-header-style"> <div class="item-header-style">
<span class="item-title">{{item.title}}</span> <span class="item-title">{{item.title}}</span>
<span float-right class="gray">未作答</span> <span *ngIf="item.testResult == 0" float-right class="gray">未完成</span>
<span *ngIf="item.testResult == 1" float-right class="red">测试未通过</span>
<span *ngIf="item.testResult == 2" float-right class="green">测试通过</span>
<span *ngIf="item.testResult == 3" float-right class="yellow">等待评分</span>
</div> </div>
</div> </div>
<div class="content-button padding-15-0"> <div class="content-button padding-15-0">
<span>参与人员:</span> <span>参与人员:</span>
<span *ngIf="item.groupName">{{item.groupName}}</span> <span *ngIf="item.testObject">{{item.testObject}}</span>
<span *ngIf="!item.groupName">全体人员</span> <span *ngIf="item.testResult != 0" float-right class="look">查看</span>
<span float-right class="join">测试</span> <span *ngIf="item.testResult == 0" float-right class="join">测试</span>
</div> </div>
</div> </div>
</ion-item> </ion-item>
</ng-container> </ng-container>
</ng-container> <ng-container *ngIf="list.length == 0">
<ng-container *ngIf="noList.length == 0"> <ion-list text-center style="margin-top: 10rem" >
<ion-list text-center style="margin-top: 10rem" > <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
<img style="width: 20%;" src="./assets/imgs/no-info.png" alt=""> <p text-center>
<p text-center> 暂无测试
暂无测试 </p>
</p> </ion-list>
</ion-list> </ng-container>
</ng-container> </ion-list>
</ion-list> </ng-container>
</ion-slide> <ng-container *ngIf="index == 1">
<ion-slide> <ion-list>
<ion-list> <ng-container *ngIf="noList.length > 0">
<ng-container *ngIf="doList.length > 0"> <ng-container *ngFor="let item of noList" >
<ng-container *ngFor="let item of doList"> <ion-item class="item-list margin-bottom-10" >
<ion-item class="item-list margin-bottom-10" > <div class="item" (click)="goToResult(item)">
<div class="item" (click)="goToResult(item)"> <div class="item-header padding-15-0">
<div class="item-header padding-15-0"> <div class="item-header-style">
<div class="item-header-style"> <span class="item-title">{{item.title}}</span>
<span class="item-title">{{item.title}}</span> <span float-right class="gray">未作答</span>
<span float-right class="green">已完成</span> </div>
</div>
<div class="content-button padding-15-0">
<span>参与人员:</span>
<span *ngIf="item.groupName">{{item.groupName}}</span>
<span *ngIf="!item.groupName">全体人员</span>
<span float-right class="join">测试</span>
</div> </div>
</div> </div>
<div class="content-button padding-15-0"> </ion-item>
<span>参与人员:</span> </ng-container>
<span *ngIf="item.groupName">{{item.groupName}}</span> </ng-container>
<span *ngIf="!item.groupName">全体人员</span> <ng-container *ngIf="noList.length == 0">
<span float-right class="look">查看</span> <ion-list text-center style="margin-top: 10rem" >
<img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
<p text-center>
暂无测试
</p>
</ion-list>
</ng-container>
</ion-list>
</ng-container>
<ng-container *ngIf="index == 2">
<ion-list>
<ng-container *ngIf="doList.length > 0">
<ng-container *ngFor="let item of doList">
<ion-item class="item-list margin-bottom-10" >
<div class="item" (click)="goToResult(item)">
<div class="item-header padding-15-0">
<div class="item-header-style">
<span class="item-title">{{item.title}}</span>
<span float-right class="green">已完成</span>
</div>
</div>
<div class="content-button padding-15-0">
<span>参与人员:</span>
<span *ngIf="item.groupName">{{item.groupName}}</span>
<span *ngIf="!item.groupName">全体人员</span>
<span float-right class="look">查看</span>
</div>
</div> </div>
</div> </ion-item>
</ion-item> </ng-container>
</ng-container> </ng-container>
</ng-container> <ng-container *ngIf="doList.length == 0">
<ng-container *ngIf="doList.length == 0"> <ion-list text-center style="margin-top: 10rem" >
<ion-list text-center style="margin-top: 10rem" > <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
<img style="width: 20%;" src="./assets/imgs/no-info.png" alt=""> <p text-center>
<p text-center> 暂无测试
暂无测试 </p>
</p> </ion-list>
</ion-list> </ng-container>
</ng-container> </ion-list>
</ion-list> </ng-container>
</ion-slide> </ng-container>
</ng-container> <!--下滑的时候，加载数据-->
</ion-slides> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content> </ion-content>
src/pages/home/learning/learning-list/learning-list.scss
View file @ 9cb0a8b3
page-learning-list { page-learning-list {
.swiper-container{ .swiper-container{
overflow: auto; overflow-x: hidden;
overflow-y: scroll;
} }
.swiper-slide{ .swiper-slide{
align-items: normal; align-items: normal;
......
src/pages/home/learning/learning-list/learning-list.ts
View file @ 9cb0a8b3
...@@ -14,12 +14,14 @@ export class LearningListPage { ...@@ -14,12 +14,14 @@ export class LearningListPage {
@ViewChild(Slides) slides: Slides; @ViewChild(Slides) slides: Slides;
@ViewChild('tips') tips: ElementRef; @ViewChild('tips') tips: ElementRef;
index; index = 0;
tabsList = [{name: "全部",}, {name: "未完成",}, {name: "已完成",}]; tabsList = [{name: "全部",}, {name: "未完成",}, {name: "已完成",}];
noList = []; noList = [];
doList = []; doList = [];
list = []; //全部测试 list = []; //全部测试
link = false; //是否请求完成 link = false; //是否请求完成
pageNumber = 1; //页码
pageSize = 25; //每页显示条数
constructor(public navCtrl: NavController, public navParams: NavParams, constructor(public navCtrl: NavController, public navParams: NavParams,
public learnSer: LearnService, public datePipe: DatePipe) { public learnSer: LearnService, public datePipe: DatePipe) {
...@@ -34,9 +36,9 @@ export class LearningListPage { ...@@ -34,9 +36,9 @@ export class LearningListPage {
getList() { getList() {
const nowDate = this.datePipe.transform(new Date(), 'yyyy/MM/dd HH:hh:ss') const nowDate = this.datePipe.transform(new Date(), 'yyyy/MM/dd HH:hh:ss')
const data = { const data = {
pageNumber:'1', pageNumber:this.pageNumber,
pageSize:'15', pageSize:this.pageSize,
selectType:'1', selectType:'1', //全部状态
queryTime:nowDate, queryTime:nowDate,
}; };
this.learnSer.getLearnTestList(data).subscribe( this.learnSer.getLearnTestList(data).subscribe(
...@@ -51,25 +53,59 @@ export class LearningListPage { ...@@ -51,25 +53,59 @@ export class LearningListPage {
) )
} }
change(index) { // 下拉
doRefresh(refresher){
this.pageNumber = 1;
const nowDate = this.datePipe.transform(new Date(), 'yyyy/MM/dd HH:hh:ss')
const data = {
pageNumber:this.pageNumber,
pageSize:this.pageSize,
selectType:'1', //全部状态
queryTime:nowDate,
};
this.learnSer.getLearnTestList(data).subscribe(
(res) => {
if(res.data){
this.list = res.data.list;
this.noList = res.data.list.filter((e)=>e.testResult == 0);
this.doList = res.data.list.filter((e)=>e.testResult == 2);
}
refresher.complete()
this.link = true;
}
)
}
//上拉
doInfinite(infiniteScroll){
this.pageNumber ++;
const nowDate = this.datePipe.transform(new Date(), 'yyyy/MM/dd HH:hh:ss')
const data = {
pageNumber:this.pageNumber,
pageSize:this.pageSize,
selectType:'1', //全部状态
queryTime:nowDate,
};
this.learnSer.getLearnTestList(data).subscribe(
(res) => {
if(res.data){
this.list = this.list.concat( res.data.list );
this.noList = res.data.list.filter((e)=>e.testResult == 0);
this.doList = res.data.list.filter((e)=>e.testResult == 2);
}
infiniteScroll.complete();
this.link = true;
}
)
}
change(index) {
let itemWidth = window.screen.width / 3; let itemWidth = window.screen.width / 3;
// 自身div的一半 - 滑块的一半 // 自身div的一半 - 滑块的一半
this.tips.nativeElement.style.left = itemWidth * index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px'; this.tips.nativeElement.style.left = itemWidth * index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
this.slides.slideTo(index)
this.index = index; this.index = index;
} }
//
slideChanged() {
this.index = this.slides.getActiveIndex();
if (this.index < 3) {
let itemWidth = window.screen.width / 3;
// 自身div的一半 - 滑块的一半
this.tips.nativeElement.style.left = itemWidth * this.index + itemWidth / 2 - this.tips.nativeElement.offsetWidth / 2 + 'px';
}
}
goToResult(item) { goToResult(item) {
this.navCtrl.push("LearningExplainPage", { this.navCtrl.push("LearningExplainPage", {
item: item item: item
......
src/pages/home/learning/learning-result/learning-result.ts
View file @ 9cb0a8b3
...@@ -9,6 +9,7 @@ import {ReviewLearnPage} from "../review-learn/review-learn"; ...@@ -9,6 +9,7 @@ import {ReviewLearnPage} from "../review-learn/review-learn";
}) })
export class LearningResultPage { export class LearningResultPage {
@ViewChild(Navbar) navbar:Navbar; @ViewChild(Navbar) navbar:Navbar;
testId;
starList = [ starList = [
{class: 'star-yellow'}, {class: 'star-yellow'},
...@@ -20,6 +21,7 @@ export class LearningResultPage { ...@@ -20,6 +21,7 @@ export class LearningResultPage {
} }
ionViewDidLoad() { ionViewDidLoad() {
this.testId = this.navParams.get('testId');
this.navbar.backButtonClick = (event)=>{ this.navbar.backButtonClick = (event)=>{
let index = this.navCtrl.length() -2; let index = this.navCtrl.length() -2;
this.navCtrl.remove(2,index) this.navCtrl.remove(2,index)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment