<template>
|
<view class="container">
|
<view class="left-bottom-sign" />
|
<view class="back-btn yticon icon-zuojiantou-up" @click="navBack" />
|
<view class="right-top-sign" />
|
<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
|
<view class="wrapper">
|
<view class="left-top-sign">
|
RESET
|
</view>
|
<view class="welcome">
|
重置密码！
|
</view>
|
<view class="input-content">
|
<view class="input-item">
|
<text class="tit">
|
手机号码
|
</text>
|
<input type="number" :value="phone" placeholder="请输入手机号码" maxlength="11" data-key="phone" @input="inputChange">
|
</view>
|
<view class="input-item">
|
<text class="tit">
|
验证码
|
</text>
|
<view class="verify-code">
|
<input
|
type="mobile"
|
value=""
|
placeholder="6位验证码"
|
maxlength="6"
|
data-key="verifyCode"
|
style="width: 60%;"
|
@input="inputChange"
|
>
|
<button style="width: 40%;" :disabled="sendDisabled" @click="doGetVerify">
|
{{ sendText }}
|
</button>
|
</view>
|
</view>
|
<view class="input-item">
|
<text class="tit">
|
密码
|
</text>
|
<input
|
type="password"
|
value=""
|
placeholder="8-18位数字、字母组合"
|
placeholder-class="input-empty"
|
maxlength="20"
|
data-key="password"
|
@input="inputChange"
|
@confirm="doReset"
|
>
|
</view>
|
</view>
|
<button class="confirm-btn" :disabled="resetting" @click="doReset">
|
重置
|
</button>
|
</view>
|
<view class="reset-section">
|
想起来了？
|
<text @click="toLogin">
|
马上登录
|
</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapMutations
|
} from 'vuex'
|
|
export default {
|
data() {
|
return {
|
phone: '',
|
password: '',
|
resetting: false,
|
sendText: '获取验证码',
|
sendDisabled: false
|
}
|
},
|
onLoad() {
|
|
},
|
methods: {
|
...mapMutations(['login']),
|
inputChange(e) {
|
const key = e.currentTarget.dataset.key
|
this[key] = e.detail.value
|
},
|
navBack() {
|
uni.navigateBack()
|
},
|
toLogin() {
|
uni.redirectTo({
|
url: '/pages/public/login'
|
})
|
},
|
doGetVerify() {
|
const that = this
|
if (!that.phone || that.phone.length !== 11) {
|
uni.showToast({
|
title: '请输入正确手机号！',
|
icon: 'none'
|
})
|
return
|
}
|
that.$api.request('user', 'sendVerifyCode', {
|
phone: that.phone
|
}).then(res => {
|
debugger
|
that.sendDisabled = true
|
let sec = 60
|
const interval = setInterval(() => {
|
sec--
|
that.sendText = sec + 's后重发'
|
if (sec <= 0) {
|
that.sendDisabled = false
|
that.sendText = '获取验证码'
|
clearInterval(interval)
|
}
|
}, 1000)
|
})
|
},
|
async doReset() {
|
const that = this
|
that.resetting = true
|
that.$api.request('user', 'resetPassword', {
|
phone: that.phone,
|
password: that.password,
|
verifyCode: that.verifyCode
|
}, failres => {
|
uni.showToast({
|
title: failres.errmsg
|
})
|
that.resetting = false
|
}).then(res => {
|
that.resetting = false
|
uni.redirectTo({
|
url: './login'
|
})
|
})
|
}
|
}
|
|
}
|
</script>
|
|
<style lang='scss'>
|
page {
|
background: #fff;
|
}
|
|
.container {
|
padding-top: 115px;
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
overflow: hidden;
|
background: #fff;
|
}
|
|
.wrapper {
|
position: relative;
|
z-index: 90;
|
background: #fff;
|
padding-bottom: 40upx;
|
}
|
|
.back-btn {
|
position: absolute;
|
left: 40upx;
|
z-index: 9999;
|
padding-top: var(--status-bar-height);
|
top: 40upx;
|
font-size: 40upx;
|
color: $font-color-dark;
|
}
|
|
.left-top-sign {
|
font-size: 120upx;
|
color: $page-color-base;
|
position: relative;
|
left: -16upx;
|
}
|
|
.right-top-sign {
|
position: absolute;
|
top: 80upx;
|
right: -30upx;
|
z-index: 95;
|
|
&:before,
|
&:after {
|
display: block;
|
content: "";
|
width: 400upx;
|
height: 80upx;
|
background: #b4f3e2;
|
}
|
|
&:before {
|
transform: rotate(50deg);
|
border-radius: 0 50px 0 0;
|
}
|
|
&:after {
|
position: absolute;
|
right: -198upx;
|
top: 0;
|
transform: rotate(-50deg);
|
border-radius: 50px 0 0 0;
|
/* background: pink; */
|
}
|
}
|
|
.left-bottom-sign {
|
position: absolute;
|
left: -270upx;
|
bottom: -320upx;
|
border: 100upx solid #d0d1fd;
|
border-radius: 50%;
|
padding: 180upx;
|
}
|
|
.welcome {
|
position: relative;
|
left: 50upx;
|
top: -90upx;
|
font-size: 46upx;
|
color: #555;
|
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
}
|
|
.input-content {
|
padding: 0 60upx;
|
}
|
|
.input-item {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
justify-content: center;
|
padding: 0 0 0 30upx;
|
background: $page-color-light;
|
height: 140upx;
|
border-radius: 4px;
|
margin-bottom: 50upx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.tit {
|
height: 50upx;
|
line-height: 56upx;
|
font-size: $font-sm+2upx;
|
color: $font-color-base;
|
}
|
|
input {
|
height: 60upx;
|
font-size: $font-base + 2upx;
|
color: $font-color-dark;
|
width: 100%;
|
}
|
|
.verify-code {
|
flex-direction: row;
|
display: flex;
|
justify-content:end;
|
flex-wrap: wrap;
|
width: 100%;
|
}
|
}
|
|
.confirm-btn {
|
width: 630upx;
|
height: 76upx;
|
line-height: 76upx;
|
border-radius: 50px;
|
margin-top: 70upx;
|
background: $uni-color-primary;
|
color: #fff;
|
font-size: $font-lg;
|
|
&:after {
|
border-radius: 100px;
|
}
|
}
|
|
.forget-section {
|
font-size: $font-sm+2upx;
|
color: $font-color-spec;
|
text-align: center;
|
margin-top: 40upx;
|
}
|
|
.reset-section {
|
position: absolute;
|
left: 0;
|
bottom: 50upx;
|
width: 100%;
|
font-size: $font-sm+2upx;
|
color: $font-color-base;
|
text-align: center;
|
|
text {
|
color: $font-color-spec;
|
margin-left: 10upx;
|
}
|
}
|
</style>
|
