vue开发测评系统思路及踩坑

最近公司做了一个测评系统，因为时间很短，本以为会很简单，没有想到踩了很多坑。

先看下部分效果图吧

然后在说下需求

1：所有的答案都是动态的（例如选择是出来的是第二题，选择否出来的是第五题）

2：没有答过的题不显示下一题按钮，答过的题显示上一题按钮

3：答过的题，返回上一题显示上一题和下一题按钮（第一题和最后一题例外）

4：最后一题显示上一题和答案解析按钮

5：选择的时候自动跳转到下一题

6：已经答过的题，更改后，从此题开始后面答过的题清除（需求则是返回上一题，点击后不管有无更改后面的题都清除，自己感觉不合理）

看似很简单，其实并不是很好处理但是当思路捋清楚了就很好做了

先捋一捋思路无非三种操作上一题、下一题、和答题和三种按钮状态上一题下一题查看答案

然后开始拆分功能

首先是答题

1.判断是不是最后一题

1.1是：

1.1.1 显示上一题按钮

1.1.2显示答案解析按钮

1.2不是：

1.2.1显示下一题按钮

1.2.2 显示上一题按钮

1.2.3对比和之前的变化当前题是否有值

1.2.3.1是 ==》哪一题开始清空

1.2.3.2否 ===》清空

2.选择赋值的时机

3. 当前题点击的时候判断是不是最后一题（已经答过的题）

3.1 当前题是第几题 =》从全部答案里面找得到索引

3.2 判断当前提是否答过

答过：当前题的答案去匹配已经打过的题的当前题

判断下一题是否有

有==》不处理

五 ==》显示查看答案按钮

2.下一题

2.1 显示上一题

2.2过滤已经答过的题目 =》找到当前题的索引

2.3判断当前题的下一题是否存在

2.3.1不存在

判断是否显示查看答案的按钮

是 =》显示答案解析按钮

否 =》显示下一题

2.3.2存在

显示下一题

判断是否最后一题判断依据如下

1从全部题里面找到当前题

2从已经答过的题里面找到对应的索引‘

3当前题的题目答案中匹配已答项的答案

4判断当前题答案中是否有下一题

有==》不处理

无==》显示答案解析按钮

3 上一题

3.1 显示下一题按钮

3.2 判断上一题按钮是否显示

3.3 显示上一题

3.4 记录答案

看一下完整代码吧（vue3+vant）

<template><div class="main"><template v-for="(item, i) in vDate.dataList" :key="i"><div class="item_list" v-show="item.questionId == vDate.questionId"><div class="item_title">{{ item.question }}</div><van-radio-groupv-model="vDate.answerList[i].questionOptionId"><van-radio@click="radioClick(i,item,key)"v-for="(key, v) in item.optionList":key="v":name="key.questionOptionId">{{ key.questionOption }}</van-radio></van-radio-group></div></template><div class="operate"><div><van-button size="small" v-if="vDate.press>0" @click="press">上一题</van-button><span v-else></span></div><div><div v-if="vDate.next>0"><van-button type="primary" size="small" @click="lookAnswer" v-if="vDate.isAnswer">查看答案</van-button><van-button type="primary" size="small" @click="next" v-else>下一题</van-button></div><div v-else></div></div></div></div><div><van-overlay :show="vDate.show"><div class="wrapper" @click.stop><van-cell-group inset><div class="label">手机号</div><van-fieldv-model="vDate.phone"centertype="digit":maxlength="11"placeholder="请输入手机号"><template #button><van-button type="primary" @click="vDate.flag && obtain()">{{vDate.content}}</van-button></template></van-field><div class="input_control"><van-field v-model="vDate.pwdVal" :maxlength="4" type="digit" ref="verification" /></div><div class="label">验证码</div><div class='input_row' @click='getFocus'><div class='pwd_item' v-for="(item,i) in 4" :key='i'><span v-if="vDate.pwdVal.length>i">{{vDate.pwdVal[i]}}</span></div></div><div class="operation"><van-button type="primary" block @click="toDetail">查看答案</van-button></div></van-cell-group></div></van-overlay></div>
</template>
<script setup lang="ts">
import { nextTick, reactive, ref,onMounted } from "vue";
const verification = ref()
import {useRouter} from "vue-router"
import { Toast } from 'vant';
import {getQuestionList,submitQuestionList} from "@/api/index"
const router = useRouter()
const vDate:any = reactive({type:0,phone:'',show:false,flag:true,input:false,pwdVal:"",count:'',content:'获取验证码',countNumber:1,timer:null,dataList: [],answerList:[],questionId:'',isAnswer:false,idList:[],press:0,isNext:'',next:0,index:0,answerLists:[]
})
const phoneReg= /^1[3-9][0-9]{9}$/ 
// 上一题
function press(){vDate.next = 1vDate.isAnswer = falselet answerList = vDate.answerList.filter((item:any)=>item.questionId)let length = answerList.length-1let index = answerList.findIndex((item:any)=>item.questionId==vDate.questionId)if(index==-1){vDate.press = answerList.length-1vDate.questionId = answerList[length].questionId}else{vDate.press = index-1vDate.questionId = answerList[index-1].questionId}vDate.answerLists = JSON.parse(JSON.stringify(vDate.answerList))
}
function next(){vDate.press = 1let answerList = vDate.answerList.filter((item:any)=>item.questionId)let index = answerList.findIndex((item:any)=>item.questionId == vDate.questionId )if(answerList[index+1]){vDate.questionId = answerList[index+1].questionIdlet nextArr = vDate.dataList.filter((item:any)=>item.questionId == vDate.questionId) //当前页项let indexs = vDate.answerList.findIndex((item:any)=>item.questionId == vDate.questionId)console.log(vDate.questionId,vDate.answerList[indexs],999,nextArr[0],"===========")let arr = nextArr[0].optionList.filter((item:any)=>item.questionOptionId == vDate.answerList[indexs].questionOptionId)if(!arr[0].relationQuestionId){vDate.isAnswer = truevDate.next = 1}}else{if(!vDate.isNext){vDate.isAnswer = true}else{vDate.next = -1vDate.questionId = vDate.isNextconsole.log(vDate.questionId,"22")}}
}
// 查看答案
const lookAnswer = ()=>{vDate.show = true
}
// 输入验证码
const getFocus = ()=>{nextTick(()=>{verification.value.focus()})
}
//答案
const toDetail = ()=>{if(!vDate.phone){return Toast('请输入手机号');}if(!phoneReg.test(vDate.phone)){return Toast('请输入正确手机号');}if(vDate.countNumber==1&&!vDate.pwdVal){return Toast('请获取验证码');}if(vDate.countNumber==2&&!vDate.pwdVal){return Toast('请输入验证码');}let userAnswerRequestList = vDate.answerList.filter((item:any)=>item.questionId)let params = {questionGroup:1,userAnswerRequestList}submitQuestionList(params).then((res:any)=>{localStorage.setItem("answerBatchNo",res.data)router.push("/answerDetail")})}
//获取验证码
const obtain = ()=>{if(!vDate.phone){return Toast('请输入手机号');}if(!phoneReg.test(vDate.phone)){return Toast('请输入正确手机号');}setTimeoutInfo()
}
//定时器
const setTimeoutInfo = ()=>{const TIME_COUNT = 60;vDate.countNumber = 2vDate.flag = falseif (!vDate.timer) {vDate.count = TIME_COUNT;vDate.timer = setInterval(() => {if (vDate.count > 0 && vDate.count <= TIME_COUNT) {vDate.count--;vDate.content = vDate.count+' s后获取';} else {vDate.content = '获取验证码';vDate.flag = true;clearInterval(vDate.timer);vDate.timer = null;}}, 1000)}
}
const radioClick = (i:number,item:any,val:any)=>{if(val.relationQuestionId!=null){setTimeout(()=>{vDate.questionId = val.relationQuestionIdvDate.press = i+1vDate.next = -1vDate.isNext = val.relationQuestionIdlet index = vDate.answerList.findIndex((item:any)=>item.questionId == val.relationQuestionId)if(index==-1){vDate.answerList.forEach((item:any,v:number)=>{if(v>i){item.questionId = ""item.questionOptionId = ""}})}else{let arr = vDate.answerList.map((item:any,i:number)=>{return vDate.answerList[i].questionOptionId!=vDate.answerLists[i].questionOptionId})let indexs = arr.findIndex((item:any)=>item==true)if(indexs!=-1){vDate.answerList.forEach((item:any,v:number)=>{if(v>indexs){item.questionId = ""item.questionOptionId = ""}})}}clearTimeout()},300)}else{vDate.isAnswer = truevDate.next = 1vDate.isNext = null}vDate.answerList[i].questionId = item.questionIdconsole.log(vDate.answerList,"vDate.answerList111")setTimeout(()=>{let index = vDate.dataList.findIndex(((item:any)=>item.questionId == val.relationQuestionId))if(index!=-1){let nextArr = vDate.dataList[index] //当前页项let flag = vDate.answerList[index].questionIdif(flag){let arr = nextArr.optionList.filter((item:any)=>item.questionOptionId == vDate.answerList[index].questionOptionId)if(!arr[0].relationQuestionId){vDate.isAnswer = truevDate.next = 1}}}},500)}
//获取题目
const queryList = ()=>{let params = {questionGroup:1}getQuestionList(params).then((res:any)=>{vDate.dataList = res.datares.data.forEach((item:any)=>{vDate.idList.push(item.questionId)vDate.answerList.push({questionId:'',questionOptionId:''})})vDate.questionId = res.data[0].questionIdvDate.answerLists = JSON.parse(JSON.stringify(vDate.answerList))})  
}
onMounted(()=>{queryList()
})
</script>

看下题目的数据结构