front / purchase_financing_h5 · Files

<template>
  <div class="login_container">
    <div class="login_title">我的验证码是</div>
    <div class="title_dsc">
      <span>验证码已发送至{{ ruleForm.phone }}</span>
      <el-button type="primary" :loading="loading" class="send_code" @click="sendPhoneMsg" link>
        {{ isWait ? '请等待' + timeCount + 's' : '发送验证码' }}
      </el-button>
    </div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login_from">
      <!--<el-form-item prop="msgCodeAll">
          <el-input v-model="ruleForm.msgCodeAll" :maxlength="6" placeholder="请输入验证码" class="msg_code_input"></el-input>
      </el-form-item>-->
      <el-form-item prop="code" class="code_wrap">
        <el-input v-model="ruleForm.code" :maxlength="6" placeholder="请输入验证码" v-show="false"></el-input>
        <el-input v-model="ruleForm.msgCode1" :maxlength="1" ref="input1"
                  @keyup="change($event, 'input2', '')"></el-input>
        <el-input v-model="ruleForm.msgCode2" :maxlength="1" ref="input2"
                  @keyup="change($event, 'input3', 'input1')"></el-input>
        <el-input v-model="ruleForm.msgCode3" :maxlength="1" ref="input3"
                  @keyup="change($event, 'input4', 'input2')"></el-input>
        <el-input v-model="ruleForm.msgCode4" :maxlength="1" ref="input4"
                  @keyup="change($event, 'input5', 'input3')"></el-input>
        <el-input v-model="ruleForm.msgCode5" :maxlength="1" ref="input5"
                  @keyup="change($event, 'input6', 'input4')"></el-input>
        <el-input v-model="ruleForm.msgCode6" :maxlength="1" ref="input6"
                  @keyup="change($event, 'msgCode6His', 'input5')"></el-input>
      </el-form-item>

    </el-form>

    <el-button type="primary" round :loading="loading" @click="submitForm" style="width: 100%" class="primary-btn">
      登录
    </el-button>
  </div>
</template>

<script setup lang='ts'>
import * as api from "./../interface/login"
import {formValidationForm} from "./../utils/vaildation"
import router from "../router/index";
import '../assets/css/login.scss'
import {Encrypt, Decrypt} from './../utils/sm4Untils'
import {setToken, getTokenKey, removeTokenKey} from '../utils/auth'
import {loginMain} from '../store/index'
import {storeToRefs} from 'pinia';

let state = reactive({})
let loginAct = loginMain()
let {isWait, timeCount, registerTimer} = storeToRefs(loginAct)

const route = useRoute();

let ruleForm = reactive({
  phone: undefined,
  code: undefined,
  msgCode1: undefined,
  msgCode2: undefined,
  msgCode3: undefined,
  msgCode4: undefined,
  msgCode5: undefined,
  msgCode6: undefined,
  msgCode6His: undefined
})
let loading = ref(false)

let input1 = ref(null)
let input2 = ref(null)
let input3 = ref(null)
let input4 = ref(null)
let input5 = ref(null)
let input6 = ref(null)

// ruleForm.phone = Decrypt(route.path.split("/").slice(-1).toString(), '5492123658175926')
// let phoneJson = Decrypt(route.query.p, '5492123658175926')
// ruleForm.phone = JSON.parse(phoneJson).p
ruleForm.phone = getTokenKey("p")

let change = (e: any, name1: string, name2: string) => {
  if (e.keyCode == 8) {
    if (name2 == 'input1') {
      ruleForm.msgCode1 = ""
      input1.value.focus()
    } else if (name2 == 'input2') {
      ruleForm.msgCode2 = ""
      input2.value.focus()
    } else if (name2 == 'input3') {
      ruleForm.msgCode3 = ""
      input3.value.focus()
    } else if (name2 == 'input4') {
      ruleForm.msgCode4 = ""
      input4.value.focus()
    } else if (name2 == 'input5') {
      if (ruleForm.msgCode6His == "") {
        ruleForm.msgCode5 = ""
        input5.value.focus()
      } else {
        ruleForm.msgCode6His = ""
      }
    }
  } else {
    if (name1 == 'input2') {
      input2.value.focus()
    } else if (name1 == 'input3') {
      input3.value.focus()
    } else if (name1 == 'input4') {
      input4.value.focus()
    } else if (name1 == 'input5') {
      input5.value.focus()
    } else if (name1 == 'input6') {
      input6.value.focus()
    } else if (name1 == 'msgCode6His') {
      ruleForm.msgCode6His = e.target.value
    }
  }
}

let rules = reactive<FormRules>({
  phone: [
    {required: true, message: "请输入手机号", trigger: ["blur", "change"]},
    {validator: formValidationForm.Form().checkCellPhone_N, trigger: ["blur"]}
  ],
  code: [
    {required: true, message: "请输入验证码", trigger: ["blur", "change"]}
  ],
})
const ruleFormRef = ref<FormInstance>()

ruleForm.code = computed({
  get() {
    if (ruleForm.msgCode1 && ruleForm.msgCode2 && ruleForm.msgCode3 && ruleForm.msgCode4 && ruleForm.msgCode5 && ruleForm.msgCode6) {
      return ruleForm.code = ruleForm.msgCode1 + ruleForm.msgCode2 + ruleForm.msgCode3 + ruleForm.msgCode4 + ruleForm.msgCode5 + ruleForm.msgCode6
    }
  },
  set(value) {
    /*const val = value.split('')
    ruleForm.msgCode1 = val[0]
    ruleForm.msgCode2 = val[1]
    ruleForm.msgCode3 = val[2]
    ruleForm.msgCode4 = val[3]
    ruleForm.msgCode5 = val[4]
    ruleForm.msgCode6 = val[5]*/
  }

})

const sendPhoneMsg = () => {
  if (!formValidationForm.checkCellPhone(ruleForm.phone)) {
    ElMessage.error("请输入正确的手机号")
    router.push('/login')
    return
  }

  api.sendPhoneMsg({phone: ruleForm.phone}).then(res => {
    if (registerTimer.value == null) {
      registerTimer.value = setInterval(() => {
        timeCount.value--
        loginAct.setTimeCount(timeCount.value)
        loginAct.setWait(true)

        if (timeCount.value <= 0) {
          loginAct.setWait(false)
          clearInterval(registerTimer.value)
          loginAct.setRegisterTimer()
        }
      }, 1000)
    }
  })
}

// let data = {"searchValue":null,"createBy":"","createTime":"2023-04-23 16:57:45","updateBy":"","updateTime":null,"remark":null,"params":{},"userId":58819,"nickName":"用户_W944z9r10Cf5","phoneNumber":"18801291704","companyName":"极易净水科技(上海)有限公司","userType":"5","email":"","userName":null,"avatar":"","password":"a6f7ecdf917b1c31b91fede7b2b36062","identityType":null,"identityTypeStr":null,"identityTypeStatus":"0","status":"0","delFlag":"0","loginIp":"","loginDate":null,"contact":null,"contactPhone":null,"pwdUpdateTime":null,"companyId":null,"productIds":null,"msgCode":null,"token":"54b07ffc861d41ecba6e67b511640903","loginType":null,"hasMsg":3,"hasRzsq":0}
let submitForm = () => {
  /*setToken(data.token)
  loginAct.setUserInfo(data)
  router.push('/mine')*/
  ruleFormRef.value.validate((vaild, fileds) => {
    if (vaild) {
      api.loginAPI(ruleForm).then(res => {
        ElMessage.success("登录成功")
        setToken(res.data.token)
        removeTokenKey("p")
        loginAct.setUserInfo(res.data)
        router.push('/mine')
      })
    }
  })
}

/*const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}*/

onMounted(()=> {
  sendPhoneMsg()
})
const arrowPath = ref("/login")
defineExpose({arrowPath})

</script>

<style scoped>
</style>