Files
CompanyProject/金壶/appV1/pages/my/x_reset_assword.vue
2024-09-27 01:32:49 +08:00

191 lines
4.8 KiB
Vue

<template>
<!-- 重置密码 页面 -->
<view class="content h-100">
<view class="banner">
<image src="../../static/my/left.png" mode="" class="back" @click="goback()"></image>
<view class="page_title text-center x-text-white">重置密码</view>
</view>
<view class="uni-common-mt my_input">
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
<image src="../../static/my/phone.png" mode="" class="w-36 h-41"></image>
<input class="uni-input h-100 flex-1" type="number" focus placeholder="请输入手机号" v-model="phone"/>
</view>
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
<image src="../../static/my/loginadd.png" mode="" class="w-36 h-41"></image>
<input class="uni-input flex-1" type="number" placeholder="验证码" v-model="code" />
<view class="get_code x-text-red x-text-font24 text-right" v-if="get_code==false" @click="getCode()">获取验证码</view>
<view class="get_code x-text-red x-text-font24 w-50 text-right" v-else>{{count_time}}s后再次获取验证码</view>
</view>
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
<image src="../../static/my/suo.png" mode="" class="w-36 h-41"></image>
<input class="uni-input" type="password" placeholder="请设置密码" v-model="new_password" />
</view>
<view class="uni-form-item uni-column d-flex x_margin0auto two_input a-center">
<image src="../../static/my/suo.png" mode="" class="w-36 h-41"></image>
<input class="uni-input" type="password" placeholder="确认密码" v-model="sure_password" />
</view>
<button class="public_blue_btn login" @click="sure()">确认修改</button>
</view>
</view>
</template>
<script>
import X_login from '../../utils/models/x_login.js'
import verification from '../../common/verification.js' //正则验证
export default {
data() {
return {
get_code: false,
count_time: 60,
phone: '',
code: '',
new_password: '',
sure_password: '',
}
},
methods: {
// 获取验证码
async getCode() {
verification.isPhone(this.phone);
if(verification.isPhone.prototype.the_isPhone == true){
let res = await X_login.phonecode_app(this.phone,this.code,2)
if(res.data.errcode==-14){
uni.showToast({
title: res.data.errmsg,
duration: 2000,
icon: 'none'
});
return
}
this.get_code = !this.get_code
this.timer();
this.handleError(res, res => {
})
}
},
goback(){
uni.navigateBack(1)
},
// getCode() {
// this.get_code = !this.get_code
// this.timer();
// },
// 验证码计时器
timer() {
if (this.count_time > 0) {
this.count_time--;
this.get_code = true
setTimeout(this.timer, 1000);
} else {
this.count_time = 60;
this.get_code = false
}
},
// 确认修改
async sure() {
verification.isNull(this.phone, this.code, this.new_password, this.sure_password) // 非空验证
if (verification.isNull.prototype.the_Null == true) {
verification.isPhone(this.phone); // 手机号格式验证
}
if (verification.isPhone.prototype.the_isPhone == true) {
verification.isSamePsd(this.new_password, this.sure_password); // 两次密码是否相同
}
if (
verification.isNull.prototype.the_Null == true &&
verification.isPhone.prototype.the_isPhone == true &&
verification.isSamePsd.prototype.the_isSamePsd == true
) {
let res = await X_login.forgetPassword_app(this.phone, this.code,this.new_password)
this.handleError(res, res => {
uni.navigateTo({
url: 'x_login'
});
})
}
}
}
}
</script>
<style lang="scss">
.content {
.banner{
height:404upx;
padding-top:60upx;
position: relative;
background-image: url(../../static/my/login.png);
background-position: 100% 100%;
background-size: cover;
.page_title{
// line-height: 118upx;
font-size: 32upx;
}
.back{
position: absolute;
top:100upx;
left:33upx;
height:31upx;
width:19upx;
}
}
.login{
margin-top:60upx;
}
.my_form{
.my_form_menu{
.menu_items{
margin-right:44upx;
}
}
.menu_active{
color: #282828;
font-size: 32upx;
border-bottom:4upx solid #6B68DC;
font-weight: bold;
}
}
.my_input{
padding:100upx 64upx;
.two_input{
border-bottom:1upx solid #F2F2F2;
height:100upx;
}
}
.forget_password{
display: inline-block;
margin:15upx 0;
color: #6B6AD5;
border-bottom: 1upx solid #6B6AD5;
}
.agree {
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
}
</style>