fix: 还原
							parent
							
								
									5f90ebef25
								
							
						
					
					
						commit
						d62e89b01b
					
				| 
						 | 
					@ -5,29 +5,23 @@
 | 
				
			||||||
      <p class="account">{{ userData.name }}</p>
 | 
					      <p class="account">{{ userData.name }}</p>
 | 
				
			||||||
      <a-form :model="loginForm" ref="loginFormRef" @keyup.enter.prevent="handleLogin" @submit.prevent>
 | 
					      <a-form :model="loginForm" ref="loginFormRef" @keyup.enter.prevent="handleLogin" @submit.prevent>
 | 
				
			||||||
        <a-form-item name="password" :rules="[{ ...required, message: '请输入密码' }]">
 | 
					        <a-form-item name="password" :rules="[{ ...required, message: '请输入密码' }]">
 | 
				
			||||||
          <a-input-password v-model:value="loginForm.password" placeholder="请输入密码"></a-input-password>
 | 
					          <a-input-password v-model:value="loginForm.password" placeholder="请输入密码">
 | 
				
			||||||
        </a-form-item>
 | 
					            <template #addonAfter>
 | 
				
			||||||
        <a-form-item name="verify" :rules="[{ ...required, message: '请输入验证码' }]">
 | 
					              <a-button class="text-white login-btn" @click="handleLogin()" :loading="loading">
 | 
				
			||||||
          <a-input v-model:value="loginForm.verify" placeholder="请输入验证码" style="width: 65%; vertical-align: middle"></a-input>
 | 
					                <template #icon>
 | 
				
			||||||
          <a-button style="height: 32px; width: 33%; margin-left: 2%" @click="getVertify" :loading="verifyLoading" :disabled="isCountingDown">
 | 
					                  <ArrowRightOutlined />
 | 
				
			||||||
            {{ isCountingDown ? `${countdown}s后重新获取` : '获取验证码' }}
 | 
					                </template>
 | 
				
			||||||
              </a-button>
 | 
					              </a-button>
 | 
				
			||||||
 | 
					            </template>
 | 
				
			||||||
 | 
					          </a-input-password>
 | 
				
			||||||
        </a-form-item>
 | 
					        </a-form-item>
 | 
				
			||||||
      </a-form>
 | 
					      </a-form>
 | 
				
			||||||
      <div class="button-group">
 | 
					 | 
				
			||||||
      <a-button class="switch-button" type="text" @click="switchUser()">
 | 
					      <a-button class="switch-button" type="text" @click="switchUser()">
 | 
				
			||||||
        <template #icon>
 | 
					        <template #icon>
 | 
				
			||||||
          <LeftOutlined />
 | 
					          <LeftOutlined />
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
        切换账户
 | 
					        切换账户
 | 
				
			||||||
      </a-button>
 | 
					      </a-button>
 | 
				
			||||||
        <a-button class="login-btn" type="primary" @click="handleLogin()" :loading="loading">
 | 
					 | 
				
			||||||
          <template #icon>
 | 
					 | 
				
			||||||
            <ArrowRightOutlined />
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
          登录
 | 
					 | 
				
			||||||
        </a-button>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
    <div class="date-time">
 | 
					    <div class="date-time">
 | 
				
			||||||
      <div class="time">{{ currentTime.time }}</div>
 | 
					      <div class="time">{{ currentTime.time }}</div>
 | 
				
			||||||
| 
						 | 
					@ -42,7 +36,6 @@ import { encrypt } from 'utils/crypto'
 | 
				
			||||||
import { useStore } from 'vuex'
 | 
					import { useStore } from 'vuex'
 | 
				
			||||||
import { useRouter } from 'vue-router'
 | 
					import { useRouter } from 'vue-router'
 | 
				
			||||||
import { login } from 'services'
 | 
					import { login } from 'services'
 | 
				
			||||||
import { getVertifyCode } from '@/services'
 | 
					 | 
				
			||||||
import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
 | 
					import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
 | 
				
			||||||
import setLoginData from './tools'
 | 
					import setLoginData from './tools'
 | 
				
			||||||
import { required } from '@/validate'
 | 
					import { required } from '@/validate'
 | 
				
			||||||
| 
						 | 
					@ -53,42 +46,13 @@ export default defineComponent({
 | 
				
			||||||
  setup() {
 | 
					  setup() {
 | 
				
			||||||
    const state = reactive({
 | 
					    const state = reactive({
 | 
				
			||||||
      loginForm: {
 | 
					      loginForm: {
 | 
				
			||||||
        password: '',
 | 
					        password: ''
 | 
				
			||||||
        verify: ''
 | 
					 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      loading: false,
 | 
					      loading: false
 | 
				
			||||||
      verifyLoading: false,
 | 
					 | 
				
			||||||
      countdown: 0,
 | 
					 | 
				
			||||||
      isCountingDown: false
 | 
					 | 
				
			||||||
    })
 | 
					    })
 | 
				
			||||||
    let timer: any = 0
 | 
					    let timer: any = 0
 | 
				
			||||||
    let countdownTimer: any = null
 | 
					 | 
				
			||||||
    const store = useStore()
 | 
					    const store = useStore()
 | 
				
			||||||
    const userData = computed(() => store.getters.userData || {})
 | 
					    const userData = computed(() => store.getters.userData || {})
 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 开始倒计时
 | 
					 | 
				
			||||||
    const startCountdown = () => {
 | 
					 | 
				
			||||||
      state.countdown = 60
 | 
					 | 
				
			||||||
      state.isCountingDown = true
 | 
					 | 
				
			||||||
      countdownTimer = setInterval(() => {
 | 
					 | 
				
			||||||
        state.countdown--
 | 
					 | 
				
			||||||
        if (state.countdown <= 0) {
 | 
					 | 
				
			||||||
          clearInterval(countdownTimer)
 | 
					 | 
				
			||||||
          state.isCountingDown = false
 | 
					 | 
				
			||||||
          state.countdown = 0
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }, 1000)
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 重置倒计时
 | 
					 | 
				
			||||||
    const resetCountdown = () => {
 | 
					 | 
				
			||||||
      if (countdownTimer) {
 | 
					 | 
				
			||||||
        clearInterval(countdownTimer)
 | 
					 | 
				
			||||||
        countdownTimer = null
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      state.isCountingDown = false
 | 
					 | 
				
			||||||
      state.countdown = 0
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    // 当前时间设置
 | 
					    // 当前时间设置
 | 
				
			||||||
    const currentTime = ref({
 | 
					    const currentTime = ref({
 | 
				
			||||||
      time: '',
 | 
					      time: '',
 | 
				
			||||||
| 
						 | 
					@ -130,26 +94,6 @@ export default defineComponent({
 | 
				
			||||||
    function switchUser() {
 | 
					    function switchUser() {
 | 
				
			||||||
      store.dispatch('permission/ResetRoutes')
 | 
					      store.dispatch('permission/ResetRoutes')
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 获取验证码
 | 
					 | 
				
			||||||
    const getVertify = () => {
 | 
					 | 
				
			||||||
      if (state.isCountingDown) return // 如果正在倒计时,不允许重复点击
 | 
					 | 
				
			||||||
      if (!userData.value.account) {
 | 
					 | 
				
			||||||
        return // 如果没有用户账号,直接返回
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      state.verifyLoading = true
 | 
					 | 
				
			||||||
      getVertifyCode({ account: userData.value.account })
 | 
					 | 
				
			||||||
        .then((res) => {
 | 
					 | 
				
			||||||
          if (res.success) {
 | 
					 | 
				
			||||||
            state.verifyLoading = false
 | 
					 | 
				
			||||||
            startCountdown() // 开始倒计时
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .finally(() => {
 | 
					 | 
				
			||||||
          state.verifyLoading = false
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    const loginFormRef = ref()
 | 
					    const loginFormRef = ref()
 | 
				
			||||||
    const router = useRouter()
 | 
					    const router = useRouter()
 | 
				
			||||||
    async function handleLogin() {
 | 
					    async function handleLogin() {
 | 
				
			||||||
| 
						 | 
					@ -159,8 +103,7 @@ export default defineComponent({
 | 
				
			||||||
        const res = await login({
 | 
					        const res = await login({
 | 
				
			||||||
          account: userData.value.account,
 | 
					          account: userData.value.account,
 | 
				
			||||||
          password: encrypt(values.password),
 | 
					          password: encrypt(values.password),
 | 
				
			||||||
          isManager: true,
 | 
					          isManager: true
 | 
				
			||||||
          code: values.verify
 | 
					 | 
				
			||||||
        })
 | 
					        })
 | 
				
			||||||
        if (res.success) {
 | 
					        if (res.success) {
 | 
				
			||||||
          setLoginData(res.data)
 | 
					          setLoginData(res.data)
 | 
				
			||||||
| 
						 | 
					@ -186,10 +129,7 @@ export default defineComponent({
 | 
				
			||||||
      loginFormRef,
 | 
					      loginFormRef,
 | 
				
			||||||
      required,
 | 
					      required,
 | 
				
			||||||
      switchUser,
 | 
					      switchUser,
 | 
				
			||||||
      handleLogin,
 | 
					      handleLogin
 | 
				
			||||||
      getVertify,
 | 
					 | 
				
			||||||
      startCountdown,
 | 
					 | 
				
			||||||
      resetCountdown
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
| 
						 | 
					@ -209,7 +149,7 @@ export default defineComponent({
 | 
				
			||||||
    text-align: center;
 | 
					    text-align: center;
 | 
				
			||||||
    top: 40%;
 | 
					    top: 40%;
 | 
				
			||||||
    left: 50%;
 | 
					    left: 50%;
 | 
				
			||||||
    width: 350px;
 | 
					    width: 300px;
 | 
				
			||||||
    margin: -150px 0 0 -150px;
 | 
					    margin: -150px 0 0 -150px;
 | 
				
			||||||
    .logo {
 | 
					    .logo {
 | 
				
			||||||
      display: inline-block;
 | 
					      display: inline-block;
 | 
				
			||||||
| 
						 | 
					@ -225,55 +165,15 @@ export default defineComponent({
 | 
				
			||||||
      color: #fff;
 | 
					      color: #fff;
 | 
				
			||||||
      margin: 15px 0 25px 0;
 | 
					      margin: 15px 0 25px 0;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    .button-group {
 | 
					 | 
				
			||||||
      display: flex;
 | 
					 | 
				
			||||||
      justify-content: space-between;
 | 
					 | 
				
			||||||
      align-items: center;
 | 
					 | 
				
			||||||
      margin-top: 20px;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .login-btn {
 | 
					    .login-btn {
 | 
				
			||||||
      background: #1890ff;
 | 
					      background: #6b7485;
 | 
				
			||||||
      border: none;
 | 
					      border: none;
 | 
				
			||||||
      padding: 0 20px;
 | 
					      width: 48px;
 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .login-btn:hover {
 | 
					 | 
				
			||||||
      background: #40a9ff;
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    ::v-deep(.ant-input-group-addon) {
 | 
					    ::v-deep(.ant-input-group-addon) {
 | 
				
			||||||
      border: none;
 | 
					      border: none;
 | 
				
			||||||
      padding: 0;
 | 
					      padding: 0;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    ::v-deep(.ant-input) {
 | 
					 | 
				
			||||||
      background: rgba(255, 255, 255, 0.1);
 | 
					 | 
				
			||||||
      border: 1px solid rgba(255, 255, 255, 0.3);
 | 
					 | 
				
			||||||
      color: #fff;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-input-password) {
 | 
					 | 
				
			||||||
      background: rgba(255, 255, 255, 0.1);
 | 
					 | 
				
			||||||
      border: 1px solid rgba(255, 255, 255, 0.3);
 | 
					 | 
				
			||||||
      color: #fff;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-input::placeholder) {
 | 
					 | 
				
			||||||
      color: rgba(255, 255, 255, 0.6);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-input-password .ant-input) {
 | 
					 | 
				
			||||||
      background: transparent;
 | 
					 | 
				
			||||||
      border: none;
 | 
					 | 
				
			||||||
      color: #fff;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-input-password .ant-input::placeholder) {
 | 
					 | 
				
			||||||
      color: rgba(255, 255, 255, 0.6);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-btn) {
 | 
					 | 
				
			||||||
      background: rgba(255, 255, 255, 0.1);
 | 
					 | 
				
			||||||
      border: 1px solid rgba(255, 255, 255, 0.3);
 | 
					 | 
				
			||||||
      color: #fff;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    ::v-deep(.ant-btn:disabled) {
 | 
					 | 
				
			||||||
      background: rgba(255, 255, 255, 0.05);
 | 
					 | 
				
			||||||
      border-color: rgba(255, 255, 255, 0.2);
 | 
					 | 
				
			||||||
      color: rgba(255, 255, 255, 0.4);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  .date-time {
 | 
					  .date-time {
 | 
				
			||||||
    position: absolute;
 | 
					    position: absolute;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue