398 lines
9.3 KiB
Vue
398 lines
9.3 KiB
Vue
<template>
|
||
<view class="viewWrap">
|
||
<z-nav-bar :title="title"></z-nav-bar>
|
||
<view class="scale_block" v-show="status==0">
|
||
<text class="scale_title">{{data.title}}</text>
|
||
<view class="scale_solid">
|
||
<view class="scale_des"><text style="font-weight: bold;">量表简介：</text>{{data.des}}</view>
|
||
<view class="scale_des"><text style="font-weight: bold;">题目数量：</text>{{data.num}}</view>
|
||
<view class="scale_des"><text style="font-weight: bold;">测试说明：</text>{{data.tip}}</view>
|
||
</view>
|
||
|
||
<!-- Picker 组件 -->
|
||
<picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange">
|
||
<u-button class="scale_btn">进入测试</u-button>
|
||
</picker>
|
||
</view>
|
||
<view class="scale_block" v-show="status==1">
|
||
<view class="test_block">
|
||
<text class="current_test">{{currentIndex+1}}、{{testList[currentIndex]}}</text>
|
||
<radio-group @change="radioChange" class="test_group" :style="{ height: radioHeight + 'px' }">
|
||
<label v-for="(item,index) in checkList" :key="index" class="test_label">
|
||
<radio :value="String(item.value)" class="test_radio">{{item.name}}</radio>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="scale_block" v-show="status==2">
|
||
<view class="result_block">
|
||
<text class="result_title">{{data.title}}-测试结果</text>
|
||
<text class="result_total">{{resultTotal}}分</text>
|
||
<text class="result_content">{{resultContent}}</text>
|
||
<u-button class="result_btn" @click="back">回到首页</u-button>
|
||
|
||
<view class="result_border">
|
||
<text class="result_con">结果解释：</text>
|
||
<text class="result_cnRes" v-if="data.type=='yiyu'&&countryIndex==0">{{data.cnRes}}</text>
|
||
<text class="result_cnRes" v-else>{{data.worldRes}}</text>
|
||
<text class="result_con" style="padding-top: 40rpx;">计分规则：</text>
|
||
<text class="result_cnRes">{{data.role}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $http from '@/config/requestConfig.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
data: {},
|
||
countries: [],
|
||
multiArray: [[], []],
|
||
value: [0, 0],
|
||
selectedData: {}, //城市
|
||
status: 0, //是否进入测试
|
||
title: '心身量表',
|
||
countryIndex: 0,
|
||
timer: null, // 用来绑定当前选择的值
|
||
checkList: [], //默认选项列表
|
||
testList: [], //测试题目数据
|
||
currentIndex: 0, //默认第一题
|
||
resList: [], //测试结果数据集合，用于传参！记录！
|
||
radioHeight: '',
|
||
resultContent: '',
|
||
resultTotal: ''
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.data = JSON.parse(uni.getStorageSync('data'));
|
||
this.resultList = this.data.result;
|
||
//选项
|
||
this.checkList = this.resultList.map((item, index) => ({
|
||
name: item,
|
||
value: index+1
|
||
}));
|
||
this.getCityList();
|
||
this.getTestData();
|
||
//radioHeight
|
||
this.radioHeight = this.checkList.length*42 +20;
|
||
},
|
||
methods: {
|
||
//获取国家-一级
|
||
getCountryList() {
|
||
$http.request({
|
||
url: "common/baseArea/getAllBaseArea",
|
||
method: "POST",
|
||
data: {},
|
||
header: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.countries = res.baseAreas;
|
||
this.countries.forEach((country, index)=>{
|
||
if(country.code=='86'){
|
||
this.countries[index].cities = this.cityList;
|
||
}
|
||
})
|
||
|
||
//初始化 picker 数据
|
||
this.initPickerData();
|
||
}
|
||
}).catch(e => {
|
||
|
||
});
|
||
},
|
||
//获取城市-二级
|
||
getCityList() {
|
||
$http.request({
|
||
url: "common/province/getProvinceList",
|
||
method: "POST",
|
||
data: {},
|
||
header: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
const newCityList = res.provinceList.map( city => {
|
||
return city.provName;
|
||
});
|
||
this.cityList = newCityList;
|
||
this.getCountryList();
|
||
}
|
||
}).catch(e => {
|
||
|
||
});
|
||
},
|
||
//展示城市数据
|
||
initPickerData() {
|
||
//第一列是国家名
|
||
const countryNames = this.countries.map(item => item.title);
|
||
this.multiArray[0] = countryNames;
|
||
//默认选择中国，并加载其省份
|
||
if (this.countries[0].cities) {
|
||
this.multiArray[1] = Object.keys(this.countries[0].cities).map(key => this.countries[0].cities[key]);
|
||
} else {
|
||
this.multiArray[1] = [];
|
||
}
|
||
},
|
||
//picker修改值
|
||
bindMultiPickerChange(e) {
|
||
this.value = e.detail.value;
|
||
this.updateCurrentSelection();
|
||
},
|
||
//修改动作
|
||
bindMultiPickerColumnChange(e) {
|
||
let data = {
|
||
multiArray: this.multiArray,
|
||
value: this.value
|
||
};
|
||
|
||
if (e.detail.column === 0) {
|
||
// 如果是第一列（国家）改变了，则需要更新第二列（城市）
|
||
const selectedCountry = this.countries[e.detail.value];
|
||
if (selectedCountry.cities) {
|
||
// 如果选择了中国，加载省份
|
||
data.multiArray[1] = Object.keys(selectedCountry.cities).map(key => selectedCountry.cities[key]);
|
||
data.value = [e.detail.value, 0];
|
||
} else {
|
||
// 否则清空第二列
|
||
data.multiArray[1] = [];
|
||
data.value = [e.detail.value, 0];
|
||
}
|
||
}
|
||
|
||
this.multiArray = data.multiArray;
|
||
this.value = data.value;
|
||
//this.updateCurrentSelection();
|
||
},
|
||
updateCurrentSelection() {
|
||
const countryIndex = this.value[0];
|
||
this.countryIndex = countryIndex; //判断抑郁结果 标准的定义文字显示
|
||
const cityIndex = this.value[1];
|
||
const selectedCountry = this.multiArray[0][countryIndex];
|
||
const selectedCity = this.multiArray[1][cityIndex];
|
||
|
||
this.selectedData = {
|
||
country: selectedCountry
|
||
}
|
||
if(selectedCity){
|
||
this.selectedData.city = selectedCity
|
||
}else{
|
||
this.selectedData.city = ''
|
||
}
|
||
//切换界面，进入测试
|
||
this.status = 1;
|
||
this.title = '开始测试题';
|
||
},
|
||
//测试题目
|
||
getTestData(){
|
||
$http.request({
|
||
url: "common/selfEvaluationForm/formSubjectList",
|
||
method: "POST",
|
||
data: {
|
||
type: this.data.type
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
if(res.list&&res.list.length>0){
|
||
this.testList = res.list; //题目数据
|
||
}else{
|
||
uni.showToast({
|
||
title: '暂无数据',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}).catch(e => {
|
||
|
||
});
|
||
},
|
||
//选值
|
||
radioChange(e){
|
||
const value = e.detail.value;
|
||
this.resList.push(Number(value)); //记录测试结果集合
|
||
//延迟展示下一题
|
||
if (this.currentIndex < this.testList.length - 1) {
|
||
this.timer = setTimeout(() => {
|
||
this.currentIndex++;
|
||
this.checkList = []
|
||
//延迟更换选项，避免再显示被勾选
|
||
this.timer = setTimeout(() => {
|
||
this.checkList = this.resultList.map((item, index) => ({
|
||
name: item,
|
||
value: index+1
|
||
}));
|
||
}, 50)
|
||
}, 500)
|
||
}else{
|
||
//如果做完最后一道题
|
||
this.getCountForm();
|
||
}
|
||
},
|
||
//测试结果
|
||
getCountForm(){
|
||
$http.request({
|
||
url: "common/selfEvaluationForm/countForm",
|
||
method: "POST",
|
||
data: {
|
||
country: this.selectedData.country,
|
||
city: this.selectedData.city,
|
||
type: this.data.type,
|
||
resList: this.resList
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
this.status = 2;
|
||
this.resultContent = res.status;
|
||
this.resultTotal = res.total;
|
||
}
|
||
}).catch(e => {
|
||
|
||
});
|
||
},
|
||
//回到首页
|
||
back(){
|
||
uni.switchTab({
|
||
url: '/pages/peanut/home'
|
||
})
|
||
uni.setStorageSync('fixed',true)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.viewWrap{
|
||
height: 100vh;
|
||
background-color: #f4f7ff;
|
||
}
|
||
.scale_block{
|
||
padding: 20rpx;
|
||
}
|
||
.scale_item{
|
||
margin-bottom: 50rpx;
|
||
}
|
||
.scale_solid{
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||
}
|
||
.scale_title{
|
||
display: inline-block;
|
||
width: 100%;
|
||
font-size: 42rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
padding: 30rpx 0 20rpx;
|
||
}
|
||
.scale_des{
|
||
font-size: 30rpx;
|
||
line-height: 48rpx;
|
||
color: #666;
|
||
padding: 5rpx 0;
|
||
}
|
||
.scale_btn{
|
||
width: 500rpx;
|
||
height: 70rpx;
|
||
margin: 60rpx auto 0;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
background: #258feb;
|
||
border-radius: 10rpx;
|
||
}
|
||
.test_group{
|
||
margin-top: 20rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.uni-radio-input{
|
||
width: 14px !important;
|
||
height: 14px !important;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.test_label{
|
||
display: block;
|
||
padding: 20rpx 0;
|
||
font-size: 30rpx;
|
||
}
|
||
.test_radio{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.current_test{
|
||
font-size: 32rpx;
|
||
padding-top: 30rpx;
|
||
color: #000;
|
||
display: block;
|
||
}
|
||
.result_block{
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
padding: 80rpx 30rpx 50rpx;
|
||
color: #333;
|
||
}
|
||
.result_title{
|
||
display: block;
|
||
font-size: 36rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
}
|
||
.result_total{
|
||
display: block;
|
||
font-size: 52rpx;
|
||
line-height: 50rpx;
|
||
font-weight: 800;
|
||
color: crimson;
|
||
padding: 60rpx 0 30rpx;
|
||
text-align: center;
|
||
}
|
||
.result_content{
|
||
display: block;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
}
|
||
.result_btn{
|
||
width: 500rpx;
|
||
height: 70rpx;
|
||
margin: 60rpx auto 0;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
background: #258feb;
|
||
border-radius: 10rpx;
|
||
}
|
||
.result_cnRes{
|
||
display: block;
|
||
font-size: 28rpx;
|
||
line-height: 48rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
.result_con{
|
||
display: block;
|
||
font-size: 32rpx;
|
||
line-height: 48rpx;
|
||
color: crimson;
|
||
}
|
||
.result_border{
|
||
border: 1rpx solid #258feb;
|
||
border-radius: 10rpx;
|
||
padding: 40rpx 30rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
</style> |