453530270@qq.com
2 years ago
6 changed files with 245 additions and 3 deletions
@ -0,0 +1,203 @@ |
|||
<template> |
|||
<view class="phone_code"> |
|||
<text class="phone_code_label">验证码已发送至</text> |
|||
<view class="phone_code_count"> |
|||
<text class="phone_code_count_new">{{ newPhone }}</text> |
|||
<view v-if="isReget" class="phone_code_count_reget"> |
|||
<button plain="true" type="warn" size="mini" @click="getCode">重新获取</button> |
|||
</view> |
|||
<text v-else class="phone_code_count_down">获取验证码<text>{{count}}</text>s</text> |
|||
</view> |
|||
<view class="phone_code_single"> |
|||
<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun" |
|||
@input="codeNumInputFun" :focus="focus" v-model="code" type="number" maxlength="6" /> |
|||
<view class="phone_code_single_codeinput"> |
|||
<view v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)" |
|||
:style="(index == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')"> |
|||
{{code[index]}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<button :disabled="isCode" class="btn" type="warn" @click="submitFun()">确定</button> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
newPhone: "167****8898", // 当前显示电话 |
|||
isReget: false, // 判断是否显示 ‘重新获取’按钮 |
|||
timer: null, // 定时器 |
|||
count: 60, // 时间 |
|||
code:"", // 验证码 |
|||
focus:true, // 焦点 |
|||
isCode:true // ‘确定’按钮是否禁用 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
console.log(options) |
|||
this.getTimer() // 开启定时器 |
|||
this.getCode() // 获取验证码 |
|||
}, |
|||
watch: { |
|||
count(val) { |
|||
if (val == 0) { |
|||
this.isReget = true |
|||
clearInterval(this.timer) |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 定时器 |
|||
* */ |
|||
getTimer() { |
|||
this.timer = setInterval(() => { |
|||
if (this.count == 0) { |
|||
clearInterval(this.timer) |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
return |
|||
} |
|||
this.count-- |
|||
}, 1000) |
|||
}, |
|||
|
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 获取验证码 |
|||
* */ |
|||
getCode() { |
|||
console.log("获取验证码", this.newPhone) |
|||
if (this.count == 0) { |
|||
this.count = 60 |
|||
this.isReget = false |
|||
this.getTimer() |
|||
} |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框输入事件 |
|||
* */ |
|||
codeNumInputFun(e) { |
|||
let val = e.detail.value |
|||
this.code = val |
|||
if (val.length == 6) this.isCode = false |
|||
else this.isCode = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框失去焦点事件 |
|||
* */ |
|||
codeNumBlurFun(e) { |
|||
let val = e.detail.value |
|||
this.focus = false |
|||
if (val.length == 6) this.isCode = false |
|||
else this.isCode = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框点击事件 |
|||
* @param {Number} index 当前点击框索引 |
|||
* */ |
|||
codefocusFun(index) { |
|||
this.focus = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 按钮点击事件 |
|||
* */ |
|||
submitFun() { |
|||
console.log("确认更换手机号") |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.phone { |
|||
background-color: #FFF; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
|
|||
&_code { |
|||
padding: 30rpx; |
|||
|
|||
&_label { |
|||
font-size: 30rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
&_count { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
|
|||
&_new { |
|||
color: #FEF2F2; |
|||
font-size: 38rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&_down { |
|||
border: 1rpx solid #eee; |
|||
border-radius: 10rpx; |
|||
color: #999; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
text { |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&_single { |
|||
margin-top: 30rpx; |
|||
|
|||
&_cinput { |
|||
position: fixed; |
|||
left: -100rpx; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
&_codeinput { |
|||
margin: auto; |
|||
width: 650rpx; |
|||
height: 100rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
&_codeinput>view { |
|||
margin-top: 5rpx; |
|||
margin-left: 15rpx; |
|||
width: 86rpx; |
|||
height: 86rpx; |
|||
line-height: 86rpx; |
|||
font-size: 60rpx; |
|||
font-weight: bold; |
|||
color: #313131; |
|||
text-align: center; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
&_codeinput>view:nth-child(1) { |
|||
margin-left: 0rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.btn{ |
|||
background-color: #FEF2F2; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue