Mina_B/miniprogram/pages/login/login.ts

// pages/login/login.js
const app = getApp();
const speed = 1000;
const time = 60;
const interval = 50;
let phoneInter: number = 0;
let codeInter: number = 0;
let setInter: number = 0
import { baseurl, captcha } from '../../config'
import { getAuthCodeImpl, phoneLoginImpl } from "../../service/impl/hwUser.impl";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    color: false, // 验证码字体颜色
    code_message: '获取验证码', // 验证码文字
    time, // 时间
    canLogin: false, //是否可以登陆
    phone: '', // 手机
    formatPhone: '',
    code: '', // 验证码
    userAgreement: encodeURIComponent(baseurl + '/uploadfile/userAgreement.html'),
    privacyPolicy: encodeURIComponent(baseurl + '/uploadfile/privacyPolicy.html'),
    isCheck: false, // 是否勾选用户协议
    captcha
  },
  /**
   * 勾选用户协议
   */
  checked() {
    this.setData({
      isCheck: !this.data.isCheck,
      canLogin: Boolean(app.globalData.phone_zz.test(this.data.phone) && this.data.code && !this.data.isCheck),
    })
  },
  // 打开用户协议 和 隐私政策
  openWebView(e: any) {
    wx.navigateTo({
      url: '/pages/web-view/web-view?url=' + e.currentTarget.dataset.url,
    })
  },
  /**
   * 
   * 时间倒计时
   */
  countDown(options: any) {
    const _time = --this.data.time;
    this.setData({
      code_message: `已发送(${_time}s)`,
      color: true,
      time: _time
    })
    setInter = setInterval(_ => {
      let _time = this.data.time;
      _time--;
      if (_time > 0) {
        this.setData({
          code_message: `已发送(${_time}s)`,
          color: true,
          time: _time
        })
      } else {
        clearInterval(setInter);
        this.setData({
          code_message: `重新发送`,
          color: false,
          time
        });
      }
    }, speed)
    getAuthCodeImpl({ phone: this.data.phone, ...options }).then(res => {
      if (res.errCode === 0) {
        wx.showToast({
          icon: 'none',
          title: '发送成功',
        })
      }
    }).catch(() => {
      clearInterval(setInter);
      wx.showModal({
        title: '提示',
        content: '发送失败，请稍后重试',
        showCancel: false,
        success: () => {
          this.setData({
            code_message: `重新发送`,
            color: false,
            time
          })
        }
      })
    })
  },
  /**
   * 获取验证码
   * @phone 电话号码
   */
  getCode() {
    if (this.data.time === time) {
      if (app.globalData.phone_zz.test(this.data.phone)) {
        // wx.navigateToMiniProgram({
        // 	appId: 'wx5a3a7366fd07e119',
        // 	path: '/pages/captcha/index',
        // 	extraData: {
        // 		appId: captcha//您申请的验证码的 appId
        // 	}
        // })
        this.selectComponent('#captcha').show()
      } else {
        wx.showToast({
          icon: 'none',
          title: this.data.phone ? '手机号码格式错误！' : '请填写手机号码！',
        })
      }
    }
  },
  /**
   * 检查是否可以登陆
   * @canLogin 是否可以登陆
   * @phone  电话号码
   */
  checkPhone(e: any) {
    const value: string = e.detail.value;
    const phone = value.replace(/\s/g, '');
    clearTimeout(phoneInter);
    phoneInter = setTimeout(_ => {
      let formatPhone: string
      if (phone.length === 11) {
        formatPhone = phone.replace(/^(.{3})(.*)(.{4})/, '$1 $2 $3');
        this.setData({
          formatPhone
        })
      }
      this.setData({
        canLogin: Boolean(app.globalData.phone_zz.test(value) && this.data.code && this.data.isCheck),
        phone: phone,
      })
    }, interval)
  },
  /**
   * 检查验证码是否可以登陆
   * @canLogin 是否可以登陆
   * @code  验证码
   */
  checkCode(e: any) {
    const value = e.detail.value;
    clearTimeout(codeInter);
    codeInter = setTimeout(_ => {
      this.setData({
        canLogin: Boolean(app.globalData.phone_zz.test(this.data.phone) && value && this.data.isCheck),
        code: value
      })
    }, interval)
  },
  /**
   * 点击登录
   * @phone {number} 电话号码
   * @code {string} 验证码
   * @register_from {注册来源} 0 小程序 1 APP 2 后台
   */
  submit() {
    // 首先判断是否可以登陆
    const status = this.data.canLogin;
    if (status) {
      phoneLoginImpl({
        phone: this.data.phone,
        code: this.data.code,
        register_from: 0
      }).then(res => {
        if (res.errCode === 0) {
          // 请求成功 存入userID和userToken 并根据来源跳转不同的页面  后台账号跳转首页
          wx.setStorage({
            key: 'userId',
            data: res.data.userInfo.id,
            success: () => {
              wx.setStorage({
                key: 'userToken',
                data: res.data.userInfo.userToken,
                success: () => {
                  wx.setStorageSync('userInfo', res.data.userInfo)
                  wx.setStorageSync('firstLogin', true)
                  if (!wx.getStorageInfoSync().keys.length) {
                    wx.setStorageSync('hasClear', true)
                  }
                  // 提交是否登录信息
                  if (res.data.userInfo.isDemonstrate) {
                    wx.reLaunch({
                      url: '/pages/index/index'
                    })
                  } else {
                    wx.reLaunch({
                      url: '/pages/my-order/my-order'
                    })
                  }
                }
              })
            }
          })
        }
      })
    } else {
      let content = ''
      if (!this.data.isCheck) {
        content = '请勾选用用户协议与隐私政策'
      }
      if (!this.data.code) {
        content = '请填写验证码'
      }
      if (!this.data.phone || !app.globalData.phone_zz.test(this.data.phone)) {
        content = '电话号码格式错误'
      }
      wx.showModal({
        title: '登录失败',
        content,
        showCancel: false,
        confirmColor: '#31364C',
      })
    }
  },
  // 验证码验证结果回调
  handlerVerify: function (ev: any) {
    // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
    if (ev.detail.ret === 0) {
      // 验证成功
      console.log('randstr:', ev.detail.randstr)
      console.log('ticket:', ev.detail.ticket)
      this.countDown({ ticket: ev.detail.ticket, randstr: ev.detail.randstr })
    } else {
      // 验证失败
      // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
    }
  },
  // 验证码准备就绪
  handlerReady: function () {
    console.log('验证码准备就绪')
  },
  // 验证码弹框准备关闭
  handlerClose: function (ev: any) {
    // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
    if (ev && ev.detail.ret && ev.detail.ret === 2) {
      console.log('点击了关闭按钮，验证码弹框准备关闭');
    } else {
      console.log('验证完成，验证码弹框准备关闭');
    }
  },
  // 验证码出错
  handlerError: function (ev: any) {
    console.log(ev.detail.errMsg)
    wx.showModal({
      title: '提示',
      content: ev.detail.errMsg,
      showCancel: false
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.options = options;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.hideHomeButton();
    // const captchaResult = app.globalData.captchaResult;
    // console.log(captchaResult);
    // if (captchaResult && captchaResult.ret === 0) {
    // 	// 将验证码的结果返回至服务端校验
    // 	const ticket = captchaResult.ticket;
    // 	const randstr = captchaResult.randstr;

    // 	app.globalData.captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
    // }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  }
})