|
|
|
@@ -1,8 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div |
|
|
|
class="page" |
|
|
|
class="psychologicalScale-index" |
|
|
|
v-if="topic.length" |
|
|
|
:style="`padding-top: ${showLeftArrow ? 'calc(24vw + 46px)' : '24vw'};`" |
|
|
|
:style="`padding-top: ${tip?'10vw':showLeftArrow ? '34vw' : '24vw'};`" |
|
|
|
> |
|
|
|
<van-nav-bar |
|
|
|
title="测评" |
|
|
|
@@ -10,102 +10,131 @@ |
|
|
|
:left-arrow="true" |
|
|
|
@click-left="onNavBack" |
|
|
|
v-if="showLeftArrow" |
|
|
|
style="position: fixed; left: 0; top: 0; width: 100vw" |
|
|
|
style="position: fixed; left: 0; top: 0; width: 100vw; height: 10vw" |
|
|
|
> |
|
|
|
<template #left> |
|
|
|
<van-icon name="arrow-left" size="23" style="padding: 0" />返回 |
|
|
|
</template> |
|
|
|
</van-nav-bar> |
|
|
|
<div class="top" :style="`top: ${showLeftArrow ? '46px' : '0'};`"> |
|
|
|
<div class="schedule"> |
|
|
|
<div class="progress"> |
|
|
|
<van-progress |
|
|
|
:percentage=" |
|
|
|
(select.length == 0 ? 0 : select.length / topic.length) * 100 |
|
|
|
" |
|
|
|
stroke-width="10px" |
|
|
|
color="#638ee4" |
|
|
|
:show-pivot="false" |
|
|
|
v-if="topic.length" |
|
|
|
></van-progress> |
|
|
|
</div> |
|
|
|
<div class="text"> |
|
|
|
<span class="val">{{ select.length }}</span |
|
|
|
>/<span class="total">{{ topic.length }}</span> |
|
|
|
</div> |
|
|
|
<div class="tip" v-if="tip"> |
|
|
|
<div class="tip-title title">{{ title }}</div> |
|
|
|
<div class="tip-title">测评说明：</div> |
|
|
|
<div class="tip-content"> |
|
|
|
请仔细阅读每一道题，根据根据您自己的 |
|
|
|
真实状态，评估最近7天内你最接近的感觉，而不只是你今天的感觉 |
|
|
|
</div> |
|
|
|
<div class="title">{{ title }}</div> |
|
|
|
</div> |
|
|
|
<div class="list_box"> |
|
|
|
<div class="item" v-for="(item, index) in topic" :key="index"> |
|
|
|
<div |
|
|
|
:class="[ |
|
|
|
'label', |
|
|
|
{ |
|
|
|
error: |
|
|
|
(isError && fromSsjl && item.Id == '6') || |
|
|
|
(isError && fromSsjl && item.Id == '8') || |
|
|
|
(isError && fromSsjl && item.Id == '11'), |
|
|
|
}, |
|
|
|
]" |
|
|
|
<div class="tip-title">注意事项：</div> |
|
|
|
<div class="tip-content"> |
|
|
|
题目共10题，选项无对错之分，不用过度思考，根据第一反应选择则可。 |
|
|
|
</div> |
|
|
|
<div class="tip-content"> |
|
|
|
该测评结果仅供参考，不能以此作相关诊断。如有疑问，请咨询专业人员。 |
|
|
|
</div> |
|
|
|
<div class="button"> |
|
|
|
<van-button |
|
|
|
round |
|
|
|
type="info" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
@click="tip = false" |
|
|
|
>开始测评</van-button |
|
|
|
> |
|
|
|
<span>{{ item.Title }}</span> |
|
|
|
<span>({{ item.Type }})</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="" v-else> |
|
|
|
<div class="top" :style="`top: ${showLeftArrow ? '10vw' : '0'};`"> |
|
|
|
<div class="schedule"> |
|
|
|
<div class="progress"> |
|
|
|
<van-progress |
|
|
|
:percentage=" |
|
|
|
(select.length == 0 ? 0 : select.length / topic.length) * 100 |
|
|
|
" |
|
|
|
stroke-width="10px" |
|
|
|
color="#638ee4" |
|
|
|
:show-pivot="false" |
|
|
|
v-if="topic.length" |
|
|
|
></van-progress> |
|
|
|
</div> |
|
|
|
<div class="text"> |
|
|
|
<span class="val">{{ select.length }}</span |
|
|
|
>/<span class="total">{{ topic.length }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<van-radio-group |
|
|
|
class="radio" |
|
|
|
v-model="item.select" |
|
|
|
v-if="item.Type == '单选题'" |
|
|
|
<div class="title">{{ title }}</div> |
|
|
|
</div> |
|
|
|
<div class="list_box"> |
|
|
|
<div class="item" v-for="(item, index) in topic" :key="index"> |
|
|
|
<div |
|
|
|
:class="[ |
|
|
|
'label', |
|
|
|
{ |
|
|
|
error: |
|
|
|
(isError && fromSsjl && item.Id == '6') || |
|
|
|
(isError && fromSsjl && item.Id == '8') || |
|
|
|
(isError && fromSsjl && item.Id == '11'), |
|
|
|
}, |
|
|
|
]" |
|
|
|
> |
|
|
|
<span>{{ item.Title }}</span> |
|
|
|
<span>({{ item.Type }})</span> |
|
|
|
</div> |
|
|
|
<van-radio-group |
|
|
|
class="radio" |
|
|
|
v-model="item.select" |
|
|
|
v-if="item.Type == '单选题'" |
|
|
|
> |
|
|
|
<van-cell-group> |
|
|
|
<van-cell |
|
|
|
clickable |
|
|
|
v-for="(ite, idx) in item.Option" |
|
|
|
:key="idx" |
|
|
|
:title="ite.label" |
|
|
|
@click="onRadio(index, ite.value)" |
|
|
|
:title-class="[ |
|
|
|
{ |
|
|
|
cellTitle: |
|
|
|
(isError && fromSsjl && item.Id == '6') || |
|
|
|
(isError && fromSsjl && item.Id == '8') || |
|
|
|
(isError && fromSsjl && item.Id == '11'), |
|
|
|
}, |
|
|
|
]" |
|
|
|
> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio :name="ite.value" /> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
</van-cell-group> |
|
|
|
</van-radio-group> |
|
|
|
<van-checkbox-group class="checkbox" v-model="item.select" v-else> |
|
|
|
<van-cell-group> |
|
|
|
<van-cell |
|
|
|
v-for="(ite, idx) in item.Option" |
|
|
|
clickable |
|
|
|
:key="idx" |
|
|
|
:title="ite.label" |
|
|
|
@click="onCheckbox(`checkboxes${item.Id}`, idx)" |
|
|
|
> |
|
|
|
<template #right-icon> |
|
|
|
<van-checkbox |
|
|
|
:name="ite.value" |
|
|
|
:ref="`checkboxes${item.Id}`" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
</van-cell-group> |
|
|
|
</van-checkbox-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button"> |
|
|
|
<van-button |
|
|
|
round |
|
|
|
type="info" |
|
|
|
:disabled="topic.length != select.length" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
@click="submit" |
|
|
|
>提交测评</van-button |
|
|
|
> |
|
|
|
<van-cell-group> |
|
|
|
<van-cell |
|
|
|
clickable |
|
|
|
v-for="(ite, idx) in item.Option" |
|
|
|
:key="idx" |
|
|
|
:title="ite.label" |
|
|
|
@click="onRadio(index, ite.value)" |
|
|
|
:title-class="[ |
|
|
|
{ |
|
|
|
cellTitle: |
|
|
|
(isError && fromSsjl && item.Id == '6') || |
|
|
|
(isError && fromSsjl && item.Id == '8') || |
|
|
|
(isError && fromSsjl && item.Id == '11'), |
|
|
|
}, |
|
|
|
]" |
|
|
|
> |
|
|
|
<template #right-icon> |
|
|
|
<van-radio :name="ite.value" /> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
</van-cell-group> |
|
|
|
</van-radio-group> |
|
|
|
<van-checkbox-group class="checkbox" v-model="item.select" v-else> |
|
|
|
<van-cell-group> |
|
|
|
<van-cell |
|
|
|
v-for="(ite, idx) in item.Option" |
|
|
|
clickable |
|
|
|
:key="idx" |
|
|
|
:title="ite.label" |
|
|
|
@click="onCheckbox(`checkboxes${item.Id}`, idx)" |
|
|
|
> |
|
|
|
<template #right-icon> |
|
|
|
<van-checkbox :name="ite.value" :ref="`checkboxes${item.Id}`" /> |
|
|
|
</template> |
|
|
|
</van-cell> |
|
|
|
</van-cell-group> |
|
|
|
</van-checkbox-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button"> |
|
|
|
<van-button |
|
|
|
round |
|
|
|
type="info" |
|
|
|
:disabled="topic.length != select.length" |
|
|
|
style="width: 100%; height: 100%" |
|
|
|
@click="submit" |
|
|
|
>提交测评</van-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@@ -120,6 +149,7 @@ export default { |
|
|
|
uid: '', |
|
|
|
keyCode: '', |
|
|
|
title: '', |
|
|
|
tip: true, |
|
|
|
topic: [], //题目列表 |
|
|
|
select: [], |
|
|
|
isError: null, //是否是答题错误 |
|
|
|
@@ -390,10 +420,10 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.page { |
|
|
|
width: 100%; |
|
|
|
min-height: 100%; |
|
|
|
<style lang="scss"> |
|
|
|
.psychologicalScale-index { |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 3.6vw; |
|
|
|
text-align: left; |
|
|
|
@@ -401,6 +431,59 @@ export default { |
|
|
|
padding-bottom: 8vw; |
|
|
|
padding-top: 24vw; |
|
|
|
|
|
|
|
.van-nav-bar__content { |
|
|
|
height: 10vw !important; |
|
|
|
|
|
|
|
.van-nav-bar__left, |
|
|
|
.van-nav-bar__title { |
|
|
|
font-size: 4vw !important; |
|
|
|
line-height: initial !important; |
|
|
|
|
|
|
|
.van-icon-arrow-left { |
|
|
|
font-size: 4vw !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tip{ |
|
|
|
width: 90vw; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 5vw; |
|
|
|
padding: 10vw 3vw; |
|
|
|
border-radius: 2vw; |
|
|
|
background: white; |
|
|
|
|
|
|
|
.tip-title{ |
|
|
|
font-size: 4vw; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 5vw; |
|
|
|
margin-bottom: 5vw; |
|
|
|
} |
|
|
|
|
|
|
|
.title{ |
|
|
|
font-size: 4.5vw; |
|
|
|
text-align: center; |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tip-content{ |
|
|
|
font-size: 3.7vw; |
|
|
|
text-indent: 5vw; |
|
|
|
margin-bottom: 2vw; |
|
|
|
|
|
|
|
&:last-child{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.button{ |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 10vw; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.top { |
|
|
|
box-sizing: border-box; |
|
|
|
position: fixed; |
|
|
|
@@ -448,14 +531,26 @@ export default { |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 4vw; |
|
|
|
&.error { |
|
|
|
color: red; |
|
|
|
} |
|
|
|
// &.error { |
|
|
|
// color: red; |
|
|
|
// } |
|
|
|
} |
|
|
|
.van-cell { |
|
|
|
line-height: initial !important; |
|
|
|
padding: 3vw 2vw; |
|
|
|
|
|
|
|
.van-cell__title { |
|
|
|
&.cellTitle { |
|
|
|
color: red; |
|
|
|
font-size: 3.5vw !important; |
|
|
|
|
|
|
|
// &.cellTitle { |
|
|
|
// color: red; |
|
|
|
// } |
|
|
|
} |
|
|
|
.van-radio__icon { |
|
|
|
height: 100% !important; |
|
|
|
|
|
|
|
.van-icon { |
|
|
|
font-size: 3.5vw !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -468,6 +563,9 @@ export default { |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 8vw; |
|
|
|
|
|
|
|
.van-button { |
|
|
|
font-size: 4vw !important; |
|
|
|
} |
|
|
|
.van-button--info { |
|
|
|
background-color: #638ee4; |
|
|
|
border: 1px solid #638ee4; |
|
|
|
|
