metaverse2024vue/src/views/homeComponents/login.vue

<template>
  <div class="login">
    <!-- 登录表单 -->
    <el-form class="form" :rules="loginRules" ref="formLogin" :model="formLogin" label-width="0">
      <el-form-item label="" prop="mobile">
        <el-input v-model="formLogin.mobile" placeholder="手机号">
          <template slot="prepend">+86</template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="code">
        <el-input v-model="formLogin.code" placeholder="验证码">
          <template slot="append">
            <el-button :disabled="codeTime > -1" @click="getCode" style="width: 112px;">
              {{ codeTime > -1 ? `${codeTime}s` : '获取验证码' }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="" prop="password">
        <el-input v-model="formLogin.password" placeholder="密码" show-password></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="">
        <span class="textButton">忘记密码</span>
      </el-form-item> -->
      <el-form-item label="">
        <button
          class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
          style="background-color: var(--bg-color1);"
          @click.prevent="clickLogin"
        >
          登录
        </button>
      </el-form-item>
      <el-form-item label="" prop="checked">
        <el-checkbox class="checkbox" v-model="checked"></el-checkbox>
        勾选即代表您已同意<span class="text-blue-500">《用户协议》</span>和<span class="text-blue-500">《隐私政策》</span>
      </el-form-item>
      <!-- <el-form-item label="">
        <span style="font-size: 1rem;">
          还没有账号吗？
          <span class="textButton" @click="popupType = 'register'">注册</span>
        </span>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { getSendVerificationCode, phoneLogin } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  data() {
    return {
      codeTime: -1,
      codeInterval: null,
      checked: true,
      formLogin: {
        account: null,
        password: null,
      },
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          // { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    showPopup() {
      return this.$store.state.app.showPopup
    }
  },
  watch: {
    showPopup(value) {
      if (value) {
        this.$nextTick(() =>{
            this.$refs.formLogin.resetFields()
        })
      }
    }
  },
  mounted() {
  },
  methods: {
    getCode() {
      this.codeTime = 60
      this.codeInterval = setInterval(() => {
        this.codeTime = this.codeTime - 1
        if (this.codeTime < 0) {
          clearInterval(this.codeInterval)
        }
      }, 1000)
      let params = {
        mobile: this.formLogin.mobile
      }
      getSendVerificationCode(params).then(res =>{
        if (res.code === 200) {
          this.$message({
            message: '验证码发送成功',
            type: 'success'
          });
        } else {
          clearInterval(this.codeInterval)
          this.codeTime = -1
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
      .catch((err) => {
        clearInterval(this.codeInterval)
        this.codeTime = -1
        this.$message({
          message: res.msg,
          type: 'error'
        });
      })
    },
    clickLogin() {
      this.$refs.formLogin.validate((valid) => {
        if (valid) {
          if (!this.checked) {
            this.$confirm('请阅读并接受用户协议和隐私政策', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {})
            return
          }
          phoneLogin(this.formLogin).then((res) => {
            console.log(res, '手机登录成功');
            setToken(res.data.userToken)
            this.$store.commit('SET_TOKEN', res.data.userToken)
            this.$store.commit('SET_USERID', res.data.id)
            console.log(this.$store.state.user.userId, 'userId>>>>');
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            this.$store.commit('app/TOGGLE_POPUP', false)
            this.$router.push({ path: '/' })
            this.$store.dispatch("GetInfo")
          })
          // this.$store.dispatch('Login', this.formLogin).then(() => {
          //   this.$message({
          //     message: '登录成功',
          //     type: 'success'
          //   });
          //   this.showPopup = false
          // })
        }
      })
    },
  }
}
</script>

<style scoped>
  .textButton {
    font-size: 1rem;
    color: var(--bg-color1);
    cursor: pointer;
  }
  .formButton {
    letter-spacing: 4px;
  }
  .form >>> .el-input__inner {
    font-size: 1rem;
    padding: 5px 15px;
    height: 40px;
  }
</style>