FE-V2-XCX/pages_student/workbench/exam/examList.vue

<!-- 在线考试 -->
<template>
    <view id="examList">
        <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
            <view class="for-box" v-for="(item,index) in infoList" :key="index">
                <view class="for-title-box">
                    <view :class="item.level==1?'colorA':(item.level==2?'colorB':(item.level==3?'colorC':''))">{{item.level==1?'中等':(item.level==2?'较难':(item.level==3?'难':''))}}</view>
                    <view>{{item.title}}</view>
                </view>
                <view class="for-info-box">{{item.info}}</view>
                <view class="for-text-box">
                    <view>试卷总分：</view>
                    <view>{{item.totalScore}}</view>
                </view>
                <view class="for-text-box">
                    <view>及格分数：</view>
                    <view>{{item.qualifyScore}}</view>
                </view>
                <view class="for-text-box">
                    <view>考试时长：</view>
                    <view>{{item.totalTime}}分钟</view>
                </view>
                <view class="for-button-box" @click="createPaperButton(item)">开始考试</view>
            </view>
            <view class="get-null-box" v-if="getData.nullDataType">暂无更多数据</view>
        </scroll-view>
    </view>
</template>

<script>
    import { onlineExamList,createPaper } from '@/api/index.js'
    export default {
        data() {
            return {
                infoList:[],
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                },
                violationId:"",
            }
        },
        onLoad(option) {
            if(option.violationId){
                this.violationId = option.violationId;
            }
            // this.itemData = JSON.parse(decodeURIComponent(option.item));
            // //修改页面title
            // uni.setNavigationBarTitle({
            //     title:this.itemData.content
            // });
            // this.time(this.itemData.totalTime);
            // this.getPaper();
        },
        onShow(){
            this.clearData();
            this.getList();
        },
        methods: {
            //清除
            clearData(){
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //创建考卷
            async createPaperButton(item){
                let self = this;
                const {data} = await createPaper(item.id);
                if(data.code == 200){
                    item.newPaperId = data.data;
                    if(this.violationId){
                        uni.navigateTo({
                            url: '/pages_student/workbench/exam/examInfo?item='+encodeURIComponent(JSON.stringify(item))+'&violationId='+this.violationId
                        });
                    }else{
                        uni.navigateTo({
                            url: '/pages_student/workbench/exam/examInfo?item='+encodeURIComponent(JSON.stringify(item))
                        });
                    }
                }
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                }
                if(this.violationId){
                    obj.violationId = this.violationId;
                }
                const {data} = await onlineExamList(obj)
                if(data.code==200){
                    if(self.page==1){
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = data.rows;
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = data.rows;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows)
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }

            },
        }
    }
</script>

<style lang="stylus" scoped>
    #examList{
        height:100%;
        width:100%;
        display: flex
        .info-max-box{
            flex:1;
            overflow: scroll
            .for-box{
                background #fff
                margin-bottom:10rpx;
                padding:13rpx 0 25rpx;
                .for-title-box{
                    margin:0 20rpx;
                    display flex
                    view:nth-child(1){
                        padding:0 8rpx;
                        line-height:28rpx;
                        height:28rpx;
                        margin:15rpx 18rpx 0 0;
                        font-size:22rpx;
                        border-radius: 4px;
                    }
                    view:nth-child(2){
                        font-size:30rpx;
                        color:#333;
                        line-height:58rpx;
                    }
                    .colorA{
                        border:1rpx solid #FFC76E;
                        color:#FFC76E;
                    }
                    .colorB{
                        border:1rpx solid #E76200;
                        color:#E76200;
                    }
                    .colorC{
                        border:1rpx solid #FF3B3B;
                        color:#FF3B3B;
                    }
                }
                .for-info-box{
                    line-height:57rpx;
                    font-size:30rpx;
                    margin:0 20rpx;
                    color:#999999;
                }
                .for-text-box{
                    display flex
                    margin:0 20rpx;
                    view{
                        font-size:30rpx;
                        line-height:57rpx;
                    }
                    view:nth-child(1){
                        color:#999999;
                    }
                    view:nth-child(2){
                        color:#333;
                        flex:1;
                    }
                }
                .for-button-box{
                    width: 420rpx;
                    height: 80rpx;
                    border: 2rpx solid #0183FA;
                    border-radius: 10rpx;
                    margin:46rpx auto 0;
                    font-size: 22rpx;
                    color: #0183FA;
                    text-align center
                    line-height:80rpx;
                }
            }
            .get-null-box{
                height:100rpx;
                line-height:100rpx;
                color:#999;
                text-align center
            }
        }
    }
</style>