|
|
|
@ -2,77 +2,106 @@ |
|
|
|
<view class="page__view"> |
|
|
|
<navbar :title="`问题 ${current + 1}/${total}`" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="transparent" /> |
|
|
|
|
|
|
|
<view class="bar"> |
|
|
|
<view class="flex tools"> |
|
|
|
<view class="left"> |
|
|
|
<button class="flex btn" v-if="showPreBtn" @click="pre"> |
|
|
|
<image class="btn-icon" src="@/pages_order/static/report/icon-wrapper.png" mode="widthFix"></image> |
|
|
|
<text>上一题</text> |
|
|
|
</button> |
|
|
|
<template v-if="currentQuestion"> |
|
|
|
|
|
|
|
<view class="bar"> |
|
|
|
<view class="flex tools"> |
|
|
|
<view class="left"> |
|
|
|
<button class="flex btn" v-if="showPreBtn" @click="pre"> |
|
|
|
<image class="btn-icon" src="@/pages_order/static/report/icon-wrapper.png" mode="widthFix"></image> |
|
|
|
<text>上一题</text> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
选择你的答案进入下一题 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
选择你的答案进入下一题 |
|
|
|
<view class="progress"> |
|
|
|
<view class="progress-bar" :style="{ width: `${progress}%` }"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="progress"> |
|
|
|
<view class="progress-bar" :style="{ width: `${progress}%` }"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="main"> |
|
|
|
<view class="question">{{ currentQuestion.question }}</view> |
|
|
|
<template v-if="currentQuestion.component === 'select'"> |
|
|
|
<view class="select"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'select-option', item.id === value ? 'is-active' : '']" |
|
|
|
@click="onSelect(item.id)" |
|
|
|
> |
|
|
|
{{ item.content }} |
|
|
|
|
|
|
|
<view class="main"> |
|
|
|
<view class="question">{{ currentQuestion.question }}</view> |
|
|
|
<template v-if="currentQuestion.component === 'select'"> |
|
|
|
<view class="select"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'select-option', item.id === value ? 'is-active' : '']" |
|
|
|
@click="onSelect(item.id)" |
|
|
|
> |
|
|
|
{{ item.content }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'select-box'"> |
|
|
|
<view class="select-box"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'flex-column', 'select-box-option', item.id === value ? 'is-active' : '']" |
|
|
|
@click="onSelect(item.id)" |
|
|
|
> |
|
|
|
<image class="img" :src="item.id === value ? item.imageAfter : item.image" mode="aspectFit"></image> |
|
|
|
<view class="text">{{ item.content }}</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'select-multiple'"> |
|
|
|
<view class="select"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'select-option', value.includes(item.id) ? 'is-active' : '']" |
|
|
|
@click="onSelectMulitple(item.id)" |
|
|
|
> |
|
|
|
{{ item.content }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'input'"> |
|
|
|
<view class="input"> |
|
|
|
<view class="flex input-box"> |
|
|
|
<view class="input-label" v-if="currentQuestion.options[0].prefix">{{ currentQuestion.options[0].prefix }}</view> |
|
|
|
<input class="input-doc" v-model="value" placeholder="请输入内容" placeholder-style="font-family: PingFang SC; font-weight: 400; line-height: 1.4; font-size: 32rpx; color: #AAAACA;" /> |
|
|
|
<view class="input-unit" v-if="currentQuestion.options[0].suffix">{{ currentQuestion.options[0].suffix }}</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'select-box'"> |
|
|
|
<view class="select-box"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'flex-column', 'select-box-option', item.id === value ? 'is-active' : '']" |
|
|
|
@click="onSelect(item.id)" |
|
|
|
> |
|
|
|
<image class="img" :src="item.id === value ? item.imageAfter : item.image" mode="aspectFit"></image> |
|
|
|
<view class="text">{{ item.content }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'input-group'"> |
|
|
|
<view class="input"> |
|
|
|
<view class="flex input-box" v-for="(item, index) in currentQuestion.options" :key="item.id"> |
|
|
|
<view class="input-label" v-if="item.prefix">{{ item.prefix }}</view> |
|
|
|
<input class="input-doc" v-model="value[index]" placeholder="请输入内容" placeholder-style="font-family: PingFang SC; font-weight: 400; line-height: 1.4; font-size: 32rpx; color: #AAAACA;" /> |
|
|
|
<view class="input-unit" v-if="item.suffix">{{ item.suffix }}</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'select-box-multiple'"> |
|
|
|
<view class="select-box"> |
|
|
|
<view |
|
|
|
v-for="item in currentQuestion.options" |
|
|
|
:key="item.id" |
|
|
|
:class="['flex', 'flex-column', 'select-box-option', value.includes(item.id) ? 'is-active' : '']" |
|
|
|
@click="onSelectMulitple(item.id)" |
|
|
|
> |
|
|
|
<image class="img" :src="value.includes(item.id) ? item.imageAfter : item.image" mode="aspectFit"></image> |
|
|
|
<view class="text">{{ item.content }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'input'"> |
|
|
|
<view class="input"> |
|
|
|
<view class="flex input-box"> |
|
|
|
<view class="input-label" v-if="currentQuestion.options[0].prefix">{{ currentQuestion.options[0].prefix }}</view> |
|
|
|
<input class="input-doc" v-model="value" :type="currentQuestion.options[0].inputType || 'text'" placeholder="请输入内容" placeholder-style="font-family: PingFang SC; font-weight: 400; line-height: 1.4; font-size: 32rpx; color: #AAAACA;" /> |
|
|
|
<view class="input-unit" v-if="currentQuestion.options[0].suffix">{{ currentQuestion.options[0].suffix }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<template v-else-if="currentQuestion.component === 'input-group'"> |
|
|
|
<view class="input"> |
|
|
|
<view class="flex input-box" v-for="(item, index) in currentQuestion.options" :key="item.id"> |
|
|
|
<view class="input-label" v-if="item.prefix">{{ item.prefix }}</view> |
|
|
|
<input class="input-doc" v-model="value[index]" :type="currentQuestion.options[index].inputType || 'text'" placeholder="请输入内容" placeholder-style="font-family: PingFang SC; font-weight: 400; line-height: 1.4; font-size: 32rpx; color: #AAAACA;" /> |
|
|
|
<view class="input-unit" v-if="item.suffix">{{ item.suffix }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<view class="flex btns"> |
|
|
|
<button :class="['btn', 'btn-palin', noneFlag ? 'is-active' : '']" v-if="!currentQuestion.required" @click="onSelectNone">暂 无</button> |
|
|
|
<button class="btn" v-if="showConfirmBtn" @click="onConfirm">确 认</button> |
|
|
|
<button class="btn" v-if="showSubmitBtn" @click="onSubmit">提 交</button> |
|
|
|
</view> |
|
|
|
<view class="desc" v-if="currentQuestion.desc"> |
|
|
|
<uv-parse :content="currentQuestion.desc"></uv-parse> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<view class="flex btns"> |
|
|
|
<button :class="['btn', 'btn-palin', noneFlag ? 'is-active' : '']" v-if="!currentQuestion.required" @click="onSelectNone">暂 无</button> |
|
|
|
<button class="btn" v-if="showConfirmBtn" @click="onConfirm">确 认</button> |
|
|
|
<button class="btn" v-if="showSubmitBtn" @click="onSubmit">提 交</button> |
|
|
|
</view> |
|
|
|
<view class="desc" v-if="currentQuestion.desc"> |
|
|
|
<uv-parse :content="currentQuestion.desc"></uv-parse> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -84,18 +113,24 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
step: 0, |
|
|
|
current: 0, |
|
|
|
current: null, |
|
|
|
tabs: [], |
|
|
|
value: null, |
|
|
|
noneFlag: false, |
|
|
|
answers: [], |
|
|
|
// tags: [], |
|
|
|
questionsList: [], |
|
|
|
total: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['paperInfo']), |
|
|
|
...mapState(['paperInfo', 'paperTags']), |
|
|
|
preIdx() { |
|
|
|
let index = this.tabs.findIndex(index => index === this.current) |
|
|
|
return index - 1 |
|
|
|
}, |
|
|
|
showPreBtn() { |
|
|
|
return this.current > 0 |
|
|
|
return this.preIdx >= 0 |
|
|
|
}, |
|
|
|
progress() { |
|
|
|
return 100 * (this.current + 1) / this.total |
|
|
|
@ -111,14 +146,27 @@ |
|
|
|
return false |
|
|
|
} |
|
|
|
|
|
|
|
return ['input', 'input-group'].includes(this.currentQuestion?.component) |
|
|
|
return ['select-box-multiple', 'select-multiple','input', 'input-group'].includes(this.currentQuestion?.component) |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
tabs: { |
|
|
|
handler(val) { |
|
|
|
console.log('watch-tabs', val) |
|
|
|
}, |
|
|
|
deep: true |
|
|
|
}, |
|
|
|
current(val) { |
|
|
|
console.log('watch-current', val) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad(arg) { |
|
|
|
this.step = parseInt(arg.step) |
|
|
|
this.current = parseInt(arg.current || 0) |
|
|
|
|
|
|
|
// this.current = parseInt(arg.current || 0) |
|
|
|
console.log('paperTags', this.paperTags) |
|
|
|
this.fetchQuestionList() |
|
|
|
this.switchQuestion(parseInt(arg.current || 0)) |
|
|
|
this.value = this.answers[this.current] |
|
|
|
|
|
|
|
console.log('currentQuestion', this.currentQuestion) |
|
|
|
}, |
|
|
|
@ -130,19 +178,20 @@ |
|
|
|
|
|
|
|
const { questionsList } = category |
|
|
|
this.questionsList = questionsList.map(item => { |
|
|
|
const { id, text, type, options, required, content } = item |
|
|
|
const { id, text, type, options, needTag, required, multiple: _multiple, content } = item |
|
|
|
|
|
|
|
let component = 'select' |
|
|
|
const multiple = _multiple == 'Y' |
|
|
|
|
|
|
|
switch(type) { // 0-单选题 1-填空题 2-图片单选题 |
|
|
|
case '1': |
|
|
|
component = options?.length > 1 ? 'input-group' : 'input' |
|
|
|
break |
|
|
|
case '2': |
|
|
|
component = 'select-box' |
|
|
|
component = multiple ? 'select-box-multiple' : 'select-box' |
|
|
|
break |
|
|
|
default: |
|
|
|
component = 'select' |
|
|
|
component = multiple ? 'select-multiple' : 'select' |
|
|
|
break |
|
|
|
} |
|
|
|
|
|
|
|
@ -152,7 +201,9 @@ |
|
|
|
type, |
|
|
|
component, |
|
|
|
options, |
|
|
|
needTag: needTag ? JSON.parse(needTag).map(config => config.tags).filter(tags => tags.length) : null, |
|
|
|
required: required == 'Y', |
|
|
|
multiple, |
|
|
|
desc: content, |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -161,38 +212,94 @@ |
|
|
|
this.answers = this.questionsList.map(item => { |
|
|
|
let val = null |
|
|
|
|
|
|
|
if (item.component === 'input-group') { |
|
|
|
val = new Array(item.options.length).fill(0).map(() => null) |
|
|
|
switch (item.component) { |
|
|
|
case 'select-box-multiple': |
|
|
|
case 'select-multiple': |
|
|
|
val = [] |
|
|
|
break |
|
|
|
case 'input-group': |
|
|
|
val = new Array(item.options.length).fill(0).map(() => '') |
|
|
|
break; |
|
|
|
default: |
|
|
|
val = null |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
return val |
|
|
|
}) |
|
|
|
this.value = this.answers[this.current] |
|
|
|
// this.tags = this.paperTags[this.step] |
|
|
|
// this.value = this.answers[this.current] |
|
|
|
|
|
|
|
console.log('questionsList', this.questionsList) |
|
|
|
console.log('answers', this.answers) |
|
|
|
}, |
|
|
|
switchQuestion(current) { |
|
|
|
console.log('current', this.current, 'target', current) |
|
|
|
let { needTag } = this.questionsList[current] |
|
|
|
|
|
|
|
console.log('needTag length', needTag?.length) |
|
|
|
if (!needTag?.length) { |
|
|
|
this.current = current |
|
|
|
this.tabs.push(this.current) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const selectTags = this.paperTags.flat(2) |
|
|
|
console.log('selectTags', selectTags) |
|
|
|
console.log('needTag', needTag) |
|
|
|
|
|
|
|
let valid = needTag.some(tags => { |
|
|
|
return tags.every(tag => { |
|
|
|
const { value, exclude } = tag |
|
|
|
|
|
|
|
let include = selectTags.includes(value) |
|
|
|
|
|
|
|
return exclude ? !include : include |
|
|
|
}) |
|
|
|
}) |
|
|
|
console.log('valid', valid) |
|
|
|
|
|
|
|
if (valid) { |
|
|
|
this.current = current |
|
|
|
this.tabs.push(this.current) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
if (current + 1 < this.questionsList.length) { |
|
|
|
current += 1 |
|
|
|
this.switchQuestion(current) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.$utils.redirectTo(`/pages_order/report/test/step?step=${this.step + 1}`) |
|
|
|
}, |
|
|
|
pre() { |
|
|
|
this.current -= 1 |
|
|
|
console.log('pre') |
|
|
|
// this.current -= 1 |
|
|
|
const preIdx = this.preIdx |
|
|
|
this.current = this.tabs[this.preIdx] |
|
|
|
this.value = this.answers[this.current] |
|
|
|
this.noneFlag = false |
|
|
|
this.tabs = this.tabs.slice(0, preIdx + 1) |
|
|
|
console.log('tabs', this.tabs) |
|
|
|
}, |
|
|
|
next() { |
|
|
|
if (this.showSubmitBtn) { |
|
|
|
return |
|
|
|
} |
|
|
|
this.current += 1 |
|
|
|
// this.current += 1 |
|
|
|
this.switchQuestion(this.current + 1) |
|
|
|
this.value = this.answers[this.current] |
|
|
|
this.noneFlag = false |
|
|
|
}, |
|
|
|
async fetchAnswer() { |
|
|
|
try { |
|
|
|
const { id: questionsId, type, required, options } = this.currentQuestion |
|
|
|
const { id: questionsId, type, required, multiple, options } = this.currentQuestion |
|
|
|
|
|
|
|
console.log('paperInfo', this.paperInfo) |
|
|
|
console.log('currentQuestion', this.currentQuestion) |
|
|
|
console.log('required', required, 'noneFlag', this.noneFlag, 'value', this.value) |
|
|
|
if (required && !this.noneFlag && (!this.value || this.value?.every?.(val => !val))) { |
|
|
|
if (required && !this.noneFlag && (!this.value || !this.value?.length || this.value?.every?.(val => !val))) { |
|
|
|
console.log('未答题') |
|
|
|
uni.showToast({ |
|
|
|
title: '请答题', |
|
|
|
@ -209,13 +316,13 @@ |
|
|
|
answer = options.reduce((obj, option, oIdx) => { |
|
|
|
const { id: optionsId } = option |
|
|
|
|
|
|
|
obj[optionsId] = this.value[oIdx] |
|
|
|
obj[optionsId] = Array.isArray(this.value) ? this.value[oIdx] : this.value |
|
|
|
|
|
|
|
return obj |
|
|
|
}, {}) |
|
|
|
answer = JSON.stringify(answer) |
|
|
|
} else { |
|
|
|
answer = this.value |
|
|
|
} else if (multiple && Array.isArray(this.value)) { // 多选题 |
|
|
|
answer = this.value.join(',') |
|
|
|
} |
|
|
|
|
|
|
|
let params = { |
|
|
|
@ -228,6 +335,28 @@ |
|
|
|
|
|
|
|
this.answers[this.current] = this.value |
|
|
|
|
|
|
|
let paperTags = [...this.paperTags] |
|
|
|
if (type == 1) { |
|
|
|
paperTags[this.step][this.current] = [] |
|
|
|
} else { |
|
|
|
let selectedIdArr = Array.isArray(this.value) ? this.value : [this.value] |
|
|
|
console.log('selectedIdArr', selectedIdArr, 'options', options) |
|
|
|
|
|
|
|
paperTags[this.step][this.current] = selectedIdArr.reduce((arr, id) => { |
|
|
|
const { settingTag } = options.find(item => item.id === id) || {} |
|
|
|
|
|
|
|
if (settingTag) { |
|
|
|
const tags = settingTag?.split?.(',') |
|
|
|
tags?.length && (arr = arr.concat(tags)) |
|
|
|
} |
|
|
|
|
|
|
|
return arr |
|
|
|
}, []) |
|
|
|
|
|
|
|
} |
|
|
|
console.log('paperTags', paperTags) |
|
|
|
this.$store.commit('setPaperTags', paperTags) |
|
|
|
|
|
|
|
return true |
|
|
|
} catch (err) { |
|
|
|
console.log('answerPaper', err) |
|
|
|
@ -242,7 +371,6 @@ |
|
|
|
} |
|
|
|
|
|
|
|
let succ = await this.fetchAnswer() |
|
|
|
console.log('fetchAnswer', succ) |
|
|
|
|
|
|
|
if (!succ) { |
|
|
|
return |
|
|
|
@ -254,9 +382,11 @@ |
|
|
|
}, 500) |
|
|
|
}) |
|
|
|
}, |
|
|
|
async onSelectMulitple(id) { |
|
|
|
this.value = this.value.includes(id) ? this.value.filter(item => item !== id) : this.value.concat(id) |
|
|
|
}, |
|
|
|
async onConfirm() { |
|
|
|
let succ = await this.fetchAnswer() |
|
|
|
console.log('fetchAnswer', succ) |
|
|
|
|
|
|
|
if (!succ) { |
|
|
|
return |
|
|
|
@ -269,14 +399,22 @@ |
|
|
|
|
|
|
|
let val = null |
|
|
|
|
|
|
|
if (this.currentQuestion.component === 'input-group') { |
|
|
|
val = new Array(this.currentQuestion.options.length).fill(0).map(() => '') |
|
|
|
switch (this.currentQuestion.component) { |
|
|
|
case 'select-box-multiple': |
|
|
|
case 'select-multiple': |
|
|
|
val = [] |
|
|
|
break |
|
|
|
case 'input-group': |
|
|
|
val = new Array(this.currentQuestion.options.length).fill(0).map(() => '') |
|
|
|
break; |
|
|
|
default: |
|
|
|
val = null |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
this.value = val |
|
|
|
|
|
|
|
let succ = await this.fetchAnswer() |
|
|
|
console.log('fetchAnswer', succ) |
|
|
|
|
|
|
|
if (!succ) { |
|
|
|
return |
|
|
|
@ -286,7 +424,6 @@ |
|
|
|
}, |
|
|
|
async onSubmit() { |
|
|
|
let succ = await this.fetchAnswer() |
|
|
|
console.log('fetchAnswer', succ) |
|
|
|
|
|
|
|
if (!succ) { |
|
|
|
return |
|
|
|
@ -371,7 +508,7 @@ |
|
|
|
|
|
|
|
.main { |
|
|
|
width: 100%; |
|
|
|
padding: 70rpx 104rpx 0 104rpx; |
|
|
|
padding: 70rpx 104rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
|
