|
|
@@ -0,0 +1,371 @@
|
|
|
+<template>
|
|
|
+<div>
|
|
|
+ <img class="bg" :src="bg" alt="">
|
|
|
+ <div class="top" v-if="!submitState">
|
|
|
+ <div class="top-message">
|
|
|
+ 您还有
|
|
|
+ <div class="time">09:44</div>
|
|
|
+ 秒答题！
|
|
|
+ </div>
|
|
|
+ <div class="nav-list">
|
|
|
+ <div :class="page===item?'active':''" v-for="item in 5" :key="item" @click="page=item">{{`第${(item-1)*10+1}-${item*10}题`}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <div class="content">
|
|
|
+ <div class="title" v-if="!submitState">2022年冬奥会知识竞赛</div>
|
|
|
+ <div class="answer">
|
|
|
+ <div class="answer-item" v-for="(item,index) in answerList" :key="item.id">
|
|
|
+ <div class="answer-item-title">
|
|
|
+ <div class="answer-item-icon">{{(page-1)*10+index+1}}</div>
|
|
|
+ <div class="answer-item-text">{{item.topic}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="answer-item-choose">
|
|
|
+ <div :class="chooseList[(page-1)*10+index]===num?'active':''" v-for="(i,num) in item.options" :key="i.optionId" @click="clickChoose((page-1)*10+index,num)">{{['A','B','C','D'][num]}}. {{i.optionContent}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="button-group" v-if="page===1">
|
|
|
+ <div class="first-button" @click="page=2" v-if="!submitState">下一页</div>
|
|
|
+ </div>
|
|
|
+ <div class="button-group" v-else-if="!submitState">
|
|
|
+ <div class="back-button" @click="page-=1">上一页</div>
|
|
|
+ <div class="next-button" @click="page+=1" v-if="page!==5">下一页</div>
|
|
|
+ <div class="confim-button" @click="submit" v-else>提交</div>
|
|
|
+ </div>
|
|
|
+ <div class="bounced" :style="conTop" v-if="submitState">
|
|
|
+ <img :src="icon" alt="">
|
|
|
+ <div class="bounced-message">提交已成功！</div>
|
|
|
+ <div class="bounced-button">返回</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ bg: require('../../public/img/contest/bg.png'),
|
|
|
+ conTop: {
|
|
|
+ backgroundImage: 'url(' + require('../../public/img/contest/confirm-bg.png') + ')',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ backgroundSize: 'cover'
|
|
|
+ },
|
|
|
+ icon: require('../../public/img/contest/success.png'),
|
|
|
+ page: 1,
|
|
|
+ questions: [],
|
|
|
+ chooseList: [],
|
|
|
+ paperId: null,
|
|
|
+ timer: null,
|
|
|
+ paperDuration: 0,
|
|
|
+ submitState: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ answerList () {
|
|
|
+ let {
|
|
|
+ questions,
|
|
|
+ page
|
|
|
+ } = this.$data
|
|
|
+ return questions.filter((itx, num) => num >= (page - 1) * 10 && num < page * 10)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ page () {
|
|
|
+ document.body.scrollIntoView()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getAttendContest () {
|
|
|
+ this.$api.post('/mCompetition/attendContest', {
|
|
|
+ userId: 7
|
|
|
+ }).then(r => {
|
|
|
+ this.questions = r.object.questions
|
|
|
+ this.paperId = r.object.paperId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 问题下标 选择答案下标
|
|
|
+ clickChoose (q, a) {
|
|
|
+ this.$set(this.chooseList, q, a)
|
|
|
+ },
|
|
|
+ submit () {
|
|
|
+ let paperScore = 0
|
|
|
+ let questionWrong = []
|
|
|
+ let {
|
|
|
+ paperDuration,
|
|
|
+ paperId,
|
|
|
+ questions,
|
|
|
+ chooseList
|
|
|
+ } = this.$data
|
|
|
+ questions.forEach((item, index) => {
|
|
|
+ (chooseList[index] || chooseList[index] === 0) && item.options[chooseList[index]].optionAnswer
|
|
|
+ ? paperScore += 2
|
|
|
+ : questionWrong.push({
|
|
|
+ [item.id]: (chooseList[index] || chooseList[index] === 0) ? item.options[chooseList[index]].optionId : ''
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.$api.post('/mCompetition/submitUserAnswer', {
|
|
|
+ reqdata: {
|
|
|
+ paperId,
|
|
|
+ paperDuration,
|
|
|
+ paperScore,
|
|
|
+ questionWrong: JSON.stringify(questionWrong),
|
|
|
+ userId: 7
|
|
|
+ },
|
|
|
+ userId: 7
|
|
|
+ }).then(r => {
|
|
|
+ this.submitState = true
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.questions = []
|
|
|
+ this.chooseList = []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getAttendContest()
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.paperDuration += 1
|
|
|
+ console.log(this.paperDuration)
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ this.timer && clearInterval(this.timer)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bg {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.top {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ z-index: 9;
|
|
|
+
|
|
|
+ &-message {
|
|
|
+ padding-top: 175px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .time {
|
|
|
+ width: 136px;
|
|
|
+ height: 39px;
|
|
|
+ background: #495AFC;
|
|
|
+ margin: 0 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 36px;
|
|
|
+ line-height: 39px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ &>div {
|
|
|
+ width: 85px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 0 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #59598D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.f {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 306px;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: 905px;
|
|
|
+ min-height: 579px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
|
|
|
+ border-radius: 38px;
|
|
|
+ padding-bottom: 27px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #59598D;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .answer {
|
|
|
+ padding-top: 42px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ width: 450px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-image: linear-gradient(#FF7A09, #F4B65A);
|
|
|
+ margin-right: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ width: 350px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #59598D;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-choose {
|
|
|
+ >div {
|
|
|
+ width: 336px;
|
|
|
+ min-height: 34px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #EFEFFF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 8px 0 9px 20px;
|
|
|
+ margin: 10px 0 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #59598D;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #5679F0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.button-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 20px 0 30px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.first-button {
|
|
|
+ background-image: linear-gradient(to right, #57A8EF, #6247FF);
|
|
|
+ width: 330px;
|
|
|
+ height: 65px;
|
|
|
+ border-radius: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 65px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.back-button,
|
|
|
+.next-button {
|
|
|
+ width: 142px;
|
|
|
+ height: 58px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 29px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 58px;
|
|
|
+ color: #59598D;
|
|
|
+ border: 1px solid #C7CCF9;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.confim-button {
|
|
|
+ width: 142px;
|
|
|
+ height: 58px;
|
|
|
+ background-image: linear-gradient(to right, #57A8EF, #6247FF);
|
|
|
+ border-radius: 29px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 58px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bounced {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ >img {
|
|
|
+ padding: 48px 0 24px 0;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-message {
|
|
|
+ margin-bottom: 28px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #161616;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-button {
|
|
|
+ width: 142px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 25px;
|
|
|
+ border: 1px solid #C7CCF9;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #59598D;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
