解決wepy中setInterval調用函數的this指向問題,一般用於秒殺倒計時、短信驗證碼

核心知識點是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>

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