Skip to content

S
study
Commit ceaa1e14 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 d96a57d0 0467dc48
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 130 deletions
src/components/answer-explanation/index.vue
View file @ ceaa1e14
<template>
<view class="card">
<u-card :title="title" padding="10" margin="0" :thumb="thumb">
<view class="u-flex content" slot="body">
<view class="lists">正确答案：{{ answer }}</view>
<view class="lists">解释说明：{{ explain }}</view>
</view>
</u-card>
<view slot="head" class="u-flex head">
<view class="blue"></view>
<view class="title">试题详解：</view>
</view>
<view class="u-flex content" slot="body">
<view class="lists">正确答案：{{ answer }}</view>
<view class="lists">解释说明：{{ explain }}</view>
</view>
</view>
</template>
......@@ -13,10 +15,6 @@
export default {
name: 'answerSheet',
props: {
type: {
type: String,
default: 'wrong',
},
answer: {
type: String,
default: '',
......@@ -26,20 +24,28 @@ export default {
default: '',
},
},
computed: {
title() {
return '试题详解：'
}
},
data() {
return {
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
}
}
}
</script>
<style lang="scss" scoped>
.card {
padding: 20rpx 10rpx 20rpx 5rpx;
border: 2px solid #e8ebf3;
border-radius: 10rpx;
.head {
font-size: 32rpx;
font-weight: bold;
padding: 10rpx 0rpx;
.blue {
width: 4rpx;
height: 34rpx;
background: #2953ff;
position: relative;
left: -8rpx;
}
.title {
padding-left: 25rpx;
}
}
.content {
flex-flow: column;
width: 100%;
......@@ -47,9 +53,12 @@ export default {
.lists {
width: 100%;
text-align: left;
padding: 10rpx 0 0rpx 40rpx;
padding: 10rpx 0 0rpx 30rpx;
line-height: 50rpx;
}
.lists:nth-of-type(1) {
color: #2953ff;
}
}
}
</style>
src/components/answer-sheet/index.vue
View file @ ceaa1e14
......@@ -6,11 +6,15 @@
:key="index"
@click="select(index)"
>
<view class="icons">
<u-icon name="checkmark-circle" :color="item.checked ? '#409eff' : inherit" size="40"></u-icon>
<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 class="text">{{ item.text }}</view>
</view>
<view class="btn" v-if="rightKey.length > 1">
<view :class="['confirm', {'active': getCheckedNum}]" @click="confirmMultiple">确定</view>
</view>
</view>
</template>
......@@ -26,10 +30,15 @@ export default {
type: Boolean,
default: false,
},
rightKey: {
type: Array,
default: []
}
},
data() {
return {
lists: []
lists: [],
submitStatus: false,
}
},
watch: {
......@@ -38,6 +47,7 @@ export default {
if (newValue.length > 0) {
this.lists = newValue.map((v) => {
v.checked = false
v.confirm = false
return v
})
}
......@@ -45,20 +55,39 @@ export default {
immediate:true
}
},
created() {
computed: {
getCheckedNum() {
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 => {
v.checked = false
v.checked = false // 勾选
v.confirm = false // 确认答案
})
this.$set(this.lists[index], 'confirm', true)
}
this.$set(this.lists[index], 'checked', !this.lists[index].checked)
const lists = this.lists.filter(v => v.checked)
this.$emit('change', lists)
if (!this.multiple) this.submitAnswer()
},
// 确认多选答案
confirmMultiple() {
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)
})
this.submitAnswer()
}
},
submitAnswer() {
this.submitStatus = true
this.$emit('change')
}
},
}
......@@ -70,11 +99,69 @@ export default {
padding: 10rpx 0;
width: 100%;
.icons {
padding: 5rpx 20rpx 0rpx 0;
font-size: 28rpx;
color: #191C27;
border: 2rpx solid #9EA5BB;
text-align: center;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 10rpx;
}
.checked {
background: #2953FF;
border: 2rpx solid #2953FF;
color: #fff;
}
.success {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 10rpx;
background: #2953FF;
border: 2rpx solid #2953FF;
text-align: center;
}
.success:before {
content: '\2714';
color: #fff;
}
.error {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 10rpx;
background: #FA5A49;
border: 2rpx solid #FA5A49;
text-align: center;
}
.error:before {
content: '\2716';
color: #fff;
}
.text {
padding-left: 20rpx;
flex: 1;
}
}
.btn {
text-align: center;
margin-top: 50rpx;
.confirm {
width: 400rpx;
height: 100rpx;
line-height: 100rpx;
background: #D4D7DF;
color: #fff;
border-radius: 50rpx;
font-size: 32rpx;
font-weight: bold;
text-align: center;
}
.active {
background: #2953FF;
}
}
}
</style>
src/components/swiper-limited-load/index.vue
View file @ ceaa1e14
......@@ -9,18 +9,16 @@
>
<swiper-item v-for="(item, index) in swiperList" :key="index">
<view class="u-flex subject">
<view class="type">{{ type[item.type - 1] }}</view>
<view class="title">{{ item.title }}</view>
<view class="title"><text>{{ type[item.type - 1] }}</text>{{ item.title }}</view>
<view class="content">
<answer-sheet
ref="answerSheet"
:answerList="item.answerList"
:rightKey="item.rightKey"
:multiple="item.type === 3"
@change="answerChange"
></answer-sheet>
</view>
<view class="btn" v-if="item.type === 3">
<u-button type="primary" size="medium" shape="circle">确定</u-button>
</view>
<view class="explain">
<answer-explanation :answer="item.answer" :explain="item.explain"></answer-explanation>
</view>
......@@ -115,7 +113,11 @@ export default {
this.swiperCurrent = current
},
answerChange(e) {
this.swiperCurrent = this.swiperCurrent + 1
// this.swiperCurrent = this.swiperCurrent + 1
this.$emit("answerChange", e)
},
confirmMultiple(index) {
this.$refs.answerSheet[index].confirmMultiple()
},
clear () {
this.list = []
......@@ -234,26 +236,20 @@ export default {
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
width: 100%;
text-align: left;
text {
background: #9EA5BB;
color: #fff;
padding: 8rpx 20rpx;
margin-right: 10rpx;
font-size: 20rpx;
border-radius: 50rpx;
}
}
.content, .explain, .btn {
/deep/ .u-card {
background: transparent;
}
width: 100%;
padding-top: 50rpx;
}
.btn {
text-align: center;
/deep/ button {
width: 260rpx;
height: 80rpx;
}
}
.disabled {
/deep/ button {
background: #D4D7DF;
color: #fff;
}
}
}
</style>
src/pages/learn/answer.vue
View file @ ceaa1e14
......@@ -8,14 +8,25 @@
title="答题"
title-bold
></u-navbar>
<view class="head">
<view class="u-flex tab" v-if="type === 1">
<view :class="['tab-list', {'active': model === 1}]" @click="changeModel(1)">答题模式</view>
<view :class="['tab-list', {'active': model === 2}]" @click="changeModel(2)">学习模式</view>
</view>
<view class="u-flex count-down" v-if="type === 2">
<view>倒计时：<u-count-down :timestamp="timestamp" bg-color="" :show-hours="false"></u-count-down></view>
</view>
</view>
<view class="swiper">
<swiper-limited-load
<swiper-limited-load
ref="swiper"
:swiperHeight="500"
:swiperDuration="swiperDuration"
:list="list"
:current="current"
@change="swiperChange">
@answerChange="answerChange"
@change="swiperChange"
>
</swiper-limited-load>
</view>
<view class="u-flex u-row-around bottom">
......@@ -26,49 +37,59 @@
</view>
</view>
<view class="u-flex">
<view class="c-list ">
<u-icon name="close-circle" color="#FA5A49" size="40"></u-icon>
<text>0</text>
</view>
<view class="c-list u-padding-left-30">
<u-icon name="checkmark-circle" color="#2953FF" size="40"></u-icon>
<text>0</text>
</view>
</view>
<view class="u-flex">
<view class="c-list">
<view class="c-list" v-if="type === 1">
<u-icon name="star" color="#5A6073" size="40"></u-icon>
<text>收藏</text>
</view>
<view class="c-list" v-else>
<u-icon name="file-text" color="#5A6073" size="40"></u-icon>
<text>交卷</text>
</view>
</view>
</view>
<answer-operation-tips :show.sync="show" />
<answer-complete-pop
:numberList="[1, 2, 3]"
type="fail"
:visible.sync="visible"
@cancel="visible = false"
@submit="submit"
>
</answer-complete-pop>
</view>
</template>
<script>
import swiperLimitedLoad from '@/components/swiper-limited-load/index.vue'
import answerOperationTips from '@/components/answer-operation-tips/index.vue'
import answerCompletePop from '@/components/answer-complete-pop/index.vue'
const NO_PREV_PAGE = -1
const NO_NEXT_PAGE = -2
const app = getApp()
export default {
components: {
swiperLimitedLoad,
answerOperationTips,
answerCompletePop,
},
data() {
return {
type: ['单选题', '判断题', '多选题'],
dataLength: 0,
index: 0,
lists: [],
answerList: [],
visible: false,
show: false,
// 1 练习 2 考试
type: 1,
// 1 答题模式 2 学习模式
model: 1,
timestamp: 60 * 60,
list: [],
current: 0,
currentIndex: 0,
swiperDuration: "0"
swiperDuration: '0',
}
},
computed: {
},
computed: {},
created() {
const lists = [
{
......@@ -76,52 +97,67 @@ export default {
title: '采用QS1电桥测量tanδ的接线方式一般有差接线及和接线。',
answerList: [
{
text: 'A：正确',
sort: 'A',
text: '正确',
},
{
text: 'B：错误',
sort: 'B',
text: '错误',
},
],
answer: 'A',
explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 0
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 0,
rightKey: ['A'],
},
{
type: 2,
title: '空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
title:
'空气间隙的操作冲击击穿电压数值大小不仅与间隙距离、电极形状、电极极性有关,而且与操作冲击电压波的波前时间的长短有关。',
answerList: [
{
text: 'A：正确',
sort: 'A',
text: '正确',
},
{
text: 'B：错误',
sort: 'B',
text: '错误',
},
],
answer: 'B',
explain: '极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 1
explain:
'极性电介质在外电场作用下，由偶极子分子的转向形成的极化称为偶极子式极化。',
index: 1,
rightKey: ['B'],
},
{
type: 3,
title: '西林电桥采用正接线及反接线时,其测试原理相同',
answerList: [
{
text: 'A：影响',
sort: 'A',
text: '影响',
},
{
text: 'B：影响很小',
sort: 'B',
text: '影响很小',
},
{
text: 'C：影响很大',
sort: 'C',
text: '影响很大',
},
{
text: 'D：无影响',
sort: 'D',
text: '无影响',
},
],
answer: 'B，C',
explain: '双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
index: 2
}
explain:
'双臂电桥是在单臂电桥的基础上增加特殊机构，以消除测试时连接线和接线柱接触电阻对测量结果的影响。',
index: 2,
rightKey: ['B', 'C'],
},
]
this.requestQuestionInfo(lists)
......@@ -132,33 +168,41 @@ export default {
this.list = lists
setTimeout(() => {
// 比如上次答到了第20题
this.$refs.swiper.init(0);
this.$refs.swiper.init(0)
// 初始化后再把动画弄出来，否则初始的current不是0，界面会自动跳动到当前位置，体验不太好
this.swiperDuration = '250'
// 全局记一下list, 答题卡页暂时就直接用了
app.globalData.questionList = lists
}, 1000)
},
swiperChange(e) {
let current = e.current
this.currentIndex = current
if (current == NO_PREV_PAGE) {
uni.showToast({
title: "已经是第一题了",
icon: "none"
title: '已经是第一题了',
icon: 'none',
})
return
}
if (current == NO_NEXT_PAGE) {
uni.showModal({
title: "提示",
content: "您已经答完所有题，是否退出？",
title: '提示',
content: '您已经答完所有题，是否退出？',
})
return
}
},
changeModel(i) {
this.model = i
},
answerChange(e) {
console.log('e', e)
},
submit() {
console.log("提前交卷")
}
},
}
......@@ -171,44 +215,35 @@ export default {
background-image: linear-gradient(to top, #f8fafd 0%, #e9f3ff 50%);
background-size: 100% 520rpx;
background-repeat: no-repeat;
.swiper {
.head {
width: 100%;
flex: 1;
.subject {
flex-flow: column;
padding: 20rpx;
.type {
width: 100%;
text-align: left;
padding: 20rpx 0;
}
.title {
.tab {
margin:10rpx auto;
border: 2rpx solid #2953FF;
border-radius: 10rpx;
width: 300rpx;
.tab-list {
flex: 1;
padding: 10rpx 25rpx;
font-size: 24rpx;
color: #191C27;
font-size: 32rpx;
line-height: 50rpx;
font-weight: bold;
}
.content, .explain, .btn {
/deep/ .u-card {
background: transparent;
}
width: 100%;
padding-top: 50rpx;
}
.btn {
text-align: center;
/deep/ button {
width: 260rpx;
height: 80rpx;
}
}
.disabled {
/deep/ button {
background: #D4D7DF;
color: #fff;
}
.active {
background: #2953FF;
color: #fff;
}
}
.count-down {
color: #5A6073;
font-size: 32rpx;
margin:10rpx auto;
width: 230rpx;
}
}
.swiper {
width: 100%;
flex: 1;
}
.bottom {
width: 100%;
......
src/pages/mine/info.vue
View file @ ceaa1e14
......@@ -58,7 +58,7 @@
:arrow="false"
:hover-class="none"
title="姓名"
value="阿斯达"
:value="name"
></u-cell-item>
<u-cell-item
:arrow="false"
......@@ -90,6 +90,7 @@ export default {
idCardNum: '1312315661651',
expire: '2020-12-01~2090-09-01',
mobile: '1773322111',
name: '阿斯达',
company: '深圳维修会科技有限公司',
token: null,
host: process.uniEnv.qn_asset_url,
......
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