discounts-minapp/study/test.vue

<template>
	<view class="test">
		<zs-header title="研学MBTI测试" :background="background"></zs-header>
		<view v-if="!isOver" class="answer-box">
			<view class="question-box">
				<view class="num">
					第{{step+1}}题
				</view>
				<view class="question">
					{{list[step].questionsName}}
				</view>
			</view>

			<view class="answer-item" :class="[answer[step] == item.columnId?'active':'']" @click="choose(item.columnId)" v-for="(item,index) in list[step].answers" :key="index">
				{{index+1}}、{{item.answer}}
			</view>
		</view>
		
		
		<view v-else class="result">
			<view class="result-title">
				恭喜您完成测试
			</view>
			<view class="result-content">
				<view class="title">
					{{resultInfo.resultTitle}}
				</view>
				
				<view class="desc-title">
					人格解析
				</view>
				<view class="desc">
					{{resultInfo.resultMsg}}
				</view>
			</view>
		</view>

		<view class="btn-group">
			<template v-if="isOver">
				<view class="btn" @click="jump">
					个性化研学路线推荐
				</view>
				<view class="btn pre-btn" @click="handleAgain">
					再测一次
				</view>
			</template>
			<template v-else>
				<view class="btn" @click="handleBtn(1)">
					{{step == list.length-1?'提交测试':'下一题'}}
				</view>
				<view class="btn pre-btn" v-show="step>0" @click="handleBtn(-1)">
					上一题
				</view>
			</template>
		</view>

	</view>
</template>

<script>
	import {getTestList,getPaper,studyTest,getResult} from '@/api/study.js'
	export default {
		data() {
			return {
				isOver:false,//是否答题完毕
				background: false,
				step: 0,
				paperId:0,
				list: [],
				answer:{},
				resultInfo:{
					resultTitle:'',
					resultMsg:'',
				}
			}
		},
		methods: {
			filterData(arr){
				    var obj = {}
				    //将数组中的数和出现的次数利用对象键值对的方式进行存储
				    for(var i = 0 ;i < arr.length ; i++){
				        if(!obj[arr[i]]){
				            obj[arr[i]] = 1;
				        }
				        else{
				            obj[arr[i]] = Number(obj[arr[i]])+ 1
				        }
				    }
				    //把对象的key值变成数组并通过value值的大小进行排序
				    var sortArr = Object.keys(obj).sort((i,j) => obj[j]-obj[i])//排序方法的使用
					return sortArr.join(",")
				   
			},
			choose(id){
				this.$set(this.answer,this.step,id)
			},
			handleBtn(val) {
				if(val && this.answer[this.step]){//下一步  必须选择答案
					if(this.step == this.list.length -1){
						this.isOver = true
						let arr = []
						for (const key in this.answer) {
							if (Object.hasOwnProperty.call(this.answer, key)) {
							  arr.push(this.answer[key])
							}
						  }
						let studyColumnId = this.filterData(arr)//按照答案的出现次数排序
						console.log(studyColumnId);
						return this.studyTest(studyColumnId)
					}
				}else if(val){
				   return uni.showToast({
						title:'请选择答案',
						icon:'error'
					})
				}
				
				this.step += val
			},
			// 再测一次
			handleAgain(){
				this.step = 0
				this.isOver = false
				this.answer = {}
				this.getList()
			},
			jump(){
				uni.navigateTo({
					url:'/study/index'
				})
			},
			getList(){
				getPaper({currentPage:1,pageSize:1}).then(res=>{
					if(res.state == 'Success'){
						this.paperId = res.content.records[0].id
						getTestList({paperId:this.paperId}).then(r=>{
							this.list = r.content
						})
					}
				})
			},
			studyTest(studyColumnId){
				studyTest({studyColumnId,paperId:this.paperId}).then(res=>{
					if(res.state == 'Success'){
						this.getResult()
					}
				})
			},
			// 获取测试结果
			getResult(){
				let userId = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).userId:''
				getResult({userId}).then(r=>{
					if(r.state == 'Success'&&r.content.createTime){
						this.isOver = true
						this.resultInfo = r.content
					}
				})
			}
		},
		created() {
			this.getList()
			this.getResult()
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.background = true
			} else {
				this.background = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.test {
		height: 100vh;
		background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/YAsTZ3gcQFu701357708df6e5f3e01c18c6e27b7be25.png/1.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 180rpx;
		box-sizing: border-box;

		.answer-box {
			padding: 0 10rpx;

			.question-box {
				width: 730rpx;
				min-height: 430rpx;
				box-sizing: border-box;
				padding: 160rpx 80rpx 100rpx;
				background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/4lDYiZSDBEJ660c2408e36a13a153bad64d5ff3a1786.png/1.png') no-repeat;
				background-size: 100% 100%;
				position: relative;

				.num {
					position: absolute;
					top: 28rpx;
					left: 30rpx;
					width: 230rpx;
					text-align: center;
					line-height: 72rpx;
					font-weight: bold;
					color: #181818;
					font-size: 36rpx;
				}
			}
			.answer-item.active{
				background: #ABD2FF;
			}
			.answer-item {
				width: 690rpx;
				line-height: 80rpx;
				border: 2rpx solid #181818;
				background: #FFFFFF;
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				padding: 0 30rpx;
				margin-left: 20rpx;
				margin-top: 30rpx;
				word-break: break-all;
				box-sizing: border-box;
			}
		}
		
		.result{
			.result-title{
				width: 596rpx;
				line-height: 138rpx;
				text-align: center;
				background: linear-gradient(180deg, #F2F6FF 0%, #A1C1FF 100%);
				border-radius: 16rpx 16rpx 0 0;
				font-weight: bold;
				color: #181818;
				font-size: 36rpx;
				margin: 60rpx auto 0;
			}
			.result-content{
				width: 686rpx;
				padding: 40rpx 30rpx;
				background: linear-gradient(180deg, #F2F6FF 0%, #A1C1FF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				box-sizing: border-box;
				margin: 0 auto;
				.title{
					font-weight: 800;
					color: #3879F9;
					font-size: 60rpx;
					text-align: center;
				}
		
				.desc-title{
					font-weight: bold;
					color: #181818;
					font-size: 36rpx;
				}
				.desc{
					color: #181818;
					font-size: 28rpx;
					margin-top: 20rpx;
					line-height: 46rpx;
					min-height: 440rpx;
				}
			}
		}

		.btn-group {
			position: fixed;
			bottom: 100rpx;
			left: 0%;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn {
				width: 688rpx;
				line-height: 80rpx;
				text-align: center;
				background: #3879F9;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 28rpx;
			}

			.btn.pre-btn {
				background: none;
				color: #3879F9;
				border: 2rpx solid #3879F9;
				margin-top: 20rpx;
			}
		}
	}
</style>