Skip to content

S
study
Commit 5263292f authored by Facius's avatar Facius
Browse files
Options

Merge branch 'dev-v1.0.0' of https://git.banshouhui.com/wuzhenzhe/study into dev-v1.0.0

parents 79b17618 2a9c6ee0
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 45 deletions
src/components/answer-sheet/index.vue
View file @ 5263292f
......@@ -6,25 +6,46 @@
:key="index"
@click="select(index)"
>
<view v-if="!item.confirm" :class="['icons', {'checked': item.checked}]">
<view v-if="!item.confirm" :class="['icons', { checked: item.checked }]">
{{ item.sort }}
</view>
<view v-else :class="[rightKey.includes(item.sort) === true ? 'success' : 'error']"></view>
<view
v-else
:class="[rightKey.includes(item.sort) ? 'success' : 'error']"
></view>
<view class="text">{{ item.text }}</view>
</view>
<view class="btn" v-if="rightKey.length > 1">
<view :class="['confirm', {'active': getCheckedNum}]" @click="confirmMultiple">确定</view>
<view
:class="['confirm', { active: getCheckedNum }]"
@click="confirmMultiple"
>确定</view
>
</view>
</view>
</template>
<script>
const equar = (a, b) => {
// 判断数组的长度
if (a.length !== b.length) {
return false
} else {
// 循环遍历数组的值进行比较
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) {
return false
}
}
return true
}
}
export default {
name: 'answerSheet',
props: {
answerList: {
type: Array,
default: []
default: [],
},
multiple: {
type: Boolean,
......@@ -32,18 +53,19 @@ export default {
},
rightKey: {
type: Array,
default: []
}
default: [],
},
},
data() {
return {
lists: [],
submitStatus: false,
answer: '',
}
},
watch: {
answerList: {
handler:function (newValue, oldValue) {
handler: function(newValue, oldValue) {
if (newValue.length > 0) {
this.lists = newValue.map((v) => {
v.checked = false
......@@ -52,43 +74,53 @@ export default {
})
}
},
immediate:true
}
immediate: true,
},
},
computed: {
getCheckedNum() {
const num = this.lists.filter(v => v.checked)
const num = this.lists.filter((v) => v.checked)
return num.length > 1 ? true : false
}
},
},
methods: {
select(index) {
// 已选定
if (this.submitStatus) return
if (!this.multiple) {
this.lists.forEach(v => {
// 非多选处理
this.lists.forEach((v) => {
v.checked = false // 勾选
v.confirm = false // 确认答案
})
this.$set(this.lists[index], 'confirm', true)
// 判断所选答案是否正确
this.answer = this.rightKey.includes(this.lists[index].sort) ? 'pass' : 'fail'
}
this.$set(this.lists[index], 'checked', !this.lists[index].checked)
// 单选、判断提交答案
if (!this.multiple) this.submitAnswer()
},
// 确认多选答案
// 多选提交答案
confirmMultiple() {
const num = this.lists.filter(v => v.checked)
const num = this.lists.filter((v) => v.checked)
if (num.length > 1) {
this.lists.forEach(v => {
if(this.rightKey.includes(v.sort)) this.$set(v, 'checked', true)
if(v.checked) this.$set(v, 'confirm', true)
// 判断所选答案是否正确
const checkedList = num.map((v) => v.sort)
this.answer = equar(checkedList, this.rightKey) ? 'pass' : 'fail'
// 处理显示逻辑
this.lists.forEach((v) => {
if (this.rightKey.includes(v.sort)) this.$set(v, 'checked', true)
if (v.checked) this.$set(v, 'confirm', true)
})
this.submitAnswer()
}
},
submitAnswer() {
this.submitStatus = true
this.$emit('change')
}
this.$emit('change', this.answer)
},
},
}
</script>
......@@ -100,8 +132,8 @@ export default {
width: 100%;
.icons {
font-size: 28rpx;
color: #191C27;
border: 2rpx solid #9EA5BB;
color: #191c27;
border: 2rpx solid #9ea5bb;
text-align: center;
width: 40rpx;
height: 40rpx;
......@@ -109,8 +141,8 @@ export default {
border-radius: 10rpx;
}
.checked {
background: #2953FF;
border: 2rpx solid #2953FF;
background: #2953ff;
border: 2rpx solid #2953ff;
color: #fff;
}
.success {
......@@ -118,8 +150,8 @@ export default {
height: 40rpx;
line-height: 40rpx;
border-radius: 10rpx;
background: #2953FF;
border: 2rpx solid #2953FF;
background: #2953ff;
border: 2rpx solid #2953ff;
text-align: center;
}
.success:before {
......@@ -131,8 +163,8 @@ export default {
height: 40rpx;
line-height: 40rpx;
border-radius: 10rpx;
background: #FA5A49;
border: 2rpx solid #FA5A49;
background: #fa5a49;
border: 2rpx solid #fa5a49;
text-align: center;
}
.error:before {
......@@ -151,7 +183,7 @@ export default {
width: 400rpx;
height: 100rpx;
line-height: 100rpx;
background: #D4D7DF;
background: #d4d7df;
color: #fff;
border-radius: 50rpx;
font-size: 32rpx;
......@@ -159,9 +191,8 @@ export default {
text-align: center;
}
.active {
background: #2953FF;
background: #2953ff;
}
}
}
</style>
src/components/swiper-limited-load/index.vue
View file @ 5263292f
<template>
<view>
<view class="swipers">
<swiper
style="height: 80vh;"
style="flex: 1;"
:duration="swiperDuration"
:current="swiperCurrent"
@change="swiperChange"
......@@ -9,7 +9,7 @@
>
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="u-flex subject">
<view class="title"><text>{{ type[item.type - 1] }}</text>{{ item.title }}</view>
<view class="title"><text>{{ titleType[item.type - 1] }}</text>{{ item.title }}</view>
<view class="content">
<answer-sheet
ref="answerSheet"
......@@ -19,8 +19,8 @@
@change="answerChange"
></answer-sheet>
</view>
<view class="explain">
<answer-explanation :answer="item.answer" :explain="item.explain"></answer-explanation>
<view class="explain" v-if="type === 1">
<answer-explanation v-show="model === 2 || errShow" :answer="item.answer" :explain="item.explain"></answer-explanation>
</view>
</view>
</swiper-item>
......@@ -57,6 +57,14 @@ export default {
type: Number,
default: 0
},
type: {
type: Number,
default: 1
},
model: {
type: Number,
default: 1
},
// 值为0禁止切换动画
swiperDuration: {
type: String,
......@@ -70,13 +78,15 @@ export default {
},
data() {
return {
type: ['单选题', '判断题', '多选题'],
titleType: ['单选题', '判断题', '多选题'],
// 滑动到的位置
swiperIndex: 0,
// 此值控制swiper的位置
swiperCurrent: 0,
// 当前swiper渲染的items
swiperList: []
swiperList: [],
// 错题显示解释
errShow: false
}
},
watch: {
......@@ -115,15 +125,15 @@ export default {
answerChange(e) {
// this.swiperCurrent = this.swiperCurrent + 1
this.$emit("answerChange", e)
},
confirmMultiple(index) {
this.$refs.answerSheet[index].confirmMultiple()
this.errShow = e === 'fail'
console.log("e", e)
},
clear () {
this.list = []
this.swiperList = []
},
swiperChange: function (e) {
this.errShow = false
let current = e.detail.current
let lastIndex = this.swiperIndex
let currentItem = this.swiperList[current]
......@@ -223,6 +233,13 @@ export default {
}
</script>
<style lang="scss" scoped>
.swipers {
height: 100%;
display: flex;
flex-direction: column;
swiper-item {
overflow: auto;
}
.subject {
flex-flow: column;
padding: 20rpx;
......@@ -252,4 +269,5 @@ export default {
padding-top: 50rpx;
}
}
}
</style>
src/pages/learn/answer.vue
View file @ 5263292f
......@@ -24,6 +24,8 @@
:swiperDuration="swiperDuration"
:list="list"
:current="current"
:type="type"
:model="model"
@answerChange="answerChange"
@change="swiperChange"
>
......@@ -37,11 +39,11 @@
</view>
</view>
<view class="u-flex">
<view class="c-list" v-if="type === 1">
<view class="c-list" v-if="type === 1" @click="collection">
<u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text>
</view>
<view class="c-list" v-else>
<view class="c-list" v-else @click="handPapers">
<u-icon name="file-text" color="#5A6073" size="40"></u-icon>
<text>交卷</text>
</view>
......@@ -198,9 +200,20 @@ export default {
changeModel(i) {
this.model = i
},
collection() {
console.log("this.list[this.currentIndex]", this.list[this.currentIndex])
console.log("收藏")
},
// 作答完毕
answerChange(e) {
console.log('e', e)
},
// 交卷
handPapers() {
this.visible = true
console.log("交卷")
},
// 提前交卷
submit() {
console.log("提前交卷")
}
......@@ -217,7 +230,7 @@ export default {
background-repeat: no-repeat;
.head {
width: 100%;
flex: 1;
height: 90rpx;
.tab {
margin:10rpx auto;
border: 2rpx solid #2953FF;
......@@ -235,7 +248,7 @@ export default {
}
}
.count-down {
color: #5A6073;
color: #5A6073;
font-size: 32rpx;
margin:10rpx auto;
width: 230rpx;
......@@ -243,7 +256,7 @@ export default {
}
.swiper {
width: 100%;
flex: 1;
flex: 1;
}
.bottom {
width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment