123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
- <c-nav-bar title="忘记密码" :showHome="false"></c-nav-bar>
- <view class="box">
- <view class="b_item">
- <text>手机号码</text>
- <input type="tel" placeholder="请输入手机号" placeholder-style="{color:#999999}" v-model="phone" @blur="setPhone" @confirm="setPhone">
- </view>
- <view class="b_item b_item_code">
- <text>验证码</text>
- <input type="tel" placeholder="请输入验证码" placeholder-style="{color:#999999}" v-model="code" @blur="setCode" @confirm="setCode">
- <view class="bi_code" @tap="sendCode" v-if="text=='获取验证码'">{{text}}</view>
- <view class="bi_code" v-else>{{text}} {{time}}S</view>
- </view>
- <view class="b_item">
- <text>新密码</text>
- <input type="tel" placeholder="请输入新密码" placeholder-style="{color:#999999}" v-model="password" @blur="setPassword" @confirm="setPassword">
- </view>
- <view class="b_item">
- <text>确认密码</text>
- <input type="tel" placeholder="请再次输入新密码" placeholder-style="{color:#999999}" v-model="surePassword" @blur="setSurePassword" @confirm="setSurePassword">
- </view>
- </view>
- <view class="btn" @tap="toSure">确定</view>
- </view>
- </template>
- <script>
- var timer;
- export default {
- data() {
- return {
- phone:'',
- time:59,
- text:'获取验证码',
- phone:'',
- code:'',
- password:'',
- surePassword:''
- }
- },
- methods: {
- setPhone(e){
- this.phone = e.target.value;
- },
- setCode(e){
- this.code = e.target.value;
- },
- setPassword(e){
- this.password = e.target.value;
- },
- setSurePassword(e){
- this.surePassword = e.target.value;
- },
- sendCode(){
- if(this.text!='获取验证码') return;
- this.text = '重新发送';
- timer = setInterval(()=>{
- this.time--;
- if(this.time==0){
- this.text = '获取验证码';
- this.time = 59;
- clearInterval(timer);
- }
- },1000)
- },
- toSure(){
- if(!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.phone)) return this.$showToast('请输入正确的手机号');
- if(!this.code) return this.$showToast('请输入验证码');
- if(!this.password) return this.$showToast('请输入新密码');
- if(!this.surePassword) return this.$showToast('两次密码不一致');
- this.$showToast('修改成功');
- setTimeout(()=>{
- uni.navigateBack();
- },1500);
- }
- }
- }
- </script>
- <style scoped lang="less">
- .page{
- width: 100%;
- padding: 0 30rpx 40rpx;
- box-sizing: border-box;
- background: #F3F4F4;
- .box{
- margin-top: 20rpx;
- width: 100%;
- padding: 0 30rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- border-radius: 10rpx 10rpx 10rpx 10rpx;
- .b_item{
- display: flex;
- align-items: center;
- padding: 30rpx 0;
- border-bottom: 1rpx solid #E1E1E1;
- position: relative;
- text{
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- color: #333333;
- width: 120rpx;
- }
- input{
- border: none;
- width: calc(100% - 120rpx);
- padding-left: 22rpx;
- box-sizing: border-box;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- color: #333333;
- }
- &:last-child{
- border-bottom: none;
- }
- &.b_item_code{
- input{
- width: calc(100% - 400rpx);
- }
- }
- .bi_code{
- position: absolute;
- right: 0;
- top: 50%;
- margin-top: -21rpx;
- font-size: 30rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- color: #1372FF;
- }
- }
- }
- .btn{
- width: calc(100% - 60rpx);
- height: 96rpx;
- background: #1372FF;
- border-radius: 48rpx 48rpx 48rpx 48rpx;
- line-height: 96rpx;
- text-align: center;
- font-size: 34rpx;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- color: #FFFFFF;
- letter-spacing: 2rpx;
- position: fixed;
- bottom: 40rpx;
- left: 30rpx;
- }
- }
- </style>
|