解决wepy中setInterval调用函数的this指向问题，一般用于秒杀倒计时、短信验证码

最新推荐文章于 2022-02-21 10:10:24 发布

汪小君

最新推荐文章于 2022-02-21 10:10:24 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏： wepy 文章标签： bind wepy setInterval

本文链接：https://blog.youkuaiyun.com/Function_JX_/article/details/105438984

wepy 专栏收录该内容

4 篇文章

订阅专栏

核心知识点是bind
MDN-Function.prototype.bind()
啥也不说，上代码开饭

<style lang="scss">
  
</style>
<template>
  <div class="wrap">
    <err-msg :errs="formCheckResult"></err-msg>
    <image class="img" mode="widthFix" src="/static/copyright.png"></image>

    <div class="form">
      <form @submit="formSubmit" @reset="formReset">
        <view class="form-item uni-column">
          <input @input="inputPhone" class="fun-input" name="input" placeholder="请输入手机号码" />
        </view>
        <view class="form-item uni-column">
          <input @input="inputCaptcha" class="fun-input" name="captcha" placeholder="请输入短信验证码" />
          <div class="sendCaptcha" >
            <span class="text" @click="sendCaptcha" v-if="!captchaSend">获取验证码</span><span class="text active" v-else>{{s}}s</span>
          </div>
        </view>
        <view class="form-item action">
          <button form-type="submit" class="sub-btn m-b-15" type="primary" >立即登录</button>
          <div><button @click="cancel" class="sub-btn m-b-15" >暂不登录</button></div>
          <div class="fz-12">登录及表示您已阅读并接受<span class="color-primary">《用户服务协议》</span></div>
        </view>
      </form>
    </div>

    <popup-layer ref="pwd" :autoClose="false">
      <div class="form pwd-wrap">
        <view class="form-item uni-column">
          <input v-model="pwd" class="fun-input" placeholder="请输入不少于6位的密码" />
        </view>
        <view class="form-item uni-column">
          <input v-model="pwdConfirm" class="fun-input" placeholder="请确认密码" />
        </view>
        <view class="form-item action">
          <button @click="setPwd" class="sub-btn m-b-15" type="primary" >设置密码</button>
          <button @click="cancelPwd" class="sub-btn m-b-15" >暂不设置</button>
        </view>
      </div>
    </popup-layer>


  </div>
</template>
<script>
  import wepy from '@wepy/core'
  import store from '../../store'
  import pageMixin from '../../mixins'
  import {
    ls, emptyObject, validateFun
  } from '../../common/helper'
  import { error, toast } from '../../common/fun'
  import {
    bizRegSms, opBizInfo
  } from '../../api/store'
  import {
    bizLogin
  } from '../../api/system'
  import {
    regPhone
  } from '../../common/regs'

  import Schema from 'validate'

  wepy.page({
    store,
    mixins: [pageMixin],
    data: {
      setintervalInstance: null,
      phone: '',
      captcha: '',
      s: 60,
      formCheckResult: false,
      smsid: null,
      pwd: '',
      pwdConfirm: '',
      captchaSend: false
    },
    methods: {
      cancel() {
        wx.navigateBack()
      },
      formReset() {

      },
      minusFn() {
        console.log(this)
        if (this.s > 1) {
          this.s--
          return
        }
        clearInterval(this.setintervalInstance)
        this.captchaSend = false
      },
      sendCaptcha() {

        if (!this.phone) {
          error('发送验证码失败')
          return
        }

        bizRegSms({mobile: this.phone}).then(res => {
          this.captchaSend = true
          this.s = 60
          this.setintervalInstance = setInterval(this.minusFn, 1000)
        }).catch(() => {})
      },
      inputCaptcha(e) {
        this.captcha = e.$wx.detail.value
      },
      inputPhone(e) {
        this.phone = e.$wx.detail.value
      },
      cancelPwd() {
        this.$refs.pwd.close()
        wx.navigateBack()
      },
    },
    onReady() {

    },
    onLoad() {

    }
  })
</script>
<config>
  {
    "navigationBarTitleText": "登录页面",
    "navigationBarTextStyle": "black",
    "usingComponents": {
      "icon": "~@/components/icon",
      "err-msg": "~@/components/err-msg",
      "popup-layer": "~@/components/popup-layer"
    }
  }
</config>