122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
|
<view class="sms-wrapper">
|
|
<LoginInput pd="0 50rpx" v-model:value="loginInfo.phone" title="手机号" type="number" place="请输入登录名/手机号">
|
|
<view class="sms-tips" v-if="loginInfo.phone.length == 11" @tap="createInterval">
|
|
<text v-if="smsNumber != 60">{{ smsNumber }}s</text>
|
|
{{ smsNumber !== 60 ? '后可重新发送' : '发送验证码' }}
|
|
</view>
|
|
</LoginInput>
|
|
<LoginInput
|
|
title="图形验证码"
|
|
v-model:value="loginInfo.vercode"
|
|
place="请输入图形验证码"
|
|
pd="50rpx 50rpx 0rpx 50rpx"
|
|
>
|
|
<view style="padding-top: 5px;">
|
|
<image :src="loginInfo.imgCodeUrl" style="width: 200rpx; height: 110rpx;margin-left: 10rpx;" @click="getCode" mode=""></image>
|
|
</view>
|
|
</LoginInput>
|
|
<LoginInput v-model:value="loginInfo.verificationCode" title="短信验证码" type="number" place="请输入短信验证码"></LoginInput>
|
|
<LoginButton @login="phoneCodeLogin" :isRegister="true"></LoginButton>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { $sendMessage, $login, $userInfo, $phoneCodeLogin, $getCompanyInfo,$isCode } from '@/http/apiManager.js'
|
|
|
|
import { Base64 } from 'js-base64'
|
|
import LoginInput from '@/components/newComponents/LoginInput/LoginInput'
|
|
import LoginButton from './LoginButton'
|
|
const emits = defineEmits(['successLogin'])
|
|
const loginInfo = reactive({
|
|
phone: '',
|
|
imgCodeUrl:'',
|
|
vercode:'',
|
|
vercodeToken:'',
|
|
})
|
|
const smsNumber = ref(60)
|
|
let interval = null
|
|
// 创建定时器
|
|
let createInterval = () => {
|
|
if (interval) return
|
|
sendMsg()
|
|
interval = setInterval(() => {
|
|
openInterval()
|
|
}, 1000)
|
|
}
|
|
|
|
const getCode=()=>{
|
|
$isCode().then(res=>
|
|
{
|
|
console.log(res);
|
|
loginInfo.imgCodeUrl=res.bizData.imageBase64Data
|
|
loginInfo.vercodeToken=res.bizData.vercodeToken
|
|
})
|
|
}
|
|
getCode()
|
|
// smsNumber -1 倒计时
|
|
const openInterval = () => {
|
|
smsNumber.value--
|
|
if (smsNumber.value <= 0) {
|
|
smsNumber.value = 60
|
|
clearInterval(interval)
|
|
interval = null
|
|
}
|
|
}
|
|
// 发送短信验证码"
|
|
const sendMsg = () => {
|
|
if (interval) return
|
|
$sendMessage({
|
|
phone: loginInfo.phone,
|
|
smsType: 'auth',
|
|
vercodeToken:loginInfo.vercodeToken,
|
|
vercode:loginInfo.vercode
|
|
})
|
|
.then((res) => {
|
|
const { bizData } = res
|
|
uni.showToast({
|
|
title: '发送成功',
|
|
icon: 'success',
|
|
mask: true,
|
|
})
|
|
})
|
|
.catch((err) => {
|
|
smsNumber.value = 60
|
|
clearInterval(interval)
|
|
})
|
|
}
|
|
// 验证码登录
|
|
const phoneCodeLogin = () => {
|
|
if (!loginInfo.phone.length != 11 && !loginInfo.verificationCode) {
|
|
uni.showToast({
|
|
title: '请输入手机号和验证码',
|
|
icon: 'none',
|
|
})
|
|
} else {
|
|
$phoneCodeLogin({
|
|
phone: Base64.encode(loginInfo.phone),
|
|
code: Base64.encode(loginInfo.verificationCode),
|
|
// #ifdef APP-PLUS
|
|
lt: Base64.encode('APP'),
|
|
// #endif
|
|
// #ifdef H5 || MP-WEIXIN
|
|
lt: Base64.encode('LITE'),
|
|
// #endif
|
|
}).then((res) => {
|
|
const { bizData } = res
|
|
emits('successLogin', bizData.iToken)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sms-wrapper {
|
|
.sms-tips {
|
|
font-size: 28rpx;
|
|
color: $primaryColor;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
</style>
|