261 lines
6.8 KiB
Vue
261 lines
6.8 KiB
Vue
<template>
|
|
<Navigation :title_name="person.exam.examName"
|
|
:isReturn="0"
|
|
:color="'#000000'"
|
|
:bgc="'#FFFFFF'"
|
|
:isCenter="false" />
|
|
<view class="page-bg">
|
|
<view class="test_top">
|
|
<text>{{person.exam.userName}}</text>
|
|
<text>{{person.exam.subject}}</text>
|
|
<text>{{person.exam.totalScore}}</text>
|
|
<text class="top-score" v-if="person.exam.isJuniorSchool">{{person.exam.baseScore?person.exam.baseScore+'分':'0分'}}</text>
|
|
<text>{{person.testData.length>0?person.btnActive+1:person.btnActive}}/{{person.testData.length}}页</text>
|
|
</view>
|
|
<view v-if="person.testData&&person.testData.length>0">
|
|
<movable-area class="movable_box" v-if="person.itemExam.PaperType===1">
|
|
<movable-view :style="{height:person.itemExam.Width*person.scaleHeight+'px;'}" direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" >
|
|
<view class="test_center" :style="{transform:'rotate(90deg);',width:person.itemExam.Width*person.scaleHeight+'px;',height:person.itemExam.Height*person.scaleHeight+'px;'}">
|
|
<image :style="{width:person.itemExam.Width*person.scaleHeight+'px;',height:person.itemExam.Height*person.scaleHeight+'px;'}" :src="person.itemExam.ImageUrl" mode=""></image>
|
|
<view class="page_item flex" v-for="(quest,quIndex) in person.itemExam.Questions" :key="quIndex"
|
|
:style="{
|
|
top:quest.Y*person.scaleHeight +'px;',
|
|
left:quest.X*person.scaleHeight+'px;',
|
|
width:quest.Width*person.scaleHeight+'px;',
|
|
height:quest.Height*person.scaleHeight+'px;'}">
|
|
<view class="text_flex flex" :style="{fontSize:quest.isObj?'24rpx':''}">
|
|
<text class="color_red">{{quest.score}}</text>/
|
|
<text class="color_blue">{{quest.totalScore}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</movable-view>
|
|
</movable-area>
|
|
<movable-area class="movable_box" v-else-if="person.itemExam.PaperType===2">
|
|
<movable-view :style="{height:person.itemExam.Height*person.scaleWidth+'px;'}" direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" >
|
|
<view class="test_center" :style="{width:person.itemExam.Width*person.scaleWidth+'px;',height:person.itemExam.Height*person.scaleWidth+'px;'}">
|
|
<image data-type="image" :src="person.itemExam.ImageUrl" mode=""></image>
|
|
<view class="page_item flex" v-for="(quest,quIndex) in person.itemExam.Questions" :key="quIndex"
|
|
:style="{
|
|
top:quest.Y*person.scaleWidth +'px;',
|
|
left:quest.X*person.scaleWidth+'px;',
|
|
width:quest.Width*person.scaleWidth+'px;',
|
|
height:quest.Height*person.scaleWidth+'px;'}">
|
|
<view class="text_flex flex" :style="{fontSize:quest.isObj?'24rpx':''}">
|
|
<text class="color_red">{{quest.score}}</text>/
|
|
<text class="color_blue">{{quest.totalScore}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</movable-view>
|
|
</movable-area>
|
|
</view>
|
|
<view v-else>
|
|
<view class="empty_box">
|
|
<image src="../../static/null_icon.png" mode=""></image>
|
|
<text>暂无数据~</text>
|
|
</view>
|
|
</view>
|
|
<view class="test_bottom flex">
|
|
<view class="bottom_list">
|
|
<view class="btn_list flex" v-if="person.itemLength>1">
|
|
<view class="btn_item" :class="[person.btnActive===index?'btn_item_active':'']" v-for="(item,index) in person.itemLength" :key="index" @click="changeBtn(index)">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom_list flex">
|
|
<view class="bottom_item flex">
|
|
<text class="bottom_item_red"></text>
|
|
我的得分
|
|
</view>
|
|
<view class="bottom_item flex">
|
|
<text class="bottom_item_blue"></text>
|
|
年级平均分
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { nextTick, reactive, ref, watch } from 'vue'
|
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
|
import Navigation from '@/components/navigation/index.vue'
|
|
import { getTestImgs } from "@/api/exam-data";
|
|
|
|
let person=reactive({
|
|
testData:[],
|
|
exam:{},
|
|
btnActive:0,
|
|
itemExam:{},
|
|
itemLength:0,
|
|
scaleWidth:0, // 根据宽的缩放比例
|
|
scaleHeight:0
|
|
})
|
|
onLoad((e)=>{
|
|
// e 获取路由参数
|
|
person.exam=JSON.parse(e.info)
|
|
GetTestImgs(e.Id)
|
|
load()
|
|
})
|
|
|
|
// 初始值
|
|
const load=()=>{
|
|
if(person.testData&&person.testData.length>0){
|
|
person.itemExam=person.testData[person.btnActive]
|
|
person.itemLength=person.testData.length
|
|
// 获取屏幕宽
|
|
uni.getSystemInfo({
|
|
success:(res)=> {
|
|
person.scaleWidth = res.windowWidth/person.itemExam.Width
|
|
person.scaleHeight = res.windowWidth/person.itemExam.Height
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 获取学生答卷
|
|
const GetTestImgs=(Id)=> {
|
|
getTestImgs({examSubjectId: Id}).then(res => {
|
|
let { Code, Data, Message } = res
|
|
if(Code===200&&Data){
|
|
person.testData=Data
|
|
load()
|
|
}else{
|
|
uni.showToast({
|
|
title: Message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const changeBtn=(index)=>{
|
|
person.btnActive=index
|
|
if(person.testData&&person.testData.length>0){
|
|
person.itemExam=person.testData[index]
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.test_top{
|
|
padding: 0 32rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
color: #888888;
|
|
text{
|
|
margin-right:30rpx;
|
|
}
|
|
.top-score{
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.page-bg{
|
|
height: calc(100vh - 230rpx);
|
|
}
|
|
.movable_box{
|
|
width: 375px;
|
|
height: calc(100vh - 340rpx);
|
|
overflow: hidden;
|
|
movable-view{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.test_center{
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.page_item{
|
|
position: absolute;
|
|
border: 2rpx solid red;
|
|
.text_flex{
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 10rpx;
|
|
font-size: 36rpx;
|
|
line-height: 30rpx;
|
|
overflow: hidden;
|
|
text{
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.test_bottom{
|
|
background: #fff;
|
|
height: 80rpx;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
text-align: center;
|
|
border-top: 2rpx solid #eee;
|
|
justify-content: space-between;
|
|
z-index: 999;
|
|
.bottom_list{
|
|
padding: 25rpx 32rpx;
|
|
.btn_list{
|
|
padding: 10rpx 0;
|
|
max-width: 350rpx;
|
|
display: -webkit-box;
|
|
white-space: nowrap;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling:touch; // 允许独立的滚动区域和触摸回弹
|
|
.btn_item{
|
|
border: 2rpx solid #999;
|
|
color: #999;
|
|
margin-right: 25rpx;
|
|
border-radius: 50%;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.btn_item_active{
|
|
background: #6B86FF !important;
|
|
color: #fff !important;
|
|
border: 2rpx solid #6B86FF !important;
|
|
}
|
|
}
|
|
.bottom_item{
|
|
font-size: 24rpx;
|
|
color: #888888;
|
|
margin-left: 20rpx;
|
|
white-space: nowrap;
|
|
text{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
margin-right: 8rpx;
|
|
}
|
|
.bottom_item_red{
|
|
background: #FF2929;
|
|
}
|
|
.bottom_item_blue{
|
|
background: #6B86FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.color_red{
|
|
color: #FF2929;
|
|
}
|
|
.color_blue{
|
|
color: #6B86FF;
|
|
}
|
|
</style> |