141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="pass">
|
||
<form @submit="formSubmit">
|
||
<view class="favourCont-label">
|
||
<view class="favourCont-name">手机号：</view>
|
||
<input type="number" placeholder="请输入手机号" v-model="mobileNo" />
|
||
<button @tap="sendOut" class="obtain" :disabled="senddisabled" hover-class="none">{{ codename }}</button>
|
||
</view>
|
||
<view class="favourCont-label">
|
||
<view class="favourCont-name">验证码</view>
|
||
<input type="number" name="code" placeholder="请输入验证码" />
|
||
</view>
|
||
<view class="favourCont-label">
|
||
<view class="favourCont-name">新密码：</view>
|
||
<input type="number" password name="password" placeholder="请输入新的支付密码" />
|
||
</view>
|
||
<view class="favourCont-label">
|
||
<view class="favourCont-name">确认密码：</view>
|
||
<input type="number" password name="confirmation" placeholder="请再次输入支付密码" />
|
||
</view>
|
||
<view class="favourCont-btn">
|
||
<button formType="submit" :disabled="disabled">确认设置</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { send } from '@/apis/interfaces/user'
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobileNo : '', // 手机号
|
||
codename : '获取验证码',
|
||
senddisabled: false, // 获取验证码-按钮提交状态
|
||
disabled : false // 按钮提交状态
|
||
}
|
||
},
|
||
// 生命周期函数--监听页面加载
|
||
onLoad(options) {},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {},
|
||
methods: {
|
||
// 发送短信
|
||
sendOut(e) {
|
||
var _this = this
|
||
send({
|
||
mobile: this.mobileNo,
|
||
channel: 'PAYPASS'
|
||
}).then(res=>{
|
||
uni.showToast({
|
||
title : '发送成功',
|
||
icon : 'success',
|
||
duration: 2000
|
||
})
|
||
var num = 61;
|
||
var timer = setInterval(function () {
|
||
num--;
|
||
if (num <= 0) {
|
||
clearInterval(timer);
|
||
_this.codename = '重新发送'
|
||
_this.senddisabled = false
|
||
|
||
} else {
|
||
_this.codename = num + "s后重新获取"
|
||
_this.senddisabled = true
|
||
}
|
||
}, 1000)
|
||
}).catch(err=>{})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.favourCont-label {
|
||
background-color: #fff;
|
||
height: 120rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
position: relative;
|
||
input {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-size: 30rpx;
|
||
padding-left: 220rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.favourCont-name {
|
||
line-height: 100rpx;
|
||
}
|
||
|
||
.favourCont-btn {
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 50rpx;
|
||
button {
|
||
background-color: #3a3b3e;
|
||
color: #fff;
|
||
width: 100% !important;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.forget {
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.obtain {
|
||
color: #d6571f;
|
||
background: none;
|
||
border: none;
|
||
font-size: 30rpx;
|
||
position: absolute;
|
||
width: auto !important;
|
||
text-align: right;
|
||
line-height: 100rpx;
|
||
z-index: 9;
|
||
padding: 0;
|
||
margin: 0;
|
||
right: 20rpx;
|
||
top: 0;
|
||
}
|
||
</style>
|