YNEduApp/pages/login/login.vue

<template>
	<view class="page">
		<view class="upper-bgd">
      <view class="inner-tit">考试培训</view>
    </view>
    <view class="lower-form">
      <view class="choose-form">
        <text
          v-for="(item, index) in formBox"
          :key="item.id"
          :class="[ 'form-box', { active: formCount === item.id } ]"
          @click="chooseForm(item.id)"
        >
          {{ item.text }}
        </text>
      </view>
      <view
        class="pwd-form"
        v-show="formCount === 0"
      >
        <uni-forms
            :modelValue="pwdForm"
            ref="uPwdForm"
            :rules="pwdRules"
        >
          <uni-forms-item name="username">
            <uni-easyinput type="text" v-model="pwdForm.username" placeholder="请输入用户名" />
          </uni-forms-item>
          <uni-forms-item name="password">
            <uni-easyinput type="password" v-model="pwdForm.password" placeholder="请输入密码" />
          </uni-forms-item>
          <text
              style="width: 100%; font-size: 14px; display: flex; justify-content: right; color: #469FF9;"
          >忘记密码？</text>
          <view
              class="log-btn"
              @click="subPwdForm"
          >
            登录
          </view>
        </uni-forms>
      </view>
      <view
          class="code-form"
          v-show="formCount === 1"
      >
        <uni-forms
            :modelValue="codeForm"
            ref="uCodeForm"
            :rules="codeRules"
        >
          <uni-forms-item name="phone">
            <uni-easyinput placeholder="请输入手机号码" type="number" v-model="codeForm.phone"
                           maxlength="11"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="code">
            <uni-easyinput type="number" maxlength="6" placeholder="请输入验证码"
                           v-model="codeForm.code"></uni-easyinput>
            <button class="count-down" :disabled="sendDisabled" @click="sendVeriCode" style="font-size: 14px;">
              <span v-if="countDownStatus === 0">发送验证码</span>
              <span v-if="countDownStatus === 1">
							{{ countDown }}s
						</span>
            </button>
          </uni-forms-item>
          <view
              class="log-btn"
              @click="subCodeForm"
          >
            登录
          </view>
        </uni-forms>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        formCount: 0,
        formBox: [
          { text: '密码登录', id: 0 },
          { text: '验证码登录', id: 1 }
        ],
        pwdForm: {
          username: '',
          password: ''
        },
        pwdRules: {
          username: {
            rules: [{
              required: true,
              errorMessage: '请输入用户名！',
            }]
          },
          password: {
            rules: [{
              required: true,
              errorMessage: '请输入密码！',
            }]
          },
        },
        codeForm: {
          phone: '',
          code: ''
        },
        codeRules: {
          phone: {
            rules: [{
              required: true,
              errorMessage: '请输入手机号！',
            }]
          },
          code: {
            rules: [{
              required: true,
              errorMessage: '请输入验证码！',
            }]
          },
        },
        sendDisabled: false,
        countDown: 60,
        countDownStatus: 0,
			}
		},
		methods: {
      chooseForm(count) {
        this.formCount = count
      },
      subPwdForm() {
        this.$refs.uPwdForm.validate().then(pwdForm => {
          console.log(pwdForm)
          uni.showToast({
            icon: 'none',
            title: '登录成功！',
            success: () => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }
          })
        })
      },
      subCodeForm() {
        this.$refs.uCodeForm.validate().then(codeForm => {
          console.log(codeForm)
          /*uni.switchTab({
            url: '/pages/index/index'
          })*/
        })
      },
      sendVeriCode() {
        let that = this
        let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if (!phoneReg.test(that.codeForm.phone)) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确格式的手机号！'
          })
        } else {
          /*that.$api.login.codeLogin({
            phone: String(that.veriFormData.phone)
          }).then(res => {
            console.log(res);
          }).catch(err => {
            console.log(err);
          })*/
          that.countDownStatus = 1
          that.sendDisabled = true
          let timeInterval = setInterval(() => {
            that.countDown -= 1
          }, 1000)
          let timeOut = setTimeout(() => {
            that.countDownStatus = 0
            that.countDown = 60
            that.sendDisabled = false
            clearInterval(timeInterval)
            clearTimeout(timeOut)
          }, 1000 * 60)
        }
      },
		},
    /*onReady() {
      // 需要在onReady中设置规则
      this.$refs.uPwdForm.setRules(this.pwdRules)
      this.$refs.uCodeForm.setRules(this.codeRules)
    },*/
	}
</script>

<style lang="scss">

  .page{

    width: 100vw;
    height: 100vh;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;

    .upper-bgd{

      width: 100%;
      height: 30vh;
      background: url("/static/login-bgd.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;

      .inner-tit{

        position: absolute;
        top: 12vh;
        left: 10vw;
        font-size: 36px;
        color: #fff;

      }

    }

    .lower-form{

      flex: 1;
      box-sizing: border-box;
      padding: 15vw;
      display: flex;
      flex-direction: column;

      .choose-form{

        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 3vh;

        .form-box{

          position: relative;

          &.active{

            color: #1989FA;

            &::before{

              content: '';
              box-sizing: border-box;
              width: 20%;
              height: 0;
              position: absolute;
              bottom: 0;
              left: 40%;
              border: 2px solid #1989FA;
              border-radius: 15px;

            }

          }

        }

        text{

          width: 50%;
          box-sizing: border-box;
          font-size: 16px;
          padding: 1vh;
          color: #747474;
          background-color: transparent;
          display: flex;
          justify-content: center;
          align-items: center;

        }

      }

      .pwd-form, .code-form{

        width: 100%;
        height: 30vh;

        .log-btn{

          width: 100%;
          margin-top: 8vh;
          display: flex;
          font-size: 18px;
          justify-content: center;
          align-items: center;
          background-color: #1989FA;
          color: #fff;
          padding: 1.5vh 0;
          border-radius: 30px;

        }

        .uni-forms-item__content[data-v-61dfc0d0] {
          display: flex;
        }

      }

    }

  }

</style>