uniapp二维码有效期倒计时三分钟的效果是实现

需求：

会员码时效只有3分钟有效期，需要在页面倒计时3分钟，没有长按保存的效果实现

效果：

代码：

<templete>
<view>
<uni-list>
<view class="custom-list-item" @click="onCode('center')">
				<image class="thumb" src="../../static/imgs/zt.png"></image>
				<text class="title bold" style="font-size: 30rpx; font-weight: 550;">会员二维码</text>
			</view>
</uni-list>
<!--  会员二维码图片-->
		<uni-popup ref="popup" type="center">
			<view class="img-modal">
				   <img :src="'data:image/png;base64,' + UserQRCode" alt="QR Code" />
			</view>
			<view style="display: flex; justify-content: center; align-items: center;">
			 <text style="font-size: 40rpx; ">会员码有效时间还剩：{{ countdown }} 秒</text>
			 </view>
		</uni-popup>
</view>
   
</templete>
<script>
export default {
    data() {
     return {
       UserQRCode: null, // 初始值可以是 null 或者一个空字符串，取决于您的需求
       countdown: 180, // 初始倒计时时间（180秒）
	   countdownTimer: null, // 用于存储计时器
    }
  }  
	methods: {
			// 店铺二维码
			onCode(type) {
				// 会员二维码
				this.ajax.get(this.jk.getUserQRCode).then(res => {
					this.UserQRCode = res.data;
					console.log("222222222222222222222222222222222222222");
					console.log(this.UserQRCode);
				})
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				this.startCountdown();
			},
            startCountdown() {
				// 清除可能存在的旧计时器
				this.clearCountdownTimer();

				this.countdown = 180; // 重置倒计时
				this.countdownTimer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.closePopup(); // 倒计时结束，关闭弹窗
					}
				}, 1000);
			},
			closePopup() {
				this.clearCountdownTimer();
				this.$refs.popup.close(); // 关闭弹窗
			},
			clearCountdownTimer() {
				if (this.countdownTimer) {
					clearInterval(this.countdownTimer);
					this.countdownTimer = null;
				}
			},         
     }
}
</script>
<style>
  // 会员二维码
	.img-modal {
	    background-color: #FFFFFF;
	    padding: 20rpx;
	    border-radius: 10rpx;
	    width: 80%;
		height: 70%;
	    margin: 0 auto;
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.img {
	    max-width: 100rpx; /* 控制图片的最大宽度 */
	    max-height: 100rpx; /* 控制图片的最大高度 */
	    width: auto; /* 保持图片原始宽高比 */
	    height: auto; /* 保持图片原始宽高比 */
	}
</style>

这段代码实现了一个倒计时功能，主要用于管理一个弹窗显示的二维码的有效时间。下面是关于这个倒计时功能的工作原理的详细解释：

数据定义

1. UserQRCode: 用于存储会员二维码的数据。这里可能是一个 Base64 编码的字符串，用于在页面上显示二维码图片。

2. countdown: 表示倒计时的剩余时间，以秒为单位。在这个例子中，它初始设置为 180 秒。

3. countdownTimer: 用于存储计时器（setInterval 返回的标识符）。这个计时器用来每秒更新倒计时的剩余时间。

方法定义

1. onCode: 当用户点击某个按钮或触发某个事件时调用此方法。它首先从后端获取二维码数据并更新 UserQRCode，然后打开一个弹窗（uni-popup），并且启动倒计时。

2. startCountdown: 此方法设置一个计时器，每秒减少 countdown 的值，直到它变为 0。每当计时器触发时，countdown 减 1，表示倒计时减少了一秒。当 countdown 达到 0 时，调用 closePopup 方法关闭弹窗。

3. closePopup: 此方法用于关闭弹窗并清除计时器，以防止计时器继续运行。

4. clearCountdownTimer: 清除当前运行的倒计时计时器。这是为了确保不会有多个计时器同时运行，这可能会导致倒计时行为不正确。

样式定义

• .img-modal: 定义了弹窗中图片的样式，包括背景颜色、内边距、边框半径等。
• .img: 控制图片的大小和保持它的原始宽高比。

工作流程

1. 用户触发 onCode 方法，通常是通过点击一个元素。

2. onCode 方法获取二维码数据，并通过 $refs.popup.open(type) 打开弹窗。

3. 同时，startCountdown 方法被调用，开始倒计时。

4. 每秒倒计时减少，直到倒计时结束，自动关闭弹窗。

5. 如果用户在倒计时结束前关闭弹窗，计时器也会被清除，防止不必要的资源占用。

这个倒计时功能对于管理限时显示的内容（如二维码）非常有用，确保内容只在特定时间内可见，并自动处理超时情况。