|
@@ -1,407 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="top-box">
|
|
|
- <view class="icon"></view>
|
|
|
- <selectSwitch class='btn' @change="changeSwitch" :switchList="['科一题目','科四题目']" checked_bj_color='#E31818' />
|
|
|
- <van-icon class='set' name="/static/img/答题/设置@2x.png" size='20' @click='show=true' />
|
|
|
- </view>
|
|
|
- <van-popup :show="show" @close="show=false" position="bottom">
|
|
|
- <van-cell title="背题模式" clickable :data-index="index" @click="answerflag=!answerflag">
|
|
|
- <van-switch slot="right-icon" :checked="answerflag" size="24px" active-color="#16CC16" />
|
|
|
- <!-- <selectSwitch slot="right-icon" @change="changeSwitch" :switchList="['答题模式','背题模式']" checked_bj_color='#E31818' /> -->
|
|
|
- </van-cell>
|
|
|
- <van-cell title="答对跳转下一题 " clickable :data-index="index" @click="answerjump=!answerjump">
|
|
|
- <van-switch slot="right-icon" :checked="answerjump" size="24px" active-color="#16CC16" />
|
|
|
- </van-cell>
|
|
|
- <!-- <van-cell title="答错展示题目解析" clickable :data-index="index" @click="checked=!checked">
|
|
|
- <van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
|
|
|
- </van-cell> -->
|
|
|
- <van-cell title="错误震动提醒" clickable :data-index="index" @click="checked=!checked">
|
|
|
- <van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
|
|
|
- </van-cell>
|
|
|
- <!-- <van-cell title="主题选择" clickable :data-index="index" @click="checked=!checked">
|
|
|
- <van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
|
|
|
- </van-cell>
|
|
|
- <van-cell title="字体选择" clickable :data-index="index" @click="checked=!checked">
|
|
|
- <van-switch slot="right-icon" :checked="checked" size="24px" active-color="#16CC16" />
|
|
|
- </van-cell> -->
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <van-skeleton class='skeleton' avatar row="6" :row-width="['100%','40%','70%','70%','70%','70%']" avatar-shape='square'
|
|
|
- :loading="loading">
|
|
|
- <swiper class="swiper-box" :current="swiperIndex" @change="swiperChange" circular>
|
|
|
- <swiper-item v-for="(itembox,indexbox) in questionList" :key='indexbox'>
|
|
|
- <view class="swiper-item">
|
|
|
- <view class="topic-box">
|
|
|
- <view class="topic-right">
|
|
|
- <view class="topic-top">
|
|
|
- <view class="topic-left">
|
|
|
- <text class="topic-type">{{questionType(itembox.type)}}</text>
|
|
|
- <van-icon name="star-o" size='20' />
|
|
|
- </view>
|
|
|
- <text class="topic-tit">{{itembox.id}}、{{itembox.question}}</text>
|
|
|
- </view>
|
|
|
- <video v-if="itembox.videoUrl" class="topic-img" :muted='true' :loop='true' :autoplay='true' :controls='false'
|
|
|
- :src="encodeURI(itembox.mediaUrl)"></video>
|
|
|
- <image v-if="itembox.sinaimg" class="topic-img" :src="itembox.mediaUrl" mode="aspectFit"></image>
|
|
|
- <view class="topic-opt" v-if='itembox.type==2'>
|
|
|
- <van-radio-group :value="userAnswer[itembox.id]">
|
|
|
- <van-cell-group>
|
|
|
- <van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
|
|
|
- v-for="(item,index) in choiceList" :key="index" :title="itembox[item]" v-show='itembox[item]' clickable
|
|
|
- :data-index="index+1" @click="singleToggle($event,itembox)">
|
|
|
- <van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
|
|
|
- name="/static/img/答题/对@2x.png" size='20' />
|
|
|
- <van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-radio-group>
|
|
|
- <!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
|
|
|
- </view>
|
|
|
- <view class="topic-opt" v-if='itembox.type==1'>
|
|
|
- <van-radio-group :value="userAnswer[itembox.id]">
|
|
|
- <van-cell-group>
|
|
|
- <van-cell :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
|
|
|
- v-for="(item,index) in 2" :key="index" :title="index?'错误':'正确'" clickable :data-index="index+1" @click="singleToggle($event,itembox)">
|
|
|
- <van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
|
|
|
- name="/static/img/答题/对@2x.png" size='20' />
|
|
|
- <van-radio slot="right-icon" :ref="`checkboxes${itembox.id}`" checked-color="#1464cc" :name="index+1" />
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-radio-group>
|
|
|
- <!-- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button> -->
|
|
|
- </view>
|
|
|
- <view class="topic-opt" v-else-if='itembox.type==3'>
|
|
|
- <van-checkbox-group :value="userAnswer[itembox.id]" @change="onChange($event,itembox)">
|
|
|
- <van-cell-group>
|
|
|
- <van-cell title-width='500rpx' :class='{answer:(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))}'
|
|
|
- v-for="(item,index) in choiceList" :key="index" :title="itembox[item]" v-show='itembox[item]' clickable
|
|
|
- @click='toggle($event,itembox)' :data-index="index">
|
|
|
- <van-icon v-if="(itembox.answerTrue.includes(index+1) && (answerflag || completeAnswer[itembox.id]))" slot="icon"
|
|
|
- name="/static/img/答题/对@2x.png" size='20' />
|
|
|
- <van-checkbox shape="square" catch:tap="noop" slot="right-icon" :ref="`checkboxes${itembox.id}`"
|
|
|
- checked-color="#1464cc" :name="index+1" />
|
|
|
- </van-cell>
|
|
|
- </van-cell-group>
|
|
|
- </van-checkbox-group>
|
|
|
- <button @click="submit(itembox)" class="submit" type="default" v-show="!(answerflag || completeAnswer[itembox.id])">提交答案</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-show="answerflag || completeAnswer[itembox.id]">
|
|
|
- <view class="flag">
|
|
|
- <text v-if="itembox.type==2" class="result">正确答案: {{itembox[choiceList[itembox.answerTrue-1]]}}</text>
|
|
|
- <text v-else-if="itembox.type==1" class="result">正确答案: {{itembox.answerTrue==1?'正确':'错误'}}</text>
|
|
|
- <text v-else-if="itembox.type==3" class="result">正确答案: {{itembox.answerTrue.split('').map((key)=>{
|
|
|
- return itembox[choiceList[key-1]]
|
|
|
- })}}</text>
|
|
|
- </view>
|
|
|
- <view class="parsing">
|
|
|
- <view class="item-titBox">
|
|
|
- <text class="item-tit">题目解析</text>
|
|
|
- </view>
|
|
|
- <view class="parsing-text">
|
|
|
- <text class="item-tit">{{itembox.explain1}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </van-skeleton>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
|
|
|
- import {
|
|
|
- questionList
|
|
|
- } from "@/api/answer.js"
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- selectSwitch
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: true,
|
|
|
- answerflag: false,
|
|
|
- answerjump: true,
|
|
|
- kemu: 1,
|
|
|
- completeAnswer: {},
|
|
|
- show: false,
|
|
|
- checked: true,
|
|
|
- radio: null,
|
|
|
- result: [],
|
|
|
- userAnswer: {},
|
|
|
- questionList: {},
|
|
|
- choiceList: ['an1', 'an2', 'an3', 'an4', 'an5', 'an6', 'an7'],
|
|
|
- swiperIndex: 0,
|
|
|
- shakeIndex: 0,
|
|
|
- pageNum: 1,
|
|
|
- shake: 0,
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- questionList({
|
|
|
- pageNum: this.pageNum,
|
|
|
- pageSize: 20,
|
|
|
- kemu: this.kemu
|
|
|
- }).then((res) => {
|
|
|
- this.questionList = res.rows
|
|
|
- this.$nextTick(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- questionType(index) {
|
|
|
- switch (index) {
|
|
|
- case 1:
|
|
|
- return '判断';
|
|
|
- case 2:
|
|
|
- return '单选';
|
|
|
- case 3:
|
|
|
- return '多选';
|
|
|
- }
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- console.log(e)
|
|
|
- let aShake = e.detail.current - this.shakeIndex
|
|
|
- this.shake += aShake ** 2 != 1 ? -aShake / Math.abs(aShake) : aShake;
|
|
|
- this.swiperIndex = e.detail.current
|
|
|
- this.shakeIndex = e.detail.current
|
|
|
- if (e.detail.current % 10 == 0) {
|
|
|
- if (Math.abs(this.shake) < 10) {
|
|
|
- this.shake = 0
|
|
|
- return
|
|
|
- }
|
|
|
- this.pageNum += 1;
|
|
|
- questionList({
|
|
|
- pageNum: this.pageNum + 1,
|
|
|
- pageSize: 10,
|
|
|
- kemu: this.kemu
|
|
|
- }).then((res) => {
|
|
|
- this.shake = 0
|
|
|
- if (e.detail.current == 20) {
|
|
|
- this.questionList = res.rows.concat(this.questionList.slice(10))
|
|
|
- }
|
|
|
- if (e.detail.current == 10) {
|
|
|
- this.questionList = this.questionList.slice(0, 20).concat(res.rows)
|
|
|
- }
|
|
|
- if (e.detail.current == 0) {
|
|
|
- this.questionList = this.questionList.slice(0, 10).concat(res.rows).concat(this.questionList.slice(20))
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- onChange(event, itembox) {
|
|
|
- if (this.completeAnswer[itembox.id] || this.answerflag) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.$set(this.userAnswer, itembox.id, event.detail)
|
|
|
- },
|
|
|
- singleToggle(event, itembox) {
|
|
|
- if (this.completeAnswer[itembox.id] || this.answerflag) {
|
|
|
- return
|
|
|
- }
|
|
|
- const {
|
|
|
- index
|
|
|
- } = event.currentTarget.dataset;
|
|
|
- this.$set(this.userAnswer, itembox.id, index)
|
|
|
- setTimeout(() => {
|
|
|
- this.submit(itembox)
|
|
|
- }, 0)
|
|
|
- },
|
|
|
- toggle(event, itembox) {
|
|
|
- const {
|
|
|
- index
|
|
|
- } = event.currentTarget.dataset;
|
|
|
- const checkbox = this.$refs[`checkboxes${itembox.id}`][index];
|
|
|
- checkbox.toggle();
|
|
|
- },
|
|
|
- noop() {},
|
|
|
- submit(itembox) {
|
|
|
- this.$set(this.completeAnswer, itembox.id, true)
|
|
|
- let flag = (this.userAnswer[itembox.id] + '').split(',').sort().join('') == itembox.answerTrue.split('').sort().join(
|
|
|
- '')
|
|
|
- if (flag) {
|
|
|
- wx.vibrateShort();
|
|
|
- if (this.answerjump) {
|
|
|
- let index = this.swiperIndex
|
|
|
- this.swiperIndex = ++index % 30
|
|
|
- }
|
|
|
- } else {
|
|
|
- wx.vibrateLong();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- /deep/ .answer .van-cell {
|
|
|
- background-color: #16CC16 !important;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .van-cell {
|
|
|
- // background-color: #16CC16 !important;
|
|
|
- margin: 10rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .skeleton {
|
|
|
- // margin: 0rpx 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-box {
|
|
|
- height: calc(100vh - 120rpx);
|
|
|
- margin: 0rpx 20rpx;
|
|
|
-
|
|
|
- swiper-item {
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-box {
|
|
|
- height: 60rpx;
|
|
|
- padding: 30rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {}
|
|
|
-
|
|
|
- .set {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .topic-box {
|
|
|
- // padding: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- // border: 2px solid red;
|
|
|
- .topic-top {
|
|
|
- display: flex;
|
|
|
- // border: 2px solid red;
|
|
|
- padding: 10rpx;
|
|
|
-
|
|
|
- .topic-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .topic-type {
|
|
|
- background: #E31818;
|
|
|
- border-radius: 10rpx;
|
|
|
- // border: 2px solid red;
|
|
|
- color: #FFFFFF;
|
|
|
- width: 66rpx;
|
|
|
- height: 30rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 15px 15px 0px 15px;
|
|
|
- padding: 10rpx;
|
|
|
- margin-bottom: 18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .topic-tit {
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .topic-right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 0 10rpx;
|
|
|
-
|
|
|
- .topic-img {
|
|
|
- padding: 10rpx;
|
|
|
- margin: auto;
|
|
|
- width: 500rpx;
|
|
|
- height: 250rpx;
|
|
|
- // border: 2px solid red;
|
|
|
- }
|
|
|
-
|
|
|
- .topic-opt {
|
|
|
- // border: 2px solid red;
|
|
|
- padding: 30rpx 5rpx;
|
|
|
-
|
|
|
- .submit {
|
|
|
- margin: auto;
|
|
|
- margin-top: 150rpx;
|
|
|
-
|
|
|
- height: 80rpx;
|
|
|
- background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
|
|
|
- border-radius: 35rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .flag {
|
|
|
- // border: 2px solid red;
|
|
|
- padding: 30rpx 5rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .result {
|
|
|
- display: inline-block;
|
|
|
- background-color: #16CC16;
|
|
|
- // border: 2px solid red;
|
|
|
- width: 690rpx;
|
|
|
- // height: 70rpx;
|
|
|
- padding: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 20rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-titBox {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx;
|
|
|
- border-bottom: 1rpx solid #e8e8e8;
|
|
|
-
|
|
|
- .item-tit {
|
|
|
- border-left: 8rpx solid #E31818;
|
|
|
- font-size: 30rpx;
|
|
|
- // line-height: 38rpx;
|
|
|
- padding: 0 11rpx;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .parsing-text {
|
|
|
- padding: 30rpx;
|
|
|
- // border: 2px solid red;
|
|
|
-
|
|
|
- }
|
|
|
-</style>
|