- export default {
- name: 'question',
- data () {
- return {
- state: {
- dataUrl: this.$store.state.ownSet.dataUrl,
- progress: this.$store.state.init.ActiveProgressEnum,
- ExamInfo: this.$store.state.init.ExamInfo,
- PersonID: this.$store.state.init.PersonID,
- TeamID: this.$store.state.init.TeamID,
- },
- unclickable: true, // 判断是否已选择答案, 不选择不能下一题, 并置灰按钮
- showLayer: false, // 是否显示弹层
- layerItem: {
- isQuestion: false,
- isSubmit: false, // 是否是最后一道题时触发 "下一题" 按钮, 点击了提交
- isSuccess: false,
- isLoading: false
- },
- chooseNum: null,
- isFocus: false,
- isLast: false,
- isClicked: false// 是否已经点击下一题, 防止二次提交
- }
- },
- created(){
- // 点击开始答题, 新页面应该定位到顶头题干位置
- document.body.scrollTop = 0;
- if(this.state.progress> 100107 && this.state.progress !== 100112){
- alert('您已答题完毕!');
- }
- if(this.state.ExamInfo.QuestionID == 15){// 答到 14 题退出的情况
- // 判断切换下一题和提交按钮
- this.isLast = true;
- }
- },
- methods: {
- choosed(index){
- this.chooseNumStr = '';// 初始化
- // 单选 or 多选
- if(this.state.ExamInfo.IsMulti){
- // 多选
- if(this.$refs.liId[index].className.length <= 0){
- // 添加类
- this.$refs.liId[index].className = 'li-focus';
- }else{
- // 选中再取消
- this.$refs.liId[index].className = '';
- }
- // 获取选中结果
- for (let i = 0; i <this.$refs.liId.length; i++) {
- if(this.$refs.liId[i].className.length> 0){
- this.chooseNumStr += this.$refs.liId[i].innerText.substring(0,1);
- }
- }
- // 置灰提交按钮与否
- if(this.chooseNumStr.length> 0){
- this.unclickable = false;
- }else{
- // 没有选东西, 就置灰按钮
- this.unclickable = true;
- // 注意, 再添加按钮的不可点击状态
- }
- }else{
- // 单选
- this.unclickable = false;
- this.chooseNum = index;
- // 索引 0-3 对应答案 A-B
- // 注意, 这里看看最多的选项是多少个, 进行下配置, 当前只是配置到了 F
- switch(index){
- case 0: this.chooseNumStr = 'A';
- break;
- case 1: this.chooseNumStr = 'B';
- break;
- case 2: this.chooseNumStr = 'C';
- break;
- case 3: this.chooseNumStr = 'D';
- break;
- case 4: this.chooseNumStr = 'E';
- break;
- case 5: this.chooseNumStr = 'F';
- break;
- }
- }
- },
- nextItem(){// 下一题
- if(this.state.progress> 100107 && this.state.progress != 100112){
- alert('您已答题完毕! 不能重复答题.');
- }else{
- if(!this.isClicked){
- // 按钮可以点击 - 如果提交过一次, 不能二次提交, 如果提交失败, 可以二次提交
- if(this.unclickable){
- alert('您还没有选择答案哦!');
- }else{
- this.isClicked = true; // 还没提交过, 可以提交
- let postData = `Type=2&PersonID=${this.state.PersonID}&QuestionID=${this.state.ExamInfo.QuestionID}&Result=${this.chooseNumStr}`;//2 为下一题
- if(this.state.TeamID> 0){
- postData+= `&TeamID=${this.state.TeamID}`;
- }
- this.ajaxFun(postData,false)
- .then((response)=>{
- // console.log(this.state.ExamInfo.ExamQuestionNo)
- })
- .catch((err)=>{
- this.isClicked = false;
- console.log(err);
- });
- }
- }
- }
- },
- submitItem(){// 提交按钮
- if(!this.isClicked){
- if(this.unclickable){
- alert('您还没有选择答案哦!');
- }else if(this.state.progress> 100107){
- alert('您已答题完毕! 不能重复答题.');
- }else{
- this.showLayer = true;
- this.layerItem.isSubmit = true;
- }
- }
- },
- confirmSubmit(data){// 提交弹层 之 确定
- if(!this.isClicked){
- this.isClicked = true;
- // 发送 ajax
- let postData = `Type=3&PersonID=${this.state.PersonID}&QuestionID=${this.state.ExamInfo.QuestionID}&Result=${this.chooseNumStr}`;//3 为提交
- if(this.state.TeamID> 0){
- postData+= `&TeamID=${this.state.TeamID}`;
- }
- this.ajaxFun(postData,true)
- .then((response)=>{
- // 关闭提交弹层
- })
- .catch((err)=>{
- this.isClicked = false;
- console.log(err);
- });
- }
- },
- changeLayerShow(data){// 提交弹层 之 取消 + 状态重置
- this.showLayer = false;
- this.layerItem.isSubmit = false;
- },
- hideLayer(data){
- this.showLayer = false;
- },
- ajaxFun(postData,submitFun){
- let _this = this;
- return new Promise(function(resolve,reject){
- console.log(postData)
- if(submitFun){
- // 关闭提交弹层
- _this.layerItem.isSubmit = false;
- }
- _this.layerItem.isQuestion = false;
- _this.showLayer = true;
- _this.layerItem.isLoading = true;
- $axios.get(_this.state.dataUrl+'ExamAnswer?'+postData)
- .then((response)=>{
- console.log(response);
- if(response && response.data && response.data.result === 1){
- _this.layerItem.isLoading = false;
- _this.layerItem.isQuestion = true;
- // 判断返回结果
- if(response.data.RetValue.proResult){
- _this.layerItem.isSuccess = true;
- }else{
- _this.layerItem.isSuccess = false;
- }
- resolve(response);
- setTimeout(()=>{
- if(submitFun){
- // 提交
- // resolve(response);
- _this.$store.dispatch('setUser',response.data.RetValue);
- _this.$router.replace('redpacket');
- }else{
- // 下一题
- if(_this.state.ExamInfo.QuestionID == 14){ //ExamQuestionNo
- // 判断切换下一题和提交按钮
- _this.isLast = true;
- }
- // 下一题重新赋值
- _this.state.ExamInfo = response.data.RetValue;
- // 点击下一题, 新页面应该定位到顶头题干位置
- document.body.scrollTop = 0;
- // 样式清空
- for (let i = 0; i <_this.$refs.liId.length; i++) {
- _this.$refs.liId[i].className = '';
- }
- }
- _this.showLayer = false;
- _this.layerItem.isQuestion = false;
- _this.chooseNumStr = '';
- _this.chooseNum = null;
- _this.unclickable = true;
- _this.isClicked = false;
- }, 2000);
- }else{
- _this.showLayer = false;
- _this.layerItem.isQuestion = false;
- _this.isClicked = false;
- reject('数据提交失败, 请刷新重试!')
- }
- })
- .catch((err)=>{
- _this.showLayer = false;
- _this.layerItem.isQuestion = false;
- _this.isClicked = false;
- reject(err)
- });
- });
- }
- }
- }
来源: https://www.cnblogs.com/padding1015/p/9265985.html