uni-app倒計時 請仔細閱讀許可協議

setTimeout函數實機測試無效

在uni-app中setTimeout的函數寫法與原生JS中的寫法略有不同,使用原生的寫法不會報錯,但該寫法會不起作用
官方文檔

       			<!-- 點擊閱讀條款 -->
				<view class="c9 textcertent" style="border: 1px solid red;">
					<!-- 複選框 -->
					<checkbox @tap="checked" :data-index="index" :checked="files[index].checked"></checkbox>
					確認發佈表示同意
					<text @tap="closecan" style="color:#00C6FF">《用戶協議條款》</text>
				</view>
				
				<!-- 閱讀條款遮罩 -->
				<view @touchmove.prevent class="zhezhao" v-show="isZheZhao">
					<scroll-view scroll-y class="content">
						<view class="title">協議</view>
						<view class="con">
							通過本平臺服務平臺,您可以按照本平臺的規則發佈各種生活信息。
							但所發佈的信息不得含有以下內容。。。。。
						</view>		
							<button class="disabledQueDing" v-if="timeout!==0" :disabled="queDingFn">
								({{timeout}})請仔細閱讀《用戶 <text style="color: red;font-weight: bold;">協議</text> 條款》
							</button>
							<button v-else class="queDing" @tap="queDing">確定</button>
					</scroll-view>
					</view>


	

					//數據
					data() {
						return {
							timeout:10,
							queDingFn:true,
							//遮罩
							isZheZhao:false,
						}
					}

				//方法
				methods: {
						/* 閱讀協議的複選框 */
						checked(e){
							console.log(e)
						},
						/* 點擊發布協議 按鈕 */
						 closecan() {
							var that=this;
							this.isZheZhao=true;
							function init(){
								that.queDingFn=true;
								that.timeout=10;
							}				
							
							var t=setInterval(function(){
								that.timeout--;
								if(that.timeout<=0){
									that.queDingFn=false;
									clearInterval(t);
									return false;
								}					
							},1000);
							
							init();
							
						},
						 
						 /* 發佈協議 裏的確定*/
						 queDing(){
							 this.isZheZhao=false;
						 },
				}	 


			//樣式

		/* 遮罩 */
				.zhezhao{
					background-color: rgba(0, 0, 0, 0.5);
					width:100vw;
					height:100vh;
					position: fixed;
					left: 0;
					top: 0;
					z-index: 999;
					.content{
						background-color: #fff;
						width:700upx;
						height:1000upx;
						position: absolute;
						margin: auto;
						left: 0;top: 0;
						right: 0;bottom: 0;	
						box-sizing: border-box;
						padding: 50upx 40upx;
						color: #333;
						border-radius: 10upx;
						/* 標題 */
						.title{
							font-size: 38upx;
							font-weight: bold;
							text-align: center;
							margin-bottom: 25upx;
						}
						/* 條款內容 */
						.con{
							font-size: 30upx;
							text-align: justify;
						}
						/* 禁用按鈕 */
						.disabledQueDing{
							display:block;
						    border: 1px solid rgba(37, 184, 178, 1); 
							color: #333;
							margin: 50upx auto;
							border-radius: 5upx;
							width: 500upx;
							height: 60upx;
							line-height: 60upx;
							text-align: center;
							font-size: 28upx;
						}
						
						/* 確定按鈕 */
						.queDing{
							display:block;
							width: 150upx;
							height: 60upx;
							text-align: center;
							line-height: 60upx;
							margin: 50upx auto;
							background: rgba(37, 184, 178, 1);
							border-radius: 5upx;
							color: #fff;
							font-size: 28upx;
						}
					}
				}

	
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章