DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/signup.vue

<template>
  <view class="page">
    <view class="content">
      <!-- 标题 -->
      <view class="main-title">欢迎注册力软框架 App 端体验账号！</view>

      <!-- 注册介绍 -->
      <view class="intro">
        <view class="intro-text">注册登录力软账号后，您将可以体验力软框架产品中的所有功能与业务</view>

        <view class="intro-tips">
          <l-icon type="sort" class="margin-right-sm" />
          办公自动化
        </view>
        <view class="intro-tips">
          <l-icon type="shop" class="margin-right-sm" />
          进销存管理
        </view>
        <view class="intro-tips">
          <l-icon type="form" class="margin-right-sm" />
          自定义表单
        </view>
        <view class="intro-tips">
          <l-icon type="squarecheck" class="margin-right-sm" />
          工作流审批
        </view>
        <view class="intro-tips">
          <l-icon type="rank" class="margin-right-sm" />
          数据可视化
        </view>
        <view class="intro-tips">
          <l-icon type="news" class="margin-right-sm" />
          电子公告板
        </view>
      </view>

      <!-- 提醒 -->
      <view class="signup-tips">
        如果您之前已在力软框架 PC 端中注册过体验账号，可以直接使用原账号登录，无需另行注册
      </view>

      <!-- 账户密码表单 （v-if 防钉钉小程序报错） -->
      <l-input v-model="phone" placeholder="手机号码"><l-icon slot="title" type="mobile" /></l-input>
      <l-input v-if="sendCode || !sendOk" v-model="code" placeholder="请输入验证码" focus>
        <l-icon slot="title" type="lock" />
      </l-input>

      <!-- 获取验证码/完成注册的按钮 -->
      <l-button
        v-if="!sendCode"
        @click="getCode"
        :disabled="!sendOk"
        size="lg"
        line="blue"
        class="margin-top block"
        block
      >
        {{ sendOk ? '获取验证码' : `请${waitSec}秒后重发` }}
      </l-button>
      <l-button v-if="sendCode || !sendOk" @click="signUp" size="lg" color="green" class="margin-top block" block>
        完成注册
      </l-button>

      <!-- 重发验证码的小按钮 -->
      <view class="margin-top text-center">
        <l-button v-if="sendCode" @click="getCode" :disabled="!sendOk" line="yellow">
          重新发送验证码 {{ sendOk ? '' : `请${waitSec}秒后重发` }}
        </l-button>
      </view>
    </view>
  </view>
</template>

<script>
import moment from 'moment'

let nextTime = moment().subtract(1, 'second')

export default {
  data() {
    return {
      phone: '',
      code: '',

      sendCode: false,
      sendOk: true,
      timer: null,
      waitSec: 0
    }
  },

  onShow() {
    // 按照当前和本地存储的下次发验证码的间隔时间中的更长的来计算
    const savedNextTime = this.GET_STORAGE('nextTime')
    if (savedNextTime && moment(savedNextTime).isSameOrAfter(nextTime)) {
      nextTime = moment(savedNextTime)
      this.sendCode = true
    }

    // 定时器；间隔时间达到，则允许再次发送验证码；间隔时间不够，则刷新倒计时秒数
    const setTime = () => {
      this.sendOk = moment(nextTime).isSameOrBefore()

      if (!this.sendOk) {
        this.waitSec = moment
          .duration(moment(nextTime).diff())
          .asSeconds()
          .toFixed(0)
      }
    }
    this.timer = setInterval(setTime, 1000)
    setTime()
  },

  onHide() {
    clearInterval(this.timer)
  },

  methods: {
    // 点击获取验证码按钮
    async getCode() {
      if (!this.checkInput() || !this.sendOk) {
        return
      }

      // 发送验证码
      const result = await this.HTTP_GET(
        'https://www.learun.cn/webapi/securitycode',
        { mobileCode: this.phone, sourceUrl: '小程序注册' },
        '验证码发送失败'
      )

      if (!result) {
        return
      }

      this.sendOk = false

      // 设置90秒的发送间隔，存入 Store 本地存储
      const next = moment()
        .add(90, 'seconds')
        .format('YYYY-MM-DD HH:mm:ss')
      this.SET_STORAGE('nextTime', next)
      nextTime = next

      this.TOAST('验证码发送成功')
      this.sendCode = true
    },

    // 点击注册按钮
    async signUp() {
      this.LOADING('登录中…')

      // 根据不同的登录方式，调用 API
      const result = await this.HTTP_POST(
        'learun/adms/user/login',
        { username: this.phone, password: this.MD5(this.code) },
        '登录失败'
      )

      if (!result) {
        return
      }

      // loginUser 中合并 role、post 两个字段
      const { baseinfo, mpinfo, post, role } = result
      const user = { ...baseinfo, post, role }
      const token = baseinfo.token

      // 返回的用户信息中，有 mpinfo 字段表示是否是小程序
      if (mpinfo && Array.isArray(mpinfo) && mpinfo.includes(type)) {
        user.miniProgram = true
      }

      this.SET_GLOBAL('token', token)
      this.SET_GLOBAL('loginUser', user)

      this.SET_STORAGE('token', token)

      this.HIDE_LOADING()
      this.TAB_TO('/pages/home')
    },

    // 验证输入
    checkInput() {
      if (!/^1\d{10}$/.test(this.phone)) {
        this.CONFIRM('手机号码错误', '请输入正确的手机号码，目前支持格式：1开头，共11位，不能包含区号和国家地区代码')
        return false
      }

      return true
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}

/* #ifdef MP-ALIPAY */
.page {
  height: 100%;
  position: absolute;
}
/* #endif */
</style>

<style lang="less" scoped>
.page {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    text-align: center;
    width: 100%;
    padding: 0 38rpx;

    .signup-tips {
      color: #999;
      margin: 20rpx 0 40rpx;
    }

    .main-title {
      display: block;
      margin: 20rpx 0;
      color: #555;
      font-size: 1.4em;
    }

    .intro {
      margin: 20rpx 0;

      .intro-text {
        font-size: 1.1em;
        margin-bottom: 20rpx;
      }

      .intro-tips {
        display: inline-block;
        padding: 20rpx 30rpx;
        border-radius: 4px;
        background-color: #ffffff;
        margin: 10rpx 10rpx;
        border: solid 1px #555;
        box-shadow: #000000 1px 1px;
      }
    }
  }
}
</style>