验证码业务综合记录

一 、验证码倒计时：

1. 每个会员独立计算获取验证码后的60s倒计时间隔；

1.1 业务需求

业务需求：

1. 获取验证码后，获取按钮置灰；
2. 每个会员获取验证码的间隔为60s；
3. 进入倒计时的当前会员不影响其他会员的获取操作 【获取按钮正常】；
4. 整个项目中同一会员的倒计时统一；跳页不影响此会员倒计时数值；

1.2 主要实现部分

vue仓库：action

// state.inTimeMembers 记录每个会员倒计时数据的数组,倒计时开始则推入,倒计时结束则删除;
// state[vipId] 根据会员id临时生成的计时器ID,计时结束清空clearInterval(state[thisVipId]);

STORE_MEMBER_INTERVAL({ state }, vipId) {
            // 判断是否当前会员已经在倒计时中
    let isgoing = state.inTimeMembers.some(element => {
        return element.memberId === vipId
    });
    if (!isgoing) {
        state.inTimeMembers.push({ memberId: vipId, time: 60 })
    }
    // 生成计时器,记录计时器ID state[vipId]，以备清空
    state[vipId] = setInterval(cback, 1000,state, vipId);
    // 定义定时器回调函数；
    function cback(state, thisVipId) {
        // 生成当前计时器的参数thisVipId,当前会员的id
        state.inTimeMembers.forEach(item => {
        	// 找到记录当前会员的数组元素;
            if (item.memberId === thisVipId) {
            // 对记录此会员id的数组元素,时间属性数据进行减1操作[ 一次setInterval减少一个数值]
                item.time = item.time - 1;
                if (item.time < 1) {
                // 倒计时结束,清空计时器;
                    clearInterval(state[thisVipId]);
                    // 删除计时结束的当前数组元素;
                    state.inTimeMembers.some((delitem, index) => {
                        if (delitem.memberId === thisVipId) {
                            state.inTimeMembers.splice(index, 1);
                        }
                    })
                }
            }
        });
    }
}

1.3 页面内调用方法；

this.$store.dispatch("STORE_MEMBER_INTERVAL", this.vipID);