|
@@ -1,13 +1,34 @@
|
|
|
<script setup>
|
|
|
import { useTemplateRef } from "vue"
|
|
|
+import {apiSystemCommon} from '@/api/system'
|
|
|
+import { useRouter } from "vue-router"
|
|
|
+import {useUserInfo} from '@/hooks/userInfo'
|
|
|
|
|
|
+const {setToken}=useUserInfo()
|
|
|
+const router=useRouter()
|
|
|
|
|
|
-const telCodeOpts = ref([
|
|
|
- {
|
|
|
- label: '+86',
|
|
|
- value: '86'
|
|
|
+//图形验证码
|
|
|
+const imgCodeUrl=ref('')
|
|
|
+let imgCodeId=''
|
|
|
+async function getImgCode(){
|
|
|
+ const res=await apiSystemCommon.getImgCode()
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ imgCodeUrl.value=res.Data.Base64Blob
|
|
|
+ imgCodeId=res.Data.Id
|
|
|
+}
|
|
|
+getImgCode()
|
|
|
+
|
|
|
+// 手机号区号
|
|
|
+const telCodeOpts = ref([])
|
|
|
+async function getMobileAreaCode(){
|
|
|
+ const res=await apiSystemCommon.getMobileAreaCode()
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ telCodeOpts.value=res.Data||[]
|
|
|
+ if(telCodeOpts.value.length>0){
|
|
|
+ formData.telCode=telCodeOpts.value[0].Value
|
|
|
}
|
|
|
-])
|
|
|
+}
|
|
|
+getMobileAreaCode()
|
|
|
|
|
|
const keepLogin=ref(false)
|
|
|
const FORM_RULES = {
|
|
@@ -26,6 +47,49 @@ const formIns=useTemplateRef('formIns')
|
|
|
async function onSubmit(){
|
|
|
const validate=await formIns.value.validate()
|
|
|
if(validate!==true) return
|
|
|
+
|
|
|
+ const res=await apiSystemCommon.userLogin({
|
|
|
+ VerifyCode:formData.telVerifyCode,
|
|
|
+ Mobile:formData.tel,
|
|
|
+ TelAreaCode:formData.telCode,
|
|
|
+ IsRemember:Number(keepLogin.value)
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ setToken(res.Data.Authorization)
|
|
|
+ router.replace('/etaChart/index')
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 获取手机号验证码
|
|
|
+let countDownTimer=null
|
|
|
+const countDownTime=ref(60)
|
|
|
+const isSendCode=ref(false)
|
|
|
+async function handleMobileVerifyCode(){
|
|
|
+ if(isSendCode.value) return
|
|
|
+ if(!formData.tel){
|
|
|
+ MessagePlugin.warning('请填写手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!formData.imgVerifyCode){
|
|
|
+ MessagePlugin.warning('请填写图形验证码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res=await apiSystemCommon.getMobileVerifyCode({
|
|
|
+ CaptchaId:imgCodeId,
|
|
|
+ CaptchaCode:formData.imgVerifyCode,
|
|
|
+ Mobile:formData.tel,
|
|
|
+ TelAreaCode:formData.telCode
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ isSendCode.value=true
|
|
|
+ countDownTime.value=60
|
|
|
+ countDownTimer=setInterval(()=>{
|
|
|
+ countDownTime.value--
|
|
|
+ if(countDownTime.value<0){
|
|
|
+ isSendCode.value=false
|
|
|
+ clearInterval(countDownTimer)
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
}
|
|
|
|
|
|
|
|
@@ -53,9 +117,9 @@ async function onSubmit(){
|
|
|
<t-select v-model="formData.telCode" style="width:80px">
|
|
|
<t-option
|
|
|
v-for="item in telCodeOpts"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
+ :key="item.Value"
|
|
|
+ :label="item.Name"
|
|
|
+ :value="item.Value"
|
|
|
/>
|
|
|
</t-select>
|
|
|
<t-input class="tel-input" placeholder="请输入手机号" v-model="formData.tel" style="flex:1"></t-input>
|
|
@@ -64,13 +128,14 @@ async function onSubmit(){
|
|
|
<t-form-item name="telVerifyCode">
|
|
|
<div class="flex form-item-box">
|
|
|
<t-input placeholder="请输入验证码" v-model="formData.telVerifyCode" style="flex:1"></t-input>
|
|
|
- <span class="get_telcode_btn">获取验证码</span>
|
|
|
+ <span class="get_telcode_btn" @click="handleMobileVerifyCode" v-if="!isSendCode">获取验证码</span>
|
|
|
+ <span v-else class="get_telcode_btn" style="color:#666">{{countDownTime}}s</span>
|
|
|
</div>
|
|
|
</t-form-item>
|
|
|
<t-form-item name="imgVerifyCode">
|
|
|
<div class="flex form-item-box" style="padding-top:6px;padding-bottom:6px;">
|
|
|
<t-input placeholder="请输入图形验证码" v-model="formData.imgVerifyCode" style="flex:1"></t-input>
|
|
|
- <img class="img-code" src="" alt="">
|
|
|
+ <img class="img-code" :src="imgCodeUrl" alt="" @click="getImgCode">
|
|
|
</div>
|
|
|
</t-form-item>
|
|
|
<div>
|