571 lines
15 KiB
Vue
571 lines
15 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="header">
|
|
<image src="../../static/images/test-bg.png"></image>
|
|
</view>
|
|
<template v-if="tableAlias == 'table1'">
|
|
<view class="ques-con">
|
|
<view class="ques-answer-con">
|
|
<view class="answer" v-for="(item,index) in quesList" :key="index">
|
|
<view class="answer-option" :id="'question-'+index">{{item.sceneName}}
|
|
</view>
|
|
<view class="answer-text">A. {{item.optionA}}</view>
|
|
<view class="tip">答案： </view>
|
|
<view>
|
|
<view class="assess-list">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
<view :class="['one-select',item.score[0].optionScore == index ? 'selected' : '']"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="answer-text">B. {{item.optionB}}</view>
|
|
<view class="tip">答案： </view>
|
|
<view>
|
|
<view class="assess-list">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
<view :class="['one-select',item.score[1].optionScore == index ? 'selected' : '']"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <radio-group class="assess-list" @change="selectAssess(item.id,$event,
|
|
'optionB',item.listorder)">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
|
|
<radio :value="data.score.toString()" style="transform:scale(0.7)"
|
|
:checked="getScoreChecked(item.id,data.score.toString(),'optionB')" />
|
|
|
|
</view>
|
|
</radio-group> -->
|
|
</view>
|
|
<view class="answer-text">C. {{item.optionC}}</view>
|
|
<view class="tip">答案： </view>
|
|
<view>
|
|
<view class="assess-list">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
<view :class="['one-select',item.score[2].optionScore == index ? 'selected' : '']"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <radio-group class="assess-list" @change="selectAssess(item.id,$event,
|
|
'optionC',item.listorder)">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
|
|
<radio :value="data.score.toString()" style="transform:scale(0.7)"
|
|
:checked="getScoreChecked(item.id,data.score.toString(),'optionC')" />
|
|
|
|
</view>
|
|
</radio-group> -->
|
|
</view>
|
|
<view class="answer-text">D. {{item.optionD}}</view>
|
|
<view class="tip">答案： </view>
|
|
<view>
|
|
<view class="assess-list">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
<view :class="['one-select',item.score[3].optionScore == index ? 'selected' : '']"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <radio-group class="assess-list" @change="selectAssess(item.id,$event,
|
|
'optionD',item.listorder)">
|
|
<view class="one-assess" v-for="(data,index) in assessList" :key="index">
|
|
<view>{{data.value}} </view>
|
|
|
|
<radio :value="data.score.toString()" style="transform:scale(0.7)"
|
|
:checked="getScoreChecked(item.id,data.score.toString(),'optionD')" />
|
|
|
|
</view>
|
|
</radio-group> -->
|
|
</view>
|
|
<view class="tip">请选择以上哪个条目是最符合您的孩子的描述? </view>
|
|
<view>
|
|
<!-- <radio-group class="option-con" @change="changeOption(item.id,$event,item.listorder)">
|
|
<label class="option-label" v-for="option,optionIndex in optionList"
|
|
:key="optionIndex">{{option}}
|
|
<radio :value="option" class="one-radio"
|
|
:checked="getOptionChecked(item.id,option)" />
|
|
</label>
|
|
</radio-group> -->
|
|
<view class="option-con">
|
|
<view class="one-option" v-for="option,optionIndex in optionList" :key="index">
|
|
<view>{{option}} </view>
|
|
<view :class="['one-select',item.qustionOption == option ? 'selected' : '']"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-divider text="分割线" lineColor="#2979ff" textColor="#2979ff" :dot="true"></u-divider>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="tableAlias == 'table2'">
|
|
<view v-for="(item,index) in quesList" :key="index"
|
|
v-if="currentQuestionlistorder == item.listorder">
|
|
<u-transition :show="true" mode="fade-right">
|
|
<view class="ques-con" style="margin-top: 20rpx;">
|
|
<view class="tip" v-if="index == 0">请仔细阅读以下题目，考虑你有多同意或不同意题目中的表述，选择最适合的答案。 </view>
|
|
<view class="ques-title-con">
|
|
<view class="ques-num">
|
|
<text class="current-num">{{item.listorder}}</text>/
|
|
<text class="all-num">{{quesList.length}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="ques-title">{{item.sceneName}}</view>
|
|
<view class="ques-answer-con">
|
|
<view class="ques-select">
|
|
<template v-for="(option,optionIndex) in optionListTable2">
|
|
<view :class="['one-answer',option.value == item.qustionOption ? 'selected' : '']">{{option.value +'. ' + option.label}}</view>
|
|
</template>
|
|
</view>
|
|
<!-- <radio-group class="option-con-table2"
|
|
@change="changeOption(item.id,$event,item.listorder)">
|
|
<label :class="['one-answer',selected(item.id,option.value)]"
|
|
v-for="option,optionIndex in optionListTable2"
|
|
:key="optionIndex">{{option.value +'. ' + option.label}}
|
|
<radio :value="option.value" class="one-radio" style="display: none;" />
|
|
</label>
|
|
</radio-group> -->
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="btn" @click="toNext"
|
|
v-if="currentQuestionlistorder !== table.questionInfo.length">下一题</view>
|
|
<!-- <view class="btn" @click="submit" v-else>提交问卷</view> -->
|
|
</view>
|
|
</u-transition>
|
|
</view>
|
|
</template>
|
|
<template v-if="tableAlias == 'table3'">
|
|
<view v-for="(item,index) in quesList" :key="index"
|
|
v-if="currentQuestionlistorder == item.listorder">
|
|
<u-transition :show="true" mode="fade-right">
|
|
<view class="ques-con" style="margin-top: 20rpx;">
|
|
<view class="tip" v-if="index == 0">请仔细阅读以下题目，考虑你有多同意或不同意题目中的表述，选择最适合的答案。 </view>
|
|
<view class="ques-title-con">
|
|
<view class="ques-num">
|
|
<text class="current-num">{{item.listorder}}</text>/
|
|
<text class="all-num">{{quesList.length}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="ques-title">{{item.sceneName}}</view>
|
|
<view class="ques-answer-con">
|
|
<view class="ques-select">
|
|
<template v-for="(option,optionIndex) in optionListTable3" >
|
|
<view :class="['one-answer',option.value == item.qustionOption ? 'selected' : '']">{{option.value +'. ' + option.label}}</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="btn" @click="toNext"
|
|
v-if="currentQuestionlistorder !== quesList.length">下一题</view>
|
|
<!-- <view class="btn" @click="submit" v-else>提交问卷</view> -->
|
|
</view>
|
|
</u-transition>
|
|
</view>
|
|
</template>
|
|
<u-loading-icon text="加载中" textSize="18" :show="loading"></u-loading-icon>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
recordId: null, // 答题记录id
|
|
tableAlias: null, // 量表别名 table1 table2 table3
|
|
selectedChildId: null, // 儿童Id
|
|
quesList:[],
|
|
answerList:[],
|
|
|
|
table: {
|
|
|
|
}, // 量表内容
|
|
optionList: [ // 量表1选项
|
|
'A', 'B', 'C', 'D', 'E'
|
|
],
|
|
assessList: [{ // 量表1选项的程度 赋分
|
|
value: '从不',
|
|
score: 0
|
|
}, {
|
|
value: '极少',
|
|
score: 1
|
|
}, {
|
|
value: '较少',
|
|
score: 2
|
|
}, {
|
|
value: '有时',
|
|
score: 3
|
|
}, {
|
|
value: '经常',
|
|
score: 4
|
|
}, {
|
|
value: '频繁',
|
|
score: 5
|
|
}, {
|
|
value: '总是',
|
|
score: 6
|
|
}],
|
|
optionListTable2: [ //量表2选项
|
|
{
|
|
label: '总是',
|
|
value: 'A'
|
|
},
|
|
{
|
|
label: '经常',
|
|
value: 'B'
|
|
},
|
|
{
|
|
label: '有时',
|
|
value: 'C'
|
|
},
|
|
{
|
|
label: '偶尔',
|
|
value: 'D'
|
|
},
|
|
{
|
|
label: '从不',
|
|
value: 'E'
|
|
},
|
|
],
|
|
optionListTable3: [ //量表2选项
|
|
{
|
|
label: '完全同意',
|
|
value: 'A'
|
|
},
|
|
{
|
|
label: '少许同意',
|
|
value: 'B'
|
|
},
|
|
{
|
|
label: '少许不同意',
|
|
value: 'C'
|
|
},
|
|
{
|
|
label: '完全不同意',
|
|
value: 'D'
|
|
}
|
|
],
|
|
|
|
selectedAnswer: [], // 用户问卷回答信息 数组
|
|
currentQuestionlistorder: 1, // 当前问卷题目的序号
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.recordId = option.recordId;
|
|
this.getRecordInfo();
|
|
|
|
},
|
|
|
|
methods:{
|
|
async getQues(type) {
|
|
// const table1 = await this.$myRequest({
|
|
// url: '/system/table/table1',
|
|
// })
|
|
// const table2 = await this.$myRequest({
|
|
// url: '/system/table/table2',
|
|
// })
|
|
// const table3 = await this.$myRequest({
|
|
// url: '/system/table/table3',
|
|
// })
|
|
let res;
|
|
if(type == 'table1'){
|
|
res = await this.$myRequest({
|
|
url: '/system/table/table1'
|
|
})
|
|
}else if(type == 'table2'){
|
|
res = await this.$myRequest({
|
|
url: '/system/table/table2'
|
|
})
|
|
}else if(type == 'table3'){
|
|
res = await this.$myRequest({
|
|
url: '/system/table/table3'
|
|
})
|
|
}
|
|
console.log('251',res.data, res.data.data.questionInfo,typeof(res.data.data.questionInfo))
|
|
|
|
this.table.questionInfo = res.data.data.questionInfo;
|
|
for(let i = 0; i < this.table.questionInfo.length;i ++){
|
|
for(let j = 0; j < this.answerList.length; j ++){
|
|
if(this.table.questionInfo[i].id == this.answerList[j].questionId){
|
|
let ques = {...this.table.questionInfo[i],...this.answerList[j]}
|
|
console.log('271',ques)
|
|
this.quesList.push(ques)
|
|
}
|
|
}
|
|
}
|
|
console.log('277',this.quesList)
|
|
console.log('253',this.table.questionInfo[0])
|
|
|
|
},
|
|
async getRecordInfo() {
|
|
uni.showLoading({
|
|
title: '获取报告中'
|
|
})
|
|
// 获取问卷记录
|
|
const res = await this.$myRequest({
|
|
url: '/system/record/getRecordInfo/' + this.recordId,
|
|
})
|
|
console.log('126',res.data.data.reportResult)
|
|
console.log('127',res.data.data.totalScore)
|
|
console.log('128',res.data.data.answer);
|
|
console.log('129',JSON.parse(res.data.data.answer));
|
|
console.log('130',res.data.data.tableType);
|
|
this.answerList = JSON.parse(res.data.data.answer);
|
|
|
|
// 校验是否存在记录
|
|
if (!res.data.hasOwnProperty('data')) {
|
|
uni.showToast({
|
|
title: '无此测量记录',
|
|
icon: 'error',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/tabbar/home/Home'
|
|
})
|
|
}, 1500)
|
|
|
|
}
|
|
})
|
|
return
|
|
}
|
|
const userInfo = await this.$myRequest({
|
|
url: '/getInfo'
|
|
})
|
|
// 校验是否本人回答的记录
|
|
if (res.data.data.userId != userInfo.data.user.userId) {
|
|
uni.showToast({
|
|
title: '非本人测量记录',
|
|
icon: 'error',
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/tabbar/home/Home'
|
|
})
|
|
}, 1500)
|
|
|
|
}
|
|
})
|
|
return
|
|
}
|
|
this.tableAlias = res.data.data.tableType;
|
|
this.getQues( res.data.data.tableType);
|
|
|
|
|
|
this.tableType = res.data.data.tableType;
|
|
|
|
// this.table = JSON.parse(uni.getStorageSync(res.data.data.tableType));
|
|
// console.log('312',this.table)
|
|
let reportData = JSON.parse(res.data.data.reportData);
|
|
this.reportData = reportData;
|
|
uni.hideLoading()
|
|
|
|
},
|
|
// 跳转下一题
|
|
toNext() {
|
|
console.log('346')
|
|
this.currentQuestionlistorder++;
|
|
},
|
|
}
|
|
}
|
|
</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;
|
|
image{
|
|
width:80rpx;
|
|
height:80rpx;
|
|
float: right;
|
|
}
|
|
.ques-title-con {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ques-title {
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.ques-num {
|
|
margin-right: 10rpx;
|
|
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-option {
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.answer-text {
|
|
// font-weight: ;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.assess-list {
|
|
display: flex;
|
|
|
|
.one-assess {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100rpx;
|
|
font-size: 24rpx;
|
|
padding: 6rpx;
|
|
border: 1px solid #ddd;
|
|
.one-select{
|
|
border-radius: 50%;
|
|
border:1px solid #666;
|
|
width:30rpx;
|
|
height:30rpx;
|
|
margin:10rpx 0rpx;
|
|
background-color: #fff;
|
|
&.selected{
|
|
background-color: #18BC37;
|
|
border: 1px solid #18BC37;
|
|
}
|
|
}
|
|
}
|
|
|
|
.one-assess:nth-child(2n) {
|
|
// background-color: #eee;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
margin: 20rpx 0rpx;
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.option-con {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 20rpx 0;
|
|
.one-option{
|
|
display: flex;
|
|
}
|
|
.one-select{
|
|
border-radius: 50%;
|
|
border:1px solid #666;
|
|
width:30rpx;
|
|
height:30rpx;
|
|
margin:6rpx 10rpx;
|
|
background-color: #fff;
|
|
&.selected{
|
|
background-color: #18BC37;
|
|
border: 1px solid #18BC37;
|
|
}
|
|
}
|
|
.option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.one-radio {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 50rpx;
|
|
|
|
.btn {
|
|
width: 700rpx;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
background-color: rgba(40, 123, 206, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
margin: 20rpx 0rpx;
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.option-con-table2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/deep/ .uni-radio-input {
|
|
margin-right: 0 !important;
|
|
}
|
|
</style> |