You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.7 KiB
82 lines
1.7 KiB
2 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="main">
|
||
|
|
<view class="code">
|
||
|
|
<uni-easyinput v-model="ret.phone" :maxlength="11" :placeholder="plad" />
|
||
|
|
<com-zw />
|
||
|
|
<view class="flex">
|
||
|
|
<uni-easyinput v-model="ret.code" type="number"
|
||
|
|
placeholder="请输入验证码" :maxlength="4"
|
||
|
|
:clearable="false" />
|
||
|
|
<button :class="choose == false ? 'hasChosen':'notChosen'"
|
||
|
|
@tap.stop="send(ret.phone,clock)"
|
||
|
|
:disabled="choose">
|
||
|
|
{{ choose ? clock + '重新获取' : '获取验证码' }}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<u-button type="primary" @tap.stop="confirm(ret.phone,ret.code)">登录</u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { reg } from '@/utils/global.js'
|
||
|
|
export default {
|
||
|
|
name:"phone-verify",
|
||
|
|
props:{
|
||
|
|
ret:{
|
||
|
|
type:Object,
|
||
|
|
default(){
|
||
|
|
return {
|
||
|
|
phone:'',
|
||
|
|
code:''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plad:{type:String,default:'请输入手机号'},
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
choose:false,
|
||
|
|
isChoose:false,
|
||
|
|
clock: 60 ,// 倒计时
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
setGlobal(e,k){ // 手机号验证
|
||
|
|
if(reg(e,k) && this.isChoose == false){
|
||
|
|
this.choose = true
|
||
|
|
this.setTime()
|
||
|
|
}else if(reg(e,k) && this.isChoose == true){
|
||
|
|
// 调用API
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
send(e,k){ // 获取验证码
|
||
|
|
this.isChoose = false
|
||
|
|
this.setGlobal(e,k)
|
||
|
|
},
|
||
|
|
|
||
|
|
setTime(){// 倒计时函数
|
||
|
|
if(this.clock == 0){
|
||
|
|
this.clock = 60
|
||
|
|
this.choose = false
|
||
|
|
return
|
||
|
|
}else{
|
||
|
|
this.clock--
|
||
|
|
if(this.clock < 10){this.clock = '0'+this.clock}
|
||
|
|
}
|
||
|
|
setTimeout(() => { this.setTime() },1000)
|
||
|
|
},
|
||
|
|
|
||
|
|
confirm(e,k){ // 提交
|
||
|
|
this.isChoose = true
|
||
|
|
this.setGlobal(e,k)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import '@/scss/phone-verify.scss';
|
||
|
|
</style>
|