labsop_mcs/frontend_lims/src/pages/phoneLogin/index.vue

<!--
 * @Author: your name
 * @Date: 2021-02-19 11:59:48
 * @LastEditTime: 2021-03-01 14:00:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \intelligentLock\src\pages\index\index.vue
-->
<template>
  <view class="page">
    <!-- uerInfo -->
    <view class="loginHeader">
      <image :src='loginBg'
             class="imglogin" />
    </view>
    <view class="second">
      <view class="loginBox">
        <AtForm :onSubmit="handleSubmit"
                :onReset="handleReset">
          <view class="loginItem">
            <view class="loginItemImgBox">
              <image :src="phonePng"
                     class="loginItemImg" />
            </view>
            <AtInput required
                     class="inputItem"
                     name="account"
                     type="phone"
                     placeholder="请输入手机号"
                     :value="state.account"
                     :onChange="handleChange.bind(this, 'account')" />
          </view>
          <view class="loginItem">
            <view class="loginItemImgBox">
              <image :src="pwdPng"
                     class="loginItemImg" />
            </view>
            <AtInput name="password"
                     :border="false"
                     type="phone"
                     clear
                     placeholder="请输入验证码"
                     :value="state.password"
                     :onChange="handleChange.bind(this, 'password')">
            </AtInput>
            <view>
              <AtButton type="secondary"
                        size="small"
                        :disabled="state.isDisabled"
                        :onClick="sendCode.bind(this)">
                {{sentTitle}}
              </AtButton>
            </view>
          </view>
          <view class="agree">
            <AtCheckbox :options="[
                  { label: '登录代表您已同意用户协议及隐私条款', value: '1' }
                ]"
                        :selectedList="state.isAgreed"
                        :onChange="handleChange.bind(this, 'isAgreed')" />
          </view>
          <AtButton type="primary"
                    formType="submit"
                    :onClick="handleSubmit">
            登 录
          </AtButton>
          <view class="secondaryBox">
            <AtButton type="secondary"
                      :onClick="goToAccount.bind(this)">
              使用账户密码登录
            </AtButton>
          </view>
        </AtForm>
      </view>
    </view>
    <AtToast :text="state.text"
             :isOpened="state.isOpened"></AtToast>
    <view class="loginFooter">
      <image :src='bgfooter'
             class="bgFooter" />
    </view>
  </view>
</template>

<script>
import './index.scss'
import setStateMixin from '../../mixins/setStateMixin'
import loginBg from "../../assets/images/login/loginBg.png"
import bgfooter from "../../assets/images/login/bgfooter.png"
import phonePng from "../../assets/images/login/phone.png"
import pwdPng from "../../assets/images/login/pwd.png"
import { compressImage } from '@tarojs/taro'
export default {
  name: 'accountLogin',
  mixins: [setStateMixin],
  data () {
    return {
      phonePng,
      pwdPng,
      loginBg,
      bgfooter,
      state: {
        account: '',
        password: '',
        isAgreed: [],
        isDisabled: false,
        second: 10,
        isOpened: false,
        text: ''
      },
      sentTitle: '获取验证码'
    }
  },
  created () { },
  onShow () { },
  onHide () { },
  methods: {
    handleChange (stateName, value) {
      this.setState({
        [stateName]: value,
      })
    },
    // showTipText () {
    //   return this.state.disabled ? `${this.state.second}s后重试` : '发送验证码'
    // },

    // 发送验证码
    sendCode () {
      if (!this.state.isDisabled) {
        this.setState({
          isDisabled: true,
        })
        console.log("ddd==this.state", this.state.isDisabled)
        // 倒计时
        const timer = setInterval(() => {
          console.log("倒计时--")
          if (this.state.second > 0) {
            this.sentTitle = `${this.state.second}s后重试`
            this.setState({
              second: this.state.second - 1,
            })

          } else {
            this.setState({
              second: 60,
              isDisabled: false,
            })
            this.sentTitle = "获取验证码"
            clearInterval(timer)
          }
        }, 1000)
      } else {
        this.sentTitle = "获取验证码"
      }

    },
    handleSubmit () {
      const { account, password, isAgreed } = this.state
      if (!account) {
        this.setState({
          isOpened: true,
          text: `手机号不能为空`,
        })
        this.closeToast()
        return false
      }
      if (!password) {
        this.setState({
          isOpened: true,
          text: `验证码不能为空`,
        })
        this.closeToast()
        return false
      }
      else if (isAgreed.length == 0) {
        this.setState({
          isOpened: true,
          text: "请勾选用户协议"
        })
        this.closeToast()
        return false
      } else {
        this.$taro.switchTab({
          url: '/pages/index/index'
        })
      }

    },

    closeToast () {
      setTimeout(() => {
        this.setState({
          isOpened: false,
        })
      }, 2000)
    },

    handleReset () {
      console.log('handleReset')
      this.setState({
        isOpened: true,
        text: `表单已被重置`,
        account: '',
        password: '',
        isAgreed: [],
      })
      this.closeToast()
    },
    // 使用验证码登录
    goToAccount () {
      this.$taro.navigateTo({
        url: '/pages/accountLogin/index'
      })
    }
  }
}
</script>