/**
* 找回密码页面
*/
<template>
<view class="find-password">
<view v-if="isShow">
<p class="title">请验证以下信息</p>
<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
<u-form-item label="员工号" prop="number" labelWidth="80" class="form-item">
<u--input v-model="form.number" placeholder="请输入员工号"></u--input>
</u-form-item>
<u-form-item label="姓名" prop="name" labelWidth="80" class="form-item">
<u--input v-model="form.name" placeholder="请输入员姓名"></u--input>
</u-form-item>
<u-form-item label="手机号码" prop="phone" labelWidth="80" class="form-item">
<u-button v-model="form.phone" @click="getUserInfo" border="none">{{form.phone || '获取手机号'}}</u-button>
</u-form-item>
</u--form>
<u-button type="primary" text="下一步" @click="nextGo" style="margin-top: 36rpx;"></u-button>
</view>
<view v-else>
<p class="title">请设置新密码</p>
<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
<u-form-item label="密码" prop="password" labelWidth="80" class="form-item">
<u--input v-model="form.password" placeholder="请输入密码" password></u--input>
</u-form-item>
<u-form-item label="确认密码" prop="confirmPassword" labelWidth="80" class="form-item">
<u--input v-model="form.confirmPassword" placeholder="请再次输入密码" password></u--input>
</u-form-item>
</u--form>
<u-button type="primary" text="完成" @click="passwordOk" style="margin-top: 36rpx;"></u-button>
</view>
<u-popup :show="sqShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-title"> 微信授权</view>
<view class="popup-content">
申请获取你微信绑定的手机号***********？
</view>
<view class="popup-buttom">
<view class="popup-jujue" @click="reject">
拒绝
</view>
<view class="popup-yunxu" @click="permit">
允许
</view>
</view>
</view>
</u-popup>
<u-popup :show="jujueShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-all-title">
拒绝将无法进行修改密码!
</view>
<view class="popup-buttom">
<view class="popup-jujue" @click="rejectAll">
仍要拒绝
</view>
<view class="popup-yunxu" @click="permit">
允许授权
</view>
</view>
</view>
</u-popup>
<u-popup :show="errorShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
<view class="popup">
<view class="popup-error-title">
您的账号信息验证不通过，请重新填写。
</view>
<view class="popup-buttom-error">
<view class=" popup-jujue-fanhui" @click="errorFh">
返回
</view>
<view class=" popup-jujue-queren" @click="errorQr">
确认
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
form:{
number:'' ,//员工号
name: '', //姓名
phone: '', //电话
},
rules: {
name: [{
required: true,
message: '请填写姓名',
trigger: ['blur', 'change'],
}],
number: [{
required: true,
message: '请填写员工号',
trigger: ['blur', 'change'],
}],
password: [{
required: true,
message: '请填写密码',
trigger: ['blur', 'change']
},
{
pattern: /^[0-9a-zA-Z]*$/g,
transform(value) {
return String(value);
},
message: '只能包含字母或数字'
},
{
min: 8,
max: 15,
message: '长度在8-15个字符之间'
}
],
},
sqShow:false,
jujueShow:false,
errorShow: false,
isShow:true
}
},
methods: {
//设置密码完成
passwordOk(){
wx.navigateTo({
url: '/pages/login/login'
})
},
//注册失败确认
errorQr() {
this.errorShow = false
},
//注册失败返回
errorFh() {
this.errorShow = false
},
//点击下一步
nextGo(){
console.log(this.form)
this.isShow = false
// this.errorShow = true
},
//任然要拒绝
rejectAll() {
this.jujueShow = false
},
//允许获取
permit() {
this.sqShow = false
this.jujueShow = false
},
//拒绝获取
reject() {
this.sqShow = false
this.jujueShow = true
},
open() {
},
//收起键盘
hideKeyBorder(e) {
wx.hideKeyboard({
complete: res => {
console.log('hideKeyboard res', res)
}
});
},
//关闭授权获取手机号弹窗
close() {
this.sqShow = false
},
//获取用户手机号
getUserInfo() {
this.hideKeyBorder()
setTimeout(()=>{
this.sqShow = true
wx.getUserInfo({
success: function(res) {
console.log(res)
}
})
},30)
},
}
}
</script>
<style lang="scss" scoped>
.find-password{
padding: 32rpx;
}
.title {
font-size: 42rpx;
font-weight: 500;
margin-bottom: 32rpx;
}
.popup {
width: 700rpx;
height: 450rpx;
.popup-title {
text-align: center;
font-size: 36rpx;
margin: 35rpx;
}
.popup-content {
width: 70%;
margin-left: 135rpx;
line-height: 54rpx;
}
.popup-error-title {
margin-left: 36rpx;
margin-right: 36rpx;
margin-top: 50rpx;
font-size: 38rpx
}
.popup-login {
margin-left: 240rpx;
margin-top: 120rpx;
width: 180rpx;
height: 52rpx;
background-color: skyblue;
border-radius: 8rpx;
line-height: 52rpx;
border: #000 1px solid;
text-align: center;
color: #fff;
}
.popup-buttom {
padding: 70rpx;
margin-top: 24rpx;
display: flex;
justify-content: space-between;
}
.popup-buttom-error{
padding: 70rpx;
margin-top: 54rpx;
display: flex;
justify-content: space-between;
}
.popup-jujue-fanhui {
width: 160rpx;
height: 62rpx;
text-align: center;
line-height: 62rpx;
border-radius: 8rpx;
background-color: gray;
color: #fff;
}
.popup-jujue-queren {
width: 160rpx;
height: 62rpx;
text-align: center;
line-height: 62rpx;
border-radius: 8rpx;
background-color: skyblue;
color: #fff;
}
.popup-buttom view {
width: 180rpx;
height: 56rpx;
text-align: center;
line-height: 56rpx;
border-radius: 6rpx;
border: 1px #000 solid;
}
.popup-all-title {
text-align: center;
font-size: 42rpx;
margin-top: 142rpx;
}
}
</style>
