YXGJ/packageA/exam/detail.vue

<template>
    <view>
        <view class="head box" style="margin-bottom: 10px;">
            <view>
                <text class="iconfont icon-shijian" />
                <timer ref="timer" />
            </view>
            <text class="iconfont icon-tika" @click="openTopicCard = true">
                题卡
            </text>
        </view>
        <My_listbox :pullDown="false">
            <swiper :style="{ height: tovw(swiperHeight), marginTop: 0 }" :current-item-id="currentItemId"
                @change="swiperChange">
                <swiper-item v-for="item in detail.testquestions" :key="item.sat_courseware_testitemsid"
                    :item-id="item.rowindex + ''">
                    <view class="box">
                        <view class="typemxstr">
                            {{ item.rowindex }} {{ item.typemxstr }}<text class="score">({{ item.score }})</text>
                        </view>
                        <image class="image" v-if="item.attinfos.length" :src="item.attinfos[0].src" mode="aspectFill"
                            lazy-load="true" />
                        <view class="content">
                            <view class="title">{{ item.question }}</view>
                            <view class="option" v-for="option in item.options" :key="option.sequence"
                                @click="selectOption(item.rowindex, option.option)"
                                :class="item.answer.includes(option.option) ? 'active' : ''">
                                <image class="image" v-if="option.url.length" :src="option.url[0].url" mode="aspectFill"
                                    lazy-load="true" />
                                <view class="text">
                                    {{ option.option }} {{ option.content }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="box" v-if="detail.status == '已完成'">
                        <view class="typemxstr">答案</view>
                        <view class="row" style="padding-top: 10px;">
                            结果：<text class="res-f" v-if="item.result == 0">答错</text><text v-else class="res-t">答对</text>
                        </view>
                        <view class="row">
                            结果：<text style="font-weight: bold;color:#009270 ;">{{ item.answer_fact.join(",") }}</text>
                        </view>
                        <view class="row">
                            分数：<text class="score">{{ item.result == 1 ? item.score : 0 }}</text>
                        </view>
                    </view>
                </swiper-item>
            </swiper>

            <view :style="{ height: tovw(80) }" />
        </My_listbox>
        <view class="bottom">
            <view v-if="currentItemId != 1" class="but up" hover-class="navigator-hover" @click="changeQuestions('-')">
                上一题
            </view>
            <view v-if="detail.testquestions.length != currentItemId" class="but down" hover-class="navigator-hover"
                @click="changeQuestions('+')">
                下一题
            </view>
            <view v-if="detail.testquestions.length == currentItemId && detail.status != '已完成'" class="but submit"
                @click="submit" hover-class="navigator-hover">
                提交
            </view>
        </view>

        <u-popup :show="openTopicCard" :safeAreaInsetBottom="false" round="8" @close="openTopicCard = false">
            <My_listbox :pullDown="false" :automatic="false" defaultHeight="500">
                <view class="topic-card">
                    <view class="topic-card-title">选择题目</view>
                    <view class="topic-card-content">
                        <view class="topic-card-item"
                            :class="[currentItemId == item.rowindex ? 'topic-card-active' : '', item.answer.length > 0 ? 'topic-card-filled' : '']"
                            v-for="item in  detail.testquestions " :key="item.sat_courseware_testitemsid"
                            :data-currentItemId="item.rowindex + ''" @click="swiperChange">
                            {{ item.rowindex }}
                            <view class="res" v-if="detail.status == '已完成'"
                                :style="{ background: item.result == 1 ? '#70D95D' : '#E3041F' }" />
                        </view>
                    </view>
                </view>
            </My_listbox>
            <view class="bottom" style="position: relative;">
                <view class="but down" hover-class="navigator-hover" @click="openTopicCard = false">
                    关 闭
                </view>
            </view>
        </u-popup>

        <u-popup :show="showFinish" mode="center" round="8" :safeAreaInsetBottom="false">
            <view class="finish">
                <image class="result" src="../../static//examination-result.png" mode="aspectFill" />
                <view class="shadow" />
                <view class="finish-title">考试结果</view>
                <view class="finish-result">
                    <view class="finish-result-item">
                        <view class="finish-result-item-data" style="color:#FF3B30;">
                            {{ detail.score }}
                        </view>
                        成绩(分)
                    </view>
                    <view class="finish-result-item">
                        <view class="finish-result-item-data" style="color:#3874F6;">
                            {{ detail.answercount + ' / ' + detail.num }}
                        </view>
                        答题数
                    </view>
                </view>

                <view class="tips">
                    <view class="row">
                        <view class="dot" style="background: #52C41A;" />
                        答对<text class="text">{{ detail.rightcount }}</text>题
                    </view>
                    <view class="row">
                        <view class="dot" style="background: #FF3B30;" />
                        答错<text class="text">{{ detail.errcount }}</text>题
                    </view>
                </view>

                <view class="but but-res" @click="showFinish = false">
                    查看答案
                </view>
                <view class="but" @click="returnList">
                    返回
                </view>
            </view>
        </u-popup>


        <view class="quere-height">
            <view :id="'Item' + item.rowindex" v-for=" item  in  detail.testquestions "
                :key="item.sat_courseware_testitemsid" :item-id="item.rowindex + ''">
                <view class="box">
                    <view class="typemxstr">
                        {{ item.rowindex }} {{ item.typemxstr }}<text class="score">({{ item.score }})</text>
                    </view>
                    <image class="image" v-if="item.attinfos.length" :src="item.attinfos[0].src" mode="aspectFill"
                        lazy-load="true" />
                    <view class="content">
                        <view class="title">{{ item.question }}</view>
                        <view class="option" v-for=" option  in  item.options " :key="option.sequence"
                            @click="selectOption(item.rowindex, option.option)"
                            :class="item.answer.includes(option.option) ? 'active' : ''">
                            <image class="image" v-if="option.url.length" :src="option.url[0].url" mode="aspectFill"
                                lazy-load="true" />
                            <view class="text">
                                {{ option.option }} {{ option.content }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="box" v-if="detail.status == '已完成'">
                    <view class="typemxstr">答案</view>
                    <view class="row" style="padding-top: 10px;">
                        结果：<text class="res-f">答错</text><text class="res-t">答对</text>
                    </view>
                    <view class="row">
                        结果：<text style="font-weight: bold;color:#009270 ;">{{ item.answer_fact }}</text>
                    </view>
                    <view class="row">
                        分数：<text class="score">{{ item.result == 1 ? item.score : 0 }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import timer from "./modules/timer.vue"
export default {
    components: { timer },
    data() {
        return {
            sat_courseware_testheadid: 0,
            currentItemId: '1',
            detail: {
                testquestions: []
            },
            swiperHeight: 10,
            openTopicCard: false,
            showFinish: false
        }
    },
    onLoad(options) {
        this.sat_courseware_testheadid = options.id || 0;
        this.getDetail();
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": 20240325102202,
                "content": {
                    "sat_courseware_testheadid": this.sat_courseware_testheadid
                }
            }).then(res => {
                console.log("生成试卷并获取详情", res)
                if (this.cutoff(res.msg)) return;
                this.detail = res.data;
                if (this.detail.status != '已完成') {
                    this.$refs.timer.startCounting()
                } else {
                    this.$refs.timer.showTime = res.data.countdown;
                    this.showFinish = true;
                }
                uni.setNavigationBarTitle({
                    title: res.data.title,
                })
                this.$nextTick(() => { this.setSwiperHeight() })
            })
        },
        selectOption(rowindex, option) {
            if (this.detail.status == '已完成') return;
            let item = this.detail.testquestions[rowindex - 1],
                answer = item.answer;
            switch (item.typemxstr) {
                case '单选':
                    answer = [option]
                    break;
                case '多选':
                    answer.some(v => v == option) ? answer = answer.filter(v => v != option) : answer.push(option)
                    break;
            }
            this.$set(item, 'answer', answer)
        },
        swiperChange(e) {
            this.currentItemId = e.target.currentItemId || e.currentTarget.dataset.currentitemid;
            this.$nextTick(() => { this.setSwiperHeight() })
        },
        changeQuestions(e) {
            if (e == '+') {
                this.currentItemId = String(this.currentItemId - 0 + 1);
            } else {
                this.currentItemId = String(this.currentItemId - 1);
            }
        },
        setSwiperHeight() {
            let that = this;
            const element = `#Item${this.currentItemId}`;
            const query = uni.createSelectorQuery().in(that);
            setTimeout(() => {
                query.select(element).boundingClientRect();
                query.exec(res => {
                    if (res && res[0]) that.swiperHeight = res[0].height - 10;
                });
            }, 100)
        },
        submit() {
            let content = {
                "sat_courseware_testid": this.detail.sat_courseware_testid,
                "answers": this.detail.testquestions.map(v => {
                    return {
                        sat_courseware_testitemsid: v.sat_courseware_testitemsid,
                        answer: v.answer,
                        rowindex: v.rowindex
                    }
                })
            },
                notFilleds = content.answers.filter(v => v.answer.length == 0).map(v => v.rowindex),
                tips = "是否确定提交",
                that = this;

            if (notFilleds.length) tips = `题号“${notFilleds.join(',')}”还未完成！是否继续提交?`;
            content.countdown = that.$refs.timer.getTime();
            uni.showModal({
                title: '提示',
                content: tips,
                success: ({ confirm }) => {
                    if (confirm) that.$Http.basic({
                        "id": 20240326145902,
                        content
                    }).then(res => {
                        console.log('提交试卷', res)
                        if (this.cutoff(res.msg, '', true)) return that.$refs.timer.startCounting();
                        that.$refs.timer.endTiming();
                        that.getDetail();
                    })
                },
            })

        },
        returnList() {
            uni.navigateBack();
        }
    }
}
</script>

<style lang="scss" scoped>
body,
page {
    height: 100vh;
    overflow: hidden;
}

.box {
    width: 355px;
    background: #FFFFFF;
    border-radius: 8px;
    margin: 10px auto 0;
    box-sizing: border-box;

    .row {
        padding: 5px 10px;

        .score {
            font-weight: bold;
            color: #095DE0;
        }

        .res-t,
        .res-f {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
        }

        .res-t {
            color: #009270;
        }

        .res-f {
            color: #E3041F;
        }
    }

    .row:last-child {
        padding-bottom: 10px;
    }
}

.image {
    width: 163px;
    height: 100px;
    border-radius: 8px;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;

    /deep/ .time,
    .iconfont {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .icon-tika:before,
    .icon-shijian:before {
        color: #999999;
        margin-right: 5px;
    }
}

.quere-height {
    position: fixed;
    z-index: -9999;
    top: -99999999999999999;
    opacity: 0;
}

.typemxstr {
    width: 100%;
    height: 50px;
    padding: 15px 10px;
    border-bottom: 1px solid #DDDDDD;
    box-sizing: border-box;

    .score {
        color: #999999;
        margin-left: 5px;
    }
}

.content {
    padding: 10px;
    padding-bottom: 20px;

    .title {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .option {
        border-radius: 8px;
        border: 1px solid #CCCCCC;
        padding: 10px;
        margin-top: 10px;

        .text {
            font-family: PingFang SC, PingFang SC;
        }
    }

    .active {
        border: 1px solid #095DE0 !important;

        .text {
            color: #095DE0 !important;
        }
    }
}

.bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 375px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    padding-right: 10px;
    box-sizing: border-box;

    .but {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        margin-left: 10px;
        width: 168px;
        height: 45px;
        border-radius: 5px;
        margin-top: 4px;
        box-sizing: border-box;
    }

    .up {
        background: #FFFFFF;
        border: 1px solid #999999;
        font-size: 16px;
        color: #666666;
    }

    .down,
    .submit {
        background: #095DE0;
        font-family: PingFang SC, PingFang SC;
        font-size: 16px;
        color: #FFFFFF;
    }

    .submit {
        background: #C30D23;
    }
}

.topic-card {
    .topic-card-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        margin: 20px;
        text-align: center;
    }

    .topic-card-content {
        display: flex;
        flex-wrap: wrap;
        padding-left: 8px;


        .topic-card-item {
            position: relative;
            width: 35px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            border: 1px solid #999999;
            margin-right: 10px;
            margin-bottom: 10px;

            .res {
                position: absolute;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                bottom: 6px;
                left: 16px;
                background: red;
            }
        }

        .topic-card-active {
            border: 1px solid #095DE0;
            color: #095DE0;
        }

        .topic-card-filled {
            background: #F4F5F7 !important;
        }

        .topic-card-item:nth-child(8n) {
            margin-right: 0;
        }

    }
}

.finish {
    position: relative;
    width: 240px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 1px rgba(98, 98, 241, 0.12);
    border-radius: 8px;
    padding-bottom: 20px;

    .result {
        position: absolute;
        width: 88px;
        height: 88px;
        top: -20px;
        left: 76px;
    }

    .shadow {
        position: absolute;
        top: 65px;
        left: 76px;
        width: 88px;
        height: 11px;
        background: rgba(227, 4, 31, 0.15);
        filter: blur(7.4338297843933105px);
    }

    &-title {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #222222;
        text-align: center;
        padding-top: 96px;
    }

    &-result {
        display: flex;
        justify-content: space-around;
        height: 67px;
        width: 180px;
        margin: 18px auto 0;
        border-bottom: 1px solid #DDDDDD;

        &-item {
            text-align: center;
            font-family: PingFang HK, PingFang HK;
            font-size: 13px;
            color: #666666;

            &-data {
                height: 24px;
                line-height: 24px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 5px;
            }
        }
    }

    .tips {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 8px;

        .row {
            display: flex;
            align-items: center;
            margin-top: 10px;

            .dot {
                width: 6px;
                height: 6px;
                border-radius: 3px;
                margin-right: 10px;
            }

            .text {
                color: #3874F6;
                font-size: 16px;
                font-weight: bold;
                padding: 0 4px;
            }
        }
    }

    .but {
        width: 160px;
        height: 45px;
        text-align: center;
        line-height: 45px;
        background: #C30D23;
        border-radius: 22.5px;
        margin: 0 auto;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        margin-top: 10px;
    }

    .but-res {
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        margin-top: 25px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
    }
}
</style>