123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 |
- <template>
- <view class="smsVerification-container">
- <view class="sms-title">输入短信验证码</view>
- <text class="sms-describe">验证码已发送至157****7854,请在下方输入框内输入6位数字验证码</text>
- <view class="sms-item" @tap="showKeyboard=!showKeyboard">
- <u-message-input mode="bottomLine" :maxlength="6" v-model="value" :disabled-keyboard="true"></u-message-input>
- </view>
- <view class="sendcode-con">
- <text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : getCodeValidate()">{{nowVal}}</text>
- </view>
- <view class="btn-con">
- <u-button class="handle-btn" type="info" size="medium" @click="cancel">取消</u-button>
- <u-button class="handle-btn" type="primary" size="medium" @click="submit">确定</u-button>
- </view>
- <!-- 数字键盘 -->
- <u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- nowVal: '获取验证码', // 按钮显示内容
- count: '', // 当前秒数
- timer: null, // 倒计时
- isDisable: false, // 是否禁止获取验证码
- value: '', //输入的内容
- showKeyboard: false // 是否打开键盘
- }
- },
- onShow() {
- this.getCodeValidate()
- },
- onLoad() {
- //因为此时实例没有挂载完成,需要延迟操作
- setTimeout(() => {
- this.showKeyboard = true
- }, 50)
- },
- methods:{
- // 按键被点击(点击退格键不会触发此事件)
- valChange(val) {
- // 将每次按键的值拼接到value变量中,注意+=写法
- if(this.value.length < 6){
- this.value += val
- }
- },
- // 退格键被点击
- backspace() {
- // 删除value的最后一个字符
- if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
- },
- // 获取验证码
- getCodeValidate(){
- const _this = this
- // 短信验证码
- // memberVerifyCode({ phone: '15454787787' }).then(res => {
- // console.log(JSON.stringify(res))
- // if(res.status == 200){ // 验证码输入正确
- // 开启倒计时
- this.getCodeFun()
- uni.showToast({icon: 'none',title: '验证码发送成功'})
- // }else { // 验证码输入错误
- // uni.showToast({icon: 'none',title: res.message})
- // }
- // })
- },
- // 开始倒计时
- getCodeFun(){
- const TIME_COUNT = 60
- if (!this.timer) {
- this.count = TIME_COUNT
- this.timer = setInterval(() => {
- if (this.count > 0 && this.count <= TIME_COUNT) {
- this.count--
- this.nowVal = this.count + '秒后重新发送'
- this.isDisable = true
- } else {
- this.nowVal = '重新获取验证码'
- clearInterval(this.timer)
- this.timer = null
- this.isDisable = false
- }
- }, 1000)
- }
- },
- // 确定
- submit(){
- if(!this.value || this.value.length < 6){
- uni.showToast({ title: '请输入6位数字验证码', icon: 'none' })
- }else{
- // 校验输入短信验证码是否正确
- uni.redirectTo({
- url: '/pages/userCenter/userInfo/paymentPwd'
- })
- }
- },
- // 取消
- cancel(){
- uni.navigateBack({
- delta: 1
- })
- }
- }
- }
- </script>
- <style lang="less">
- .smsVerification-container{
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background-color: #fff;
- .sms-title {
- margin: 50rpx 0 30rpx;
- font-size: 36rpx;
- font-weight: bold;
- }
- .sms-describe{
- display: block;
- color: #606266;
- margin: 20rpx 0 50rpx;
- }
- .sendcode-con{
- text-align: center;
- padding-top: 70rpx;
- .getcode-btn {
- display: block;
- font-size: 28rpx;
- color: #298bf2;
- }
- .grey-btn{
- color: #999;
- }
- }
- .btn-con{
- display: flex;
- justify-content: space-between;
- padding-top: 130rpx;
- .handle-btn{
- display: inline-block;
- width: 45%;
- margin: 0 auto;
- text-align: center;
- }
- }
- }
- </style>
|