uni-app倒计时请仔细阅读许可协议

小咪咪 2023-02-15 01:27 5阅读 0赞

## setTimeout函数实机测试无效 ##

**在uni-app中setTimeout的函数写法与原生JS中的写法略有不同，使用原生的写法不会报错，但该写法会不起作用**  
[官方文档][Link 1]

<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;
    						}
    					}
    				}

[Link 1]: https://uniapp.dcloud.io/api/timer?id=settimeout