答题倒计时

src/views/mobile/activityApply/answerCmpt.vue

@@ -7,6 +7,9 @@
             </div>
         </div>
         <div class="changeWrap">
+            <div>
+                <span>答题倒计时：{{count}}s</span>
+            </div>
             <div @click="handleChange">
                 <i class="iconfont icon-zhongbo-m"></i>
                 <span>{{$t("activityInfo.changeReturn")}}</span>
@@ -50,7 +53,9 @@
                     questionList:[]
                 },
                 itemArr:null,
-                flag:0
+                flag:0,
+                timer:null,
+                count:'',
             }
         },
         methods: {
@@ -64,6 +69,9 @@
                 this.$forceUpdate();
                 this.getInitTopicListData();
                 this.submitData.questionList = [];
+                clearInterval(this.timer);
+                this.timer = null;
+                this.timeoutFunc();
 
             },
 
@@ -178,6 +186,7 @@
                             }
                         })
                         this.tableData = res.result;
+                        this.timeoutFunc();
                     }else{
                         this.$toast(res.msg);
                     }
@@ -193,6 +202,7 @@
                 this.submitData.questionList = this.itemArr;
                 if(this.flag==0){
                     this.flag++;
+                    this.clearTimeout();
                     this.$emit("postFlagVal",this.submitData);
                     setTimeout(function(){
                         that.flag = 0;
@@ -205,13 +215,36 @@
 
                     },1000);
                 }
+            },
+
+            //倒计时
+            timeoutFunc(){
+                const TIME_COUNT = 45;
+                if (!this.timer) {
+                    this.count = TIME_COUNT;
+                    this.timer = setInterval(() => {
+                        if (this.count > 0 && this.count <= TIME_COUNT) {
+                            this.count--;
+                        } else {
+                            clearInterval(this.timer);
+                            this.timer = null;
+                            this.$emit("postFlagVal",this.submitData,1);
+
+                        }
+                    }, 1000)
+                }
+            },
+
+            clearTimeout(){
+                clearInterval(this.timer);
+                this.timer = null;
             }
 
         },
 
         mounted() {
             if(this.$route.query.flag==1) this.getInitTopicListData();
-        }
+        },
     }
 </script>
 
@@ -248,7 +281,7 @@
 
     .changeWrap {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         color: #fff;
         align-items: center;
         margin-bottom: .3rem;

src/views/mobile/activityApply/redEnvelopeDetail.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="detailWrapper">
-                <answerCmpt :id="$route.query.id" v-if="$route.query.flag==1" :detailInfo="detailInfo.baseChannelLucky" @postFlagVal="getUserAnswerFunc"></answerCmpt>
+                <answerCmpt ref="answerCmpt" :id="$route.query.id" v-if="$route.query.flag==1" :detailInfo="detailInfo.baseChannelLucky" @postFlagVal="getUserAnswerFunc"></answerCmpt>
                 <errorAnswerCmpt :answerInfo="answerInfo" :id="$route.query.id" v-if="$route.query.flag==2" :detailInfo="detailInfo.baseChannelLucky" @postAnswer="postAnswer"></errorAnswerCmpt>
                 <applyRegisterCmpt @postScrollTop="postScrollTop" :answerInfo="answerInfo" :id="$route.query.id" v-if="$route.query.flag==3" :detailInfo="detailInfo.baseChannelLucky" @applySuccess="applySuccess"></applyRegisterCmpt>
                 <hasAfterCmpt :id="$route.query.id" :detailInfo="detailInfo"
@@ -106,7 +106,7 @@
             },
 
             //接受用户答题答案
-            getUserAnswerFunc(data){
+            getUserAnswerFunc(data,flag){
                 data.account = this.accountInfo?this.accountInfo.account:null;
                 api.postAnswerAxios(data).then((res)=>{
                     if(res.code==0){
@@ -116,8 +116,21 @@
                             this.$router.replace({path:"/redEnvelopeActJoin",query:{id:this.$route.query.id,flag:3,state:res.result.redPacketMoney}})
                             globalMsg.$emit("postFlagIsReturn",false);
                         }else{
-                            this.$router.replace({path:"/redEnvelopeActJoin",query:{id:this.$route.query.id,flag:2,state:this.answerInfo.userHasCount}})
-                            globalMsg.$emit("postFlagIsReturn",true);
+                            if(flag&&this.detailInfo.baseChannelLucky.questionLimit - this.answerInfo.userHasCount>0){
+                                MessageBox({
+                                    title:"",
+                                    message:this.lang==1?"您答题超时，失去一次机会，你还有"+(this.detailInfo.baseChannelLucky.questionLimit - this.answerInfo.userHasCount)+"次机会。":"Time is up, you still have "+(this.detailInfo.baseChannelLucky.questionLimit - this.answerInfo.userHasCount)+" a chance to continue to answer.",
+                                    confirmButtonText:this.lang==1?"重新答题":"Re-answer"
+                                }).then(action=>{
+                                    if(action=='confirm') {
+                                        this.$router.replace({path:"/redEnvelopeActJoin",query:{id:this.$route.query.id,flag:1}})
+                                        this.$refs.answerCmpt.handleChange();
+                                    }
+                                })
+                            }else{
+                                this.$router.replace({path:"/redEnvelopeActJoin",query:{id:this.$route.query.id,flag:2,state:this.answerInfo.userHasCount}})
+                                globalMsg.$emit("postFlagIsReturn",true);
+                            }
 
                         }
                     }else{