zc_saas_h5/pages2/bank/question_report.vue

<template>
	<view>
		<nav-bar title="试卷报告"></nav-bar>
		<view :class="reportdata.reportStatus === 0 ? 'redBtn' : reportdata.reportStatus === 1 ? 'greenBtn' : 'disNone'" v-if="examData.doType == 2 && reportdata.reportStatus !== null">
			{{ reportdata.reportStatus === 0 ? '测试未通过' : reportdata.reportStatus === 1 ? '测试通过' : '' }}
		</view>
		<view class="top">
			<view class="title">{{ reportdata.examName }}</view>
			<view class="desc">交卷时间：{{ $method.timestampToTime(reportdata.updateTime, false) }}</view>

			<view class="box">
				<view class="left">
					<view>
						<!-- 练习 -->
						<template v-if="examData.doType == 1">
							<!-- ((reportdata.rightQuestionNum /
									reportdata.doQuestionNum || 0).toFixed(0) *
									100) -->
							{{ (((reportdata.rightQuestionNum / reportdata.doQuestionNum )|| 0) * 100).toFixed(0)
							}}%
						</template>
						<!-- 考试 -->
						<template v-if="examData.doType == 2">
							<!-- ((reportdata.rightQuestionNum /
									reportdata.totalQuestionNum || 0).toFixed(0) *
									100) -->
							{{ (((reportdata.rightQuestionNum / reportdata.totalQuestionNum )|| 0) * 100).toFixed(0)		
							}}%
						</template>
					<!-- {{ (((reportdata.rightQuestionNum / (reportdata.rightQuestionNum + wrongRecordWrongNum)) || 0) * 100).toFixed(0)}}% -->
					
					</view>
					<view>正确率</view>
					<view>不含简答/案例题</view>
				</view>
				<view class="right">
					<view class="flex up">
						<!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
						<image class="right_num"  src="/static/right_num.png" mode="widthFix"></image>
						<view class="text">正确题数</view>
						<text class="green">{{ reportdata.rightQuestionNum }}</text>
					</view>
					<view class="flex up">
						<!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
						<image class="out_num"  src="/static/out_num.png" mode="widthFix"></image>
						<view class="text">少选题数</view>
						<text class="yellow">{{ reportdata.lessQuestionNum }}</text>
					</view>
					<view class="flex down">
						<!-- <u-icon name="close" color="#FF3B30" size="38" style="margin-right: 26rpx;"></u-icon> -->
						<image class="wrong_num" src="/static/wrong_num.png" mode="widthFix"></image>
						<view class="text">错误题数</view>
						<text class="red">{{ wrongRecordWrongNum }}</text>
					</view>
				</view>
			</view>
			<view class="dis_fst" v-if="!hideBtns">
				<navigator
					 v-if="wrongRecordWrongNum != 0"
					:url="
						'/pages2/bank/questionBankWrongExplain?recordId=' + reportdata.recordId+'&id='+examData.examId
					"
				>
					<view class="btnACs">错题解析</view>
				</navigator>
				<navigator
					:url="
						'/pages2/bank/questionBankAllExplain?id=' +
							reportdata.examId +
							'&goodsid=' +
							reportdata.goodsId +
							'&moduleId=' +
							reportdata.moduleExamId +
							'&chapterId=' +
							reportdata.chapterExamId +
							'&recordId='+ reportdata.recordId
					"
				>
					<view class="btnACs">全部解析</view>
				</navigator>
				<view class="btnACs" v-if="entryType != 'daily'" @click="doRepeat(reportdata.examId, reportdata.goodsId, reportdata.moduleExamId, reportdata.chapterExamId)">重新做题</view>
				<view class="btnACs" v-if="entryType != 'random' || nextExamId" @click="backBank">继续做题</view>
			</view>
		</view>
		<view v-show="entryType != 'random'" class="bottom">
			<view class="circle-wrap">
				<view class="circle-list">
					<view class="item" v-show="reportdata.totalScore">
						<view class="title">
							试卷得分
							<text>（不含简答和案例题）</text>
						</view>
						<canvas class="canvas" canvas-id="Canvas1"></canvas>
					</view>
					<view class="item" v-show="reportdata.examTime">
						<view class="title">答题时长</view>
						<canvas canvas-id="Canvas2"></canvas>
					</view>
					
					<view class="item" v-show="reportdata.score != -1">
						<view class="title">试卷得分
							<text>（含简答和案例题）</text>
						</view>
						<canvas canvas-id="Canvas3"></canvas>
					</view>
				</view>
			</view>
		</view>

		<view v-if="courseList.length" class="course_list">
            <view class="titles">
                <image class="code" src="@/static/learn/act_icon.png" ></image>
                <text class="title">推荐课程</text>
            </view>
            <view class="list_item" v-for="(item,index) in courseList" :key="index" @click="toBuy(item)">
                <view class="course_content">
                    <view class="c_title">{{item.goodsName}}</view>
                    <view class="c_downs">
                        <view class="img">
                            <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
                            <view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
                        </view>
                        <view class="text">
                            <view class="desc">
                                <view class="left">
                                    <text class="mon_t">¥ {{item.standPrice}}</text>
                                    <!-- <text class="sale">/限时优惠</text> -->
                                    <text v-if="item.linePrice" class="sale"> ¥ </text>
                                    <text v-if="item.linePrice" class="price_line">&nbsp;{{ item.linePrice }}</text>
                                </view>
                                <view class="right">
                                    <view class="regiser_row" v-if="!hideBuyState">立即购买</view>
                                </view>
                            </view>
                            <view v-if="item.buyUserNum" class="joins">
                                <!-- <image class="people" src="/static/index/people.png"></image> -->
                                <!-- 为0时，不显示 -->
                                <view class="people">{{ item.buyUserNum }}人参与</view>
                            </view>
                        </view>
                    </view>
                </view>					
            </view>
        </view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			id: '',
			hideBtns:false,
			recordId:'',
			reportdata: {},
			examData:{},
			examId:'',
			moduleId:'',
			goodsId:'',
			chapterId:'',
			context1: null,
			context2: null,
			nextExamId:'',
			wrongRecordWrongNum:'',
			orderGoodsId:'',
			courseList: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			entryType: '', // 进入做题页面的入口类型，daily-每日一练进来，其他的-题库做题进入
			bankNum: 5, // 随机练习的题目数量
		};
	},
	onUnload() {},
	computed: { ...mapGetters(['userInfo', 'hideBuyState']) },
	onShow() {
		this.pageNum = 1
		this.courseList = []
		this.getcourList()
	},
		
		
	async onLoad(option) {
		console.log(option)
		this.entryType = option.entryType
		this.bankNum = option.bankNum
		this.orderGoodsId = option.orderGoodsId
		this.recordId = option.id;
		this.examId = option.examId;
		this.moduleId = option.moduleId || 0;
		this.chapterId = option.chapterId || 0;
		this.goodsId = option.goodsId || '';
		
		this.examWrongRecordWrongNum();
		this.bankExamNextExam()
		await this.bankExam();
		await this.examReport();
		
	},
	onPullDownRefresh() {
		this.pageNum = 1
		this.courseList = []
		this.getcourList()
		// this.timer = setTimeout(function() {
		// 	uni.stopPullDownRefresh()
		// }, 500)
	},
	onReachBottom() {
		if (this.courseList.length < this.total) {
			this.pageNum++
			this.getcourList()
		}
	},
	methods: {
		getCanvas() {
			uni.getSystemInfo({
				success: res => {
					var winW = res.screenWidth;
					var winH = res.screenHeight;
					uni.createSelectorQuery()
						.in(this)
						.select('.canvas')
						.boundingClientRect()
						.exec(async newRes => {
							var width = newRes[0].width;
							var height = newRes[0].height;
							var caculateX = winW / 750;
							var caculateY = winH / 1334;
							console.log(caculateX);
							
							if(this.reportdata.totalScore) {
								var context1 = uni.createCanvasContext('Canvas1');
								this.context1 = context1;
								context1.setStrokeStyle('#EEEEEE');
								context1.setLineWidth(caculateX * 20);
								context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
								context1.stroke();
								context1.beginPath();
								context1.setStrokeStyle('#32D74B');
								context1.setFillStyle('#32D74B');
								context1.setTextAlign('center');
								context1.setTextBaseline('middle');
								context1.setLineCap('round');
								context1.setFontSize(caculateX * 64);
								context1.fillText(this.reportdata.performance, caculateX * 90, caculateX * 90, caculateX * 180);
								context1.setFillStyle('#999999');
								context1.setFontSize(caculateX * 20);
								context1.fillText(`满分${this.reportdata.totalScore || 0}`, caculateX * 90, caculateX * 130, caculateX * 180);
								context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.performance / this.reportdata.totalScore) * 2 * Math.PI, false);
								context1.stroke();
								context1.draw();
							}
							
							if(this.reportdata.examTime) {
								var context2 = uni.createCanvasContext('Canvas2');
								this.context2 = context2;
								context2.setStrokeStyle('#EEEEEE');
								context2.setLineWidth(caculateX * 20);
								context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
								context2.stroke();
								context2.beginPath();
								context2.setStrokeStyle('#007AFF');
								context2.setFillStyle('#007AFF');
								context2.setTextAlign('center');
								context2.setTextBaseline('middle');
								context2.setLineCap('round');
								context2.setFontSize(caculateX * 64);
								context2.fillText(`${this.reportdata.doTime}'`, caculateX * 90, caculateX * 90, caculateX * 180);
								context2.setFillStyle('#999999');
								context2.setFontSize(caculateX * 20);
								context2.fillText(`限时${this.reportdata.examTime}'`, caculateX * 90, caculateX * 130, caculateX * 180);
								context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.doTime / this.reportdata.examTime) * 2 * Math.PI, false);
								context2.stroke();
								context2.draw();
							}
							
							if(this.reportdata.score != -1) {
								var context3 = uni.createCanvasContext('Canvas3');
								this.context3 = context3;
								context3.setStrokeStyle('#EEEEEE');
								context3.setLineWidth(caculateX * 20);
								context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
								context3.stroke();
								context3.beginPath();
								context3.setStrokeStyle('#32D74B');
								context3.setFillStyle('#32D74B');
								context3.setTextAlign('center');
								context3.setTextBaseline('middle');
								context3.setLineCap('round');
								context3.setFontSize(caculateX * 64);
								context3.fillText((this.reportdata.performance + this.reportdata.score), caculateX * 90, caculateX * 90, caculateX * 180);
								context3.setFillStyle('#999999');
								context3.setFontSize(caculateX * 20);
								context3.fillText(`满分${this.reportdata.totalScore || 0}`, caculateX * 90, caculateX * 130, caculateX * 180);
								context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + ((this.reportdata.performance + this.reportdata.score) / this.reportdata.totalScore) * 2 * Math.PI, false);
								context3.stroke();
								context3.draw();
							}
							
							
						});
				}
			});
		},
		getcourList() {
            this.$http({
                url: '/apply/recommend/goodsList',
                method: 'post',
                data: {
					examId: this.examId,
                    pageNum: this.pageNum,
					pageSize: this.pageSize,
                }
            }).then((res) => {
                if (res.data.code == 200) {
					
					this.courseList.push(...(res.data.rows || [] ))
					console.log('this.courseList', this.courseList)
					this.total = res.data.total
                }
            })
        },
		toBuy(item) {
			if (item.goodsType == 2) {
                uni.navigateTo({
                    url: '/pages2/bank/detail?id='+item.goodsId
                })
            } else {
				// /pages5/liveDetail/index
                uni.navigateTo({
                    url: '/pages3/course/detail?id='+item.goodsId + '&goodsType=' + item.goodsType
                })
            }
        },
		bankExamNextExam() {
			this.$api.bankExamNextExam({
				chapterExamId:this.chapterId,
				examId:this.examId,
				goodsId:this.goodsId,
				orderGoodsId:this.orderGoodsId,
				moduleExamId:this.moduleId
			}).then(res => {
				if(res.data.code == 500) {
					this.nextExamId = '';
				} else if(res.data.code == 200) {
					this.nextExamId = res.data.data.examId;
				}
			})
		},
		backBank() {
			if (this.entryType == 'daily') {
				uni.navigateBack()
				return
			}
			uni.navigateTo({
				url: '/pages2/bank/questionBank?orderGoodsId='+this.orderGoodsId+'&id=' +this.nextExamId + '&goodsid=' + this.goodsId + '&moduleId=' + this.moduleId + '&chapterId=' + this.chapterId + ''
			});
			
			// uni.navigateBack({
			// 	delta:1
			// })
			// uni.redirectTo({
			// 	url: '/pages2/bank/my_question'
			// });
		},
		bankExam(){
			return new Promise(resolve =>{
				this.$api.bankExam(this.examId).then(res => {
					this.examData = res.data.data;
					resolve()
				})
			})
		},
		/**
		 * 去做题
		 */
		async doRepeat(id, goodsId, moduleId = 0, chapterId = 0) {
			if (this.entryType == 'random') {
				uni.navigateBack()
				return
			}
			// await this.getDetail(goodsId);
			let count = await this.examRecordCount(id, goodsId);
			let answerNum = await this.getExamDetail(id);
			//超过答题次数
			if (answerNum > 0 && count >= answerNum) {
				this.$u.toast('该试卷只能答题' + answerNum + '次!');
				return;
			}

			var pages = getCurrentPages();
			var prepage = pages[pages.length - 2]; //上一个页面
			prepage.$vm.isRepeat = true;
			uni.redirectTo({
				url: '/pages2/bank/questionBank?orderGoodsId='+this.orderGoodsId+'&id=' + id + '&goodsid=' + goodsId + '&moduleId=' + moduleId + '&chapterId=' + chapterId
				+ '&entryType=' + this.entryType + '&bankNum=' + this.bankNum
			});
		},
		/**
		 * @param {Object} exam_id
		 * 获取试卷可以做的次数
		 */
		getExamDetail(exam_id) {
			return new Promise(resolve => {
				this.$api.getExamDetail(exam_id).then(res => {
					resolve(res.data.data.answerNum);
				});
			});
		},
		examWrongRecordWrongNum() {
			return new Promise(resolve => {
				this.$api.examWrongRecordWrongNum(this.recordId).then(res => {
					this.wrongRecordWrongNum = res.data.data || 0;
					resolve();
				});
			});
		},
		/**
		 * 查询试卷历史做题次数
		 */
		examRecordCount(examId, goodsId) {
			return new Promise(resolve => {
				this.$api
					.examRecordCount({
						examId: examId,
						orderGoodsId: this.orderGoodsId,
					})
					.then(res => {
						resolve(res.data.data);
					});
			});
		},
		getDetail(id) {
			return new Promise(resolve => {
				this.$api.goodsDetail(id).then(res => {
					this.goodsData = res.data.data;
					resolve();
				});
			});
		},
		examReport() {
			return new Promise(resolve => {
				this.$api.examReport(this.recordId).then(res => {
					this.reportdata = res.data.data;
					this.getCanvas()
					resolve()
				});
				
			})
		}
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
@import '../../pages5/examReport/indexCourseList.scss';
.disNone {
	display: none;
}
.greenBtn {
	margin: 16rpx 16rpx 0;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #f7fff8;
	border-radius: 16rpx;
	color: #34c759;
	font-weight: bold;
	font-size: 30rpx;
}
.redBtn {
	margin: 16rpx 16rpx 0;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #FFF3F2;
	border-radius: 16rpx;
	color: #FF3B30;
	font-weight: bold;
	font-size: 30rpx;

}
.dis_fst {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.btnACs {
	height: 48rpx;
	width: 160rpx;
	text-align: center;
	line-height: 48rpx;
	border: 1rpx solid #007aff;
	border-radius: 16rpx;
	color: #007aff;
	font-size: 24rpx;
}
.top {
	margin: 16rpx 16rpx 0;
	border-radius: 16rpx;
	padding: 40rpx 24rpx 16rpx;
	background: #fff;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.desc {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.box {
		margin-top: 30rpx;
		display: flex;

		.left {
			width: 250rpx;
			height: 272rpx;
			background: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 16rpx;

			view {
				text-align: center;

				&:nth-of-type(1) {
					font-size: 60rpx;
					font-weight: bold;
					color: #007aff;
				}
				&:nth-of-type(2) {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				&:nth-of-type(3) {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.flex {
				background: #f5f5f5;
				display: flex;
				height: 80rpx;
				align-items: center;
				padding: 0 40rpx;
				border-radius: 16rpx;

				image {
					margin-right: 28rpx;
					
					&.right_num {
						width:26rpx;
					}
					
					&.out_num {
						width:38rpx;
						
					}
					
					&.wrong_num {
						width:30rpx;
						
					}
					
				}

				.text {
					flex: 1;
					font-size: 30rpx;
					color: #666666;
				}

				text {
					font-size: 48rpx;
					color: #e12626;

					&.red {
						color: #FF3B30;
					}

					&.green {
						color: #36C75A;
					}
					
					&.yellow {
						color:#FFC53D;
					}
				}
			}
		}
	}
}

.bottom {
	.circle-wrap {
		.circle-list {
			display: flex;

			.item {
				padding: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				margin: 16rpx;
				flex: 1;

				.title {
					font-weight: bold;
					font-size: 30rpx;
					line-height: 24rpx;
					color: #333333;

					text {
						font-size: 20rpx;
						color: #999999;
					}
				}

				canvas {
					margin: 36rpx auto 0;
					width: 180rpx;
					height: 180rpx;
				}

				.text {
					text-align: center;
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>