answer.vue

<template>
    <view class="content">
        <view class="">
            <view class="" style="padding-left: 94rpx; margin: 36rpx 0">
                <text class="dx">多选</text
                ><text class="all">{{ ExaminationQuestions.progress }}</text>
            </view>
            <view class="" style="text-align: center">
                {{ ExaminationQuestions.question.content }}
            </view>
            <view class="" style="margin-top: 130rpx">
                <view class="list-box">
                    <view
                        v-for="(item, index) in list"
                        :key="index"
                        @click="choice(index)"
                        :class="[item.isRight ? 'selde' : 'noselde']"
                    >
                        {{ item.content }}
                    </view>
                </view>
            </view>
            <button class="btn" @click="nextClick()">下一题</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    isRight: false,
                    title: "A",
                },
                {
                    isRight: false,
                    title: "B",
                },
                {
                    isRight: false,
                    title: "C",
                },
                {
                    isRight: false,
                    title: "D",
                },
                {
                    isRight: false,
                    title: "E",
                },
            ],
            isSelect: false,
            selectId: [],
            userExamId: null,
            ExaminationQuestions: null,
            isQuestion: true,
        };
    },
    onLoad(num) {
        console.log("标识符4", this.userExamId);
        console.log("标识符3" + num);

        this.userExamId = num.userExamId;
        this.getExaminationQuestions();
    },
    onUnload() {
        wx.reLaunch({
            url: "./index",
        });
    },

    methods: {
        abc() {
            console.log("11111");
            var arr = document.querySelector(".btm");
            for (let i = 0; i < arr.length; i++) {
                arr[i].onclick = function () {
                    console.log(this.value);
                };
            }
        },
        //选择按钮
        choice(index) {
            if (this.list[index].isRight == true) {
                this.list[index].isRight = false;
                this.isSelect = false;
                console.log(this.isSelect);
                //取消选中时删除数组中的值
                for (var i = 0; i < this.selectId.length; i++) {
                    if (this.selectId[i] === this.list[index].id) {
                        this.selectId.splice(i, 1);
                    }
                }
                console.log("选中的值", this.selectId);
            } else {
                this.list[index].isRight = true;
                this.isSelect = true;
                console.log(this.isSelect);
                this.selectId.push(this.list[index].id);
                console.log("选中的值", this.selectId);
            }
        },
        //申请考试题目
        getExaminationQuestions: function () {
            uni.request({
                url:
                    "http://192.168.1.22" +
                    "/wxh-worker-rest/rest/exam" +
                    "/serviceRule/next/" +
                    this.vuex_token +
                    "?userExamId=" +
                    this.userExamId,
                method: "POST",
                header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                success: (res) => {
                    if (res.data.code == 200) {
                        this.ExaminationQuestions = res.data.data;
                        this.list = res.data.data.answerList;
                        console.log(this.ExaminationQuestions);
                    }
                },
            });
            console.log("answer的userExamId是", this.userExamId);
        },
        //下一题
        nextClick: function () {
            //判断
            if (this.isQuestion == "第20题/共20题") {
                this.isQuestion = "";
                console.log("标识符6666", this.userExamId.userExamId);
                wx.navigateTo({
                    url: "./result?userExamId=" + this.userExamId,
                });
            }
            //判断有没有选
            if (this.selectId.length == 0) {
                wx.showToast({
                    title: "请选择",
                    icon: "none", //当icon：'none'时，没有图标 只有文字
                    duration: 2000,
                });
                return;
            }

            uni.request({
                url:
                    "http://192.168.1.22" +
                    "/wxh-worker-rest/rest/exam" +
                    "/serviceRule/next/" +
                    this.vuex_token +
                    "?userExamId=" +
                    this.userExamId +
                    "&questionId=" +
                    this.ExaminationQuestions.question.id +
                    "&userAnswerIds=" +
                    this.selectId,
                method: "POST",
                header: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                success: (res) => {
                    console.log("sssss", res);

                    if (res.data.code == 200) {
                        this.ExaminationQuestions = res.data.data;
                        this.list = res.data.data.answerList;
                        this.isQuestion = res.data.data.progress;
                        console.log("uuuuuuuu", this.ExaminationQuestions);
                    }
                    this.selectId = [];
                    console.log("zzy", this.selectId);
                },
            });
        },
    },
};
</script>

<style lang="scss">
.content {
    width: 600rpx;
    height: 800rpx;
    /* background: #8F8F94; */
    margin: 0 auto;
}

.dx {
    padding: 0rpx;
    background: #2979ff;
    color: #ffffff;
    border-radius: 0px;
}

.num {
    color: #2b85e4;
}

.all {
    color: #8f8f94;
}

.btn {
    margin-top: 98rpx;
    width: 476rpx;
    height: 60rpx;
    line-height: 30px;
    background: #007aff;
    color: #ffffff;
}

.btm {
    width: 476rpx;
    height: 60rpx;
    line-height: 30px;
    margin: 34rpx auto;
}

.list-box {
    // display: flex;
    // flex-wrap: wrap;
    padding: 16upx;
    border-radius: 10upx;

    view {
        width: 476rpx;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
        margin: 26rpx auto 0;
    }
}

/*已选择*/
.selde {
    background: #007aff;
    color: #ffffff;
    border-radius: 20upx;
    font-size: 26rpx;
    padding: 0 10upx;
}

/*未选择*/
.noselde {
    background: #e4e7ed;
    color: #959595;
    border-radius: 20upx;
    font-size: 20upx;
    padding: 0 10upx;
}
</style>