324 lines
6.8 KiB
Vue
324 lines
6.8 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="header">
|
|
<image src="../../static/images/test-bg.png"></image>
|
|
</view>
|
|
<view class="ques-con">
|
|
<view class="ques-title-con">
|
|
<text class="ques-num">
|
|
<text class="current-num">1</text>/
|
|
<text class="all-num">57</text>
|
|
</text>
|
|
<text class="ques-title">喜欢长时间的自身旋转?</text>
|
|
</view>
|
|
<template v-if="question.base == 'JUDG'">
|
|
<view class="ques-answer-con">
|
|
<template v-for="(item,index) in question.option">
|
|
<view :class="['one-answer',curJudg == index ? 'selected' :'']" @click="changeJudg(index)">{{item.key}}</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
<template v-if="question.base == 'SING'">
|
|
<view class="ques-answer-con">
|
|
<template v-for="(item,index) in question.option">
|
|
<!-- <view :class="['one-answer',curSing == index ? 'selected' :'']" @click="changeSing(index)">{{item.value}}</view> -->
|
|
<view class="answer">
|
|
<view class="answer-option">{{item.value}}</view>
|
|
<view class="answer-text">答案:</view>
|
|
<view class="assess-list">
|
|
<template v-for="(data,index0) in item.assessList">
|
|
<view class="one-assess">
|
|
<view class="assess-text">{{data.value}}</view>
|
|
<view :class="['assess-select',item.check == index0 ? 'selected' :'']" @click="selectAssess(index,index0)"></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="tip">以上哪个条目是最符合您的孩子的描述?</view>
|
|
<view class="option-con">
|
|
<radio-group >
|
|
<radio class="one-radio" value="A" /><text>A</text>
|
|
<radio class="one-radio" value="B" /><text>B</text>
|
|
<radio class="one-radio" value="C" /><text>C</text>
|
|
<radio class="one-radio" value="D" /><text>D</text>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="btn" @click="next" v-if="question.base == 'JUDG'">下一题</view>
|
|
<view class="btn" @click="submit" v-if="question.base == 'SING'">提交</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
question:{
|
|
base:'JUDG',
|
|
option:[
|
|
{
|
|
value:'0',
|
|
key:'否'
|
|
},
|
|
{
|
|
value:'1',
|
|
key:'是'
|
|
}
|
|
]
|
|
},
|
|
questionSING:{
|
|
base:'SING',
|
|
option:[
|
|
{
|
|
value:'A.答案1',
|
|
check:-1,
|
|
assessList:[
|
|
{
|
|
value:'从不',
|
|
key:'-1'
|
|
},{
|
|
value:'极少',
|
|
key:'-1'
|
|
},{
|
|
value:'较少',
|
|
key:'-1'
|
|
},{
|
|
value:'有时',
|
|
key:'-1'
|
|
},{
|
|
value:'经常',
|
|
key:'-1'
|
|
},{
|
|
value:'很频繁',
|
|
key:'-1'
|
|
},{
|
|
value:'总是',
|
|
key:'-1'
|
|
},
|
|
]
|
|
},
|
|
{
|
|
value:'B.答案2',
|
|
check:-1,
|
|
assessList:[
|
|
{
|
|
value:'从不',
|
|
key:''
|
|
},{
|
|
value:'极少',
|
|
key:''
|
|
},{
|
|
value:'较少',
|
|
key:''
|
|
},{
|
|
value:'有时',
|
|
key:''
|
|
},{
|
|
value:'经常',
|
|
key:''
|
|
},{
|
|
value:'很频繁',
|
|
key:''
|
|
},{
|
|
value:'总是',
|
|
key:''
|
|
},
|
|
]
|
|
},
|
|
{
|
|
value:'C.答案3',
|
|
check:-1,
|
|
assessList:[
|
|
{
|
|
value:'从不',
|
|
key:''
|
|
},{
|
|
value:'极少',
|
|
key:''
|
|
},{
|
|
value:'较少',
|
|
key:''
|
|
},{
|
|
value:'有时',
|
|
key:''
|
|
},{
|
|
value:'经常',
|
|
key:''
|
|
},{
|
|
value:'很频繁',
|
|
key:''
|
|
},{
|
|
value:'总是',
|
|
key:''
|
|
},
|
|
]
|
|
},
|
|
{
|
|
value:'D.答案4',
|
|
check:-1,
|
|
assessList:[
|
|
{
|
|
value:'从不',
|
|
key:''
|
|
},{
|
|
value:'极少',
|
|
key:''
|
|
},{
|
|
value:'较少',
|
|
key:''
|
|
},{
|
|
value:'有时',
|
|
key:''
|
|
},{
|
|
value:'经常',
|
|
key:''
|
|
},{
|
|
value:'很频繁',
|
|
key:''
|
|
},{
|
|
value:'总是',
|
|
key:''
|
|
},
|
|
]
|
|
}
|
|
]
|
|
},
|
|
curJudg:-1,//被选择的判断题选项
|
|
curSing:-1,//被选择的单选题选项
|
|
}
|
|
},
|
|
methods:{
|
|
changeJudg(index){
|
|
this.curJudg = index;
|
|
},
|
|
changeSing(index){
|
|
this.curSing = index;
|
|
},
|
|
submit(){
|
|
uni.redirectTo({
|
|
url:'/homePackage/pages/testRecord'
|
|
})
|
|
},
|
|
next(){
|
|
this.question = this.questionSING;
|
|
},
|
|
selectAssess(index,index0){
|
|
this.$set(this.question.option[index],'check',index0)
|
|
}
|
|
},
|
|
computed: {
|
|
checked() {
|
|
return function(value) {
|
|
return !!this.question.yourAnswer && this.question.yourAnswer.indexOf(value) > -1;
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.content{
|
|
.header{
|
|
width:100%;
|
|
image{
|
|
width:100%;
|
|
}
|
|
}
|
|
.ques-con{
|
|
text-align: left;
|
|
width: 92%;
|
|
margin:0 auto;
|
|
margin-top: -20rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
text-align: center;
|
|
border: 5px solid rgba(40, 123, 206, 1);
|
|
padding:40rpx;
|
|
.ques-title-con{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.current-num{
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 42rpx;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
.all-num{
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
}
|
|
.ques-answer-con{
|
|
.one-answer{
|
|
padding:20rpx 40rpx;
|
|
margin-top:20rpx;
|
|
border-radius: 52rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 32rpx;
|
|
text-align: left;
|
|
font-family: Arial;
|
|
border: 2px solid rgba(187, 187, 187, 1);
|
|
&.selected{
|
|
background-color: rgba(40, 123, 206, 1);
|
|
color:#fff;
|
|
border: 2px solid rgba(40, 123, 206, 1);
|
|
}
|
|
}
|
|
.answer{
|
|
text-align: left;
|
|
.answer-text{
|
|
font-weight: 600;
|
|
margin:20rpx 0;
|
|
}
|
|
.assess-list{
|
|
display: flex;
|
|
.one-assess{
|
|
text-align: center;
|
|
width:100rpx;
|
|
font-size:24rpx;
|
|
padding:6rpx;
|
|
border:1px solid #ddd;
|
|
.assess-select{
|
|
width:40rpx;
|
|
height:40rpx;
|
|
border-radius: 50%;
|
|
border:2rpx solid #ddd;
|
|
margin:20rpx auto 0rpx;
|
|
&.selected{
|
|
background-color: #287bce;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tip{
|
|
margin:20rpx 0rpx;
|
|
font-size:24rpx;
|
|
text-align: left;
|
|
}
|
|
.option-con{
|
|
text-align: left;
|
|
.one-radio{
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
border-radius: 30px;
|
|
background-color: rgba(40, 123, 206, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
width:80%;
|
|
margin:40rpx auto;
|
|
padding:30rpx 0rpx;
|
|
}
|
|
}
|
|
</style> |